css教程:css指令,兼容,注释,selector
网站建设 2023-01-28 21:38www.1681989.com免费网站
1．2 跟css有关的标记，指令
1．2．1 lk
<lk rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
lk标记的用意是允许将html与其他文档相关联。Css用lk将css文档与html文档想关联。
Css文档虽然不是html的一部分，被html使用，从外部style sheets引入它。
Lk在head元素内，不能放在任意head子元素的内部，比如title。
Css文档的后缀名虽然不要求，有些浏览器不能识别非“.css”的文件。
Lk的属性
rel代表relation，设为stylesheet。
type描述数据的类型，设为text/css，告诉浏览器style sheet是css格式的。
以后还会有其他的style sheet，比如xsl。
hrefstyle sheet的url。
Media指定style sheet的使用范围。下列大多数值还不被任何浏览器支持，常
用的是
all，prt，screen。Opera支持projection。可以为media指定多个值，比如media="screen, projection"
all
Use all presentational media.
aural
Use speech synthesizers, screen readers, and other audio rendergs of the document.
braille
Use when renderg the document with a Braille device.
embossed
Use when prtg with a Braille prtg device.
handheld
Use on handheld devices like personal digital assistants or web-enabled cell phones.
prt
Use when prtg the document for sighted users and also when displayg a "prt preview" of the document.
projection
Use a projection medium, such as a digital projector used to present a slideshow when deliverg a speech.
screen
Use when presentg the document a screen medium like a desk puter monitor. All web browsers runng on such systems are screen-medium user agents.
tty
Use when deliverg the document a fixed-pitch environment like teletype prters.
tv
Use when the document is beg presented on a television.
Title利用title定义多个css文档相互替换的关系。
比如存在如下定义
<lk rel="stylesheet" type="text/css" href="sheet1.css"
title="Default" />
<lk rel="alternate stylesheet" type="text/css"
href="bigtext.css" title="Big Text" />
<lk rel="alternate stylesheet" type="text/css"
href="zany.css" title="Crazy colors!" />
那么能支持多个css定义的浏览器中会有如下表现
还可以通过将title设定为相同的value来分组
<lk rel="stylesheet" type="text/css"
href="sheet1.css" title="Default" media="screen" />
<lk rel="stylesheet" type="text/css"
href="prt-sheet1.css" title="Default" media="prt" />
<lk rel="alternate stylesheet" type="text/css"
href="bigtext.css" title="Big Text" media="screen" />
<lk rel="alternate stylesheet" type="text/css"
href="prt-bigtext.css" title="Big Text" media="prt" />
上面的表述意为css被title分为两组，default和Big Text。又每一组又被分为prt和screen。 如果有多个lk元素，那么只有rel等于stylesheet的lk可用。如果可用的lk有多个，就会将它们作用于html文档，如下 <lk rel="stylesheet" type="text/css" href="basic.css" /> <lk rel="stylesheet" type="text/css" href="splash.css" /> 1．2．2 style style是引入style sheet最通用的方式。 <style type="text/css"> typestyle总是使用type属性，当使用css时，type的值是“text/css”。 Media与lk中一样。 style以<style type="text/css">开头，以</style>结束，中间是多个styles。这些styles或者指向style sheet文档，或者以内嵌的方式表达。Style元素可以包含多个styles，也可以通过@import指令引入多个指向外部style sheet的链接。 1．2．3 @import指令 用法
<style type="text/css"> @import url(styles.css); / @import es first / @import url(blueworld.css); @import url(zany.css); h1 {color: gray;} </style> 可见其作用类似lk， l 通知浏览器将外部style sheet载入。 l 并且可以载入多个style sheet。 区别是 l 位置与语法不同。 @import被包含在style元素中，并且必须在其他css规则之前。 l 每一个import的style sheet都会被使用，没有替代规则。 相对于lk的media属性，import有 @import url(sheet2.css) all; @import url(blueworld.css) screen; @import url(zany.css) projection, prt; @import的重要用途 在导入的某个style sheet A中，A需要也使用外部的style sheet，这时lk元素显然无用。比如css文档中，是不可能出现lk元素的，这时使用@import，如下 @import url(http://example./library/layout.css); @import url(basic-text.css); @import url(prter.css) prt; body {color: red;} h1 {color: blue;} 1．3 与老版本浏览器的兼容问题 浏览器对不能识别的tag一律忽略。如果浏览器不能识别style元素，style会以普通文本的形式出现在网页的最上面。解决方案在style里面加上注释符号，这样旧版本的浏览器不会以文本方式显示，新版本浏览器可以正确使用style元素。具体如下 <style type="text/css"><!-- @import url(sheet2.css); h1 {color: maroon;} body {background: yellow;} --></style> 1．4 css中的注释 css的注释类似c / This is a CSS1 ment / Comments can span multiple les, just as C : / This is a CSS1 ment, and it can be several les long without any problem whatsoever. / 注意css的注释不能被嵌套。 1．5内联风格le style 将style放到html元素描述的地方，就是le style <p style="color: gray;">The most wonderful of all breakfast foods is the waffle--a ridged and cratered slab of home-cooked, fluffy goodness... </p> 这个style属性是一个新属性，可以用到出现body元素中的所有元素上。 可以看到style的值是一个字符串，使用和css一样的语法。 这个字符串只能是一个风格声明块declaration block。不能将@import和css 规则放到这个字符串中。就是说只能放css文档中出现在花括号中的文本。 注意le style不被推荐使用，在xhtml1.1中le style是反对的 deprecated。因为，它显示违背数据和显示分离的原则。这个原则也是使用css的 原因。 2 selector css核心的特点是将规则应用到元素集上的能力。 Css2规范种关于selector的部分， http://.w3./TR/REC-CSS2/selector.html css的模式匹配pattern matchg规则（css规范，地址如上） Pattern Meang Described section Matches any element. Universal selector E Matches any E element (i.e., an element of type E). Type selectors E F Matches any F element that is a descendant of an E element. Descendant selectors E > F Matches any F element that is a child of an element E. Child selectors E:first-child Matches element E when E is the first child of its parent. The :first-child pseudo-class E:lk
E:visited Matches element E if E is the source anchor of a hyperlk of which the target is not yet visited (:lk) or already visited (:visited). The lk pseudo-classes E:active
E:hover
E:focus Matches E durg certa user actions. The dynamic pseudo-classes E:lang(c) Matches element of type E if it is (human) language c (the document language specifies how language is determed). The :lang() pseudo-class E F Matches any F element immediately preceded by an element E. Adjacent selectors E[foo] Matches any E element with the "foo" attribute set (whatever the value). Attribute selectors E[foo="warng"] Matches any E element whose "foo" attribute value is exactly equal to "warng". Attribute selectors E[foo~="warng"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warng". Attribute selectors E[lang|="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values begng (from the left) with "en". Attribute selectors DIV.warng HTML only. The same as DIV[class~="warng"]. Class selectors E#myid Matches any E element ID equal to "myid". ID selectors
<lk rel="stylesheet" type="text/css"
href="sheet1.css" title="Default" media="screen" />
<lk rel="stylesheet" type="text/css"
href="prt-sheet1.css" title="Default" media="prt" />
<lk rel="alternate stylesheet" type="text/css"
href="bigtext.css" title="Big Text" media="screen" />
<lk rel="alternate stylesheet" type="text/css"
href="prt-bigtext.css" title="Big Text" media="prt" />
上面的表述意为css被title分为两组，default和Big Text。又每一组又被分为prt和screen。 如果有多个lk元素，那么只有rel等于stylesheet的lk可用。如果可用的lk有多个，就会将它们作用于html文档，如下 <lk rel="stylesheet" type="text/css" href="basic.css" /> <lk rel="stylesheet" type="text/css" href="splash.css" /> 1．2．2 style style是引入style sheet最通用的方式。 <style type="text/css"> typestyle总是使用type属性，当使用css时，type的值是“text/css”。 Media与lk中一样。 style以<style type="text/css">开头，以</style>结束，中间是多个styles。这些styles或者指向style sheet文档，或者以内嵌的方式表达。Style元素可以包含多个styles，也可以通过@import指令引入多个指向外部style sheet的链接。 1．2．3 @import指令 用法
<style type="text/css"> @import url(styles.css); / @import es first / @import url(blueworld.css); @import url(zany.css); h1 {color: gray;} </style> 可见其作用类似lk， l 通知浏览器将外部style sheet载入。 l 并且可以载入多个style sheet。 区别是 l 位置与语法不同。 @import被包含在style元素中，并且必须在其他css规则之前。 l 每一个import的style sheet都会被使用，没有替代规则。 相对于lk的media属性，import有 @import url(sheet2.css) all; @import url(blueworld.css) screen; @import url(zany.css) projection, prt; @import的重要用途 在导入的某个style sheet A中，A需要也使用外部的style sheet，这时lk元素显然无用。比如css文档中，是不可能出现lk元素的，这时使用@import，如下 @import url(http://example./library/layout.css); @import url(basic-text.css); @import url(prter.css) prt; body {color: red;} h1 {color: blue;} 1．3 与老版本浏览器的兼容问题 浏览器对不能识别的tag一律忽略。如果浏览器不能识别style元素，style会以普通文本的形式出现在网页的最上面。解决方案在style里面加上注释符号，这样旧版本的浏览器不会以文本方式显示，新版本浏览器可以正确使用style元素。具体如下 <style type="text/css"><!-- @import url(sheet2.css); h1 {color: maroon;} body {background: yellow;} --></style> 1．4 css中的注释 css的注释类似c / This is a CSS1 ment / Comments can span multiple les, just as C : / This is a CSS1 ment, and it can be several les long without any problem whatsoever. / 注意css的注释不能被嵌套。 1．5内联风格le style 将style放到html元素描述的地方，就是le style <p style="color: gray;">The most wonderful of all breakfast foods is the waffle--a ridged and cratered slab of home-cooked, fluffy goodness... </p> 这个style属性是一个新属性，可以用到出现body元素中的所有元素上。 可以看到style的值是一个字符串，使用和css一样的语法。 这个字符串只能是一个风格声明块declaration block。不能将@import和css 规则放到这个字符串中。就是说只能放css文档中出现在花括号中的文本。 注意le style不被推荐使用，在xhtml1.1中le style是反对的 deprecated。因为，它显示违背数据和显示分离的原则。这个原则也是使用css的 原因。 2 selector css核心的特点是将规则应用到元素集上的能力。 Css2规范种关于selector的部分， http://.w3./TR/REC-CSS2/selector.html css的模式匹配pattern matchg规则（css规范，地址如上） Pattern Meang Described section Matches any element. Universal selector E Matches any E element (i.e., an element of type E). Type selectors E F Matches any F element that is a descendant of an E element. Descendant selectors E > F Matches any F element that is a child of an element E. Child selectors E:first-child Matches element E when E is the first child of its parent. The :first-child pseudo-class E:lk
E:visited Matches element E if E is the source anchor of a hyperlk of which the target is not yet visited (:lk) or already visited (:visited). The lk pseudo-classes E:active
E:hover
E:focus Matches E durg certa user actions. The dynamic pseudo-classes E:lang(c) Matches element of type E if it is (human) language c (the document language specifies how language is determed). The :lang() pseudo-class E F Matches any F element immediately preceded by an element E. Adjacent selectors E[foo] Matches any E element with the "foo" attribute set (whatever the value). Attribute selectors E[foo="warng"] Matches any E element whose "foo" attribute value is exactly equal to "warng". Attribute selectors E[foo~="warng"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warng". Attribute selectors E[lang|="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values begng (from the left) with "en". Attribute selectors DIV.warng HTML only. The same as DIV[class~="warng"]. Class selectors E#myid Matches any E element ID equal to "myid". ID selectors