挣钱的捕鱼游戏哪个最靠谱

書名：精通HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)（視頻教學(xué)版）（第2版）
作者名：王英英
本章字?jǐn)?shù)： 2437字
更新時(shí)間： 2019-12-09 14:24:00

6.3 在HTML5中使用CSS3的方法

CSS樣式表能很好地控制頁面顯示、分離網(wǎng)頁內(nèi)容和樣式代碼。它控制HTML5頁面效果的方式通常包括行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式和導(dǎo)入樣式。

6.3.1 行內(nèi)樣式

行內(nèi)樣式是所有樣式中比較簡單、直觀的方法，它直接把CSS代碼添加到HTML文件中，是作為HTML的標(biāo)記屬性存在的。通過這種方法，可以很簡單地對(duì)某個(gè)元素單獨(dú)定義樣式。

使用行內(nèi)樣式方法直接在HTML標(biāo)記中使用style屬性，該屬性的內(nèi)容就是CSS的屬性和值，例如：

     <p style="color:red">段落樣式</p>

【例6.3】（實(shí)例文件：ch06\6.3.html）

在IE 11.0中的瀏覽效果如圖6-9所示，可以看到2個(gè)p標(biāo)記中都使用了style屬性，并且設(shè)置了CSS樣式，各個(gè)樣式之間互不影響，分別顯示自己的樣式效果。第一個(gè)段落為紅色字體，居中顯示且?guī)в邢庐嬀€。第二個(gè)段落為藍(lán)色字體，并以斜體顯示。

圖6-9 行內(nèi)樣式顯示

盡管行內(nèi)樣式簡單，但這種方法并不常用，因?yàn)檫@樣添加無法完全發(fā)揮樣式表“內(nèi)容結(jié)構(gòu)和樣式控制代碼分離”的優(yōu)勢(shì)，而且這種方式也不利于樣式的重用。如果為每一個(gè)標(biāo)記都設(shè)置style屬性，那么后期維護(hù)成本會(huì)過高，網(wǎng)頁也容易過胖，故不推薦使用。

6.3.2 內(nèi)嵌樣式

內(nèi)嵌樣式就是將CSS樣式代碼添加到<head>與</head>之間，并且用<style>和</style>標(biāo)記進(jìn)行聲明。這種寫法雖然沒有完全實(shí)現(xiàn)頁面內(nèi)容和樣式控制代碼完全分離，但是可以用于設(shè)置一些比較簡單且需要樣式統(tǒng)一的頁面，其格式如下所示。

     <head>
     <style type="text/css">
     p{color:red;font-size:12px;}
     </style>
     </head>

有些較低版本的瀏覽器不識(shí)別<style>標(biāo)記，不能將樣式正確地應(yīng)用到頁面顯示上，而是直接將標(biāo)記中的內(nèi)容以文本的形式顯示。為了解決此類問題，可以使用HMTL注釋將標(biāo)記中的內(nèi)容隱藏。如果瀏覽器能夠識(shí)別<style>標(biāo)記，則標(biāo)記內(nèi)被注釋的CSS樣式定義代碼依舊能夠發(fā)揮作用。

【例6.4】（實(shí)例文件：ch06\6.4.html）

在IE 11.0中的瀏覽效果如圖6-10所示，可以看到2個(gè)段落都被CSS樣式修飾且樣式保持一致，均為段落居中、加粗并以橙色字體顯示。

圖6-10 內(nèi)嵌樣式顯示

在上面的例子中，所有CSS編碼都在style標(biāo)記中，方便了后期維護(hù)，頁面與行內(nèi)樣式相比較也大大瘦身了。如果一個(gè)網(wǎng)站擁有很多頁面，且對(duì)于不同頁面段落都希望采用同樣的風(fēng)格時(shí)，內(nèi)嵌方式就顯示有點(diǎn)麻煩。此種方法只適用于特殊頁面設(shè)置單獨(dú)的樣式風(fēng)格。

6.3.3 鏈接樣式

鏈接樣式是CSS中使用頻率最高，也是最實(shí)用的方法。它可以很好地將“頁面內(nèi)容”和“樣式風(fēng)格代碼”分離成兩個(gè)文件或多個(gè)文件，實(shí)現(xiàn)了頁面框架HTML代碼和CSS代碼的完全分離。使前期制作和后期維護(hù)都十分方便。同一個(gè)CSS文件，根據(jù)需要可以鏈接到網(wǎng)站中所有的HTML頁面上，使得網(wǎng)站整體風(fēng)格統(tǒng)一并且后期維護(hù)的工作量也大大減少。

鏈接樣式是指在外部定義CSS樣式表并形成以.css為擴(kuò)展名的文件，然后在頁面中通過<link>標(biāo)記鏈接到頁面中。該鏈接語句必須放在頁面的<head>標(biāo)記區(qū)，代碼如下所示。

     <link rel="stylesheet" type="text/css" href="1.css" />

（1）rel表示鏈接到樣式表，其值為stylesheet。

（2）type表示樣式表類型為CSS樣式表。

（3）href指定了CSS樣式表文件的路徑，此處表示當(dāng)前路徑下名稱為1.css文件。

這里使用的是相對(duì)路徑。如果HTML文檔與CSS樣式表沒有在同一路徑下，就需要指定樣式表的絕對(duì)路徑或引用位置。

【例6.5】（實(shí)例文件：ch06\6.5.html）

     <!DOCTYPE html>
     <html>
     <head>
     <title>鏈接樣式</title>
     <link rel="stylesheet" type="text/css" href="6.5.css"/>
     </head>
     <body>
     <h1>CSS學(xué)習(xí)</h1>
     <p>此段落使用鏈接樣式修飾</p>
     </body>
     </html>

（實(shí)例文件：ch06\6.5.css）

     h1{
     text-align:center; /*設(shè)置標(biāo)題居中顯示*/
     }
     p{
     font-weight:29px;  /*設(shè)置字體的粗細(xì)*/
     text-align:center; /*設(shè)置段落居中顯示*/
     font-style:italic; /*設(shè)置字體樣式為斜體*/
     }

在IE 11.0中的瀏覽效果如圖6-11所示，其中標(biāo)題和段落以不同樣式顯示，標(biāo)題居中顯示，段落以斜體居中顯示。

圖6-11 鏈接樣式顯示

鏈接樣式的最大優(yōu)勢(shì)就是將CSS代碼和HTML代碼完全分離，并且同一個(gè)CSS文件能被不同的HTML文件鏈接使用。

技巧提示

在設(shè)計(jì)整個(gè)網(wǎng)站時(shí)，為了實(shí)現(xiàn)相同的樣式風(fēng)格，可以將同一個(gè)CSS文件鏈接到所有的頁面中去。如果整個(gè)網(wǎng)站需要修改樣式，只修改CSS文件即可。

6.3.4 導(dǎo)入樣式

導(dǎo)入樣式和鏈接樣式基本相同，都需要?jiǎng)?chuàng)建一個(gè)單獨(dú)的CSS文件，然后將其引入到HTML文件中，只不過語法和運(yùn)作方式有所差別。采用導(dǎo)入樣式是在HTML文件初始化時(shí)，會(huì)被導(dǎo)入到HTML文件內(nèi)，作為文件的一部分，類似于內(nèi)嵌效果。鏈接樣式則是在HTML標(biāo)記需要樣式風(fēng)格時(shí)才以鏈接方式引入。

導(dǎo)入外部樣式表是指在內(nèi)嵌樣式表的<style>標(biāo)記中，使用@import導(dǎo)入一個(gè)外部的CSS文件，例如：

     <head>
     <style type="text/css">
     <!--
       @import "1.css"
     -->
     </style>
     </head>

導(dǎo)入外部樣式表相當(dāng)于將樣式表導(dǎo)入到內(nèi)嵌樣式表中，其中@import必須在樣式表的開始部分（位于其他樣式表代碼的上面）。

【例6.6】（實(shí)例文件：ch06\6.6.html）

（實(shí)例文件：ch06\6.6.css）

在IE 11.0中的瀏覽效果如圖6-12所示，其中標(biāo)題和段落以不同樣式顯示，標(biāo)題居中顯示、顏色為藍(lán)色，段落的字體設(shè)置為加粗、下畫線，大小為20px。

圖6-12 導(dǎo)入樣式顯示

導(dǎo)入樣式與鏈接樣式比較，最大的優(yōu)勢(shì)就是可以一次導(dǎo)入多個(gè)CSS文件，其格式如下所示。

     <style>
     @import "6.6.css"
     @import "test.css"
     </style>

6.3.5 優(yōu)先級(jí)問題

如果同一個(gè)頁面采用了多種CSS樣式表方式（例如同時(shí)使用行內(nèi)樣式、鏈接樣式和內(nèi)嵌樣式），且這幾種方式共同作用于同一屬性，就會(huì)出現(xiàn)優(yōu)先級(jí)問題。例如，使用內(nèi)嵌樣式設(shè)置字體為宋體，使用鏈接樣式設(shè)置字體為紅色，那么二者會(huì)同時(shí)生效，但如果都設(shè)置字體顏色且顏色不同，那么哪種樣式的設(shè)置才有效呢？

1．行內(nèi)樣式和內(nèi)嵌樣式比較

例如，有這樣一種情況：

     <style>
     p{color:red}
     </style>
     <p style="color:blue">段落應(yīng)用樣式</p>

在樣式定義中，段落標(biāo)記<p>匹配了兩種樣式規(guī)則，一種使用內(nèi)嵌樣式定義顏色為紅色，一種使用p行內(nèi)樣式定義顏色為藍(lán)色，而在頁面代碼中，該標(biāo)記使用了類選擇符。這時(shí)，標(biāo)記內(nèi)容最終會(huì)以哪一種樣式顯示呢？

【例6.7】（實(shí)例文件：ch06\6.7.html）

     <!DOCTYPE html>
     <html>
     <head>
     <title>優(yōu)先級(jí)比較</title>
     <style>
     p{color:red}
     </style>
     </head>
     <body>
     <p style="color:blue">優(yōu)先級(jí)測試</p>
     </body>
     </html>

在IE 11.0中的瀏覽效果如圖6-13所示，段落以藍(lán)色字體顯示，可以看出行內(nèi)樣式優(yōu)先級(jí)大于內(nèi)嵌樣式。

圖6-13 優(yōu)先級(jí)顯示

2．內(nèi)嵌樣式和鏈接樣式比較

以相同例子測試內(nèi)嵌樣式和鏈接樣式優(yōu)先級(jí)。將相應(yīng)的顏色樣式代碼單獨(dú)放在一個(gè)CSS文件中，以供鏈接樣式引用。

【例6.8】（實(shí)例文件：ch06\6.8.html）

     <!DOCTYPE html>
     <html>
     <head>
     <title>優(yōu)先級(jí)比較</title>
     <link href="6.8.css" type="text/css" rel="stylesheet">
     <style>p{color:red}
     </style></head>
     <body>
     <p>優(yōu)先級(jí)測試</p>
     </body>
     </html>

（實(shí)例文件：ch06\6.8.css）

     p{color:yellow}

在IE 11.0中的瀏覽效果如圖6-14所示，段落以紅色字體顯示，可以看出內(nèi)嵌樣式優(yōu)先級(jí)大于鏈接樣式。

圖6-14 優(yōu)先級(jí)測試

3．鏈接樣式和導(dǎo)入樣式

現(xiàn)在進(jìn)行鏈接樣式和導(dǎo)入樣式的優(yōu)先級(jí)比較。分別創(chuàng)建兩個(gè)CSS文件，一個(gè)作為鏈接，一個(gè)作為導(dǎo)入。

【例6.9】（實(shí)例文件：ch06\6.9.html）

（實(shí)例文件：ch06\6.9_1.css）

     p{color:green}

（實(shí)例文件：ch06\6.9_2.css）

     p{color:purple}

在IE 11.0中的瀏覽效果如圖6-15所示，段落以綠色顯示?？梢钥闯鲦溄訕邮絻?yōu)先級(jí)大于導(dǎo)入樣式。

圖6-15 優(yōu)先級(jí)比較

通過比較，CSS樣式表方式的優(yōu)先級(jí)順序由大到小依次為行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式、導(dǎo)入樣式。

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

精通HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)（視頻教學(xué)版）（第2版）