第5章使用CSS樣式5.1樣式表文件的使用5.2CSS構(gòu)造樣式規(guī)則5.3CSS樣式選擇器5.4綜合實例返回5.1樣式表文件的使用5.1.1外部樣式表1.創(chuàng)建外部樣式表這里以在DreamweaverCS6環(huán)境下創(chuàng)建CSS為例展開介紹。要創(chuàng)建一個外部樣式表，在新建文檔界面中選擇CSS，如圖5-1、圖5-2所示。樣式表開頭處的@charset并不總是必需的，不過總是在樣式表中包含它也沒有任何壞處?？梢砸匀魏蚊Q為樣式表文件命名。2.使用外部樣式表在每個希望使用樣式表的HTML頁面的head部分，輸入<linkrel="stylesheet”href="url.css">其中url.css是外部樣式表的路徑和名稱。下一頁返回5.1樣式表文件的使用例如，創(chuàng)建如圖5-3所示的CSS樣式表。現(xiàn)在將外部樣式表base.css鏈接到網(wǎng)頁中。其頁面效果如圖5-4所示，base.css中設(shè)定的樣式將P元素的字號設(shè)14.7px、首行縮進2字符應(yīng)用到了所有的段落上。5.1.2內(nèi)部樣式表內(nèi)部樣式表是在頁面中應(yīng)用CSS的第二種方式。它允許在HTML文檔里直接設(shè)置樣式。使用內(nèi)部樣式表時，style元素及其包圍的樣式規(guī)則通常位于文檔的head部分，瀏覽器對頁面的呈現(xiàn)方式與使用外部樣式表時是一樣的，如圖5-5所示。由于這些樣式只在一個網(wǎng)頁里存在，因此不會像外部樣式表中的規(guī)則上一頁下一頁返回5.1樣式表文件的使用那樣應(yīng)用到其他的頁面，對于大多數(shù)情況，外部樣式表是推薦的方式，但理解其他的選擇以備不時之需也是很重要的。從技術(shù)上說，在頁面的body部分添加內(nèi)部樣式表也是可行的，但應(yīng)盡可能避免這種做法。5.1.3內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式是在HTML中應(yīng)用CSS的第三種方式。不過，應(yīng)當最后考慮這種方式，因為它將內(nèi)容HTML)和表現(xiàn)(CSS)混在了一起，嚴重地違背了最佳實踐。其效果如圖5-6所示，內(nèi)聯(lián)樣式只影響一個元素，因此使用它將失去外部樣式表的重要好處:一次編寫，到處可見。上一頁返回5.2CSS構(gòu)造樣式規(guī)則5.2.1樣式規(guī)則樣式表中的每條規(guī)則都有兩個主要部分:選擇器和聲明塊。選擇器決定哪些元素受到影響聲明塊由一個或多個屬性/值組成，它們指定應(yīng)該做什么，如圖5-7所示。聲明塊內(nèi)的每條聲明都是一個由冒號隔開、以分號結(jié)尾的屬性/值。聲明塊以前花括號開始，以后花括號結(jié)束。每一條聲明的順序并不重要，除非對相同的屬性定義了兩次。5.2.2為樣式規(guī)則添加注釋在CSS中添加注釋，這樣就可以標注樣式表的主要區(qū)域，或者對某條規(guī)則或聲明進行說明。注釋不僅對代碼編寫者有用，對閱讀代碼的其他人也有好處。下一頁返回5.2CSS構(gòu)造樣式規(guī)則可以將注釋放在單獨的行上，也可以放在聲明塊里，如圖5-8所示。在設(shè)計網(wǎng)頁時，樣式表很快就會變得很長，因此對樣式表進行組織對于保持CSS的易于維護性是至關(guān)重要的。通常，將相關(guān)的規(guī)則放在一起，形成分組，并在每組前面放置一段描述性的注釋，對樣式表中的主要區(qū)域添加注釋，就可以保持樣式表的井然有序。同時，注釋也是很有用的調(diào)試工具。5.2.3屬性的值1.inherit對于任何屬性，如果希望指出該屬性的值與對應(yīng)元素的父元素對該屬性設(shè)定的值相同，就可以使用inherit值。2.預(yù)定義的值上一頁下一頁返回5.2CSS構(gòu)造樣式規(guī)則大多數(shù)CSS屬性都有一些可供使用的預(yù)定義值。例如，float屬性被設(shè)為left、right或none。HTML中屬性值的書寫方式不同，在CSS中，不需要也不能將預(yù)定義的值放在引號里，如圖5-11所示。3.長度和百分數(shù)很多css屬性的值是長度。所有長度都必須包含數(shù)字和單位，并且它們之間沒有空格，例如3em、10px，如圖5-12所示。唯一的例外是0，它可以帶單位也可以不帶。有的長度是相對于其他值的。百分數(shù)(如65%)的工作方式很像em，它們都是相對于其他值的值，百分數(shù)通常是相對于父元素的，在如圖5-13所示的例子中，字號被設(shè)上一頁下一頁返回5.2CSS構(gòu)造樣式規(guī)則為父元素字號的80%，詳情見5.2.4節(jié)。4.純數(shù)字不要將數(shù)字和長度弄混，數(shù)字沒有單位。這個例子中，行高將由數(shù)字1.5與字號大小相乘得到。5.URL有的CSS屬性允許開發(fā)人員指定另一個文件的URL(尤其是圖像)。在這種情況下，可使用URL(文件的路徑和文件名)的方式，如圖5-15所示。注意，URL中的相對路徑應(yīng)該是相對于樣式表的位置，而不是相對于HTML文檔的位置。6.CSS顏色有多種方法為CSS屬性指定顏色，最容易的，可以使用預(yù)定義的顏色上一頁下一頁返回5.2CSS構(gòu)造樣式規(guī)則關(guān)鍵詞作為顏色值。CSS3指定了16個基本的名稱，如圖5-16所示，又增加了135個名稱，從而組成了151種SVG1.0顏色關(guān)鍵詞。(1)RGB可以通過指定紅、綠、藍的量來構(gòu)建顏色。(2)十六進制這是目前最為常見的方式，如圖5-18所示。7.CSS3提供更多指定顏色的方式:RGBA,HSLA和HSL(1)RGBARGBA在RGB的基礎(chǔ)上加上一個代表alpha透明度的A?？梢栽诩t、綠、藍數(shù)值后面加上一個用以指定透明度的0到1之間的小數(shù)。Alpha的設(shè)置越接近。，顏色就越透明。如果設(shè)為0，就是完全透明上一頁下一頁返回5.2CSS構(gòu)造樣式規(guī)則的，就像沒有設(shè)置任何顏色。相反的，1表示完全不透明。(2)HSL和HSLAHSL和HSLA也是CSS3中新增的。HSLA是用除了RGBA以外的顏色設(shè)置alpha透明度的一種方式。用HSLA指定alpha透明度的方法與RGBA是一致的。先看看HSL是怎樣運行的。HSL代表色相(hue)、飽和度(saturation)和亮度(lightness)，其中色相的取值范圍為0~360，飽和度和亮度的取值均為百分數(shù)，范圍為0-100%，如圖5-20所示。不幸的是，對于RGBA,HSL和HSLA的這些功能，IE9之前的InternetExplore:版本均不支持。上一頁下一頁返回5.2CSS構(gòu)造樣式規(guī)則5.2.4層疊樣式1.繼承很多CSS屬性不僅影響選擇器所定義的元素，而且會被這些元素的后代繼承。2.特殊性繼承決定了一個元素沒有應(yīng)用任何樣式時應(yīng)該怎樣顯示，而特殊性則決定了應(yīng)用多個規(guī)則時應(yīng)該怎樣顯示。根據(jù)特殊性原則，選擇器越特殊，規(guī)則就越強。注意，id屬性被認為是最特殊的(因為它們在一個文件中必須是唯一的)，而帶class屬性的選擇器則比不帶class的更特殊。同時，具有多個class的選擇器比只有一個class的更特殊。在特殊性次序中最低級的是只有元素名的選擇器，上一頁下一頁返回5.2CSS構(gòu)造樣式規(guī)則這時繼承的規(guī)則被認為是最一般的，可以被任何其他規(guī)則覆蓋。3.位置有時候，特殊性還不足以判斷在相互沖突的規(guī)則中哪一個應(yīng)該優(yōu)先，在這種情況下，規(guī)則的位置就可以起到?jīng)Q定性的作用:晚出現(xiàn)的優(yōu)先級高。上一頁返回5.3CSS樣式選擇器5.3.1選擇器概述選擇器可以定義五個不同的標準來選擇要進行格式化的元素(1)元素的類型或名稱(詳見5.3.2節(jié));(2)元素的類或ID(詳見5.3.3節(jié));(3)元素所在的上下文(詳見5.3.4節(jié));(4)元素的偽類或偽元素(詳見5.3.5,5.3.7節(jié))(5)元素是否有某些屬性和值(詳見5.3.6節(jié))。為了指出目標元素，選擇器可以使用這五個標準的任意組合。5.3.2按標記名稱選擇元素選擇要格式化的元素，最常用的標準可能是元素的名稱。例如，要讓所有的P行間距為1.5倍，首行縮進2字符;所有的h2字號為14像素、加下一頁返回5.3CSS樣式選擇器粗。按標記名稱的方式選擇元素設(shè)置樣式，如圖5-23所示。注意:通配符*(星號)匹配代碼中的任何元素名稱。5.3.3按class或id選擇元素按class選擇要格式化的元素，選擇器寫為.classname，哪個元素要使用這個樣式，就在該元素的屬性中加上class=”classname;按id選擇要格式化的元素，選擇器寫為#idname，哪個元素要使用這個樣式，就在該元素的屬性中加上id="idname"。例如下面三個段落，要將class="tcxtrcd”的段落設(shè)置為紅色，將id="textblue”的段落設(shè)為藍色，分別使用class和id的方式選擇元素設(shè)置樣式，如圖5-24所示。注意:要在class選擇器和id選擇器之間作出選擇時，建議盡可能使用class選擇器。上一頁下一頁返回5.3CSS樣式選擇器5.3.4按上下文選擇元素在CSS中，可以根據(jù)元素的祖先、父元素或同胞元素來定位它們。祖先是包含目標元素的任何元素，不管它們之間隔了多少代。1.按祖先元素選擇要格式化的元素選擇器寫為:祖先元素希望格式化的元素例如要將類名為about的article中的所有段落均為設(shè)置斜體，article.about即為祖先元素，希望格式化的元素為P，中間用空格隔開，如圖5-25所示。2.按父元素選擇要格式化的元素選擇器寫為:父元素>希望格式化的元素與按祖先元素選擇方式不同的是，按父元素選擇元素僅選擇其子元素，上一頁下一頁返回5.3CSS樣式選擇器而不會包括子子元素、子子子元素等。例如article中有4個段落，其中前兩段是article的子元素，后兩段放置在section中，是article的子子元素。如果僅想設(shè)置前兩段有下劃線，則可以使用按父元素選擇元素的方式，如圖5-27所示。3.按相鄰?fù)剡x擇要格式化的元素選擇器寫為:相鄰?fù)?目標元素例如要設(shè)置第一段為紅色，因為第一段和hl相鄰，可以使用如圖5-29所示的代碼，顯示效果如圖5-30所示。注意:這里的相鄰?fù)貞?yīng)該是目標元素前的相鄰?fù)亍?.3.5按狀態(tài)選擇鏈接元素超鏈接有以下5種狀態(tài):上一頁下一頁返回5.3CSS樣式選擇器(1)a;link—設(shè)置從未被激活或指向，當前也沒有被激活或指向的鏈接的外觀(2)a;visited—設(shè)置訪問者已激活過的鏈接的外觀;(3)a;focus—通過鍵盤選擇并已準備好激活狀態(tài)的鏈接的外觀;(4)a;hover—設(shè)置正被指向的鏈接的外觀;(5)a;active—設(shè)置激活時鏈接的外觀。不是設(shè)置每個超鏈接的外觀時都必須同時寫上這5種狀態(tài)，但是這些狀態(tài)的書寫必須按照以上的順序進行。5.3.6按屬性選擇元素在CSS中可以對具有給定屬性或?qū)傩灾档脑剡M行格式化。選擇器寫為:上一頁下一頁返回5.3CSS樣式選擇器(1)元素[屬性="value"]表示屬‘l生值等于這里的value的元素被選中;(2)元素[屬性=”value"]表示屬性值包含這里的value的元素被選中;(3)元素[屬性I="value"]表示屬性值等于這里的value或以value開頭(I是管道符號，不是數(shù)字1也不是小寫字母1)?；蛘邔憺?1)^="value”表示屬i生值以、clue開頭的元素被選中;(2)$="value”表示屬l生值以、clue結(jié)尾的元素被選中;(3)*="value”表示屬l生值中包含value的元素被選中。當前所有主流瀏覽器均支持按元素包含的屬性選擇元素。后面三種選擇方式是CSS3中新增的特性，在IE7和IE8中會有一些異常。上一頁下一頁返回5.3CSS樣式選擇器5.3.7選擇元素的一部分1.選擇元素的第一行選擇器寫為:元素:first一line例如要設(shè)置每一個段落的第一行文字為紅色。P:first-line}color:red;}2.選擇元素的第一個字母選擇器寫為:元素:first-letter例如要設(shè)置每一個段落的第一個文字為紅色。上一頁下一頁返回5.3CSS樣式選擇器P:first-1etter{color:red;}3.偽元素、偽類及CSS3的::first-line和::first-letter語法在CSS3中，.first-line的語法為::first-line,;first-lene:的語法為::first-letter。它們用兩個冒號代替了單個冒號。偽元素是HTML中并不存在的元素。相反，偽類則應(yīng)用于HTML元素。5.3.8選擇器的分組選擇器寫為:元素1，元素2，元素3可以列出任意數(shù)量的單獨的選擇器(無論它們包含的是元素名稱、1l1還是class)，用逗號分隔它們。當上一頁下一頁返回5.3CSS樣式選擇器選擇器很長時，可以讓每個選擇器位于單獨的行，以增強代碼的可讀性。5.3.9組合使用選擇器下面通過一個極端的例子展示如何組合使用選擇器。.about[h2lang]|="zh"+pem{color:red;}從右向左看，它表明選擇的是em元素，em元素是包含在P元素中的，而P元素是land屬性值以zh開頭的h2元素的直接相鄰?fù)?，并且是class等于about的h2元素的子元素。實際上，人們很少需要編寫這么復(fù)雜的選擇器，但至少在必要時可以上一頁下一頁返回5.3CSS樣式選擇器這么做。如果只是想讓圖5-35中的em元素顯示為紅色，完全可以寫成.aboutem{color:red;{盡管在HTML中em元素是嵌套在P元素中的，但沒有必要寫成.aboutpem{