文件大小:
軟件介紹
下圖是沒有加入CSS時(shí)的頁面:
下圖是加入CSS之后的頁面:
源代碼如下,大家可以將以下代碼復(fù)制到Dreamweaver中去。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>我真慘!被用來演示CSS!</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <h1>我是頁面最上端的標(biāo)題1</h1> <h1>我是頁面左側(cè)的標(biāo)題1,用來導(dǎo)航</h1> <h1>我是頁面右側(cè)新聞的標(biāo)題1</h1> <p>我是新聞的內(nèi)容。</p> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>我真慘!被用來演示CSS!</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- h1.dabiaoti { font-weight: bolder; text-align: center; } h1#daohang { font-size: 12px; font-weight: bolder; text-align: left; } h1.xinwen { font-size: 16px; font-weight:bold; text-align: center; color:green; } --> </style> </head> <body> <h1 class="dabiaoti">我是頁面最上端的標(biāo)題1</h1> <h1 id="daohang">我是頁面左側(cè)的標(biāo)題1,用來導(dǎo)航</h1> <h1 class="xinwen">我是頁面新聞的標(biāo)題1</h1> <p class="xinwen">我是新聞的內(nèi)容。</p> </body> </html>
以上例子應(yīng)用class和id實(shí)現(xiàn)了3種不同樣式的標(biāo)題1,下面我們就來講講class和id的具體應(yīng)用規(guī)則。
指定標(biāo)簽的class和id
(1)首先我們要在<head>部分定義class(類)或id。
class的定義方法: 指定標(biāo)簽.類名 {樣式}
id的定義方法:指定標(biāo)簽#id名 {樣式}
(2)然后我們在想要應(yīng)用類的標(biāo)簽上加上class(類)或者id屬性:
class的應(yīng)用方法:<指定標(biāo)簽 class="類名">
id的應(yīng)用方法:<指定標(biāo)簽 id="id名">
這種方式定義的class(類)和id只能作用于指定標(biāo)簽。在上面的例子中我們定義了三個(gè)類,類名分別為"dabiaoti"、"daohang"和"xinwen",它們均作用于h1標(biāo)簽。當(dāng)我們試圖將其中“xinwen”的樣式應(yīng)用于一個(gè)<p>標(biāo)簽的時(shí)候(<p>我是新聞的內(nèi)容。</p>),您會(huì)看到它的樣式?jīng)]有發(fā)生任何改變。這是一種錯(cuò)誤的CSS應(yīng)用。
注意:類名和id名不可以用數(shù)字開頭。
不指定標(biāo)簽的類或id
在網(wǎng)頁設(shè)計(jì)的過程中,你可能不希望你定義的類只局限于一個(gè)標(biāo)簽。就拿上面的例子來說,你可能希望xinwen類可以應(yīng)用于段落標(biāo)簽<p>。那么你只需要將定義部分的h1.xinwen改為.xinwen,即去掉h1。這種定義中不含標(biāo)簽名的類當(dāng)然也就不再局限于某一個(gè)標(biāo)簽了。看看我們修改之后的網(wǎng)頁,“新聞的內(nèi)容”也應(yīng)用了xinwen類的樣式。
class(類)與id的區(qū)別
到這里你也許要問了,class和id看起來除了一個(gè).和#的區(qū)別之外,無論在定義上還是在應(yīng)用上似乎都是一模一樣啊?然而事實(shí)上并不如此,同一id在一個(gè)頁面內(nèi)只能應(yīng)用一次,而class則是用于描述多次出現(xiàn)的元素。這從它們的名稱上很容易理解。id就類似元素的省份證號(hào)碼,它必須是唯一的,而class則是一類具有共同屬性的元素的合稱,是一類。
如果你試圖在一個(gè)一面內(nèi)多次使用同一個(gè)id,頁面通常是可以正常顯示的。但是這會(huì)給后期的維護(hù)帶來不便,還可能造成其它的問題。所以我們一定要區(qū)分開id和class,并且合理的應(yīng)用它們。
版權(quán)聲明:
1 本站所有資源(含游戲)均是軟件作者、開發(fā)商投稿,任何涉及商業(yè)盈利目的均不得使用,否則產(chǎn)生的一切后果將由您自己承擔(dān)!
2 本站將不對任何資源負(fù)法律責(zé)任,所有資源請?jiān)谙螺d后24小時(shí)內(nèi)刪除。
3 若有關(guān)在線投稿、無法下載等問題,請與本站客服人員聯(lián)系。
4 如侵犯了您的版權(quán)、商標(biāo)等,請立刻聯(lián)系我們并具體說明情況后,本站將盡快處理刪除,聯(lián)系QQ:2499894784
- 千億體育手機(jī)版本v2.0.1 安卓版
- tplink物聯(lián)電腦版(原tplink安防) v2.12.17.
- Sandboxie Plus v1.9.8 / v5.64.8 開源電腦
- 字魂100號(hào)方方先鋒體字體包免費(fèi)版
- 奧維互動(dòng)地圖奧維地圖PC破解版VIP V9.0.6
- 蘭博對戰(zhàn)平臺(tái) V1.38.6 官方最新版 / 蘭博玩
- reWASD(Xbox One手柄映射工具) V6.0.1.5190
- mtool修改器 V2023.11 官方最新版 / mtool
- 115轉(zhuǎn)存助手ui優(yōu)化版腳本 V3.9.1 綠色免費(fèi)
- iSecure Center電腦客戶端 V1.5.0 官方版
點(diǎn)擊加載更多評論>>