萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS層疊樣式表的層疊是什麼意思

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的可維護性。

基本上層疊的意思就是“繼承”、“權重”、“覆蓋”,通過良好的層級命名更好的實現效果,更少的代碼,更多的功能

copyright © 萬盛學電腦網 all rights reserved