CSS教程:合理的減少標(biāo)簽的使用并適度的使用class與id_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
版權(quán)聲明:MB5U.com原創(chuàng),未經(jīng)同意,謝絕轉(zhuǎn)載!
我們需要明白一點(diǎn):HTML標(biāo)簽使用的越少越好。事實(shí)也證實(shí)了確實(shí)如此。我們想要?jiǎng)?chuàng)建具有良好結(jié)構(gòu)的文檔,那我們始終就需要考慮盡量少的使用標(biāo)簽。僅僅使用必須的標(biāo)簽,將其它可有可無的標(biāo)簽統(tǒng)統(tǒng)扔掉吧。我們僅僅保留了必要的標(biāo)簽,可以讓文檔保持較小的體積,從而提高了頁面的下載速度。從另一個(gè)方面來說,標(biāo)簽的減少也能夠讓瀏覽器以更快的速度進(jìn)行解析而顯示在屏幕上。當(dāng)然我們所說的是必要與不必要,假如必須需要某種容器來布局,那是不可以省略的。
我們看下面的例子:
我們?yōu)樵靥砑舆m當(dāng)?shù)臉?biāo)識(shí)可以讓我們?cè)贑SS的編寫中更輕易控制他們,更能精確的為CSS樣式找到目標(biāo)。而且id還可以與javascript關(guān)聯(lián)起來,做出一定的效果與交互。我們都知道:id是獨(dú)一無二的,在同一個(gè)頁面上id只能出現(xiàn)一次。而class是一類可以重用的屬性,我們可以重復(fù)的應(yīng)用到頁面的多個(gè)元素上。
一個(gè)class可以應(yīng)用于多個(gè)元素,而一個(gè)元素同樣可以應(yīng)用多個(gè)class。我們也可以為一個(gè)賦予了id的元素應(yīng)用class。但我們必須要時(shí)刻提醒自己,id的唯一性,只能出現(xiàn)一次,只能為一個(gè)元素指定一個(gè)唯一的id。而class與id的命名,我們最輕易犯錯(cuò)的就是以數(shù)字開頭進(jìn)行命名,如1main、12text。這樣都是不正確的,正確的方法是:a-z、A-Z、0-9、“_”,但千萬別以數(shù)字開頭進(jìn)行命名。只能以字母開頭進(jìn)行命名。我們明白很多瀏覽器對(duì)這樣的命名大小寫并不敏感,但我們也要養(yǎng)成良好的編碼習(xí)慣,進(jìn)行習(xí)慣性的定義與統(tǒng)一。
我們看下面的例子:
版權(quán)聲明:MB5U.com原創(chuàng),未經(jīng)同意,謝絕轉(zhuǎn)載!
我們需要明白一點(diǎn):HTML標(biāo)簽使用的越少越好。事實(shí)也證實(shí)了確實(shí)如此。我們想要?jiǎng)?chuàng)建具有良好結(jié)構(gòu)的文檔,那我們始終就需要考慮盡量少的使用標(biāo)簽。僅僅使用必須的標(biāo)簽,將其它可有可無的標(biāo)簽統(tǒng)統(tǒng)扔掉吧。我們僅僅保留了必要的標(biāo)簽,可以讓文檔保持較小的體積,從而提高了頁面的下載速度。從另一個(gè)方面來說,標(biāo)簽的減少也能夠讓瀏覽器以更快的速度進(jìn)行解析而顯示在屏幕上。當(dāng)然我們所說的是必要與不必要,假如必須需要某種容器來布局,那是不可以省略的。
我們看下面的例子:
示例代碼 [www.hl5o.cn]
這是多用了標(biāo)簽
<div>
<p>
這里是MB5U.com。歡迎您的到來!MB5U.com致力于Web標(biāo)準(zhǔn)在中國的應(yīng)用及發(fā)展!我們提供了許多文章及實(shí)例,您可以在這里學(xué)習(xí)到很多關(guān)于Web標(biāo)準(zhǔn)及CSS網(wǎng)頁布局的知識(shí),希望這里的內(nèi)容對(duì)您的工作及學(xué)習(xí)有所幫助。我們期待著您與我們交流,歡迎多提寶貴意見。
</p>
</div>
<div>
<p>
這里是MB5U.com。歡迎您的到來!MB5U.com致力于Web標(biāo)準(zhǔn)在中國的應(yīng)用及發(fā)展!我們提供了許多文章及實(shí)例,您可以在這里學(xué)習(xí)到很多關(guān)于Web標(biāo)準(zhǔn)及CSS網(wǎng)頁布局的知識(shí),希望這里的內(nèi)容對(duì)您的工作及學(xué)習(xí)有所幫助。我們期待著您與我們交流,歡迎多提寶貴意見。
</p>
</div>
示例代碼 [www.hl5o.cn]
這是減少了不必要的標(biāo)簽:
<p>
這里是MB5U.com。歡迎您的到來!MB5U.com致力于Web標(biāo)準(zhǔn)在中國的應(yīng)用及發(fā)展!我們提供了許多文章及實(shí)例,您可以在這里學(xué)習(xí)到很多關(guān)于Web標(biāo)準(zhǔn)及CSS網(wǎng)頁布局的知識(shí),希望這里的內(nèi)容對(duì)您的工作及學(xué)習(xí)有所幫助。我們期待著您與我們交流,歡迎多提寶貴意見。
</p>
<p>
這里是MB5U.com。歡迎您的到來!MB5U.com致力于Web標(biāo)準(zhǔn)在中國的應(yīng)用及發(fā)展!我們提供了許多文章及實(shí)例,您可以在這里學(xué)習(xí)到很多關(guān)于Web標(biāo)準(zhǔn)及CSS網(wǎng)頁布局的知識(shí),希望這里的內(nèi)容對(duì)您的工作及學(xué)習(xí)有所幫助。我們期待著您與我們交流,歡迎多提寶貴意見。
</p>
我們?yōu)樵靥砑舆m當(dāng)?shù)臉?biāo)識(shí)可以讓我們?cè)贑SS的編寫中更輕易控制他們,更能精確的為CSS樣式找到目標(biāo)。而且id還可以與javascript關(guān)聯(lián)起來,做出一定的效果與交互。我們都知道:id是獨(dú)一無二的,在同一個(gè)頁面上id只能出現(xiàn)一次。而class是一類可以重用的屬性,我們可以重復(fù)的應(yīng)用到頁面的多個(gè)元素上。
一個(gè)class可以應(yīng)用于多個(gè)元素,而一個(gè)元素同樣可以應(yīng)用多個(gè)class。我們也可以為一個(gè)賦予了id的元素應(yīng)用class。但我們必須要時(shí)刻提醒自己,id的唯一性,只能出現(xiàn)一次,只能為一個(gè)元素指定一個(gè)唯一的id。而class與id的命名,我們最輕易犯錯(cuò)的就是以數(shù)字開頭進(jìn)行命名,如1main、12text。這樣都是不正確的,正確的方法是:a-z、A-Z、0-9、“_”,但千萬別以數(shù)字開頭進(jìn)行命名。只能以字母開頭進(jìn)行命名。我們明白很多瀏覽器對(duì)這樣的命名大小寫并不敏感,但我們也要養(yǎng)成良好的編碼習(xí)慣,進(jìn)行習(xí)慣性的定義與統(tǒng)一。
我們看下面的例子:
示例代碼 [www.hl5o.cn]
<p class="12text"></p>
<div id="footer"><p id="footer"> </p></div>
上面兩個(gè)是錯(cuò)誤的例子。
<body class="homepage">
<p id="contact"></p>
<div id="main" class="main_a softcor solid_sider"> </div>
上面三個(gè)是正確的例子。
<div id="footer"><p id="footer"> </p></div>
上面兩個(gè)是錯(cuò)誤的例子。
<body class="homepage">
<p id="contact"></p>
<div id="main" class="main_a softcor solid_sider"> </div>
上面三個(gè)是正確的例子。
版權(quán)聲明:MB5U.com原創(chuàng),未經(jīng)同意,謝絕轉(zhuǎn)載!
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
- CSS代碼結(jié)構(gòu)初探:根基的建立使有意義的html標(biāo)記
- CSS and the meaning of life
- 關(guān)于CSS樣式?jīng)_突排序的一個(gè)小試驗(yàn)
- IE、Nascape環(huán)境中CSS的顯示差別
- CSS初級(jí)教程應(yīng)用CSS
- HTML網(wǎng)頁中無刷新的更換CSS樣式
- CSS教程:使用恰當(dāng)?shù)腦HTML元素及避免過多的使用div與span
- CSS教程3、CSS的color顏色[翻譯Htmldog]
- 區(qū)分IE6,IE7和firefox的CSS hack
- 解決IE和Mozilla的布局差別的利器:“!important”
猜你也喜歡看這些
- 添加和刪除HTML節(jié)點(diǎn)的簡(jiǎn)單示例
- HTML教程,簡(jiǎn)單學(xué)習(xí)HTML語言
- HTML中級(jí)教程span和div標(biāo)簽
- XHTML基礎(chǔ):表單name與id的區(qū)別和相似之處
- HTML和CSS在Flash中的應(yīng)用
- HTML表單標(biāo)記教程(1):
- 網(wǎng)頁設(shè)計(jì)中文本輸入框的一些參數(shù)說明
- XHTML入門學(xué)習(xí)教程:XHTML網(wǎng)頁圖片應(yīng)用
- HTML表格標(biāo)記教程(37):表頭的背景圖象屬性BACKGROUND
- HTML表格標(biāo)記教程(41):表頭的寬度和高度屬性WIDTH、HEIGHT
- 相關(guān)鏈接:
- 教程說明:
CSS教程-CSS教程:合理的減少標(biāo)簽的使用并適度的使用class與id
。