CSS代碼結(jié)構(gòu)初探:如何為id及class類命名?_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
這些有意義并且具有良好結(jié)構(gòu)的標(biāo)簽標(biāo)記為我們提供了非常好的基礎(chǔ),但是這些可能元素究竟是有限的。不可能僅用這些元素就構(gòu)成完整的網(wǎng)頁代碼。至少這些標(biāo)簽標(biāo)記,并不能區(qū)分,哪里是頭部導(dǎo)航,哪里是側(cè)邊欄,哪里是內(nèi)容區(qū)域。
我們現(xiàn)在解決辦法就是使用現(xiàn)有的元素,通過給他們id或class而得到額外的信息。這樣就使得文檔具有清楚的結(jié)構(gòu)。比如,我們通過一個(gè)簡(jiǎn)單的無序列表UL,可以創(chuàng)建出一個(gè)導(dǎo)航元素的信息:
我們一直強(qiáng)調(diào)以提醒你的注重,id是頁面上單獨(dú)的元素,必須是唯一的,這樣的益處在于程序或腳本的控制與選擇。id我們通常用來標(biāo)記結(jié)構(gòu)性的元素,如上面提到的頭部導(dǎo)航、側(cè)邊欄、內(nèi)容區(qū)域等。
一個(gè)id只能應(yīng)用于同一個(gè)頁面上的一個(gè)元素。從理論上說,不同的頁面,完全可以使用同一個(gè)id。例如列表頁面的標(biāo)簽與內(nèi)容顯示頁面的標(biāo)題,或者是首頁的聯(lián)系方式與內(nèi)頁的聯(lián)系方式。需要你注重的是,這樣確實(shí)能省事簡(jiǎn)化代碼提高效率。但假如將來需要根據(jù)頁面不同單獨(dú)定義他們的外觀,你將會(huì)碰到棘手的問題。我們建議你建立不同的id,但在CSS代碼編寫時(shí),可以運(yùn)用群組選擇符進(jìn)行外觀的設(shè)置,即使有變化,也可以非常方便的區(qū)分開來。例如:
類class是一個(gè)非常靈活的東東,你可以將它應(yīng)用于頁面上任意數(shù)量的元素。類class非常適合相似條目的定義。例如,我們需要在列表頁標(biāo)識(shí)出文章的作者,我們不必為每一個(gè)人建立id。我們只需要建立類author分配給每一位作者即可。
需要注重的是,不管你用id還是class,請(qǐng)不要讓它的名字與它的表現(xiàn)有任何的關(guān)聯(lián),應(yīng)該讓這個(gè)名字更有意義。例如我們?cè)谔幚韨?cè)邊欄時(shí),或許它是在左側(cè),你會(huì)給它一個(gè)leftsider的名字,但假如我們經(jīng)過運(yùn)行發(fā)現(xiàn)它處于右側(cè)更恰當(dāng)。此時(shí)leftsider居于了右側(cè),就顯得不是非常得體與恰當(dāng)了。比如我們希望我們的要害內(nèi)容加粗顯示,或許你會(huì)建立一個(gè)class類命名為bold800。假如我們將來將它不加粗而是賦予不同的色彩,這個(gè)類名也不合適了。
我們說說命名的大小寫問題,我們的id名與class類名,一般情況下是不區(qū)分大小寫的,但不是一個(gè)好習(xí)慣。我們假如使用XHTML那么id名與class類名是區(qū)分大小寫的,假如是使用HTML,那么大小寫是沒有區(qū)別的。我們處理這樣問題的方法就是全部采用小寫,當(dāng)然,你也可以按你的習(xí)慣,但要注重與開發(fā)團(tuán)隊(duì)的其他成員協(xié)調(diào)。
我們的id與class類都是比較靈活的東西,只要你愿意,你愛怎么用就怎么用,但問題就出現(xiàn)了。我們的頁面代碼中到處充斥著這些東西,我們的出發(fā)點(diǎn)是想更加精確的選擇和控制我們的頁面元素,但這好象又回到了表格時(shí)代,一切變的難以理解和不可閱讀,例如下面的代碼:
我們進(jìn)行一下優(yōu)化,去掉一些不必要的命名。代碼如下:
優(yōu)化后的方式代碼更加的簡(jiǎn)潔,我們只需要通過選擇器準(zhǔn)確的找到樣式的應(yīng)用目標(biāo)就可以了。不必過份的依靠于id名或class類名。我們只有在不得已,不得不使用id或class標(biāo)識(shí)的時(shí)候才使用它們。正常情況下,我們的文件只需要幾個(gè)或十來個(gè)id名與class名就完全能滿足需要了。假如你發(fā)現(xiàn)你的這些名字很多。要么是你就是有多id多class結(jié)合癥,要么就是你的HTML文檔的結(jié)構(gòu)出現(xiàn)了問題。我們將在以后MB5U.com的教程文章中,具體的講解選擇符的相關(guān)知識(shí)與技術(shù),讓你可以非常簡(jiǎn)單而精確的選擇到樣式的作用目標(biāo)。
我們現(xiàn)在解決辦法就是使用現(xiàn)有的元素,通過給他們id或class而得到額外的信息。這樣就使得文檔具有清楚的結(jié)構(gòu)。比如,我們通過一個(gè)簡(jiǎn)單的無序列表UL,可以創(chuàng)建出一個(gè)導(dǎo)航元素的信息:
示例代碼 [hl5o.cn]
<ul id="nav">
<li><a href="http://hl5o.cn/">Div CSS教程</a></li>
<li><a href="http://hl5o.cn/">CSS布局實(shí)例</a></li>
<li><a href="http://hl5o.cn/">CSS2.0教程</a></li>
<li><a href="http://hl5o.cn/">CSS酷站欣賞</a></li>
<li><a href="http://hl5o.cn/">CSS模板下載</a></li>
</ul>
<li><a href="http://hl5o.cn/">Div CSS教程</a></li>
<li><a href="http://hl5o.cn/">CSS布局實(shí)例</a></li>
<li><a href="http://hl5o.cn/">CSS2.0教程</a></li>
<li><a href="http://hl5o.cn/">CSS酷站欣賞</a></li>
<li><a href="http://hl5o.cn/">CSS模板下載</a></li>
</ul>
我們一直強(qiáng)調(diào)以提醒你的注重,id是頁面上單獨(dú)的元素,必須是唯一的,這樣的益處在于程序或腳本的控制與選擇。id我們通常用來標(biāo)記結(jié)構(gòu)性的元素,如上面提到的頭部導(dǎo)航、側(cè)邊欄、內(nèi)容區(qū)域等。
一個(gè)id只能應(yīng)用于同一個(gè)頁面上的一個(gè)元素。從理論上說,不同的頁面,完全可以使用同一個(gè)id。例如列表頁面的標(biāo)簽與內(nèi)容顯示頁面的標(biāo)題,或者是首頁的聯(lián)系方式與內(nèi)頁的聯(lián)系方式。需要你注重的是,這樣確實(shí)能省事簡(jiǎn)化代碼提高效率。但假如將來需要根據(jù)頁面不同單獨(dú)定義他們的外觀,你將會(huì)碰到棘手的問題。我們建議你建立不同的id,但在CSS代碼編寫時(shí),可以運(yùn)用群組選擇符進(jìn)行外觀的設(shè)置,即使有變化,也可以非常方便的區(qū)分開來。例如:
示例代碼 [hl5o.cn]
列表頁的標(biāo)題:<p id="listtitle">hl5o.cn</p>
內(nèi)容頁的標(biāo)題:<p id="showtitle">hl5o.cn</p>
CSS則可以這樣寫:#listtitle,#showtitle {font-size:1.2em; color:red; ...}
內(nèi)容頁的標(biāo)題:<p id="showtitle">hl5o.cn</p>
CSS則可以這樣寫:#listtitle,#showtitle {font-size:1.2em; color:red; ...}
類class是一個(gè)非常靈活的東東,你可以將它應(yīng)用于頁面上任意數(shù)量的元素。類class非常適合相似條目的定義。例如,我們需要在列表頁標(biāo)識(shí)出文章的作者,我們不必為每一個(gè)人建立id。我們只需要建立類author分配給每一位作者即可。
需要注重的是,不管你用id還是class,請(qǐng)不要讓它的名字與它的表現(xiàn)有任何的關(guān)聯(lián),應(yīng)該讓這個(gè)名字更有意義。例如我們?cè)谔幚韨?cè)邊欄時(shí),或許它是在左側(cè),你會(huì)給它一個(gè)leftsider的名字,但假如我們經(jīng)過運(yùn)行發(fā)現(xiàn)它處于右側(cè)更恰當(dāng)。此時(shí)leftsider居于了右側(cè),就顯得不是非常得體與恰當(dāng)了。比如我們希望我們的要害內(nèi)容加粗顯示,或許你會(huì)建立一個(gè)class類命名為bold800。假如我們將來將它不加粗而是賦予不同的色彩,這個(gè)類名也不合適了。
我們說說命名的大小寫問題,我們的id名與class類名,一般情況下是不區(qū)分大小寫的,但不是一個(gè)好習(xí)慣。我們假如使用XHTML那么id名與class類名是區(qū)分大小寫的,假如是使用HTML,那么大小寫是沒有區(qū)別的。我們處理這樣問題的方法就是全部采用小寫,當(dāng)然,你也可以按你的習(xí)慣,但要注重與開發(fā)團(tuán)隊(duì)的其他成員協(xié)調(diào)。
我們的id與class類都是比較靈活的東西,只要你愿意,你愛怎么用就怎么用,但問題就出現(xiàn)了。我們的頁面代碼中到處充斥著這些東西,我們的出發(fā)點(diǎn)是想更加精確的選擇和控制我們的頁面元素,但這好象又回到了表格時(shí)代,一切變的難以理解和不可閱讀,例如下面的代碼:
示例代碼 [hl5o.cn]
HTML:
<div id="aboutmb5u">
<h1 class="title">Div CSS教程 hl5o.cn</h1>
<p class="abouttext">mb5u.com是一個(gè)非常專業(yè)的CSS站點(diǎn)</p>
<p class="abouttext">mb5u.com的Div CSS教程欄目有豐富的教程</p>
</div>
CSS:
.title {font-size:13px; color:#f60;}
.abouttext {font-size:12px; color:#666;}
<div id="aboutmb5u">
<h1 class="title">Div CSS教程 hl5o.cn</h1>
<p class="abouttext">mb5u.com是一個(gè)非常專業(yè)的CSS站點(diǎn)</p>
<p class="abouttext">mb5u.com的Div CSS教程欄目有豐富的教程</p>
</div>
CSS:
.title {font-size:13px; color:#f60;}
.abouttext {font-size:12px; color:#666;}
我們進(jìn)行一下優(yōu)化,去掉一些不必要的命名。代碼如下:
示例代碼 [hl5o.cn]
HTML:
<div id="aboutmb5u">
<h1>Div CSS教程 hl5o.cn</h1>
<p>mb5u.com是一個(gè)非常專業(yè)的CSS站點(diǎn)</p>
<p>mb5u.com的Div CSS教程欄目有豐富的教程</p>
</div>
CSS:
#aboutmb5u h1 {font-size:13px; color:#f60;}
#aboutmb5u p {font-size:12px; color:#666;}
<div id="aboutmb5u">
<h1>Div CSS教程 hl5o.cn</h1>
<p>mb5u.com是一個(gè)非常專業(yè)的CSS站點(diǎn)</p>
<p>mb5u.com的Div CSS教程欄目有豐富的教程</p>
</div>
CSS:
#aboutmb5u h1 {font-size:13px; color:#f60;}
#aboutmb5u p {font-size:12px; color:#666;}
優(yōu)化后的方式代碼更加的簡(jiǎn)潔,我們只需要通過選擇器準(zhǔn)確的找到樣式的應(yīng)用目標(biāo)就可以了。不必過份的依靠于id名或class類名。我們只有在不得已,不得不使用id或class標(biāo)識(shí)的時(shí)候才使用它們。正常情況下,我們的文件只需要幾個(gè)或十來個(gè)id名與class名就完全能滿足需要了。假如你發(fā)現(xiàn)你的這些名字很多。要么是你就是有多id多class結(jié)合癥,要么就是你的HTML文檔的結(jié)構(gòu)出現(xiàn)了問題。我們將在以后MB5U.com的教程文章中,具體的講解選擇符的相關(guān)知識(shí)與技術(shù),讓你可以非常簡(jiǎn)單而精確的選擇到樣式的作用目標(biāo)。
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- CSS網(wǎng)頁布局中必須要了解的幾個(gè)XHTML標(biāo)簽
- 通過XHTML校驗(yàn)的幾個(gè)注意事項(xiàng)
- HTML中級(jí)教程自定義列表
- HTML表格標(biāo)記教程(30):單元格的暗邊框色屬性BORDERCOLORDARK
- HTML教程,簡(jiǎn)單學(xué)習(xí)HTML語言
- HTML表格標(biāo)記詳細(xì)講解(適合初學(xué)者)
- HTML表格標(biāo)記教程(36):表頭的背景色屬性BGCOLOR
- 網(wǎng)頁制作解惑:圖象文件的路徑
- HTML表格標(biāo)記教程(2):表格的邊框?qū)傩訠ORDER
- HTML表格標(biāo)記教程(6):暗邊框色屬性BORDERCOLORDARK
- 相關(guān)鏈接:
- 教程說明:
CSS教程-CSS代碼結(jié)構(gòu)初探:如何為id及class類命名?
。