學習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 stylestyle是引入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