CSS樣式表與HTML網(wǎng)頁(yè)的關(guān)系分析
我要評(píng)論最近因?yàn)閹鸵粋€(gè)網(wǎng)友很費(fèi)神的修改了一個(gè)導(dǎo)航的CSS文件，還沒(méi)有我自己重寫(xiě)code來(lái)的快，讓我想起了寫(xiě)這篇文章。我發(fā)現(xiàn)很多web設(shè)計(jì)者對(duì)CSS寫(xiě)法的繼承關(guān)系都有了一點(diǎn)了解，但是了解的還是不夠深，不夠透徹，所以今天打算把這個(gè)講一下。
首先談一下html文檔，但凡接觸過(guò)html語(yǔ)言的設(shè)計(jì)師，一定都會(huì)發(fā)現(xiàn)html的一個(gè)很明顯的特點(diǎn)，那就是大多數(shù)代碼標(biāo)簽，都是有一個(gè)頭和一個(gè)尾的。比如<table>和</table>還有<div>和</div>等等，這種特點(diǎn)其實(shí)已經(jīng)告訴你了一個(gè)信號(hào)，就是html標(biāo)簽是可以包含和被包含的。要深刻理解這點(diǎn)并不容易。實(shí)際上，一層標(biāo)簽包含一層標(biāo)簽的寫(xiě)法，這樣層層相套的關(guān)系就是一種繼承關(guān)系。
注：W3C組織對(duì)html代碼的個(gè)體標(biāo)簽也做了規(guī)范化處理， 例如<img>,<br>等都要求做自封閉處理，才能通過(guò)W3C標(biāo)準(zhǔn)檢測(cè)。就是在標(biāo)簽?zāi)┪驳姆捶嚼ㄌ?hào)前加一個(gè)斜線。寫(xiě)法如下<img sc="pic.jpg " alt="" />,<br />.
我們來(lái)看下面的一個(gè)例子：
<div>
<b>小白</b>
</div>
標(biāo)簽<b>就是標(biāo)簽<div>的子標(biāo)簽，他們就已經(jīng)形成了一個(gè)繼承關(guān)系，在CSS樣式表里你可以這樣寫(xiě)來(lái)定位出文字”小白”的樣式。
div b{ font:400 14px "宋體"; color:#FF0000;}
你可以看到一個(gè)未加粗的14px大小的紅色字體樣式作用在文字“小白”上了。由此我們可以發(fā)現(xiàn)被標(biāo)簽包含的標(biāo)簽在CSS里可以用空格表示其繼承的關(guān)系，并且標(biāo)簽符本身就可以作為樣式表的名來(lái)定位需要修飾的樣式內(nèi)容，這兩點(diǎn)要牢記和深刻理解。
有過(guò)一定網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)的朋友都知道，在CSS樣式表里，我們可以通過(guò)定義ID名和類(lèi)名也就是CLASS名來(lái)定位需要修飾的樣式內(nèi)容，但是現(xiàn)在我們?cè)诶斫饬松厦鎰傊v的內(nèi)容后，這里我則推薦你如果可以使用html元素名來(lái)定位的時(shí)候則不必使用ID名和CLASS名。為什么？第一，這是代碼的精簡(jiǎn)性要求，第二，用html元素名來(lái)定位，能很好在CSS文檔里呈現(xiàn)出html文檔的結(jié)構(gòu)關(guān)系，這有利于你在后續(xù)的CSS深化表現(xiàn)時(shí)不破壞html頁(yè)面的大框架。
當(dāng)然，理解這一點(diǎn)，需要有一定程度的html語(yǔ)言功底，什么地方用什么標(biāo)簽，是很有學(xué)問(wèn)的。
大家不妨用下面的這個(gè)圖來(lái)理解html語(yǔ)言
可以很明了的看出html 語(yǔ)言的基本結(jié)構(gòu)就已經(jīng)展示了一個(gè)包含，繼承的關(guān)系。在<body>標(biāo)簽內(nèi)就是需要我們用心設(shè)計(jì)和表現(xiàn)的WEB主體了。我們?cè)趯?xiě)CSS樣式表的時(shí)候，按照層級(jí)的遞增關(guān)系能很容易的定位出需要修飾的元素。在元素內(nèi)容重復(fù)和復(fù)雜的時(shí)候，則可以再用ID名和CLASS名來(lái)逐一區(qū)分。
注：ID名在html文檔里是不能重復(fù)的，這不符合W3C規(guī)范。CLASS名可以重復(fù)出現(xiàn)在html文檔里，那么大家在定義大區(qū)域結(jié)構(gòu)的時(shí)候可以用ID名，在需要重復(fù)使用的樣式的地方就用CLASS名來(lái)定位。
總結(jié)一點(diǎn)：寫(xiě)CSS文檔就像畫(huà)畫(huà)，學(xué)過(guò)美術(shù)的朋友都知道，畫(huà)素描的時(shí)候都要先畫(huà)結(jié)構(gòu)，在上黑白灰關(guān)系。那么CSS和html也一樣，定義好大框架后在著眼細(xì)節(jié)。做出來(lái)的網(wǎng)頁(yè)才會(huì)結(jié)構(gòu)清晰，代碼精煉，并易于修改。就把html看做一副畫(huà)，不要急于出效果，一步步來(lái)吧。
相關(guān)文章
HTML默認(rèn)樣式表CSS屬性除了inline和block的定義
今天偶然在w3上看到了。除了inline和block的定義，主要是要注意 body|h1~h6|blockquote|menu|ul|ol|dd等標(biāo)簽的默認(rèn)樣式，還不知道的朋友可以參考下本文2014-02-13漂亮樣式表在XHTML+CSS網(wǎng)頁(yè)制作中的應(yīng)用
這是一篇很久以前的文章了，現(xiàn)在看來(lái)，其中的思想很值得大家學(xué)習(xí)，在jb51.net學(xué)習(xí)案例的同時(shí)，不仿學(xué)習(xí)一些理論的知識(shí)，對(duì)您知識(shí)的突破會(huì)很有幫助。大家加油！ 自從2009-05-15- 下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)必看——全面了解css樣式表。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-11