學習WEB標準的朋友一般都是從學習CSS開始，為什么呢？因為CSS是一種很有意思的語言，它能讓我們的網(wǎng)頁千變?nèi)f化。也許我們一開始的接觸只是因為鏈接的樣式修改，然后慢慢發(fā)現(xiàn)CSS的強大而又簡單，于是我們用它來控制整個網(wǎng)頁的布局、排版、色彩、圖片等等工作。學習了CSS之后我們又會發(fā)現(xiàn)XHTML的結(jié)構更為重要，一個好的XHTML結(jié)構可以讓CSS少費很多事。同時也會避免網(wǎng)頁在不同瀏覽器之間的差異。于是又開始學習了XHTML代碼，并且不斷的去摸索著XHTML的結(jié)構的特點。會寫CSS了，也懂得XHTML結(jié)構的重要性并能靈活應用的時候，是不是就可以了呢。也許這時我們就會發(fā)現(xiàn)其實樣式的管理同樣非常的重要。
成都創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團隊，在互聯(lián)網(wǎng)網(wǎng)站建設行業(yè)深耕十多年，專業(yè)且經(jīng)驗豐富。十多年網(wǎng)站優(yōu)化營銷經(jīng)驗，我們已為上千余家中小企業(yè)提供了成都網(wǎng)站建設、網(wǎng)站建設解決方案，按需求定制設計，設計滿意，售后服務無憂。所有客戶皆提供一年免費網(wǎng)站維護!
大家也許都已經(jīng)有了自己的管理方式，因為所要應用的網(wǎng)頁類型的不同可能管理的思路也不一樣，這里我只是把我的樣式管理做一個整理。算是給大家提供一個可以參考與研究的范例，給對于沒有形成自己的管理方式的朋友們提供一個參照范本。
我的樣式管理是針對于單一項目、單一的風格體系的網(wǎng)站，一般這樣的網(wǎng)站都是中小型的網(wǎng)站，風格是上一致的。對于大型網(wǎng)站，或是風格差異很大的'網(wǎng)站體系是不適用的。我們在做樣式之前首先要想到樣式的易維護性。一旦需要修改就必需要快速方便，修改工作的成本是很高的，所以我們要盡量避免這樣的工作所占用時間的擴大。那我們就有必要把樣式與結(jié)構代碼分開。下面看一下我的目錄分配方法：
其中，[images] 是存放xHTML中出現(xiàn)的圖片，[jonStyle]我統(tǒng)稱之為主題包，在樣式包中包括了[CSS]、、[js]分別存放CSS樣式表、樣式表中所引用的圖片、網(wǎng)頁中所用的JS。這里存放圖片的與外面的[images]雖然都是存放圖片的，但是這里的圖片的性質(zhì)卻是不一樣的。是CSS中所引用的圖片，所有的圖片的顯示與否都與CSS樣式有關，他的歸屬性是，里的圖片是歸屬于CSS的，而不是XHTML的。而CSS是不會引用[images]中的圖片。[images]中的圖片只歸屬于xHTML，xHTML也不要直接使用中的圖片。
這里把[js]也放在了[jonStyle]文件夾中也許會有人覺得不妥，我的考慮是這樣的：行為與樣式本都是使得這個XHTML的結(jié)構能多姿多彩。當我們需要更換皮膚的時候，也有可通這個行為也是需要更換的。比如：在第一套方案中，某個區(qū)塊的內(nèi)容是要上下滾動的，然而在第二套方案中，這個區(qū)塊就需要左右滾動。那么這個行為也需要與樣工一起更換。當然實際應用的時候不一定是這么簡單理由。
基本上大的結(jié)構是這這樣的。那么樣式表的結(jié)構又是怎么樣的呢？我是這樣來劃分的：樣式包中有一個base.css（基本共用樣式）module.css（模塊樣式）forms.css （表單樣式）mend.css（補丁樣式）print.css（打印樣式）
其中base.css是一個基本的樣式，也就是所有網(wǎng)頁的共性樣式，這個樣式與module.css配合基本上可以顯示正常的頁面。表單的劃分，也可以有利于對不同地方的表單的樣式管理。WEB標準涉及兼容性，所以需要有樣式補丁當然還有針對性的這里就不一一列舉。最后一個的打印樣式，是提供給打印設置使用的。
我通過這樣的劃分，在對于維護與網(wǎng)站的樣工更新上，就顯得非常的容易，基本上可以在不需要程序人員的參與下就可以完成對網(wǎng)站的皮膚的更換。如果一個網(wǎng)站同時具備很多個主題包，那么只要簡單的在XHTML中更換主題包的名稱就可以使用不同的樣式。這與網(wǎng)站的程序相配合將可以做出非常好的，具有很強擴展性的應用網(wǎng)站來！
1、新建一個html文件，命名為test.html
2、在test.html文件內(nèi)，使用css設置頁面所有的div寬度為300px，高度為300px，div的位置為絕對定位。
3、在test.html文件內(nèi)，創(chuàng)建三個div，并用文字標識，分別為底層div、中層div、最頂層div。
4、在test.html文件內(nèi)，分別給三個div設置class屬性為one、two、three，用于下面對類名進行樣式設置。
5、在css標簽內(nèi)，設置類名為one的div樣式，設置其背景顏色為紅色，距離頁面左邊緣為0，距離頁面上邊緣為0，同時使用z-index設置其層級為1。
6、在css標簽內(nèi)，設置類名為two的div樣式，設置其背景顏色為黃色，距離頁面左邊緣為50px，距離頁面上邊緣為50px，同時使用z-index設置其層級為2，即在類名為one的div的上面。
7、在css標簽內(nèi)，設置類名為three的div樣式，設置其背景顏色為粉紅色，距離頁面左邊緣為100px，距離頁面上邊緣為100px，同時使用z-index設置其層級為3，即在頁面三個div中的最頂層。
8、在瀏覽器打開test.html文件，查看實現(xiàn)的層級效果。
css控制第一個li標簽的樣式，和其他li的樣式不同：給第一個li標簽添加class或者id，然后編寫css代碼。
html：給第一個li元素添加一個class類名為“menu1”。
html：
ul
li class=“menu1”新聞一/li
li新聞二/li
li新聞三/li
/ul
css代碼：
li{font-size：14px；} //4px大小的字體
.menu1{font-size:18px;font-weight：bold；} //字體樣式：粗體18px字體
效果：
在ul標簽下li的默認樣式為一個實心圓（disc）? ?可忽略不寫
li樣式的改變是用 list-style:屬性值 來改變的
我們給li設置css，去除默認樣式（實心圓）
將li的樣式設置為空心圓
將li的樣式設置為實心正方形
其他：
decimal ? : ? CSS1 阿拉伯數(shù)字
lower-roman ? :? CSS1 小寫羅馬數(shù)字 ?
upper-roman ? :? CSS1 大寫羅馬數(shù)字 ?
lower-alpha ? :? CSS1 小寫英文字母 ?
upper-alpha ? :? CSS1 大寫英文字母??
armenian ? : ? CSS2 傳統(tǒng)的亞美尼亞數(shù)字 ?
cjk-ideographic ? :? CSS2 淺白的表意數(shù)字 ?
georgian ? : ? CSS2 傳統(tǒng)的喬治數(shù)字 ?
lower-greek ? :? CSS2 基本的希臘小寫字母?
hebrew ? : ? CSS2 傳統(tǒng)的希伯萊數(shù)字 ?
hiragana ? : ? CSS2 日文平假名字符 ?
hiragana-iroha ? :? CSS2 日文平假名序號 ?
katakana ? : ? CSS2 日文片假名字符 ?
katakana-iroha ? :? CSS2 日文片假名序號 ?
lower-latin ? :? CSS2 小寫拉丁字母 ?
upper-latin ? :? CSS2 大寫拉丁字母?
ID名選擇器
#con?{
border:?1px?solid?red;
}
代碼解析：表示找到ID名為con的元素，并為元素設置1像素、實線、紅色邊框。
類名選擇器
.con?{
border:?1px?solid?red;
}
代碼解析：表示找到類名為con的元素，并為元素設置1像素、實線、紅色邊框。
標簽選擇器
div?{
border:?1px?solid?red;
}
代碼解析：表示找到標簽名為div的元素，并為元素設置1像素、實線、紅色邊框。
后代選擇器
.con?p?{
border:?1px?solid?red;
}
代碼解析：表示找到為類名為con里的所有p元素，并為元素設置1像素、實線、紅色邊框。需要注意的是不單單是子代受到影響，所有的后代均會受到影響。
子代選擇器
.con??p?{
border:?1px?solid?red;
}
代碼解析：表示找到為類名為con里的子代p元素，并為元素設置1像素、實線、紅色邊框。需要注意的是只是子代受到影響，而非所有的后代均會受到影響。
群組選擇器
.con?p,?.box?{
border:?1px?solid?red;
}
代碼解析：表示找到為類名為con里的所有p元素，并為元素設置1像素、實線、紅色邊框；找到類名為box的元素，并為元素設置1像素、實線、紅色邊框；
常見的CSS選擇器如上，還有偽類、屬性、通配符選擇器以及CSS3新增的大量選擇器，可以查看《CSS選擇器以及選擇器優(yōu)先級》
重慶分公司
重慶分公司
