在div里給它加上一個(gè)類,給新加的類寫樣式。
創(chuàng)新互聯(lián)專注于鐵東企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),成都商城網(wǎng)站開(kāi)發(fā)。鐵東網(wǎng)站建設(shè)公司,為鐵東等地區(qū)提供建站服務(wù)。全流程定制開(kāi)發(fā),專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
在CSS中,繼承是一種非常自然的行為,我們甚至不需要考慮是否能夠這樣去做,但是繼承也有其局限性。
首先,有些屬性是不能繼承的。這沒(méi)有任何原因,只是因?yàn)樗褪沁@么設(shè)置的。舉個(gè)例子來(lái)說(shuō):border屬性,大家都知道,border屬性是用來(lái)設(shè)置元素的邊框的,它就沒(méi)有繼承性。如下圖所示,如果繼承了邊框?qū)傩?,那么文檔看起來(lái)就會(huì)很奇怪,除非采取另外的措施關(guān)掉邊框的繼承屬性。
多數(shù)邊框類屬性,比如象Padding(補(bǔ)白),Margin(邊界),背景和邊框的屬性都是不能繼承的。
擴(kuò)展資料
CSS中的樣式覆蓋原則:
規(guī)則一:由于繼承而發(fā)生樣式?jīng)_突時(shí),最近祖先獲勝(最近原則)。
strong分別從body和p中繼承了color屬性,但是由于p在繼承樹(shù)上離strong更近,因此strong中的文字最終繼承p的藍(lán)色。
規(guī)則二:繼承的樣式和直接指定的樣式?jīng)_突時(shí),直接指定的樣式獲勝(最直接原則)。
strong?{color:red;}
那么根據(jù)規(guī)則二,strong中的文字最終顯示為紅色。
規(guī)則三:直接指定的樣式發(fā)生沖突時(shí),樣式權(quán)值高者獲勝。
樣式的權(quán)值取決于樣式的選擇器,權(quán)值定義如下表。
css選擇器?權(quán)值
標(biāo)簽選擇器?1
類選擇器?10
ID選擇器?100
內(nèi)聯(lián)樣式?1000
偽元素(:first-child等)?1
偽類(:link等)?10
可以看到,內(nèi)聯(lián)樣式的權(quán)值ID選擇器類選擇器標(biāo)簽選擇器,除此以外,后代選擇器的權(quán)值為每項(xiàng)權(quán)值之和,比如”#nav?.current?a”的權(quán)值為100?+?10?+?1?=?111。
在css中能夠?qū)崿F(xiàn)換行的代碼有如下幾個(gè):
1、display:block; //將標(biāo)簽改成塊元素,塊元素是單獨(dú)占一行的。
2、clear:both; //清除浮動(dòng)實(shí)現(xiàn)換行。
3、white-space:break; //這個(gè)一般適用在英文文章中的折行。
可以根據(jù)上面的幾個(gè)能實(shí)現(xiàn)換行的樣式,只需要將對(duì)應(yīng)標(biāo)簽的對(duì)應(yīng)屬性刪除就可以了。
方法不少 你需要哪種?
1 當(dāng)你style里的樣式全都不要的時(shí)候 直接removeAttribute style就行
2 你需要保留一部分style的部分樣式 就使用 setAttribute重置style, 就是重寫一次style,留下你需要的樣式 這樣說(shuō)可明白?
問(wèn)題問(wèn)的比較含糊吧,其實(shí)不太能理解是想要整理樣式,還是想要在原有基礎(chǔ)上覆蓋樣式。
======整理樣式=====
在我們寫樣式的時(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è)前端性能分析工具,有些類似于YSlow,但是提供了一些比較個(gè)性且很有用的工具,比如Remove unused CSS:
Page Speed和YSlow一樣依賴Firebug。
【CSS Redundancy Checker】
CSS Redundancy Checker 是一個(gè)免費(fèi)的在線應(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,類似于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)站的樣式寫入一個(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í)候在寫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選擇器指定的樣式 類選擇器指定的樣式 元素類型選擇器指定的樣式所以上例中,#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來(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)單一些。
展開(kāi)全部
再寫一個(gè)優(yōu)先級(jí)更高的沖掉,不同的屬性沖掉的方法不太一樣。比如要去掉邊框就寫border:0;
要沖掉字號(hào)就重寫一下你需要的字號(hào)……
分享文章:css刪除css樣式屬性,css清除默認(rèn)樣式代碼
分享網(wǎng)址:http://m.rwnh.cn/article36/dsdjisg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、網(wǎng)站營(yíng)銷、全網(wǎng)營(yíng)銷推廣、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)