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