標籤:

層疊樣式表的層疊是什麼意思?

請舉個符合 CSS 語義化的例子。


層疊指的是樣式的優先順序,當產生衝突時以優先順序高的為準。

1. 開發者樣式&>讀者樣式&>瀏覽器樣式(除非使用!important標記 )

2. id選擇符&>(偽)類選擇符&>元素選擇符

3. 權重相同時取後面定義的樣式

以下是一段經典的html,三個類名分別為模塊、標題和正文。

&

&&

&&

&

大部分html頁面都可以由這種結構嵌套或者累加而成。


層疊就是瀏覽器對多個樣式來源進行疊加,最終確定結果的過程.

css之所以有「層疊」的概念,是因為有多個樣式來源。

其中css樣式來源有5個,分別是內聯樣式(&),內部樣式(&&),

外部樣式(寫在css文件中的樣式),瀏覽器用戶自定義樣式,瀏覽器默認樣式;

按照其來源優先順序為內聯樣式&>內部樣式&>外部樣式&>瀏覽器用戶自定義樣式&>瀏覽器默認樣式

按照選擇器優先順序為id &>class&>元素選擇器

如果有important,important優先順序最高。


關於這個問題,H?kon Wium Lie的博士論文有一段詳細的描述。Lie是CSS的創始者,他的博士論文不僅詳細的闡述了CSS,而且對了解Web的歷史非常有幫助。

摘錄如下:

Cascading Style Sheets

Three days before Netscape announced their new browser, this author published the first CSS proposal (named Cascading HTML style sheets – a proposal) [Lie 1994]
on the web. In addition to describing fonts, colors and layout of
documents – which several proposals had done previously – CSS introduced
new functionality to account for the differences in publishing imposed
by the web. The concept of cascading allowed both authors and users to influence the presentation of a document:

The proposed scheme supplies the brower with an ordered list
(cascade) of style sheets. The user supplies the initial sheet which
may request total control of the presentation, but – more likely – hands
most of the influence over to the style sheets referenced in the
incoming document.

Negotiating between the needs and wishes of readers and authors was
one of the main ambitions of CSS. If successful, authors would get their
fair share of influence over the presentation and would not feel
compelled to use presentational HTML and other tricks. Readers, on the
other hand, would be served documents in a form in which they could
choose between accepting the author"s suggested presentation or specify
their own.

In many cases there would be no conflict between the author and the
reader. Neither would want to specify the presentation of the document.
In such cases, it is important for the browser to have a default style sheet
that describes a default presentation of HTML documents. CSS,
therefore, defines three possible sources for style sheets: authors,
readers, and browsers. CSS is able to combine style sheets from these
sources to form the presentation of a document. The process of combining
several style sheets – and resolving conflicts if they occur – is known
as cascading.


CSS 之層疊樣式的優先順序


1、權重 2、繼承

總之通過良好的層級命名更好的實現效果,更少的代碼,更多的功能


貌似面試遇到這個問題,之前也沒想過這個問題,但CSS比較重要的一塊就是權重了,所以被我蒙對了...CSS(Cascading Style Sheets)中Cascading 被譯為層疊,也可譯為級聯,串聯。然後,我們就可以用日常生活中的級聯、串聯概念來理解了!


優先順序高的覆蓋優先順序低的樣式


我的理解是,層疊指的是?上級標籤的樣式會自動繼承到其所有下級標籤,如針對&設置的標籤選擇器所設的字體樣式會自動應用到&下的&

中,除非&

重寫了相關樣式將其覆蓋。

CSS語義化的命名是指用易於理解的名稱對html標籤附加的class或id命名,如對於頁面上方的&,可將其id設為header;頁面下方的&設為footer,可以增強CSS的可維護性。


我的理解是她只是樣式表的名稱而已,沒有特殊的含義,就是區別於傳統table布局的css樣式表


推薦閱讀:

什麼是 CSS 架構?作為 CSS 架構師,每天的任務是什麼呢?
新手關於前端開發的幾個問題?
怎樣用CSS製作這樣的效果?
對inline-block元素作用負margin為什麼其移動範圍會受到限制?

TAG:CSS |