DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> css教程:css指令,兼容,注釋,selector
css教程:css指令,兼容,注釋,selector
編輯:CSS進階教程     
1.2 跟css有關的標記,指令 1.2.1 link <link rel="stylesheet" type="text/css" href="sheet1.css" media="all" /> link標記的用意是允許將html與其他文檔相關聯。Css用link將css文檔與html文檔想關聯。 Css文檔雖然不是html的一部分,但是被html使用,從外部style sheets引入它。 Link在head元素內,但是不能放在任意head子元素的內部,比如title。 Css文檔的後綴名雖然不要求,但是有些浏覽器不能識別非“.css”的文件。 Link的屬性:     rel:代表relation,設為stylesheet。     type:描述數據的類型,設為text/css,告訴浏覽器style sheet是css格式的。 以後還會有其他的style sheet,比如xsl。     href:style sheet的url。     Media:指定style sheet的使用范圍。下列大多數值還不被任何浏覽器支持,常 用的是 all,print,screen。Opera支持projection。可以為media指定多個值,比如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定義多個css文檔相互替換的關系。        比如存在如下定義:     <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!" /> 那麼能同時支持多個css定義的浏覽器中會有如下表現:        還可以通過將title設定為相同的value來分組:
<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。
  如果有多個link元素,那麼只有rel等於stylesheet的link可用。如果可用的link有多個,就會將它們同時作用於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屬性,當使用css時,type的值是“text/css”。 Media:與link中一樣。   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 comes first */ @import url(blueworld.css); @import url(zany.css);   h1 {color: gray;}   </style> 可見其作用類似link, l         通知浏覽器將外部style sheet載入。 l         並且可以載入多個style sheet。 區別是 l         位置與語法不同。 @import被包含在style元素中,並且必須在其他css規則之前。 l         每一個import的style sheet都會被使用,沒有替代規則。 相對於link的media屬性,import有: @import url(sheet2.css) all;   @import url(blueworld.css) screen;   @import url(zany.css) projection, print; @import的重要用途: 在導入的某個style sheet A中,A需要也使用外部的style sheet,這時link元素顯然無用。比如css文檔中,是不可能出現link元素的,這時使用@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 與老版本浏覽器的兼容問題 浏覽器對不能識別的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 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內聯風格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> 這個style屬性是一個新屬性,可以用到出現body元素中的所有元素上。 可以看到style的值是一個字符串,使用和css一樣的語法。 但是這個字符串只能是一個風格聲明塊declaration block。不能將@import和css 規則放到這個字符串中。就是說只能放css文檔中出現在花括號中的文本。   注意:inline style不被推薦使用,在xhtml1.1中inline style是反對的 deprecated。因為,它顯示違背數據和顯示分離的原則。這個原則也是使用css的 原因。 2 selector css核心的特點是將規則應用到元素集上的能力。   Css2規范種關於selector的部分, http://www.w3.org/TR/REC-CSS2/selector.html   css的模式匹配pattern matching規則(css規范,地址如上): 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
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved