問題問的比較含糊吧，其實(shí)不太能理解是想要整理樣式，還是想要在原有基礎(chǔ)上覆蓋樣式。
十載建站經(jīng)驗(yàn)， 網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站客戶的見證與正確選擇。成都創(chuàng)新互聯(lián)公司提供完善的營銷型網(wǎng)頁建站明細(xì)報(bào)價(jià)表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。
======整理樣式=====
在我們寫樣式的時(shí)候，頁面的CSS在經(jīng)歷幾個(gè)版本的修改之后，可能有些樣式已經(jīng)用不到了，或許將某些樣式更名了而原來的忘了刪除，總之頁面中可能存 在著一些無用的樣式。這些無用的浪費(fèi)了一些服務(wù)器空間和帶寬消耗，也會(huì)增大我們的維護(hù)成本。下面介紹幾個(gè)分析無用樣式的工具：
【Dust-Me selectors】
Dust-Me是一個(gè)很有用也很好用的Firefox插件，它可以分析到你的頁面中調(diào)用的所有CSS文件并分析那些在頁面中沒有被用到。
支持本地和遠(yuǎn)程樣式文件，包括使用link標(biāo)簽、?xml-stylesheet?處理指令、@import語句等方式引入的樣式文件；(但是不支持頁面中的style塊和內(nèi)聯(lián)樣式)
支持IE條件注釋中引入的樣式文件；
可以檢查一個(gè)頁面，也可以檢查整個(gè)網(wǎng)站；
支持CSS1選擇器、大部分CSS2和CSS3選擇器；
理解通用的CSS hack，比如 “* html #fuck-ie”將會(huì)被認(rèn)為是”html #fuck-ie”；
支持Firefox 3.5和Firefox 3.0，事實(shí)上得益于FF 3.5的js引擎的改進(jìn)，F(xiàn)F 3.5中的性能比FF 3.0要高50%。
你可以下載該項(xiàng)目的源代碼，了解更多請(qǐng)?jiān)L問 Dust-Me selector官方頁面。
【Page Speed】
Page Speed是Google提供的一個(gè)前端性能分析工具，有些類似于YSlow，但是提供了一些比較個(gè)性且很有用的工具，比如Remove unused CSS：
Page Speed和YSlow一樣依賴Firebug。
【CSS Redundancy Checker】
CSS Redundancy Checker 是一個(gè)免費(fèi)的在線應(yīng)用，可以檢查所有的使用某個(gè)CSS文件的頁面中無用的樣式?？梢酝瑫r(shí)檢查某一個(gè)樣式在多個(gè)頁面中的使用情況。該工具的不足是雖然一次能 檢查多個(gè)HTML頁面，但每次只能檢查一個(gè)CSS文件，而且還要手動(dòng)輸入：
【IntelliJ IDEA】
IntelliJ IDEA 這是一個(gè)頗強(qiáng)大的IDE，類似于DreamWeaver，不過在國內(nèi)用的不多。該軟件包括一個(gè)即時(shí)代碼分析工具(On-the-fly Code Analysis)，可以分析CSS文件中未用到的class和id。
【Expression Web】
Expression Web作為微軟的新一代網(wǎng)站開發(fā)工具，還是有很多人使用的，其CSS Report功能可以檢查未用到需要被清除的CSS（我的確沒有使用EW開發(fā)過網(wǎng)站，希望使用該軟件的童鞋可以幫忙確認(rèn)一下這一點(diǎn)）。
另外，通常我們將整個(gè)網(wǎng)站的樣式寫入一個(gè)或多個(gè)樣式文件中，然后在頁面中全部調(diào)用或者分模塊調(diào)用，那么某個(gè)CSS文件中的樣式可能在某個(gè)頁面中的確 沒有用到但是在其它的頁面中被用到了，所以使用這些工具檢測CSS文件中多余的樣式的時(shí)候，需要保持一定的謹(jǐn)慎，清除樣式可能會(huì)影響到其它的頁面，所以 page speed提供的檢查結(jié)果只適用于單個(gè)頁面，不適合整個(gè)網(wǎng)站，而使用Dust-Me或CSS Redundancy Checker的時(shí)候可以對(duì)整個(gè)網(wǎng)站或者網(wǎng)站的多個(gè)頁面同時(shí)檢查，這樣可能能避免萬無一失。
======覆蓋樣式=====
有時(shí)候在寫CSS的過程中，某些限制總是不起作用，這就涉及了CSS樣式覆蓋的問題，如下:
/*?css樣式?*/
#navigator?{height:100%;width:200px;position:?absolute;left:?0;border:?solid?2?#EEE;}
.current_block?{border:?solid?2?#AE0;}
CSS優(yōu)先級(jí)如下排列：
1. 樣式表的元素選擇器選擇越精確，則其中的樣式優(yōu)先級(jí)越高：id選擇器指定的樣式 類選擇器指定的樣式 元素類型選擇器指定的樣式所以上例中，#navigator的樣式優(yōu)先級(jí)大于.current_block的優(yōu)先級(jí)，及時(shí).current_block是最新添加的，也不起作用。
2. 對(duì)于相同類型選擇器制定的樣式，在樣式表文件中，越靠后的優(yōu)先級(jí)越高注意，這里是樣式表文件中越靠后的優(yōu)先級(jí)越高，而不是在元素class出現(xiàn)的順序。比如.class2 在樣式表中出現(xiàn)在.class1之后：
/*?Css代碼?*/?
.class1?{color:?black;}??
.class2?{color:?red;}
而某個(gè)元素指定class時(shí)采用 class="class2 class1"這種方式指定，此時(shí)雖然class1在元素中指定時(shí)排在class2的后面，但因?yàn)樵跇邮奖砦募衏lass1處于class2前面，此時(shí)仍然是class2的優(yōu)先級(jí)更高，color的屬性為red，而非black。
3. 如果要讓某個(gè)樣式的優(yōu)先級(jí)變高，可以使用!important來指定：
/*?Css代碼??*/
.class1?{color:?black?!important;??}??
.class2?{color:?red;}
此時(shí)class將使用black，而非red。
對(duì)于一開始遇到的問題，有兩種解決方案：
1. 將border從#navigator中拿出來，放到一個(gè)class .block中，而.block放.current_block之前：
/*?Css代碼?*/??
#navigator?{height:?100%;width:?200;position:?absolute;?left:?0;??}??
.block?{border:?solid?2?#EEE;?}
.current_block?{border:?solid?2?#AE0;}
需要莫仁為#navigator元素指定class="block"
2. 使用!important:
/*?Css代碼??*/
#navigator?{height:?100%;width:?200;position:?absolute;left:?0;?border:?solid?2?#EEE;}??
.current_block?{border:?solid?2?#AE0?!important;}
此時(shí)無需作任何其他改動(dòng)即可生效?？梢姷诙N方案更簡單一些。
/**?清除內(nèi)外邊距?**/
body,?h1,?h2,?h3,?h4,?h5,?h6,?hr,?p,?blockquote,?/*?structural?elements?結(jié)構(gòu)元素?*/
dl,?dt,?dd,?ul,?ol,?li,?/*?list?elements?列表元素?*/
pre,?/*?text?formatting?elements?文本格式元素?*/
form,?fieldset,?legend,?button,?input,?textarea,?/*?form?elements?表單元素?*/
th,?td?/*?table?elements?表格元素?*/?{
margin:?0;
padding:?0;
}
/**?設(shè)置默認(rèn)字體?**/
body,
button,?input,?select,?textarea?/*?for?ie?*/?{
font:?14px/1.5?tahoma,?\5b8b\4f53,?sans-serif;
}
h1,?h2,?h3,?h4,?h5,?h6?{?font-size:?100%;?font-weight:?normal;}
address,?cite,?dfn,?em,?var?{?font-style:?normal;?}?/*?將斜體扶正?*/
code,?kbd,?pre,?samp?{?font-family:?courier?new,?courier,?monospace;?}?/*?統(tǒng)一等寬字體?*/
small?{?font-size:?12px;?}?/*?小于?12px?的中文很難閱讀,?讓?small?正常化?*/
/**?重置列表元素?**/
ul,?ol?{?list-style:?none;?}
/**?重置文本格式元素?**/
a?{?text-decoration:?none;?}
a:hover?{?text-decoration:?underline;?}
sup?{?vertical-align:?text-top;?}?/*?重置,?減少對(duì)行高的影響?*/
sub?{?vertical-align:?text-bottom;?}
/**?重置表單元素?**/
legend?{?color:?#000;?}?/*?for?ie6?*/
fieldset,?img?{?border:?0;?}?/*?img?搭車：讓鏈接里的?img?無邊框?*/
button,?input,?select,?textarea?{?font-size:?100%;?}?/*?使得表單元素在?ie?下能繼承字體大小?*/
/*?注：optgroup?無法扶正?*/
/**?重置表格元素?**/
table?{?border-collapse:?collapse;?border-spacing:?0;?}
/*?重置?HTML5?元素?*/
article,?aside,?details,?figcaption,?figure,?footer,header,?hgroup,?menu,?nav,?section,
summary,?time,?mark,?audio,?video?{
display:?block;
margin:?0;
padding:?0;
}
mark?{?background:?#ff0;?}
理念：
1. reset 的目的不是清除瀏覽器的默認(rèn)樣式, 這僅是部分工作. 清除和重置是緊密不可分的.
2. reset 的目的不是讓默認(rèn)樣式在所有瀏覽器下一致, 而是減少默認(rèn)樣式有可能帶來的問題.
3. reset 期望提供一套普適通用的基礎(chǔ)樣式. 但沒有銀彈, 推薦根據(jù)具體需求, 裁剪和修改后再使用.
寫網(wǎng)頁的時(shí)候CSS樣式一般是先把沒用的清楚掉的，比如自帶的邊框 margin ?padding等等，
你需要把所有的標(biāo)簽基本都得清除一遍，不然后期寫網(wǎng)頁的時(shí)候有的小細(xì)節(jié)問題很難排查出來
取消CSS樣式可以在 層或者表格代碼中 找到類似class="" 或者 id="" 之類，將其刪除即可。
或者在網(wǎng)頁代碼中找到 類似這樣的代碼
link href="css/css.css" rel="stylesheet" type="text/css" /
或者
style type="text/css"
.......
/style
將其刪除即可。
寫法：*{}
星號(hào)即為通配符選擇器，寫在其中的樣式會(huì)應(yīng)用頁面到所有的元素中，所以使用的頻率并不高，主要用于清除瀏覽器默認(rèn)樣式。
在使用各種元素的過程中，我們會(huì)發(fā)現(xiàn)很多元素都是有默認(rèn)樣式的，比如body標(biāo)簽有默認(rèn)的padding值和margin值，h1和p標(biāo)簽有默認(rèn)的行高字號(hào)，margin值，a標(biāo)簽有默認(rèn)的下劃線，列表前面有小圓點(diǎn)等等，常常會(huì)干擾我們進(jìn)行頁面的編寫，所以我們可以事先使用通配符選擇器進(jìn)行瀏覽器默認(rèn)樣式清除。
更精準(zhǔn)的清除方法
剛剛我們使用的通配符選擇器，會(huì)給所有元素都設(shè)置一遍默認(rèn)樣式，解析的工作量會(huì)比較大，所以我們可以根據(jù)我的頁面里到底有哪些元素需要清除，使用群組選擇器寫出更精確的清除默認(rèn)樣式css，如：
可以把它寫入一個(gè)外部樣式表reset.css，如果需要清除直接導(dǎo)入就可以啦。
1、清除在編寫頁面中由于瀏覽器默認(rèn)樣式帶來的干擾。
2、兼容性更好，不同瀏覽器的默認(rèn)樣式可能會(huì)有所不同，如果不清楚可能會(huì)造成我們編寫的頁面在不同瀏覽器上的效果有所出入。
選擇器部分文章：
選擇器介紹（一）標(biāo)簽選擇器、id選擇器、類選擇器
選擇器介紹（二）后代選擇器，子代選擇器，交集選擇器，并集（群組）選擇器
通配符選擇器清除瀏覽器默認(rèn)樣式
重慶分公司
重慶分公司
