信誉平台财神捕鱼电玩城

書名： HTML+CSS+JavaScript網(wǎng)頁制作：Web前端開發(fā)（第3版）
作者名：劉瑞新張兵義朱立等編著
本章字?jǐn)?shù)： 2267字
更新時(shí)間： 2021-12-17 17:37:45

4.2 CSS的引用方法

15 在HTML中使用CSS的方法

要想在瀏覽器中顯示出樣式表的效果，就要讓瀏覽器識(shí)別并調(diào)用樣式表。當(dāng)瀏覽器讀取樣式表時(shí)，要依照文本格式來讀。這里介紹在頁面中引入CSS樣式表的4種方法：定義行內(nèi)樣式、定義內(nèi)部樣式表、鏈入外部樣式表和導(dǎo)入外部樣式表。

4.2.1 定義行內(nèi)樣式

行內(nèi)樣式是引用CSS樣式表的各種方法中最直接的一種。定義行內(nèi)樣式就是通過直接設(shè)置各個(gè)元素的style屬性，從而達(dá)到設(shè)置樣式的目的。這樣的設(shè)置方式，使得各個(gè)元素都有自己的獨(dú)立樣式，但是會(huì)使整個(gè)頁面變得更加臃腫。即便兩個(gè)元素的樣式是一模一樣的，用戶也需要寫兩遍。

定義行內(nèi)樣式可以很簡單地對某個(gè)標(biāo)簽單獨(dú)定義樣式表。這種樣式表只對所定義的標(biāo)簽起作用，并不對整個(gè)頁面起作用。行內(nèi)樣式在style屬性中定義，style屬性值可以包含任何CSS樣式聲明，格式如下。

需要說明的是，由于行內(nèi)樣式將表現(xiàn)和內(nèi)容混在一起，不符合Web標(biāo)準(zhǔn)，因此慎用這種方法。當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)可以使用行內(nèi)樣式。

【例4-1】使用行內(nèi)樣式將樣式表的功能加入到網(wǎng)頁。本例在瀏覽器中的顯示效果如圖4-1所示。

圖4-1 行內(nèi)樣式示例

【說明】代碼中第1個(gè)段落標(biāo)簽被直接定義了style屬性，此行文字大小是18px，顏色為紅色；而第2個(gè)段落標(biāo)簽沒有被定義，將按照默認(rèn)的設(shè)置顯示文字樣式。

4.2.2 定義內(nèi)部樣式表

內(nèi)部樣式表是指樣式表的定義處于HTML文件一個(gè)單獨(dú)的區(qū)域，與HTML的具體標(biāo)簽分離開來，從而可以實(shí)現(xiàn)對整個(gè)頁面范圍的內(nèi)容的顯示進(jìn)行統(tǒng)一的控制與管理。與定義行內(nèi)樣式只能對所在標(biāo)簽進(jìn)行樣式設(shè)置不同，內(nèi)部樣式表處于頁面的<head>與</head>標(biāo)簽之間。單個(gè)頁面需要應(yīng)用樣式時(shí)，最好使用內(nèi)部樣式表。定義內(nèi)部樣式表的格式如下。

的作用是應(yīng)對舊版本瀏覽器不支持CSS的情況，把<style>…</style>的內(nèi)容以注釋的形式表示，這樣不支持CSS的瀏覽器會(huì)自動(dòng)略過此段內(nèi)容。

樣式名可以使用HTML標(biāo)簽的名稱，所有HTML標(biāo)簽都可以作為CSS樣式名使用。

【例4-2】 使用內(nèi)部樣式表將樣式表的功能加入到網(wǎng)頁。本例在瀏覽器中的顯示效果如圖4-2所示。

圖4-2 內(nèi)部樣式表示例

【說明】代碼中第1個(gè)段落標(biāo)簽使用內(nèi)部樣式表中定義的.red類，此行文字大小為18px，顏色為紅色；而第2個(gè)段落標(biāo)簽沒有被定義，將按照默認(rèn)的設(shè)置顯示文字樣式。

4.2.3 鏈入外部樣式表

外部樣式表通過在某個(gè)HTML頁面中添加鏈接的方式生效。同一個(gè)外部樣式表可以被多個(gè)網(wǎng)頁甚至是整個(gè)網(wǎng)站的所有網(wǎng)頁所采用，這就是它最大的優(yōu)點(diǎn)。如果說內(nèi)部樣式表在總體上定義了一個(gè)網(wǎng)頁的顯示方式，那么外部樣式表可以說在總體上定義了一個(gè)網(wǎng)站的顯示方式。

外部樣式表把聲明的樣式放在樣式文件中，當(dāng)頁面需要使用樣式時(shí)，通過<link>標(biāo)簽鏈接外部樣式表文件。使用外部樣式表，只須改變一個(gè)樣式文件就能改變整個(gè)站點(diǎn)的外觀。

1.用<link>標(biāo)簽鏈接外部樣式表文件

其中，<link>標(biāo)簽表示瀏覽器從“外部樣式表文件名.css”文件中以文檔格式讀出定義的樣式表。rel="stylesheet"屬性定義在網(wǎng)頁中使用外部的樣式表，type="text/css"屬性定義文件的類型為樣式表文件，href屬性用于定義CSS文件的URL地址。

2.樣式表文件的格式

樣式表文件可以用任何文本編輯器（如記事本）打開并編輯，一般樣式表文件的擴(kuò)展名為.css。樣式表文件的內(nèi)容是定義的樣式表，不包含HTML標(biāo)簽。樣式表文件的格式如下。

一個(gè)外部樣式表文件可以應(yīng)用于多個(gè)頁面。在修改外部樣式表時(shí)，引用它的所有外部頁面也會(huì)自動(dòng)地更新。在設(shè)計(jì)者制作大量相同樣式頁面的網(wǎng)站時(shí)，外部樣式表文件非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改，瀏覽時(shí)也減少了重復(fù)下載的代碼，加快了顯示網(wǎng)頁的速度。

【例4-3】使用鏈入外部樣式表將樣式表的功能加入到網(wǎng)頁，鏈入外部樣式表文件至少需要兩個(gè)文件，一個(gè)是HTML文件，另一個(gè)是CSS文件。本例在瀏覽器中的顯示效果如圖4-3所示。

CSS文件名為style.css，存放于文件夾style中，代碼如下。

本例網(wǎng)頁結(jié)構(gòu)文件4-3.html的HTML代碼如下。

圖4-3 鏈入外部樣式表示例

【說明】代碼中第1個(gè)段落標(biāo)簽使用鏈入外部樣式表style.css中定義的.red類，此行文字大小為18px大小，顏色為紅色；第2個(gè)段落標(biāo)簽沒有被定義，將按照默認(rèn)的設(shè)置顯示文字樣式。

4.2.4 導(dǎo)入外部樣式表

導(dǎo)入外部樣式表是指在內(nèi)部樣式表的<style>標(biāo)簽里導(dǎo)入一個(gè)外部樣式表，當(dāng)瀏覽器讀取HTML文件時(shí)，復(fù)制一份樣式表到這個(gè)HTML文件中。其格式如下。

導(dǎo)入外部樣式表與鏈入外部樣式表很相似，都是將樣式表定義保存為單獨(dú)文件。兩者的本質(zhì)區(qū)別是：導(dǎo)入方式是在瀏覽器下載HTML文件時(shí)將樣式表文件的全部內(nèi)容復(fù)制到@import關(guān)鍵字位置，以替換該關(guān)鍵字；而鏈入方式僅在HTML文件需要引用CSS樣式文件中的某個(gè)樣式時(shí)，瀏覽器才鏈接樣式表文件讀取需要的內(nèi)容，但是并不進(jìn)行替換。

需要注意的是，@import語句后的“;”號不能省略。所有的@import聲明必須放在樣式表的開始部分，在其他樣式表聲明的前面，其他CSS規(guī)則放在其后的<style>標(biāo)簽對中。如果在內(nèi)部樣式表中指定了規(guī)則（如.bg{color:black;background:orange}），其優(yōu)先級將高于導(dǎo)入的外部樣式表中相同的規(guī)則。

【例4-4】使用導(dǎo)入外部樣式表將樣式表的功能加入到網(wǎng)頁，導(dǎo)入外部樣式表文件至少需要兩個(gè)文件，一個(gè)是HTML文件，另一個(gè)是CSS文件。本例在瀏覽器中的顯示效果如圖4-4所示。

CSS文件名為extstyle.css，存放于文件夾style中，代碼如下。

網(wǎng)頁結(jié)構(gòu)文件的HTML代碼如下。

圖4-4 導(dǎo)入外部樣式表示例

【說明】代碼中第1個(gè)段落標(biāo)簽使用導(dǎo)入外部樣式表extstyle.css中定義的.red類，文字大小為18px、紅色文字；第2個(gè)段落標(biāo)簽沒有被定義，將按照默認(rèn)的設(shè)置顯示文字樣式。

以上4種定義與使用CSS樣式表的方法中，最常用的是先將樣式表保存為一個(gè)樣式表文件，然后使用鏈入外部樣式表的方法在網(wǎng)頁中引用CSS。

官术网_书友最值得收藏!

HTML+CSS+JavaScript網(wǎng)頁制作：Web前端開發(fā)（第3版）

4.2 CSS的引用方法

4.2.1 定義行內(nèi)樣式

4.2.2 定義內(nèi)部樣式表

4.2.3 鏈入外部樣式表

4.2.4 導(dǎo)入外部樣式表