寫(xiě)網(wǎng)頁(yè)的時(shí)候CSS樣式一般是先把沒(méi)用的清楚掉的,比如自帶的邊框 margin ?padding等等,
莊河ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景,ssl證書(shū)未來(lái)市場(chǎng)廣闊!成為創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道,可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話(huà)聯(lián)系或者加微信:18980820575(備注:SSL證書(shū)合作)期待與您的合作!
你需要把所有的標(biāo)簽基本都得清除一遍,不然后期寫(xiě)網(wǎng)頁(yè)的時(shí)候有的小細(xì)節(jié)問(wèn)題很難排查出來(lái)
因?yàn)楦鱾€(gè)瀏覽器默認(rèn)的樣式不同,你這種情況可以使用下面代碼清除邊距
style*{margin:0;padding:0;}/style建議做網(wǎng)站的時(shí)候,設(shè)置個(gè)reset.css樣式表清除各個(gè)瀏覽器的默認(rèn)樣式,已達(dá)到做的網(wǎng)頁(yè)在各個(gè)瀏覽器中達(dá)到統(tǒng)一,下面把YUI
Reset
CSS代碼貼出
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
取消CSS樣式可以在 層或者表格代碼中 找到類(lèi)似class="" 或者 id="" 之類(lèi),將其刪除即可。
或者在網(wǎng)頁(yè)代碼中找到 類(lèi)似這樣的代碼
link href="css/css.css" rel="stylesheet" type="text/css" /
或者
style type="text/css"
.......
/style
將其刪除即可。
問(wèn)題問(wèn)的比較含糊吧,其實(shí)不太能理解是想要整理樣式,還是想要在原有基礎(chǔ)上覆蓋樣式。
======整理樣式=====
在我們寫(xiě)樣式的時(shí)候,頁(yè)面的CSS在經(jīng)歷幾個(gè)版本的修改之后,可能有些樣式已經(jīng)用不到了,或許將某些樣式更名了而原來(lái)的忘了刪除,總之頁(yè)面中可能存 在著一些無(wú)用的樣式。這些無(wú)用的浪費(fèi)了一些服務(wù)器空間和帶寬消耗,也會(huì)增大我們的維護(hù)成本。下面介紹幾個(gè)分析無(wú)用樣式的工具:
【Dust-Me selectors】
Dust-Me是一個(gè)很有用也很好用的Firefox插件,它可以分析到你的頁(yè)面中調(diào)用的所有CSS文件并分析那些在頁(yè)面中沒(méi)有被用到。
支持本地和遠(yuǎn)程樣式文件,包括使用link標(biāo)簽、?xml-stylesheet?處理指令、@import語(yǔ)句等方式引入的樣式文件;(但是不支持頁(yè)面中的style塊和內(nèi)聯(lián)樣式)
支持IE條件注釋中引入的樣式文件;
可以檢查一個(gè)頁(yè)面,也可以檢查整個(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問(wèn) Dust-Me selector官方頁(yè)面。
【Page Speed】
Page Speed是Google提供的一個(gè)前端性能分析工具,有些類(lèi)似于YSlow,但是提供了一些比較個(gè)性且很有用的工具,比如Remove unused CSS:
Page Speed和YSlow一樣依賴(lài)Firebug。
【CSS Redundancy Checker】
CSS Redundancy Checker 是一個(gè)免費(fèi)的在線(xiàn)應(yīng)用,可以檢查所有的使用某個(gè)CSS文件的頁(yè)面中無(wú)用的樣式??梢酝瑫r(shí)檢查某一個(gè)樣式在多個(gè)頁(yè)面中的使用情況。該工具的不足是雖然一次能 檢查多個(gè)HTML頁(yè)面,但每次只能檢查一個(gè)CSS文件,而且還要手動(dòng)輸入:
【IntelliJ IDEA】
IntelliJ IDEA 這是一個(gè)頗強(qiáng)大的IDE,類(lèi)似于DreamWeaver,不過(guò)在國(guó)內(nèi)用的不多。該軟件包括一個(gè)即時(shí)代碼分析工具(On-the-fly Code Analysis),可以分析CSS文件中未用到的class和id。
【Expression Web】
Expression Web作為微軟的新一代網(wǎng)站開(kāi)發(fā)工具,還是有很多人使用的,其CSS Report功能可以檢查未用到需要被清除的CSS(我的確沒(méi)有使用EW開(kāi)發(fā)過(guò)網(wǎng)站,希望使用該軟件的童鞋可以幫忙確認(rèn)一下這一點(diǎn))。
另外,通常我們將整個(gè)網(wǎng)站的樣式寫(xiě)入一個(gè)或多個(gè)樣式文件中,然后在頁(yè)面中全部調(diào)用或者分模塊調(diào)用,那么某個(gè)CSS文件中的樣式可能在某個(gè)頁(yè)面中的確 沒(méi)有用到但是在其它的頁(yè)面中被用到了,所以使用這些工具檢測(cè)CSS文件中多余的樣式的時(shí)候,需要保持一定的謹(jǐn)慎,清除樣式可能會(huì)影響到其它的頁(yè)面,所以 page speed提供的檢查結(jié)果只適用于單個(gè)頁(yè)面,不適合整個(gè)網(wǎng)站,而使用Dust-Me或CSS Redundancy Checker的時(shí)候可以對(duì)整個(gè)網(wǎng)站或者網(wǎng)站的多個(gè)頁(yè)面同時(shí)檢查,這樣可能能避免萬(wàn)無(wú)一失。
======覆蓋樣式=====
有時(shí)候在寫(xiě)CSS的過(guò)程中,某些限制總是不起作用,這就涉及了CSS樣式覆蓋的問(wèn)題,如下:
/*?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選擇器指定的樣式 類(lèi)選擇器指定的樣式 元素類(lèi)型選擇器指定的樣式所以上例中,#navigator的樣式優(yōu)先級(jí)大于.current_block的優(yōu)先級(jí),及時(shí).current_block是最新添加的,也不起作用。
2. 對(duì)于相同類(lèi)型選擇器制定的樣式,在樣式表文件中,越靠后的優(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來(lái)指定:
/*?Css代碼??*/
.class1?{color:?black?!important;??}??
.class2?{color:?red;}
此時(shí)class將使用black,而非red。
對(duì)于一開(kāi)始遇到的問(wèn)題,有兩種解決方案:
1. 將border從#navigator中拿出來(lái),放到一個(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í)無(wú)需作任何其他改動(dòng)即可生效??梢?jiàn)第二種方案更簡(jiǎn)單一些。
寫(xiě)好的css最好還是盡量少刪啦,因?yàn)榭赡墁F(xiàn)在沒(méi)起作用,在某一塊沒(méi)起作用,但是說(shuō)不定以后能起作用,在別的地方能有用。在現(xiàn)在越來(lái)越強(qiáng)調(diào)代碼重用的環(huán)境下,我們只能在編碼初期就把代碼整體架構(gòu)給打好。比如說(shuō)選擇一個(gè)好的樣式重置,科學(xué)的浮動(dòng)清除方式等等都是至關(guān)重要的。所以我覺(jué)得與其想辦法刪除一些多余的css,倒不如把心思花在前期工作和css代碼的錘煉上,畢竟事先解決比事后解決還是好一些的嘛。
寫(xiě)法:*{}
星號(hào)即為通配符選擇器,寫(xiě)在其中的樣式會(huì)應(yīng)用頁(yè)面到所有的元素中,所以使用的頻率并不高,主要用于清除瀏覽器默認(rèn)樣式。
在使用各種元素的過(guò)程中,我們會(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)的下劃線(xiàn),列表前面有小圓點(diǎn)等等,常常會(huì)干擾我們進(jìn)行頁(yè)面的編寫(xiě),所以我們可以事先使用通配符選擇器進(jìn)行瀏覽器默認(rèn)樣式清除。
更精準(zhǔn)的清除方法
剛剛我們使用的通配符選擇器,會(huì)給所有元素都設(shè)置一遍默認(rèn)樣式,解析的工作量會(huì)比較大,所以我們可以根據(jù)我的頁(yè)面里到底有哪些元素需要清除,使用群組選擇器寫(xiě)出更精確的清除默認(rèn)樣式css,如:
可以把它寫(xiě)入一個(gè)外部樣式表reset.css,如果需要清除直接導(dǎo)入就可以啦。
1、清除在編寫(xiě)頁(yè)面中由于瀏覽器默認(rèn)樣式帶來(lái)的干擾。
2、兼容性更好,不同瀏覽器的默認(rèn)樣式可能會(huì)有所不同,如果不清楚可能會(huì)造成我們編寫(xiě)的頁(yè)面在不同瀏覽器上的效果有所出入。
選擇器部分文章:
選擇器介紹(一)標(biāo)簽選擇器、id選擇器、類(lèi)選擇器
選擇器介紹(二)后代選擇器,子代選擇器,交集選擇器,并集(群組)選擇器
通配符選擇器清除瀏覽器默認(rèn)樣式