CSS層疊樣式表的層疊是什么意思


層疊的意思就是“繼承”、“權重”、“覆蓋”,通過良好的層級命名更好的實現效果,更少的代碼,更多的功能,下面為大家詳細介紹下,感興趣的朋友不要錯過
 
解答一:
層疊指的是樣式的優先級,當產生沖突時以優先級高的為准。
1. 開發者樣式>讀者樣式>瀏覽器樣式(除非使用!important標記 )
2. id選擇符>(偽)類選擇符>元素選擇符
3. 權重相同時取后面定義的樣式
以下是一段經典的html,三個類名分別為模塊、標題和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html頁面都可以由這種結構嵌套或者累加而成。
解答二:
CSS層疊是指CSS樣式在針對同一元素配置同一屬性時,依據層疊規則(權重)來處理沖突,選擇應用權重高的CSS選擇器所指定的屬性,一般也被描 述為權重高的覆蓋權重低的,因此也稱作層疊。每個CSS選擇器都會有一個權重(行內1000,id100,class10,tag1、可以這樣認為),當 兩個選擇器同時配置同一元素的同一屬性時(比如一個設置color:red,另一個color:black),就會產生沖突,而解決沖突的方案就是CSS 選擇器的權重,權重高的來覆蓋權重低的。
另外,繼承的屬性是權重重最輕的,會被上面的四個定義方式覆蓋。
CSS語義化其實更多地是指HTML的語義化。 比如下面的一個代碼我們這樣寫:
 

復制代碼
代碼如下:

<div class="box">
<div class="h2">這是區塊標題</div>
<div class="bd">這是區塊內容</div>
<div>

但是語義化的寫法更能使得 robot識別網頁的結構,下面是語義化的寫法:

復制代碼
代碼如下:

<section>
<h2>這是區塊標題</h2>
<p>這是區塊內容</p>
</section>

對 於robot來說,它能夠識別section(區塊)、h2(二級標題)、p(文字段落),但是不能識別出div所包含的內容,因為div這個標記本身是 無語義的(必要時通過class或id屬性來賦予語義,但是這是次優選擇)。 而HTML5新增的article、header、footer、nav、section等標簽就是豐富了HTML原生的語義標簽,在很大程度上滿足了 HTML編寫的需要。
解答三:
我的理解是,層疊指的是上級標簽的樣式會自動繼承到其所有下級標簽,如針對<body>設置的標簽選擇器所設的字體樣式會自動應用到<body>下的<p>中,除非<p>重寫了相關樣式將其覆蓋。
CSS語義化的命名是指用易於理解的名稱對html標簽附加的class或id命名,如對於頁面上方的<div>,可將其id設為header;頁面下方的<div>設為footer,可以增強CSS的可維護性。
基本上層疊的意思就是“繼承”、“權重”、“覆蓋”,通過良好的層級命名更好的實現效果,更少的代碼,更多的功能


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM