第10章 CSS的基礎(chǔ)知識(shí)

1、第10章 CSS的基礎(chǔ)知識(shí) 10.1 樣式表和HTML的關(guān)系10.2 樣式表的基本結(jié)構(gòu)10.3 如何在網(wǎng)頁(yè)中加入css 10.4 class與id類選擇符 10.5 div與span標(biāo)簽 10.6 CSS的幾個(gè)特性 上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)10.3 如何在網(wǎng)頁(yè)中加入css 10.3.1 在行內(nèi)直接加入樣式10.3.2 把樣式表嵌入到文檔頭10.3.3 鏈接到樣式表10.3.4 輸入樣式表 上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)10.4.1 class類選擇符10.4.2. id類選擇符 10.4 class與id類選擇符 上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目

2、目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)10.5.1 div標(biāo)簽10.5.2 span標(biāo)簽 10.5 div與span標(biāo)簽 上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)第10章 CSS的基礎(chǔ)知識(shí) CSS是為了簡(jiǎn)化Web頁(yè)面的更新工作而誕生的，它的功能非常強(qiáng)大，它將讓網(wǎng)頁(yè)變得更加美觀，維護(hù)更加方便。CSS跟HTML一樣，也是一種標(biāo)記語(yǔ)言，甚至很多屬性都來(lái)源于HTML，它也需要通過(guò)瀏覽器解釋執(zhí)行。任何懂得HTML的人都可以掌握，非常容易。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 樣式表(StyleSheets)技術(shù)誕生于1996年，全稱是層疊樣式表(Cascading StyleShe

3、ets，簡(jiǎn)稱CSS)。那什么是樣式呢？樣式其實(shí)就是格式，對(duì)網(wǎng)頁(yè)來(lái)說(shuō)，像文字的大小、顏色以及圖片位置等，都是網(wǎng)頁(yè)顯示信息的樣式。那層疊又是什么意思？意思是當(dāng)我們?cè)贖TML文件中引用數(shù)個(gè)定義樣式文件（CSS文件）時(shí)，若數(shù)個(gè)樣式文件間所定義的樣式發(fā)生沖突，將依據(jù)層次處理。 樣式表是HTML的表兄弟。樣式表的產(chǎn)生是由于最初的HTML標(biāo)準(zhǔn)還不盡人意，用HTML制作網(wǎng)頁(yè)就像是用畫筆繪制一幅圖畫，只有那些對(duì)網(wǎng)頁(yè)制作癡迷而執(zhí)著的人才可能精確地實(shí)現(xiàn)預(yù)定的結(jié)果。正是在這種情況下，樣式表技術(shù)誕生了，樣式表的目的是為了“對(duì)布局、字體、背景和其他圖文效果實(shí)現(xiàn)更加精確的控制”。10.1 樣式表和HTML的關(guān)系上一頁(yè)上一頁(yè)

4、下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) HTML 4.0版本已經(jīng)包括了樣式表的內(nèi)容。樣式表正在逐漸改變?cè)O(shè)計(jì)、制作網(wǎng)頁(yè)的方法，為網(wǎng)頁(yè)創(chuàng)新奠定了基礎(chǔ)。 樣式表的宗旨就是將結(jié)構(gòu)和格式分離。樣式表將定義結(jié)構(gòu)和定義格式的兩部分相互分離，從而使網(wǎng)頁(yè)設(shè)計(jì)人員能夠?qū)W(wǎng)頁(yè)的布局施加更多的控制。HTML仍可以保持簡(jiǎn)單明了的初衷，而樣式表代碼獨(dú)立出來(lái)后則從另一角度控制網(wǎng)頁(yè)外觀。 利用樣式表，可以將站點(diǎn)上所有的網(wǎng)頁(yè)都指向某個(gè)CSS文件，用戶只需要修改CSS文件中的某一行，那么整個(gè)站點(diǎn)都會(huì)隨之發(fā)生改變。這樣，通過(guò)樣式表就可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新，不用再一頁(yè)一頁(yè)地更新了。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié)

5、 束束本本 節(jié)節(jié) 樣式表的基本結(jié)構(gòu)是怎樣的？下面通過(guò)一個(gè)簡(jiǎn)單的樣式表實(shí)例，讓你獲得對(duì)樣式表整體性的感性認(rèn)識(shí)。首先建立一個(gè)簡(jiǎn)單的HTML文件。10.2 樣式表的基本結(jié)構(gòu)上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)例例10-1：建立一個(gè)簡(jiǎn)單的樣式表，效果如圖：建立一個(gè)簡(jiǎn)單的樣式表，效果如圖10.1所示。所示。文件ex10-01.html的源代碼 簡(jiǎn)單的樣式表樣式表這是一個(gè)簡(jiǎn)單的樣式表上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 現(xiàn)在，給這個(gè)HTML文件加一些樣式表。只需在標(biāo)簽之前插入以下代碼： 這樣就已經(jīng)制作出了使用樣式表的網(wǎng)頁(yè)。從瀏覽器中打開(kāi)網(wǎng)頁(yè)（當(dāng)然首先要保證瀏覽器支持樣式

6、表），網(wǎng)頁(yè)顯示效果如下圖所示。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 簡(jiǎn)單樣式表效果上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 由這個(gè)簡(jiǎn)單的樣式表實(shí)例，可以看出： 一個(gè)樣式表由許多樣式規(guī)則組成的，用以告訴瀏覽器怎樣去顯示一個(gè)網(wǎng)頁(yè)文檔。 樣式表的核心是規(guī)則，樣式表的規(guī)則如下： 選擇符屬性1:值1;屬性2:值2 如，h1color:green 這個(gè)規(guī)則就是告訴瀏覽器所有標(biāo)簽和之間的文字以綠色顯示。 其中h1就是選擇符，它是一個(gè)附帶樣式功能的HTML標(biāo)簽?；ɡㄌ?hào)中所包含的就是屬性，它用于定義實(shí)際的樣式，每個(gè)屬性包括兩部分：屬性名（如color）和屬性值（如green）。上

7、一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)10.3 如何在網(wǎng)頁(yè)中加入css 我們可以使用四種方法將樣式表加入到網(wǎng)頁(yè)中，每種方法都有其不同的優(yōu)點(diǎn)： 1將樣式表加入到HTML文件行中 2將樣式表嵌入到HTML文件的文檔頭中 3將一個(gè)外部樣式表鏈接到HTML文件上 4將一個(gè)外部樣式表輸入到HTML文件中 以上四種方法，可分成內(nèi)部樣式表（前兩者）及外部樣式表（后兩者）兩類。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)10.3.1 在行內(nèi)直接加入樣式 可以直接在HTML代碼行中加入樣式規(guī)則，這種方法適用于指定網(wǎng)頁(yè)內(nèi)的某一小段文字的顯示風(fēng)格。不過(guò)，利用這種方法定義樣式時(shí)，效果只可以控制

8、該標(biāo)簽，其語(yǔ)法如下： 上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)10.3.2 把樣式表嵌入到文檔頭 在標(biāo)簽中，用設(shè)置style屬性的方法，一次只能控制一個(gè)標(biāo)簽的樣式，實(shí)在讓人看不出CSS對(duì)網(wǎng)頁(yè)設(shè)計(jì)有什么特別的效果。在這一節(jié)，我們將講述在文檔頭嵌入樣式表規(guī)則的方法，瀏覽器在整個(gè)HTML網(wǎng)頁(yè)中都執(zhí)行該規(guī)則。如果想對(duì)網(wǎng)頁(yè)一次性加入樣式表，就可采用該方法。 這種方法就是將所有的樣式表信息都列于HTML文檔的頭部，基本語(yǔ)法如下：上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié).上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 說(shuō)明： 標(biāo)簽是用來(lái)說(shuō)明所要定義的樣式。type屬性是指

9、定標(biāo)簽以CSS的語(yǔ)法定義。 樣式表基本格式中的type=text/css用于說(shuō)明這是一段CSS規(guī)則代碼。 為了防止不支持CSS的瀏覽器將標(biāo)簽間的CSS規(guī)則當(dāng)成普通字符串，而顯示在網(wǎng)頁(yè)上，應(yīng)將CSS的規(guī)則代碼插入標(biāo)簽之間。 選擇符1.選擇符n：選擇符就是樣式的名稱，在這里選擇符可以使用HTML標(biāo)簽的名稱，所有HTML標(biāo)簽都可以作為CSS選擇符。 樣式屬性：定義樣式的屬性名稱上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 前面，我們介紹了在文檔頭嵌入樣式表規(guī)則的方法。這種方式定義出的樣式，將只限于在該HTML文件中，效益并不大。如果想要達(dá)到集中管理網(wǎng)站網(wǎng)頁(yè)樣式的目標(biāo)時(shí)，就必須將樣式定義在獨(dú)

10、立的CSS文件中，并將該文件鏈接或輸入到要運(yùn)用樣式的HTML文件。 這種方法就是將多個(gè)HTML文件都鏈接到一個(gè)樣式表文件。這個(gè)外部的樣式表將設(shè)定所有網(wǎng)頁(yè)的規(guī)則。如果改變樣式表文件中的某一個(gè)細(xì)節(jié)，所有網(wǎng)頁(yè)都會(huì)隨之改變。如果維護(hù)的站點(diǎn)很大，則這種方式絕對(duì)會(huì)有其用武之地。它的使用方法是：創(chuàng)建一個(gè)普通的網(wǎng)頁(yè)，但不使用規(guī)則，而是在HTML文檔頭部使用標(biāo)簽。10.3.3 鏈接到樣式表上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)基本語(yǔ)法如下：.上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 說(shuō)明： *.css為預(yù)先編寫好的樣式表文件。 外部樣式表文件中不能含有任何像或這樣的HTML標(biāo)簽。樣

11、式表僅僅由樣式表規(guī)則或聲明組成。 在href屬性中可以使用絕對(duì)URL或者相對(duì)URL。 外部樣式表文件中，無(wú)須使用注釋標(biāo)簽。 如同發(fā)布HTML文件那樣，將這個(gè)CSS文件發(fā)布到服務(wù)器中。在網(wǎng)頁(yè)被打開(kāi)時(shí)，瀏覽器將依照鏈接標(biāo)簽將含有鏈接外部樣式表文件的HTML網(wǎng)頁(yè)按照樣式表規(guī)則顯示。 上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 單一的樣式可以通過(guò)多個(gè)樣式表給出，例如： 在這個(gè)例子中，3個(gè)樣式表組合成一個(gè)contemporary樣式，要將多個(gè)樣式表組合成一個(gè)單一樣式，必須在每個(gè)樣式表中使用相同的title。 當(dāng)樣式被應(yīng)用到很多的網(wǎng)頁(yè)時(shí)，采用鏈接到外部樣式表的方式是理想的。網(wǎng)頁(yè)制作者使用外部樣

12、式表可以僅僅通過(guò)改變一個(gè)文件而改變整個(gè)網(wǎng)站的外觀；同樣，大多數(shù)瀏覽器會(huì)保存外部樣式表文件到緩沖區(qū)，從而提高了顯示網(wǎng)頁(yè)時(shí)的速度。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 輸入樣式表的方法同鏈接到外部樣式表文件類似。其語(yǔ)法如下： 說(shuō)明： import語(yǔ)句后的“；”號(hào)是必須的。 要輸入的樣式表文件的擴(kuò)展名為.css。10.3.4 輸入樣式表上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 我們介紹了四種樣式表的使用方法，這四種方法在使用上各有其特色，但當(dāng)這四種方法同時(shí)出現(xiàn)時(shí)，瀏覽器會(huì)以哪種方法為優(yōu)先使用呢？答案是在行內(nèi)直接加入樣式順序?yàn)樽罡摺Ｖ劣谄渌N的順序則是一樣的，如果其他

13、三種方法同時(shí)出現(xiàn)，且各方法定義的樣式又都不同時(shí)，瀏覽會(huì)選擇較后定義的樣式來(lái)顯示。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 10.4.1 class類選擇符class類選擇符用于指定標(biāo)簽屬于何種樣式類。class類選擇符的使用語(yǔ)法如下:10.4 class與id類選擇符 class、id類選擇符能給網(wǎng)頁(yè)制作者帶來(lái)極大的便利。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)或者上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 下面是語(yǔ)法各部分的說(shuō)明： *.a1.*.an：為定義的類選擇符名稱，通常在定義樣式時(shí)指定給樣式的名稱。其適用范圍是整個(gè)HTML文件中所有由class

14、類選擇符所引用的設(shè)置。*符號(hào)也可以用HTML內(nèi)的標(biāo)簽替代（即標(biāo)簽1.標(biāo)簽n），此外*符號(hào)，在設(shè)置可以省略。 標(biāo)簽1.a1.標(biāo)簽n.an：為HTML的標(biāo)簽名稱，即前面提過(guò)的*符號(hào)，也可以用HTML內(nèi)的標(biāo)簽替代。不同點(diǎn)在于，若在定義class類選擇符前加上HTML的標(biāo)簽時(shí)，其適用范圍將只限于該標(biāo)簽所包含的內(nèi)容。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 例如，在樣式表中可以定義這樣的類，代碼如下：.ppcolor:lime; font-family:黑體p.ptcolor:blue; font-family:仿宋 這些類可以使用class屬性在HTML中引用： 這是我們定義的PP類 這

15、是我們定義的PT類 在這個(gè)例子中，pp類可以用于任何HTML標(biāo)簽，因?yàn)樗跇邮奖碇袥](méi)有與特定的HTML標(biāo)簽關(guān)聯(lián)。而這個(gè)例子中pt類只能用于標(biāo)簽。 對(duì)于HTML文檔中在結(jié)構(gòu)上相同的部分，類是應(yīng)用樣式的有效辦法。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) id類選擇符與class兩者最大的差別在于定義樣式名稱前的符號(hào),用class定義時(shí)為“*.樣式名稱”；若用id定義時(shí)為“#樣式名稱”。 id與class雖然在標(biāo)簽內(nèi)的定義寫法不太一樣，但基本上其顯示在網(wǎng)頁(yè)上的效果是一樣的。id類選擇符的使用語(yǔ)法如下:10.4.2. id類選擇符上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié)或者

16、下面是語(yǔ)法各部分的說(shuō)明：(1) #a1.#an：為定義的類選擇符名稱，通常在定義樣式時(shí)指定給樣式的名稱。其適用范圍是整個(gè)HTML文件中所有由class類選擇符所引用的設(shè)置。(2) 標(biāo)簽1.a1.標(biāo)簽n.an：為HTML的標(biāo)簽名稱，不同點(diǎn)在于，若在id選擇符前加上HTML的標(biāo)簽時(shí)，其適用范圍將只限于該標(biāo)簽所包含的內(nèi)容。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 10.5.1 div標(biāo)簽 標(biāo)簽可用來(lái)定義網(wǎng)頁(yè)上的一個(gè)特定區(qū)域，在該區(qū)域范圍內(nèi)可包含文字、圖形、表格、窗體，甚至其他div等。在標(biāo)簽內(nèi)的所有內(nèi)容，都將調(diào)用此標(biāo)簽所定義出的樣式，且區(qū)域與區(qū)域間彼此是獨(dú)立的。 當(dāng)編寫HTML文件，要

17、定義區(qū)域間使用不同樣式時(shí)，就可以使用標(biāo)簽達(dá)到這個(gè)效果。 標(biāo)簽應(yīng)用于HTML文件，其語(yǔ)法如下： . 或者 . 在使用標(biāo)記時(shí)，可以使用width與height屬性設(shè)置區(qū)域的大小。 上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 10.5.2 span標(biāo)簽 標(biāo)簽主要用來(lái)定義網(wǎng)頁(yè)上的區(qū)域，通常用于比較大范圍的設(shè)置，而標(biāo)簽也可以用在區(qū)段的定義，不過(guò)一般都是用在網(wǎng)頁(yè)中某一小段文件段落。其語(yǔ)法如下：.或者. span標(biāo)簽被加入到HTML中的主要目的是用于樣式表，所以當(dāng)樣式表失效時(shí)它就沒(méi)有任何作用。span標(biāo)簽可以使用clsss和id類選擇符。 與的差異： 在區(qū)域內(nèi)的對(duì)象與區(qū)域外的上下文會(huì)自動(dòng)換行；而

18、區(qū)域內(nèi)的對(duì)象與區(qū)域外的上下文不會(huì)自動(dòng)換行。 與標(biāo)簽可同時(shí)使用，但建議標(biāo)簽可包含，但最好不要包含標(biāo)簽，否則會(huì)造成標(biāo)簽的區(qū)域不完整，而形成斷行的現(xiàn)象。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 10.6 CSS的幾個(gè)特性 1可以歸類CSS的規(guī)則可以多個(gè)HTML標(biāo)簽采用同一樣式，例： h1,pfont-family:黑體 這項(xiàng)規(guī)則設(shè)定所有被和標(biāo)簽包含的網(wǎng)頁(yè)內(nèi)容將用黑體顯示。上一頁(yè)上一頁(yè)下一頁(yè)下一頁(yè)目目 錄錄結(jié)結(jié) 束束本本 節(jié)節(jié) 2樣式表的規(guī)則具有繼承性 樣式表的規(guī)則可從母體延續(xù)到子體，例： bcolor:blue 這項(xiàng)規(guī)則告訴瀏覽器將所有之內(nèi)的文字用藍(lán)色顯示。但是在下列情況下，瀏覽器該如何處理呢？ 這是一個(gè)樣式表實(shí)例 對(duì)于標(biāo)簽并沒(méi)有設(shè)定樣式，但因?yàn)槲挥谥?，所以它將繼承母體設(shè)定的樣式，也以藍(lán)色顯示。上一頁(yè)上一頁(yè)