前端-干貨分享：更牛逼的CSS管理方法-層(CSS Layers)

用 CSS 最困難的部分之一是處理CSS的權重值，它可以決定到底哪條規則會最終被應用，尤其是如果你想在 Bootstrap 這樣的框架中覆蓋其已有樣式，更加顯得麻煩。不過隨著 CSS 層的引入，這一切都發生了變化。這個新功能允許您創建自己的自定義 CSS 層，這是有史以來第一次確定所有 CSS 代碼權重的層次結構。在本文中，我將剖析這對您意味著什么，它是如何工作的，以及您今天如何開始使用它。

什么是層(Layers)

創建您自己的自定義圖層是 CSS 的新功能，但圖層從一開始就存在于 CSS 中。 CSS 中有 3 個不同的層來管理所有樣式的工作方式。

瀏覽器（也稱為用戶代理）樣式 - user agent style
用戶樣式 - User Styles
作者樣式 - Author Styles

瀏覽器樣式是應用于瀏覽器的默認樣式。這就是為什么 Chrome 和 Safari 中的按鈕看起來不同的原因。在瀏覽器層中找到的樣式在瀏覽器之間是不同的，并且給每個瀏覽器一個獨特的外觀。

下一層是用戶樣式，這并不是您真正需要擔心的事情。這些通常是用戶可以編寫并注入瀏覽器的自定義樣式，但瀏覽器不再真正支持這些樣式。用戶可能會更改一些瀏覽器設置，這些設置會向該圖層添加樣式，但在大多數情況下，可以完全忽略該層。

最后，我們來到作者層。這是您最熟悉的層，因為您編寫的每一段 CSS 代碼都屬于這一層。

這些層分開的原因是因為它可以很容易地覆蓋瀏覽器樣式和用戶樣式中定義的代碼，因為層定義了自己的層次結構，完全忽略了權重的影響。

這 3 個 CSS 層是有序的（瀏覽器樣式、用戶樣式、然后是作者樣式），后面層中的每個樣式都將覆蓋前一層的任何樣式。這意味著即使瀏覽器樣式定義了一個超級特定的選擇器，例如#button.btn.super-specific，并且您的作者樣式定義了一個超級通用的選擇器，例如按鈕，您的作者樣式仍然會覆蓋瀏覽器樣式。

這實際上已經是您可能一直在使用而沒有意識到的東西。

* {
  box-sizing: border-box;
}

上面的選擇器沒有權重，因為 * 符號對權重沒有貢獻。這意味著例如使用 p 作為選擇器的 p 標簽的瀏覽器樣式在技術上比 * 選擇器更具體，權重更高。但是，這一切并不重要，因為作者樣式位于比瀏覽器樣式層晚的層中，因此您的代碼將始終覆蓋瀏覽器樣式。

理解這一點至關重要，因為使用這個新的圖層 API，您可以在作者圖層中創建自己的圖層，從而更輕松地處理特定性。

如何創建你自己的層

下面來看個例子：

很明顯，這是我們正常理解的CSS， ID設置的顏色權重更高，所以按鈕顯示為紅色。讓我們使用@layer給它們加上兩個層，看看是什么效果：

按鈕變成藍色。為什么會這樣？

我們給兩條CSS分別建立了base和utilities層，很明顯，后面創建的層的樣式覆蓋了前面層的樣式，盡管前面層的樣式有更高的權重。這就是層的默認工作原理。當然層的順序是可以指定的，

@layer utilities, base;

@layer utilities, base;

您需要做的就是編寫@layer 關鍵字，后跟以逗號分隔的層列表。這將按從左到右的順序定義所有層，其中列出的第一層到最后一層的權重是依次增加的。然后，您可以稍后使用普通的@layer 語法向每個層添加代碼，而不必擔心定義層的順序，因為它們都在這一行中定義。需要注意的是，這行代碼必須在定義任何層之前出現，所以我通常將它作為我的 CSS 文件中的第一行。如上圖，通過指定層的順序，我們讓base層應用在utilities層之后，所以按鈕又顯示為紅色。

導入層

上面這兩種方式都是導入bootstrap框架的CSS，并且把他們放在framework層中，這樣你如果想要覆蓋它已有的樣式，只需要新建一個自己的層，放置在framework層后面就行。像下面這樣。

匿名層

匿名層不常用，但它寫在后面可以覆蓋其他層的樣式，像下面可以把按鈕設為橙色。

不在層里的樣式

不在層里的樣式會有更高的權重，下面這個列表會讓你看得更清楚覆蓋是怎么發生的

層還可以重疊設置，不過很少用。具體的用法可以查閱相關文檔。

瀏覽器支持

自從IE死了以后，所有主流瀏覽器都已支持這一特性。大家請放心使用。

用 CSS 最困難的部分之一是處理特異性。如果您嘗試從像 Bootstrap 這樣的框架覆蓋樣式，這一點尤其明顯，但是隨著 CSS 層的引入，這一切都發生了變化。這個新功能允許您創建自己的自定義 CSS 層，這是有史以來第一次確定所有 CSS 代碼的特異性層次結構。在本文中，我將剖析這對您意味著什么，它是如何工作的，以及您今天如何開始使用它。

什么是圖層？

創建自己的自定義圖層的能力對于 CSS 來說是新功能，但圖層從一開始就在 CSS 中存在。CSS 中有 3 個不同的層來管理所有樣式的工作方式。

瀏覽器（也稱為用戶代理）樣式
用戶風格
作者風格

下一層是用戶樣式，這并不是您真正需要擔心的事情。這些通常是用戶可以編寫并注入瀏覽器的自定義樣式，但瀏覽器不再真正支持這些樣式。用戶可能會更改一些瀏覽器設置，這些設置會向該圖層添加樣式，但在大多數情況下，可以完全忽略該圖層。

最后，我們來到作者層。這是您最熟悉的層，因為您編寫的每一段 CSS 代碼都屬于這一層

層疊的規則

層疊的規則是按照“樣式表來源”、“選擇器優先級”、“源碼順序”來考慮的，下圖展示了一個判定流程：

但是頁面一樣復雜，組件一多，樣式管理起來還是很費勁，很多時候還是得用自己不想用的一些「優先級」權重高的選擇器去覆寫樣式，比如ID或者 !important，所以CSS新出一個 @layer 特性，能讓樣式得到更好的管理和控制。

如何創建自己的圖層

大家用過ps的話，很好理解 @layer ，它就像ps里的圖層一樣，可以對ps圖層進行排序，上面的圖層有更高的優先級，@layer 的一個重要作用，就是可以提前定義好“級聯層”的優先級：

@layer one {
  #button.super-specific-selector {
    color: red;
  }
}
@layer two {
  button {
    color: green;
  }
}

正如你在上面看到的，我們只是使用@layer關鍵字來創建一個自定義層，給它任何我們想要的名稱。圖層two的樣式會覆蓋圖層one的樣式。one無論其特殊性如何。

瀏覽器樣式
用戶風格
作者風格

如您所見，我們在作者樣式中創建了兩個新層，我們可以使用它們來組織我們的代碼并使使用特定性更容易。

附加到圖層

如何將代碼添加到現有層。

@layer one {
  #button.super-specific-selector {
    color: red;
  }
}
@layer two {
  button {
    color: green;
  }
}
@layer one {
  .another-style {
    color: blue;
  }
}

在這個例子中你可以看到我已經定義one了兩次圖層。這完全沒問題，實際上是在創建圖層后向圖層添加更多樣式的方式。這樣做不會影響層的順序，因為層的順序是由創建層的第一段代碼決定的。這意味著我們one在 CSS 文件頂部的第一個圖層實例將創建圖層，因此本示例中的圖層順序與上一個示例中的相同。唯一的區別是我們能夠在圖層one創建后通過@layer再次使用關鍵字來添加額外的樣式。等同如下

@layer one {
  #button.super-specific-selector {
    color: red;
  }
  .another-style {
    color: blue;
  }
}
@layer two {
  button {
    color: green;
  }
}

定義層順序

這種在創建圖層后向圖層添加樣式的功能在定義圖層順序時非常有用。想象一下，您有以下幾層

@layer base,application;
@layer application {
    em {
        color: red;
    }
}
@layer base {
    .item em {
        color: green;
    }
}

通過@layer base,application;按從左到右的順序定義所有層，其中列出的base是最不具體的，最后指定的層application是最具體的。也是最先生效的。然后，您可以稍后使用正常@layer語法將代碼添加到每個層，而不必擔心定義層的順序，因為它們都在這一行中定義。需要注意的是，這行代碼必須在定義任何層之前出現，所以我通常將它作為我的 CSS 文件中的第一行。

導入圖層

很多時候，當你使用一個框架時，你可能會像這樣將它導入到你的 CSS 中。

@import url("your.css");

如果要將所有這些導入的代碼添加到特定層，只需添加layer(layer-name)到導入語句的末尾即可。

@import url("your.css") layer(layerName);

這會將所有樣式添加your.css到layerName圖層。但是，使用導入的一件事是它們的性能不是很好，因為首先您需要下載包含該@import語句的樣式表，然后瀏覽器才能下載導入的文件。解決此問題的一種方法是在 HTML 中使用style標簽。

<!-- link tag to stylesheet that define your layers -->
<link rel="stylesheet" href="styles.css">
<style>
  @import url("your.css") layer(layerName);
</style>

通過像這樣編寫代碼，您可以避免所有性能問題，@import但仍然可以獲得直接導入圖層的所有好處

匿名層

匿名層指的是不聲明layer名地級聯層，它在級聯層中的優先級，取決于layer聲明次序：

@layer A {
    body {
        background-color: green;
    }
}
@layer {
    body {
        background-color: red;
    }
}
@layer B {
    body {
        background-color: bisque;
    }
}

優先級從高到低為：B > 匿名 > A，所以最后生效的body背景色為bisque。這并不是我覺得太有用的東西，但如果你真的需要將少量的 CSS 代碼分成一個層，這可能會很有用。

嵌套層

我認為不太有用的另一個功能是能夠將圖層相互嵌套

@layer outer {
  @layer inner {
    .button {
      color: red;
    }
  }
}
@layer outer.inner {
  .another {
    color: green;
  }
}

通過使用上面的.語法或嵌套語法，您可以在其他層內創建層。這是您可能不會經常使用的東西，因為大多數應用程序只有幾層，但如果您有一個非常復雜或大型樣式系統，這可能會很有用。

重要的層概念

這涵蓋了創建圖層的基礎知識，但是您需要了解一些關于圖層的概念才能充分利用圖層。

非分層樣式更先生效

到目前為止，我們只處理了所有樣式都在圖層中的 CSS。當您的樣式沒有圖層時，事情會變得有點復雜。

body {
    background-color: blue;
}
@layer A {
    body {
        background-color: red;
        color: black;
    }
}
@layer B {
    body {
        color: blue;
        background-color: green;
    }
}

在這個例子中，我們有兩個個A和B圖層，然后是一個沒有圖層的樣式。當您的代碼不在任何層中時，它總是被認為比分層代碼更具體。這意味著我們的有一個藍色的背景。為了使這一點更容易理解，我喜歡將不在任何層中的代碼視為在所有其他層之后定義的自己的層中。

瀏覽器樣式
用戶風格
作者風格

A layer
B layer
非分層樣式

這有助于我可視化我的代碼，因此我可以理解為什么非分層代碼總是覆蓋層內的代碼。

！improtant

該!important關鍵字使使用特異性變得困難，并且對于圖層來說也沒有什么不同。該!important關鍵字的工作方式與普通圖層完全相反。如果您使用!important關鍵字定義樣式，它將覆蓋該層之后定義的層中的任何樣式。

@layer one {
  button {
    color: red !important;
  }
}
@layer two {
  button {
    color: green;
  }
}

在上面的例子中，按鈕文本將是紅色的，因為我們之前!important定義了顏色。但是，如果我們嘗試添加!important到 layertwo以覆蓋!important來自圖層one，它實際上不會更改按鈕顏色。

@layer one {
  button {
    color: red !important;
  }
}
@layer two {
  button {
    color: green !important;
  }
}

這樣做的原因是因為它!important的工作方式與普通圖層相反。由于 layerone是在 layer 之前定義的，所以 layer中的two所有!important樣式one都會覆蓋 layer 中的任何樣式，包括!important樣式two。這意味著我們的按鈕仍然是紅色的。

如果我再加一個沒有圖層!important的普通樣式，按鈕又是什么顏色的呢？

@layer one {
  button {
    color: red !important;
  }
}
@layer two {
  button {
    color: green !important;
  }
}
button{
    color: blue !important;
}

根據非分層樣式更先生效，那自然按鈕會是藍色的。

瀏覽器支持

對于每一個很酷的 CSS 功能，你總是需要考慮瀏覽器的支持，但幸運的是，對我們來說，圖層得到了很好的支持，并且很快就會得到完美的支持。目前，layer有84.31% 的支持率，但這主要是因為這個功能最近才在最新版本的瀏覽器中推出。大多數現代瀏覽器在撰寫本文時不到一個月前就推出了此功能，這意味著我們目前只是在等待用戶將他們的瀏覽器更新到最新版本以支持此功能。

結論

總之，@layer 還是蠻好用的，希望能盡快在業務代碼里面用到吧。

.標簽語義化

提到標簽，很多剛入門前端開發的人，肯定都會很納悶，這么多HTML標簽我如何記住呢？我又應該根據什么依據去正確使用它呢？其實這樣的問題，我剛開始和大家一樣苦悶，但是在我學習Web頁面開發的過程中，然后不斷的積累，不斷的總結，發現要想記住HTML標簽以及怎樣更好的去使用這些標簽，需要做到以下三點：

第一點：不要死記硬背，沒意義，只需要記住常用的哪幾個足矣。

第二點：根據內容選擇使用HTML標簽，什么意思呢？見下文分解。

第三點：遵循W3C的規范。

首先，第一點咱們就不用說，不讓死記硬背，就是要多寫頁面，多敲代碼，久而久之孰能生巧，巧能生花，慢慢的你就能記住這些標簽了，而且在開發頁面的過程中，你們會發現，咱們最常用的也就是那么幾個而已。

其次，第二點根據內容選擇使用HTML標簽，這一點非常關鍵，因為你掌握了這一點，你能很好地去使用HTML標簽，并且能讓頁面變得很優質，這也會提高你網頁被搜索引擎收錄。

最后，也就是第三點，這一點自然不用懷疑，如果要想讓頁面更好的在不同的瀏覽器中呈現出一致的效果，那么必須遵循W3C的規范。

說了這么多，只是一些學習需要注意的問題，下面才是真正解開怎樣去使用和記住標簽這個謎團的方法。

我們在使用標簽的過程中，大家會發現類似的標簽，比如標題標簽（h1-h6）、p（段落標簽）、a（超鏈接標簽）以及圖片標簽（img）等，通過這些標簽的名稱，咱們是不是不難理解吧，很直觀的就知道這些標簽該怎么，用于何處。而這些名稱的含義就是我們所說的標簽語義化。隨著智能手機的出來，移動Web都是通過H5去開發頁面，而H5中的HTML標簽就比之前版本的HTML標簽更加具有語義化。

那么什么是標簽語義化呢？所謂的標簽語義化，指的就是標簽所代表的含義。咱們可以通過標簽的含義，正確地去使用它。

標簽語義化的作用：

通過使用語義化標簽，更能精準地將其把內容呈現出來。
通過使用語義化標簽，讓頁面結構更加的清晰，方便代碼的閱讀和維護。
能讓瀏覽器或網絡爬蟲更好地解析，從而更好地分析和抓取網頁中的內容。
使用語義化標簽還能讓搜索引擎得到更好的優化。

如下圖所示，通過使用語義化標簽和沒使用任何標簽，就能直觀感受到語義化標簽的好處。

普通的文本和使用語義化標簽后的效果對比圖

那么如何去判斷一個頁面中，語義化是否良好呢？很簡單，直接扒掉CSS這層漂亮的衣服，當我們把CSS去掉后，如果頁面中的結構依然組織有序，并且有良好的可讀性，那么它就是非常良好的。

如何去使用這些標簽呢？首先根據內容確定語義化的標簽，其次再根據呈現需求，使用CSS樣式。因此HTML標簽并非通過死記硬背，而是通過在使用的過程中，利用HTML標簽的語義化去記憶。如下圖所示，通過使用語義化標簽，瞬間就能把普通的文本，以更清晰的結構呈現出來。

使用語義化的普通文本，變得更為結構清晰

2.常用標簽分類匯總

通常我們常見的標簽有標題標簽、段落標簽、水平線標簽、換行標簽以及div和span標簽，這些標簽又被統稱為排版標簽。

在開發中，排版標簽主要是和CSS搭配使用，主要是用于顯示網頁的整體結構，也是網頁布局中常用的標簽。下面我一一了解一下。

排版標簽：

【1】標題標簽（h1-h6）

縮寫來源：標題標簽的英文單詞是head，因此它使用它的縮寫h來表示。
語義：標題標簽主要是用于突顯標題內容，它是h1-h6（分為1級標題、2級標題、3級標題......6級標題），級別依次遞減。級別越小，標題就會越小。
語法格式如下：

標題標簽的使用

呈現的效果如下：

呈現的效果

一句話總結：使用了標題標簽的文字會加粗，會根據級別顯示文字的大小，并且一行只能放一個標題。

【2】段落標簽（p）

縮寫來源：p標簽的英文單詞是paragraph，表示段落的意思。
語義：p標簽可以把html文檔分割為若干段落。在網頁中要想把文字以段落的形式呈現，并且有條不紊的，那么段落就是必備的標簽。
語法格式如下：

p標簽語法格式

【3】水平線標簽（hr）

縮寫來源：hr的英文單詞是horizontal，表示橫線的意思。
語義：它表示分隔線，用于將文字內容分隔開，讓文檔結構看起來更加清晰，層次分明。當然在網頁中除了使用分隔線（hr）標簽來實現，還可以通過圖片插入以及CSS樣式來實現，只不過使用hr標簽是最簡單的方式。提示：CSS樣式是頁面中的重點，此處主要是介紹HTML，因此暫不做詳細說明。
語法格式：<hr />。
標簽特點：它是一個單標簽，hr標簽默認是以水平線的樣式進行顯示。

【4】換行標簽（br）

縮寫來源：br的英文單詞是break，打斷、換行的意思。
語義：表示換行的意思。在html中，一個段落的文字會從左到右依次排列顯示，直到瀏覽器窗口的最右端，才會自動換行。如果我們在實際開發中碰到需要將文本內容強制換行顯示的，此時就可以使用換行標簽實現。
語法格式：<br />。
標簽特點：它也是一個單標簽。
示例：將以下內容通過br標簽強制換行

文本

呈現效果：

使用br標簽后的效果

【5】div和span標簽

縮寫來源：div的英文是division，表示分割、分區的意思。span沒有縮寫，表示跨度、跨距和范圍的意思。
語義：div和span標簽，沒有任何語言，主要是用于網頁布局使用。
語法格式：<div>這是一個div盒子</div> <span>這是一個span盒子</span>
div和span的區別：div標簽，主要是用于布局，在沒有使用其它干預的情況下，一行只能放一個div。而span標簽，也是用來布局，在沒有任何其它的干預的情況下，一行上可以放很多span標簽。此處的效果，大家可以根據語法，自行在實現查看一下對比效果。

最后給大家來一個完美的總結：

排版標簽的匯總

難道這就完了嗎？咱們的標簽就只有這些常用的嗎？那當然不是，咱們接下來再看我們的文本格式化標簽。

文本格式化標簽

文本格式化標簽的作用：通常文本格式化標簽主要用于網頁中文字樣式的設置，比如字體加粗、斜體或下劃線等效果，當然后期也會通過CSS樣式來實現，會更加完美。

常見的文本格式化標簽如下：

文本格式化標簽

它們分別的區別：

b和strong：b標簽只是加粗，strong除了加粗，還具有強調的意思，更具語義化。
i和em：i只是讓文本顯示斜體的效果，而em在斜體的效果上加強了語義。
s和del：s只是讓文本顯示刪除線，而得了不僅顯示刪除線，還加強了語義。
u和ins：u只是添加了下劃線，而ins不僅顯示了下劃線，還加強了語義。

我么網頁中除了排版標簽、文本格式化標簽，當然還少不了圖片標簽（img），通過圖片的展示，會讓整個頁面更加的生動形象。那么下面再來看一下這個標簽吧。

圖片標簽（img）

縮寫來源：img的英文單詞是image，表示圖像、影像的意思。
語義：用于顯示圖片內容。
語法格式：<img src='圖像url' />，在這個的語法中，我們發現img標簽使用了src屬性，這個屬性主要是用于指定圖像的文件路徑，也是img的必須屬性。
img標簽常見屬性如下所示：

img標簽屬性

標簽特點：img標簽主要是用于在網頁中插入圖像，它是一個單標簽。
知識點擴展：通過img標簽，我們會發現，html標簽除了自身外，它們還具有一些屬性，這些屬性，我們稱為標簽屬性，通過標簽屬性可以設置標簽的一些外在特性。標簽屬性的基本語法格式：<標簽名屬性1="值1" 屬性2="值2" ...>內容 </標簽名>。

標簽屬性的特點：

一個標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。
屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
任何標簽的屬性都有默認值，省略該屬性則使用默認值。
標簽的屬性采用的是鍵值對的格式key="value"的形式。

圖片標簽屬性使用

鏈接標簽

縮寫來源：a標簽的英文單詞是anchor，表示錨、鐵錨的意思。
語義：表示超文本鏈接。
語法格式：<a href ="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>。
常見的屬性：

a標簽的常見屬性

提示：

比如添加作為外部鏈接，需要添加外部地址。
內部鏈接，就是頁面直接內部相互鏈接，因此只需要使用名稱即可，比如

內部鏈接地址

如果沒有確定鏈接目標，通常使用"#"表示暫時空鏈接。
除了可以創建文本鏈接，還可以給網頁中的元素，如圖像、表格、音頻、視頻都可以添加超鏈接。

注釋標簽

注釋標簽：用于在HTML文檔中添加一些便于閱讀和理解，但又不需要顯示在頁面中的文字說明，此時就需要使用注釋標簽。它是HTML中的一種特殊標簽，它不會在瀏覽器中顯示，但是會在源代碼中查看到。
語法格式：

注釋標簽

提示：注釋通常是給咱們開發者看的，程序是不會執行這個代碼的。

好了，各位小伙伴，今天我就給大家分享到這兒了，希望我給大家總結的內容，能幫到正在瀏覽我這篇內容的前端開發者，也希望你們有所收獲。如果喜歡的，可以點擊關注，會繼續給大家分享更多的內容。

在線咨詢

上一篇：超過40萬網站在使用的Web端HTML5和Flash播放器
下一篇：Html、Css、Javascript 實現「櫻花飄落」、「雪花飄落」特效

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商