者：vivo 互聯(lián)網前端團隊 - Zhang Jiqi

本文主要講述了CSS中的級聯(lián)層（CSS@layer），討論了級聯(lián)以及級聯(lián)層的創(chuàng)建、嵌套、排序和瀏覽器支持情況。級聯(lián)層可以用于避免樣式沖突，提高代碼可讀性和可維護性。

一、什么是級聯(lián)層(Cascade Layers)？

1.1 級聯(lián)層的官方定義

我們參看Cascading and Inheritance Level 5（13 January 2022） 中6.4節(jié)所述：

級聯(lián)層提供了一種結構化的方式來組織和平衡單個起源中的問題。單個級聯(lián)層內的規(guī)則級聯(lián)在一起，不與層外的樣式規(guī)則交錯。

開發(fā)者可以創(chuàng)建層來表現(xiàn)元素默認值、第三方庫、主題、組件、覆蓋和其他樣式問題，并且能夠以顯式方式重新排序層級，而無需更改每個層內的選擇器或特異性，或依賴源順序來解決跨層的沖突。

單純看官方定義和概括可能比較晦澀，下面我們會結合案例來說清楚。

1.2 級聯(lián)層為了解決什么問題？

簡而言之：級聯(lián)層的出現(xiàn)就是為了使 CSS 開發(fā)者可以更簡單直接地控制級聯(lián)。

我們來假設日常開發(fā)中的一個場景，從場景去理解級聯(lián)層在解決什么問題。

如下圖：

我們原來的'display'文案是紅色，當我們引入了一個第三方組件庫，第三方庫中有以下樣式。

/* 開發(fā)者樣式 */
  .item {
    color: red;
  }
 
/* 第三方庫 */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }

就會導致'display'文案變成綠色。

我們想要將'display'文案的顏色由綠色改成紅色一般的手段是增加選擇器特異性（優(yōu)先級）。比如在開發(fā)頁面中對開發(fā)者樣式進行修改：

 /* 開發(fā)者樣式 */
  #app div.item {
    color: red;
  }
 /* 第三方庫 */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }

或者借助級聯(lián)中出場順序對優(yōu)先級的影響在用戶頁面中重寫

 /* 第三方庫 */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
 /* 開發(fā)者樣式 */
  #app .item {
    color: red;
  }

效果如下：

再舉個例子：

比如有可能第三方組件寫了

a { color: blue; }

那項目開發(fā)中由于引入這個第三方組件 就會導致樣式污染，因為第三方庫的樣式往往都在項目設置的通用樣式比如common.css后加載。

如果后面想在代碼中覆蓋某些屬性，使用高特異性選擇器的語句就可能會導致問題。然后因為有問題就會選擇更高特異性的擇器的語句或使用!important，這會使代碼變得冗長也可能會帶來副作用。低特異性選擇器的語句很容易被后面出現(xiàn)在代碼中的語句覆蓋。在自己的代碼之后加載第三方 CSS 時特別會出現(xiàn)這種問題。

所以級聯(lián)層就是為了解決以上場景出現(xiàn)的，級聯(lián)層在級聯(lián)中的的位置是在內聯(lián)樣式和選擇器特異性之間。當有些css聲明就是設置要低優(yōu)先級且不受選擇器特異性影響那么使用級聯(lián)層再合適不過。

運用級聯(lián)層解決第一個日常開發(fā)場景痛點的css代碼如下：

/* 排序層 */
@layer reset, lib;
/* 通用樣式 */
@layer reset {
  #app .item {
    color: black;
    width: 100px;
    padding: 1em;
  }
}
/* 第三方庫樣式 */
/*我們將第三方庫的樣式全部放到lib層*/
/*這里一般使用@import導入的方式*/
/*為了示例簡單我們簡化了操作*/


@layer lib {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    width: 130px;
  }
}
/* 開發(fā)者樣式 */
.item {
  color: red;
}

為了知道為什么上面的css代碼能解決沖突問題，更好地理解級聯(lián)層的作用，理解一些現(xiàn)象背后的根因，了解級聯(lián)層和級聯(lián)的關系，我們繼續(xù)往下看。

二、理解級聯(lián)層的前提——級聯(lián)(cascade)

2.1 什么是級聯(lián)？

CSS中有兩個重要的基礎規(guī)則，一個是繼承，一個是級聯(lián)。

繼承

指的是類似 color，font-family，font-size，line-height 等屬性父元素設置后，子元素會繼承的特性。

級聯(lián)

可以簡單理解為是CSS 用來解決要應用于元素的具體樣式的算法。也就是基于一些優(yōu)先級排序輸出給給定元素上屬性值一個級聯(lián)值。級聯(lián)值是級聯(lián)的結果。

2.2 當前級聯(lián)的排序標準

我們參看Cascading and Inheritance Level 5（13 January 2022） 中6.1節(jié)，

相比于Cascading and Inheritance Level 4（14 January 2016） 中的定義有明顯變化。

最重要的變化就是增加了級聯(lián)層。由此級聯(lián)排序變成：

1. 起源和重要性（Origin and Importance）
2. 上下文（Context）
3. 樣式屬性（Element-Attached Styles）
4. 層（Layers）
5. 特異性（Specificity）
6. 出場順序（又名源代碼順序）（Order of Appearance）

瀏覽器在確定最終元素樣式呈現(xiàn)的時候，會依據(jù)這些準則按照優(yōu)先權從高到低排序，并且會一個一個的檢查，直到確定最終樣式。

2.3 級聯(lián)起源（Cascading Origins）

2.3.1 三個核心起源

css中每個樣式規(guī)則有三個核心起源，它決定了它進入級聯(lián)的位置，理解起源優(yōu)先級是理解級聯(lián)的關鍵。

• 用戶代理來源（瀏覽器內置樣式）
• 用戶來源（瀏覽器的用戶設置 ）
• 作者來源（Web開發(fā)者）

2.3.2 起源的優(yōu)先級

Css聲明的起源取決于它來自哪里，重要性在于它是否用!important聲明。

各種起源的優(yōu)先級按降序排列：

1. 過渡
2. 重要的用戶代理
3. 重要用戶
4. 重要作者
5. 動畫
6. 普通作者
7. 普通用戶
8. 普通用戶代理

越靠前來源的聲明優(yōu)先級越高。過渡和動畫我們可以暫時忽略。

2.4 熟悉又陌生的 !important

通常作為開發(fā)者，!important會被我們視為一種增加特異性的方法，用以覆蓋內聯(lián)樣式或特異性較高的選擇器。

但是!important設計出來的初衷是作為整體級聯(lián)中的一個特性，來平衡開發(fā)者、用戶設置和瀏覽器內置之間對css優(yōu)先級的影響能力。

默認情況下三者的優(yōu)先級是：作者來源> 用戶來源>用戶代理來源（可以參看上文起源優(yōu)先級中6-8的排序）。但是當css聲明添加!important之后會使它們的優(yōu)先順序顛倒（參看上文起源優(yōu)先級中2-4的排序）。

如果站在瀏覽器和用戶的角度看!important提供了在必要時重獲優(yōu)先級控制權的能力，而非只是簡單的增加特異性。

舉個例子：

瀏覽器默認樣式表包含我們開發(fā)者無法覆蓋的重要樣式。

瀏覽器對具有'hidden'類型的input輸入框設置了默認的展示屬性并且將其聲明為重要。

input[type=hidden i] { display: none !important; }

看下面兩張圖例：

第一張可以看出我們對具有'hidden'類型的input輸入框的展示屬性設置成了顯示并且聲明為重要

第二張是樣式最終計算結果：隱藏

從上面的瀏覽器表現(xiàn)可以看到我們作為開發(fā)者在作者樣式表中設置的規(guī)則沒能覆蓋用戶代理樣式表中的相同規(guī)則。

這驗證了上面說的：在級聯(lián)中!important會顛倒三大核心起源默認優(yōu)先順序。

驗證的過程中還發(fā)現(xiàn)了一個chrome控制臺這邊的bug，看上面的第一張圖例：沒生效的規(guī)則不劃刪除線，生效的反而劃刪除線了。

再看一個官方文檔的例子加強一下理解：

圖片來源：w3.org

font-size的值最終是‘12pt ’。

因為作者樣式表中添加!important的規(guī)則優(yōu)先權高于用戶樣式表中普通規(guī)則。

text-indent的值最終是‘1em’。

因為雖然兩個樣式表都標注了!important，但是標注!important用戶聲明優(yōu)先級大于標注!important作者聲明。

2.5 一張圖帶你理解級聯(lián)

下圖可以幫助我們直觀的理解級聯(lián)以及級聯(lián)層在級聯(lián)中的位置：

圖片來源：css-tricks

我們會發(fā)現(xiàn)平時操作最多的選擇器特異性（selector specificity）只是級聯(lián)中的一小部分。也輕松地理解了為什么內聯(lián)樣式優(yōu)先級天然高。同時我們會發(fā)現(xiàn)!important在級聯(lián)中有特殊地位。他穿插在級聯(lián)規(guī)則的各個階段并能顛倒優(yōu)先級。

三、級聯(lián)層(CSS@layer) 使用探索

3.1 @layer 是什么？

我們來看MDN上的定義：

The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.

也就是說 @layer 這個at-rule（AT規(guī)則） 用于聲明級聯(lián)層（cascade layer），也能用于定義多個級聯(lián)層的優(yōu)先級。

At-rules 是什么？

At-rules是指導 CSS 如何表現(xiàn)的CSS 語句。它們以 at 符號 ' @' ( U+0040 COMMERCIAL AT) 開頭，后跟一個標識符，包括下一個分號 ' ;' ( U+003B SEMICOLON) 或下一個CSS 塊之前的所有內容。

我們開發(fā)常見的at-rule有@charset、@media、@font-face 、@keyframes 等。

3.2 @layer的句法規(guī)則

@layer的句法如下：

@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}

3.3 如何創(chuàng)建級聯(lián)層

可以通過多種方式創(chuàng)建級聯(lián)層。

第一種方法是：創(chuàng)建命名的級聯(lián)層，其中包含該層的 CSS 規(guī)則，如下所示：

@layer green {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}
 
@layer special {
  .item {
    color: rebeccapurple;
  }
}

第二種方法是：創(chuàng)建一個命名的級聯(lián)層而不分配任何樣式。這可以是單層，如下所示：

@layer green;

可以一次定義多個層，如下：

@layer green, special

一次定義多個層有什么好處呢？

因為聲明層的初始順序決定了層的優(yōu)先級。與聲明一樣，如果在多個層中找到聲明，最后定義的層聲明將最終生效。看下面代碼：

@layer green,special;
 
@layer green {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}
@layer special {
  .item {
    color: rebeccapurple;
  }
}

效果如下圖：

special層中item樣式規(guī)則將被應用即使它的特異性低于 green層中的規(guī)則。這是因為一旦層順序定義完成，就會忽略選擇器特異性。

同樣也會忽略出現(xiàn)的順序：

我們聲明層名稱并設置它們的順序后，可以通過重新聲明名稱來將 CSS 規(guī)則添加到圖層。然后將樣式附加到層，并且層順序不會更改。比如如下代碼雖然@layer green重新聲明了并在文件后方但是由于順序一開始已經設置所以字體顏色還是紫色：

@layer green,special;
 
@layer special {
  .item {
    color: rebeccapurple;
  }
}
 
@layer green {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}

效果如下：

忽略選擇器特異性和代碼出現(xiàn)順序可以讓我們創(chuàng)建更簡單的 CSS 選擇器，并使代碼優(yōu)雅，因為不必確保選擇器具有足夠高的特異性來覆蓋其他css規(guī)則，只需要確保它出現(xiàn)在后面的層中。

第三種方法是：創(chuàng)建一個沒有名稱的級聯(lián)層。例如：

@layer {
  .item {
    color: black;
  }
}

這將創(chuàng)建一個匿名級聯(lián)層，該層功能與命名層相同。但是使用匿名層有如下缺點:

1. 可讀性較差：匿名層沒有名稱，會導致樣式表不易閱讀和理解。特別是在大型項目中，可能會出現(xiàn)樣式不斷增加，難以跟蹤和管理的問題。
2. 難以擴展：如果稍后想要更改特定樣式或組合，也會很難找到特定的代碼塊。
3. 不可復用性：匿名層中的樣式不能在其他地方重復使用或引用。這樣會使樣式表更難以管理和維護。

平時我們盡量避免使用匿名層。但當我們是樣式庫的作者，并想將某些css代碼不被使用者修改可以借助匿名層做到這一點。

第四種方法是：使用@import。CSS 原生支持 @import 導入其他 CSS 文件。

@import url(index.css) layer(index);

同時，也支持匿名引入，例如：

@import url(index.css) layer;

我們在使用@import時候需要放在除@charset之外的樣式規(guī)則前，否則無法導入。

可能的第五種方式仍在討論中：通過元素上的屬性。請參閱[css-cascade] Provide an attribute for assigning ato a cascade layer #5853。

3.4 層的嵌套規(guī)則

圖層可以嵌套。例如：

@layer base {
  p { max-width: 70ch; }
}
 
@layer framework {
  @layer base {
    p { margin-block: 0.75em; }
  }
 
  @layer theme {
    p { color: #222; }
  }
}

生成的層可以表示為一棵樹：

1.base

• framework
• base

2.theme

或可以用扁平列表表示

1. base
2. framework.base
3. framework.theme

要將樣式附加到嵌套層，您需要使用以下全名來引用它：

@layer framework {
  @layer default {
     p { margin-block: 0.75em; }
  }
 
  @layer theme {
    p { color: #222; }
  }
}
 
@layer framework.theme {
  /* 這些樣式會被添加到framework層里面的theme層 */
  blockquote { color: rebeccapurple; }
}

看效果：

3.5 層的排序規(guī)則

級聯(lián)層按照它們聲明的順序排序。第一層優(yōu)先級最低，最后一層優(yōu)先級最高。但是，未分層的樣式具有最高優(yōu)先級：

/* 未分層 */a { color: green; }
@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 { a { color: yellow; } }

優(yōu)先級順序如下：

1. 未分層樣式
2. layer-3
3. layer-2
4. layer-1

看下圖示例：

層可以在一個地方被定義圖層（以建立圖層順序），然后在任何地方添加樣式

/* 定義在一個地方 */
@layer my-layer;
/* 其他樣式*/
...
/* 在某個地方添加樣式 */
@layer my-layer { a { color: red; } }

3.6 加上!important之后的排序規(guī)則

/* 未分層 */ a { color: green !important; }
@layer layer-1 { a { color: red !important; } }
@layer layer-2 { a { color: orange !important; } }
@layer layer-3 { a { color: yellow !important; } }

任何加上重要聲明的樣式都以相反的順序應用

優(yōu)先級順序如下：

1. !important layer-1
2. !important layer-2
3. !important layer-3
4. !important 未分層樣式

看下圖示例：

這里我們看到對應規(guī)則在chrome瀏覽器的顯示是正確的。但是在開發(fā)者控制臺中的樣式一欄規(guī)則顯示有問題。應該是chrome瀏覽器開發(fā)者控制臺的bug。

3.7 嵌套層的排序規(guī)則

@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 {
  @layer sub-layer-1 { a { color: yellow; } }
  @layer sub-layer-2 { a { color: green; } }
  /* 未嵌套 */ a { color: blue; }
}
/* 未分層 樣式 */ a { color: black; }

優(yōu)先級順序如下：

1. 未分層 樣式
2. layer-3
3. -layer-3 未嵌套
4. -layer-3 sub-layer-2
5. -layer-3 sub-layer-1
6. layer-2
7. layer-1

3.8 媒體查詢對層排序的影響

以下層順序將取決于匹配的媒體條件：

例如：

@media (min-width: 600px) {
   @layer layout {
     .item {
       font-size: x-large;
     }
   }
 }
 
@media (prefers-color-scheme: dark) {
  @layer theme {
     .item {
        color: red;
     }
   }
}

如果兩個媒體查詢的規(guī)則中匹配一個那么對應的級聯(lián)層生效。如果兩者都匹配，那么圖層順序將為layout, theme都生效。如果兩個都不匹配則不定義層。下圖是兩者都匹配的場景。

四、現(xiàn)在就能使用級聯(lián)層嗎？

4.1 目前瀏覽器支持程度

圖片來源：developer.mozilla.org

目前所有現(xiàn)代瀏覽器均已經支持 @layer 規(guī)則。所有瀏覽器廠商都支持的特性未來一定比較實用。

4.2 W3C 鼓勵可以作為日常使用

SS 的標準化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C層疊樣式列表小組以及獨立CSS專家組成。W3C 本身并不制定標準，而是作為一個論壇式的平臺，接收來自小組成員的提交，并通過會議來商討制定標準，所有的提交以及討論都是公開透明的，可以在 W3C 網站上看到會議的記錄，可以簡單分為4個大階段：

• 工作草案( WD )
• 候選人推薦( CR )
• 提議的建議( PR )
• W3C 推薦( REC )

下圖可以幫助理解：

圖片來源：w3.org

W3C 通過狀態(tài)碼表示規(guī)范的成熟度。成熟度從低到高排序如下圖。

圖片來源：w3.org

再看下圖：包含layer概念的標準討論已經到達CR階段。

圖片來源：w3.org

W3C 鼓勵從 CR階段的標準 開始可以作為日常使用。

五、總結

最后，我們回到通過級聯(lián)層如何解決“引入了一個第三方組件庫導致樣式覆蓋“的問題上。

css代碼如下：

/* 排序層 */
@layer reset, lib;
/* 通用樣式 */
@layer reset {
  #app .item {
    color: black;
    width: 100px;
    padding: 1em;
  }
}
/* 第三方庫樣式 */
/*我們將第三方庫的樣式全部放到lib層，這里一般使用@import導入的方式，為了示例簡單我們簡化了操作*/
@layer lib {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    width: 130px;
  }
}
/* 開發(fā)者樣式 */
.item {
  color: red;
}

我們將第三方庫的樣式全部放到lib層，將需要重置的一些樣式放到reset層，自己開發(fā)的樣式不放入層中（當然你也可以放入到一層然后排序在最后）。由此我們實現(xiàn)了樣式的分層解決了第三方組件庫導致樣式覆蓋的問題，而且做到開發(fā)者樣式簡單不冗長。

效果如下：

級聯(lián)層（CSS@layer）已經歷概念提出到到瀏覽器全面支持的階段。也許在不久的將來大家都會普遍使用它，期望本文能給大家?guī)硪欢◣椭?/span>

參考資料：

1. CSS Cascading and Inheritance Level 5
2. A Complete Guide to CSS Cascade Layers
3. The Future of CSS: Cascade Layers (CSS @layer)
4. CSS必學基礎：理解CSS中的級聯(lián)規(guī)則
5. 詳解日后定會大規(guī)模使用的CSS @layer 規(guī)則
6. W3C Process Document
7. Cascade Layers Explainer

作者:Zhang Jiqi

來源:微信公眾號:vivo互聯(lián)網技術

出處:https://mp.weixin.qq.com/s/4M-RvnTq8rJuKDC3VZOONQ

網百科全書-使用 HTML，CSS，JS， jQuery，php，mySQL 建立網站，克隆eBay，AirPods，YouTube，Tesla網頁

通過我們推薦的參考學習書籍你將會學到的職場競爭能力：

• 能使用HTML來編寫網頁上各種各樣的對象或者元素
• 能夠使用指定不同的元素或者對象用CSS或CSS3去美化他們，讓網站看起來更光彩奪目！
• 能使用Javascript，jQuery去制作具有各種功能的網頁程序或互動效果
• 能使用Bootstrap的框架去制作美觀，復雜的網頁程序，并適應不同的設備，包括各種平板和手機等
• 能使用Wordpress無需編寫任何一段代碼去構建自己的網上商店或論壇
• 能使用PHP和mySQL去編寫功能強大的服務器端程序，響應用戶的請求，實現(xiàn)服務器端與客戶端的互動！

通過這些參考學習書籍的學習，我們將會會學習10種語言和工具，包括HTML， HTML5， CSS， CSS3， JavaScript， jQuery， jQueryUI， Bootstrap， Wordpress， PHP， MySQL， etc。 我們可以從零基礎開始，建立多個網站實例，其中包括eBay，YouTube，AirPods，Tesla等網頁。 我們將歷經一場非常有趣，又具有挑戰(zhàn)性的旅程，讓我們一起從零到專業(yè)學習建立屬于自己的網站。

使用 HTML，CSS，JS， jQuery，php，mySQL建立網站的推薦的參考學習書籍

下面列出的參考學習書籍可以幫助任何沒有程序開發(fā)經驗的人更輕松地學習與IT相關的語言和工具。

這些學習書籍中有許多實際的例子以及一些比較完整的操作示例，幫助學生在短時間內全面地理解整個學科的知識，同時讓新知識應用到實際的操作和工作中。

《學習編碼：學習HTML，CSS和JavaScript，并構建網站，應用程序和游戲》

學習編碼 - 使用 HTML、CSS 和 JavaScript 構建網站、應用和游戲。

你準備好開始你的程序員之旅了嗎？坐下來，把自己綁起來，為美妙的學習體驗做好準備。本書將帶您完成易于遵循的分步課程，并為您提供編寫第一個程序所需的所有指導，制作一個有用的網站，讓您快速訪問所有您喜歡的在線地方，制作一個測驗應用程序，巧妙地適合您的手機，最后制作一個成熟的基于體系的平臺游戲。一流！

本書旨在讓您能夠編寫所有內容以在瀏覽器中運行，并在PC或Mac上本地編程。事實上，根據(jù)設計，HTML，CSS和JavaScript可以在任何瀏覽器中運行，并在幾乎任何文本編輯器中編碼。
那你還等什么？
你需要什么？
您需要的一切都可以在Windows和Mac上免費獲得。 更好的是，您需要的是內置的。

書中的每個練習都為您準備下一個練習，隨著您的進步教您新技能。你不需要以前的經驗，因為一切都被分解和徹底解釋。此外，您可以從支持網站下載所需的所有代碼、圖像、背景圖像、精靈、音效、音樂和任何其他元素。您需要的所有細節(jié)在每次練習中都貫穿全書。
最重要的是，如果你想學習編碼，這本書將為您提供很棒的工具，讓你快速編碼！

《學習足夠的 HTML、CSS 和布局來變得專業(yè)：現(xiàn)代網站創(chuàng)建和模板系統(tǒng)簡介》

這本書有您所需要知道的一切，沒有您不知道的，開始創(chuàng)建和部署網站；

要設計、構建和部署現(xiàn)代網站，您需要三項核心技能：編寫和編輯 HTML 的能力，使用 CSS 控制頁面設計的能力，以及創(chuàng)建為用戶提供良好服務的高效 Web 布局。但是你不需要學習關于HTML，CSS和網頁布局的“一切”，只需要如何有效地使用它們來解決實際問題。在《學習足夠的HTML、CSS和布局到專業(yè)》一書中，專家開發(fā)人員Lee Donahoe和著名講師Michael Hartl教授完成工作所需的特定概念、技能和方法。
即使您從未創(chuàng)建過網頁，作者也會幫助您快速建立技術復雜性并掌握成功所需的知識。專注的練習可以幫助您內化重要的事情，而不會將時間浪費在專業(yè)人士不關心的細節(jié)上。很快，你就會像生來就知道這些東西一樣——你會突然變得非常專業(yè)。
通過本書學習了解足夠多的信息。 。 。

• 立即將簡單但真實的網站部署到實時的Web中
• 向網站添加高級樣式，包括 CSS Flexbox 和 CSS Grid
• 安裝和配置 Jekyll，一個靜態(tài)站點生成器
• 模板系統(tǒng)和編程語言入門
• 掌握網頁設計的關鍵布局原則
• 使用自定義 URL 和電子郵件地址注冊和配置自定義域
• 通過 Google 的 G Suite 在您的網域中接收電子郵件
• 設置分析以更好地了解您網站的訪問者
• 使所有這些技術很好地協(xié)同工作

Michael Hartl的“Learn Enough”系列包括書籍和視頻課程，這些課程側重于每個主題中最重要的部分，因此您不必學習所有內容即可開始 - 您只需要學習足夠的知識即可成為專業(yè)并自己解決技術問題。

《使用 HTML5 和 CSS 進行響應式網頁設計：使用最新的 HTML5 和 CSS 技術構建面向未來的響應式網站，第 4 版》

利用 HTML5 和 CSS 的最新功能，創(chuàng)建可在手機、平板電腦和臺式機上完美運行的單一 UI，以及介于兩者之間的所有內容 - 現(xiàn)在具有彩色圖像！

本書的主要特點

• 了解什么是響應式網頁設計及其對現(xiàn)代網頁開發(fā)的重要性
• 探索響應式網頁設計和CSS的最新發(fā)展，包括網格和子網格的布局，CSS級聯(lián)層，廣色域顏色和CSS函數(shù)
• 掌握新 HTML 元素和屬性的用途和優(yōu)勢

本書的內容簡介

《Responsive Web Design with HTML5 and CSS， Fourth Edition》是關于響應式網頁設計的最新HTML5和CSS技術的最全面和最暢銷的書籍之一的完全改進和擴展版本。它強調實用的應用，教你構建大多數(shù)現(xiàn)實生活網站所需的方法，每章都有可下載應用的示例。

本版本書籍以作者友好且易于遵循的風格編寫，涵蓋了響應式網頁設計的所有最新發(fā)展和改進，包括更好的可訪問性、可變字體和字體加載的方法，以及最新的顏色處理工具進入瀏覽器。您可以享受前沿功能的覆蓋范圍，例如 CSS 層、容器查詢、嵌套和子網格。

本書最后探討了作者對前端開發(fā)的一些獨家技巧和方法。

在本書結束時，您不僅會全面了解響應式網頁設計以及最新的HTML5和CSS的可能性，而且還會了解如何最好地實現(xiàn)每種技術。作為完整指南通讀，或作為每個主題重點章節(jié)的參考。

你將學到什么

• 使用媒體查詢，包括檢測觸摸/鼠標和顏色首選項
• 學習 HTML 語義和創(chuàng)作可訪問標記
• 根據(jù)屏幕尺寸或分辨率促進不同的圖像
• 編寫最新的顏色函數(shù)，混合顏色，并選擇最容易訪問的顏色
• 在設計中使用 SVG 提供與分辨率無關的圖像
• 創(chuàng)建和使用 CSS 自定義屬性，利用新的 CSS 函數(shù)，包括“clamp”、“min”和“max”
• 向 HTML 表單添加驗證和界面元素
• 使用濾鏡、陰影和動畫增強界面元素

這本書是為誰寫的

您是需要提高前端技能的全棧或后端開發(fā)人員嗎？也許您在前端工作，并且需要對所有現(xiàn)代HTML和CSS提供的明確概述？也許你已經做了一些網站建設，但你需要深入了解響應式網頁設計以及如何實現(xiàn)它們？那么這就是給你的書！要利用本書，你需要的只是對HTML和CSS的工作理解。不需要JavaScript知識。

本書的目錄

1. 響應式網頁設計的基本要素
2. 編寫 HTML 標記
3. 媒體查詢和容器查詢
4. 流體布局和彈性框
5. 使用 CSS 網格布局
6. CSS 選擇器、排版等
7. CSS 顏色
8. CSS的驚人美學
9. 響應式圖像
10. .SVG
11. 過渡、變換和動畫
12. 自定義屬性和 CSS 函數(shù)
13. 形式
14. 尖端的 CSS 功能
15. Bonus 技術和Parting 建議

《響應式網頁設計與HTML 5和CSS》

Minnick的《RESPONSIVE WEB DESIGN WITH HTML 5和CSS，第9版》為您提供最新的工具，逐步教您如何設計專業(yè)質量的網站來吸引和留住客戶。這本書籍包含專業(yè)人士的最佳實踐和提示，為您提供了 HTML、CSS 和響應式網頁設計的堅實基礎。它向您展示如何創(chuàng)建一個自動適應手機、平板電腦、筆記本電腦和臺式機設備以及大型顯示器的網站。您將學習如何編寫網頁代碼以從移動設備撥打電話、嵌入地圖、使用自定義字體、創(chuàng)建快捷導航菜單、集成社交媒體以促進業(yè)務等。此外，您將使用流行的Web框架Bootstrap來創(chuàng)建網頁。

《學習網頁設計 - HTML5：實用手冊》

這本電子書是通過練習HTML來學習網頁設計的實用指南。

• 它涵蓋了從基礎到高級的 HTML。
• 它是關于做什么和如何做的詳細指南。
• 在練習HTML的過程中，您將被指導如何使用HTML元素構建網頁。提供了示例網頁布局根據(jù)布局，您將被教導逐步設計網頁。提供代碼片段用于實踐目的。還提供了代碼片段的輸出以供參考。通過代碼片段進行練習將為您提供豐富的實踐經驗
• 首先，您將學習為桌面設計網頁
• 然后，您將學習如何對已經設計的網頁實現(xiàn)響應功能。

當您完成這本電子書的學習時，您將掌握HTML和網頁設計技術！
這是自學材料！

任何有興趣學習HTML和網頁設計的人都可以閱讀這本電子書。

快樂學習、快樂編碼！

《使用HTML5和CSS3進行網站設計和開發(fā)》

結合理論和實踐，《HTML5和CSS3的網站設計和開發(fā)》既針對想要設計第一個網站的初學者，也針對想要鞏固其技術技能的經驗豐富的開發(fā)人員。

本書討論了HTML5和CSS3的理論方面，包括：HTML元素，語義容器，語義文本格式，多媒體元素，表單，表格，CSS樣式的定義和集成，文本格式以及容器和框樣式。本書還包括一個實用部分，介紹了創(chuàng)建網站的過程，以及應用的關鍵規(guī)則，以便不僅實現(xiàn)項目成功，而且滿足用戶需求。

本書通過大量示例說明，包括更正的實際工作，根據(jù)從簡單的HTML5頁面設計到創(chuàng)建專業(yè)網站的進化邏輯進行結構化。

《jQuery食譜：找到所有jQuery問題的現(xiàn)成解決方案》

快速發(fā)現(xiàn)常見問題的解決方案、您可以遵循的最佳實踐以及 jQuery 提供的所有功能。本書使用問題解決方案，從開發(fā)人員在使用jQuery時通常面臨的小的初始問題開始，然后逐漸深入探索更復雜的問題。解決方案包括插圖和清晰、簡潔的代碼說明。

您將學習有效地遍歷和操作 DOM，了解如何使用數(shù)組、迭代、事件模型以及實現(xiàn)動畫和視覺效果。您將探索如何使用插件和 CSS。使用本書和jQuery，您的網站將更加動態(tài)和生動。這個完全更新的第二版教你現(xiàn)代jQuery技術，包括如何遍歷和操作DOM，理解事件模型，實現(xiàn)動畫和使用滑動效果。

《jQuery Recipes，第二版》向您展示了如何避免浪費開發(fā)時間并解決您可能面臨的問題。這是一個寶貴的參考學習書籍，可以在你進行jQuery開發(fā)時留在你身邊。立即開始使用《 jQuery Rerecies 》這本書，使你成為 jQuery 專業(yè)人士。

通過本書你將學到什么

• 了解 jQuery 的基礎知識以及該庫的工作原理
• 了解如何遍歷和操作 DOM 以滿足您自己的需求
• 探索 jQuery UI 技術，包括手風琴、對話框、滑塊、日期選擇器和自動完成
• 使用流行的插件和CSS來自定義和定制您的開發(fā)

本書適合誰學習：
這本書非常適合希望學習 jQuery 并在開發(fā)過程中擁有方便的 jQuery 參考的新手或中級開發(fā)人員。

《學習PHP，MySQL和JavaScript：使用jQuery，CSS和HTML5》

使用開源技術和 Web 標準的強大組合構建交互式數(shù)據(jù)驅動型網站，即使您只有基本的 HTML 知識。通過這個流行的實踐指南，您將在當今的核心技術的幫助下處理動態(tài)Web編程：PHP，MySQL，JavaScript，CSS，HTML5和現(xiàn)成函數(shù)的jQuery庫，以顯著增強您的項目。

您不僅可以快速了解這些各種技術的最新更新，包括增強的MySQL和PHP安全功能，還可以學習如何優(yōu)化您的網站以在手機和平板電腦上使用。

分別探索每種技術，學習如何將它們一起使用，并在此過程中學習有價值的 Web 編程實踐。在本書的最后，您將把所有內容放在一起，使用AMPPS或任何其他流行的開發(fā)堆棧來構建一個適用于桌面和移動瀏覽器的全功能社交網站。您將深入學習PHP，以及面向對象編程的基礎知識。

• 探索 MySQL，從數(shù)據(jù)庫結構到復雜查詢
• 使用 MySQLi 擴展，PHP 改進的 MySQL 接口
• 創(chuàng)建動態(tài)的PHP網頁，為用戶量身定制自己的網站
• 管理 Cookie 和會話，并保持高級別的安全性
• 掌握JavaScript語言并使用jQuery和jQuery移動庫對其進行增強
• 使用 Ajax 調用進行后臺瀏覽器服務器通信
• 獲得CSS2和CSS3技能，以專業(yè)地設計您的網頁樣式
• 實現(xiàn)強大的 HTML5 功能，包括地理位置、音頻、視頻和畫布
• 將您的網站重新格式化為移動 Web 應用程序

《Bootstrap 5 指南：使用 Sass 和 JavaScript 自定義和擴展 Bootstrap 5，以創(chuàng)建獨特的網站設計》

通過釋放 Bootstrap 5 的全部潛力并創(chuàng)建高效的 UI， 使您的網站脫穎而出

本書的主要特點

• 了解如何使用 Sass 自定義 Bootstrap 5 的所有部分，包括使用實用程序 API
• 僅使用 Bootstrap 5 創(chuàng)建具有 Sass 自定義和交互功能的獨特網站
• 掌握與 Sass、CSS、JavaScript 和源代碼優(yōu)化相關的高級 Bootstrap 5 主題

書籍簡介

Bootstrap 是世界上最受歡迎和易于使用的前端 UI 工具包之一，用于構建響應式網站，但很少有人知道如何充分利用其廣泛的組件、實用程序、JavaScript 插件和其他功能。《Missing Bootstrap 5 Guide》 將幫助您使用 Sass 自定義 Bootstrap 5，以實現(xiàn)從人群中脫穎而出的布局，使您能夠創(chuàng)建看起來不像是用 Bootstrap 創(chuàng)建的獨特內容。

有了這個實用的 Bootstrap 定制指南，使用 Bootstrap 的開發(fā)人員將能夠利用強大的定制技術來創(chuàng)建具有獨特設計和獨家功能的網站。您將看到如何通過使用CSS，Sass和JavaScript的高級功能來自定義您的網站，從而快速輕松地開發(fā)具有視覺吸引力的網站。從學習如何使用 Sass 創(chuàng)建 Bootstrap 5 視覺樣式開始，您將了解如何自定義它以滿足您的需求，同時實現(xiàn)您想要的網站外觀。然后，您將使用這些知識使用Bootstrap 5的大部分組件以及Sass和JavaScript的自定義來創(chuàng)建網站。最后，您將探索與 Sass、CSS、JavaScript 和源代碼優(yōu)化相關的各種高級 Bootstrap 5 主題。

在本書結束時，您將能夠使用 Bootstrap 5 的強大功能自行設計和構建現(xiàn)代、迷人且獨特的網站。

通過本書你將學到什么：

• 確定使用 Bootstrap 5 時最重要的 Sass 功能
• 了解 Bootstrap 5 中使用的 Sass 代碼的結構和內容
• 探索自定義選項、顏色、布局、內容、表單、組件、幫助程序和實用程序
• 了解如何自定義、擴展和改進網站以使其獨一無二
• 發(fā)現(xiàn)使用 Bootstrap 5 的 CSS 自定義屬性的不同方法
• 掌握 Bootstrap 5 源代碼優(yōu)化

這本書是為誰寫的：

本書面向熟悉HTML并具有Bootstrap經驗的UI設計人員和開發(fā)人員。前端和使用Bootstrap的后端開發(fā)人員，他們不知道如何編寫CSS代碼，但對HTML有扎實的掌握，也會發(fā)現(xiàn)這本書很有用。有經驗的默認引導程序文件用戶可以使用本書來了解有關自定義和其他高級功能的所有信息。

本書的目錄：

1. 為什么以及如何自定義Bootstrap
2. 使用和編譯 Sass
3. 下載和探索Bootstrap 5 Sass 文件
4. Bootstrap 5全局選項和顏色
5. 自定義各種Bootstrap 5元素
6. 了解和使用 Bootstrap 5 實用程序 API
7. 使用默認Bootstrap 5 元素創(chuàng)建網站
8. 使用 Bootstrap 5 變量、實用程序 API 和 Sass 自定義網站
9. 使用 JavaScript 通過交互功能改進網站
10. 將 Bootstrap 5 與高級 Sass 和 CSS 功能結合使用
11. 將 Bootstrap 5 與高級 JavaScript 功能結合使用
12. 優(yōu)化編譯的Bootstrap 5 CSS 和 JavaScript 代碼