1．2 跟css有關(guān)的標(biāo)記，指令 1．2．1 link <link rel="stylesheet" type="text/css" href="sheet1.css" media="all" /> link標(biāo)記的用意是允許將html與其他文檔相關(guān)聯(lián)。Css用link將css文檔與html文檔想關(guān)聯(lián)。 Css文檔雖然不是html的一部分，但是被html使用，從外部style sheets引入它。 Link在head元素內(nèi)，但是不能放在任意head子元素的內(nèi)部，比如title。 Css文檔的后綴名雖然不要求，但是有些瀏覽器不能識(shí)別非“.css”的文件。 Link的屬性： rel：代表relation，設(shè)為stylesheet。 type：描述數(shù)據(jù)的類(lèi)型，設(shè)為text/css，告訴瀏覽器style sheet是css格式的。 以后還會(huì)有其他的style sheet，比如xsl。 href：style sheet的url。 Media：指定style sheet的使用范圍。下列大多數(shù)值還不被任何瀏覽器支持，常 用的是 all，print，screen。Opera支持projection?？梢詾閙edia指定多個(gè)值，比如media="screen, projection" all Use in all presentational media. aural Use in speech synthesizers, screen readers, and other audio renderings of the document. braille Use when rendering the document with a Braille device. embossed Use when printing with a Braille printing device. handheld Use on handheld devices like personal digital assistants or web-enabled cell phones. print Use when printing the document for sighted users and also when displaying a "print preview" of the document. projection Use in a projection medium, such as a digital projector used to present a slideshow when delivering a speech. screen Use when presenting the document in a screen medium like a desktop computer monitor. All web browsers running on such systems are screen-medium user agents. tty Use when delivering the document in a fixed-pitch environment like teletype printers. tv Use when the document is being presented on a television. Title：利用title定義多個(gè)css文檔相互替換的關(guān)系。 比如存在如下定義： <link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" /> <link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="Big Text" /> <link rel="alternate stylesheet" type="text/css" href="zany.css" title="Crazy colors!" /> 那么能同時(shí)支持多個(gè)css定義的瀏覽器中會(huì)有如下表現(xiàn)： 還可以通過(guò)將title設(shè)定為相同的value來(lái)分組：
<link rel="stylesheet" type="text/css"
href="sheet1.css" title="Default" media="screen" />
<link rel="stylesheet" type="text/css"
href="print-sheet1.css" title="Default" media="print" />
<link rel="alternate stylesheet" type="text/css"
href="bigtext.css" title="Big Text" media="screen" />
<link rel="alternate stylesheet" type="text/css"
href="print-bigtext.css" title="Big Text" media="print" />
上面的表述意為：css被title分為兩組，default和Big Text。又每一組又被分為print和screen。 如果有多個(gè)link元素，那么只有rel等于stylesheet的link可用。如果可用的link有多個(gè)，就會(huì)將它們同時(shí)作用于html文檔，如下： <link rel="stylesheet" type="text/css" href="basic.css" /> <link rel="stylesheet" type="text/css" href="splash.css" /> 1．2．2 style style是引入style sheet最通用的方式。 <style type="text/css"> type：style總是使用type屬性，當(dāng)使用css時(shí)，type的值是“text/css”。 Media：與link中一樣。 style以<style type="text/css">開(kāi)頭，以</style>結(jié)束，中間是多個(gè)styles。這些styles或者指向style sheet文檔，或者以?xún)?nèi)嵌的方式表達(dá)。Style元素可以包含多個(gè)styles，也可以通過(guò)@import指令引入多個(gè)指向外部style sheet的鏈接。 1．2．3 @import指令 用法：
<style type="text/css"> @import url(styles.css); /* @import comes first */ @import url(blueworld.css); @import url(zany.css); h1 {color: gray;} </style> 可見(jiàn)其作用類(lèi)似link， l 通知瀏覽器將外部style sheet載入。 l 并且可以載入多個(gè)style sheet。 區(qū)別是 l 位置與語(yǔ)法不同。 @import被包含在style元素中，并且必須在其他css規(guī)則之前。 l 每一個(gè)import的style sheet都會(huì)被使用，沒(méi)有替代規(guī)則。 相對(duì)于link的media屬性，import有： @import url(sheet2.css) all; @import url(blueworld.css) screen; @import url(zany.css) projection, print; @import的重要用途： 在導(dǎo)入的某個(gè)style sheet A中，A需要也使用外部的style sheet，這時(shí)link元素顯然無(wú)用。比如css文檔中，是不可能出現(xiàn)link元素的，這時(shí)使用@import，如下： @import url(http://example.org/library/layout.css); @import url(basic-text.css); @import url(printer.css) print; body {color: red;} h1 {color: blue;} 1．3 與老版本瀏覽器的兼容問(wèn)題 瀏覽器對(duì)不能識(shí)別的tag一律忽略。但是如果瀏覽器不能識(shí)別style元素，style會(huì)以普通文本的形式出現(xiàn)在網(wǎng)頁(yè)的最上面。解決方案：在style里面加上注釋符號(hào)，這樣舊版本的瀏覽器不會(huì)以文本方式顯示，新版本瀏覽器可以正確使用style元素。具體如下： <style type="text/css"><!-- @import url(sheet2.css); h1 {color: maroon;} body {background: yellow;} --></style> 1．4 css中的注釋 css的注釋類(lèi)似c： /* This is a CSS1 comment */ Comments can span multiple lines, just as in C : /* This is a CSS1 comment, and it can be several lines long without any problem whatsoever. */ 但是注意：css的注釋不能被嵌套。 1．5內(nèi)聯(lián)風(fēng)格inline style 將style放到html元素描述的地方，就是inline 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> 這個(gè)style屬性是一個(gè)新屬性，可以用到出現(xiàn)body元素中的所有元素上。 可以看到style的值是一個(gè)字符串，使用和css一樣的語(yǔ)法。 但是這個(gè)字符串只能是一個(gè)風(fēng)格聲明塊declaration block。不能將@import和css 規(guī)則放到這個(gè)字符串中。就是說(shuō)只能放css文檔中出現(xiàn)在花括號(hào)中的文本。 注意：inline style不被推薦使用，在xhtml1.1中inline style是反對(duì)的 deprecated。因?yàn)?，它顯示違背數(shù)據(jù)和顯示分離的原則。這個(gè)原則也是使用css的 原因。 2 selector css核心的特點(diǎn)是將規(guī)則應(yīng)用到元素集上的能力。 Css2規(guī)范種關(guān)于selector的部分， http://www.w3.org/TR/REC-CSS2/selector.html css的模式匹配pattern matching規(guī)則（css規(guī)范，地址如上）： Pattern Meaning Described in 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:link
E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes E:active
E:hover
E:focus Matches E during certain user actions. The dynamic pseudo-classes E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). 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="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning". Attribute selectors E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". Attribute selectors E[lang|="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". Attribute selectors DIV.warning HTML only. The same as DIV[class~="warning"]. Class selectors E#myid Matches any E element ID equal to "myid". ID selectors

最新評(píng)論