CSS

CSS，或 Cascading Style Sheets （層疊樣式表或級聯樣式表），用來給瀏覽器添加樣式，

引入 CSS 的方式 Import

行內 Inline Style

使用 style 屬性來引入 CSS

<h1 style="color:blue;"></h1>

嵌入 Embedded Style

在 <head> 標簽里使用 <style> 標簽

<head>
  <style>
  	h1 {
    	color: blue;
	  }
	</style>
</head>

外聯 External Style Sheets

把 HTML 代碼和 CSS 代碼分別存盤到兩個檔案中，在 <head> 標簽中通過 <link> 標簽引入 CSS

<link rel="型別" href="https://www.cnblogs.com/risejl/archive/2022/09/19/位置" type="text/css">

CSS 規則的組成

selector {
	property: value;  /* declaration */
}

其中 selector 為選擇器，declaration 為宣告，property 為宣告中的屬性，value 為宣告的屬性值，

選擇器 Selector

每個元素的樣式規則都應該有開始和結束大括號（{ 和 }），還需要確保元素的樣式定義在開始和結束樣式標簽之間，并且每條樣式規則都以分號;結束，

通用選擇器 Universal Selector

使用 * 來選擇所有元素，稱為通用選擇器或通配符，

* {
  color: blue;
}

元素/型別選擇器 Element/Type Selector

元素選擇器或者型別選擇器()選擇 HTML 元素，

h2 {
  color: green;
}

類選擇器 Class Selector

.blue-text {
  color: blue;
}
<h2 >

CSS 的 class 具有可重用性，可應用于各種 HTML 元素，

注意:

在 CSS style 元素里，class 名以一個句點開頭，在 HTML 元素的 class 屬性中，class 名的開頭沒有 .，
不能用數字開頭命名類或者 ID，
即使某個 HTML 元素有多個類，CSS 選擇器只是其中一個，仍然會匹配該元素，

記得在一個元素上可以同時應用多個 class，使用空格來分隔不同 class 即可，例如：

<img >

ID 選擇器 ID Selector

#red {
  color: red;
}

每一個 HTML 元素都有一個 id 屬性，

使用 id 的好處：通過 id 選擇器來改變單個元素的樣式，

根據規范，id 屬性應是唯一的，盡管瀏覽器并非必須執行這條規范，但這是廣泛認可的最佳實踐，

<h2 id="red"></h2>

注意在 style 標簽里，宣告 class 的時候必須在名字前插入 . 符號，同樣，在宣告 id 的時候，也必須在名字前插入 # 符號，

如果瀏覽器遇到多個 id，css 規則依然會生效，但是，任何具有 id 屬性的元素應該具有唯一的值，

屬性選擇器 Attribute Selector

使用 [attr=value] 屬性選擇器來修改樣式，這個選擇器使用特定的屬性值來匹配和設定元素樣式，

屬性修改器可以和正則運算式配合，

例如，下面的代碼會改變所有 type 為 radio 的元素的外邊距，

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

也可以匹配一個屬性，不針對屬性值，

[type] {
  margin: 20px 0px 20px 0px;
}

加上 s 來區分大小寫，i 忽略大小寫：

[data-type='primary' s] {
  color: red;
}

分組選擇器 Grouping Selector

可以用逗號分割多個選擇器：

strong,em,.my-class,[lang] {
  color: red;
}

偽類選擇器 Pseudo Class

偽類

偽類是可以添加到選擇器上的關鍵字，用來選擇特定狀態的元素，

偽類使用單個冒號：:

a:hover {
  color: blue;
}
/* 這條規則的作用是：當游標放在超鏈接上時，超鏈接顯示藍色 */

a:visited {
  color: pink;
}
/* 這條規則的作用是：當訪問超連接后，超鏈接顯示粉色 */

p:nth-child(even) {
  color: red;
}
/* 這條規則的作用是：選擇所有的偶數段落，把文本顏色設定為紅色 */

偽元素

偽元素使用兩個冒號：::，

::before 創建一個偽元素，它是所選元素的第一個子元素； ::after 創建一個偽元素，它是所選元素的最后一個子元素，

::before 和 ::after 必須配合 content 來使用，這個屬性通常用來給元素添加內容諸如圖片或者文字，盡管有時 ::before 和 ::after 是用來實作形狀而非文字，但 content 屬性仍然是必需的，此時它的值可以是空字串，

例：

.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}

在上面的例子里，class 為 heart元素的 ::before 偽類添加了一個黃色的長方形，長方形的高和寬分別為 50px 和 70px，這個矩形有圓角，因為它的 border-radius為 25%，它的位置是絕對位置，位于離元素左邊和頂部分別是 5px、50px 的位置，

不過，偽元素不限于插入內容，您還可以使用它們來定位元素的特定部分，例如，假設您有一個串列，則可以使用 ::marker 為串列中的每個專案符號點（或數字）設定樣式

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

您還可以使用 ::selection 為用戶突出顯示的內容設定樣式，

::selection {
  background: black;
  color: white;
}

復雜選擇器

復雜選擇器實作更精準的定位，

只能向下級聯，選擇子元素，而不能向上選擇父元素，

連結符 Combinator

連結符位于兩個選擇器之間，

后代連結符 Descendant combinator

這種連結符用于定位子元素，使用空格，

后代連結符是遞回的，

p strong {
  color: blue;
}

/* 這段代碼只匹配 p 元素的 strong 子元素 */

下一同級/兄弟連結符 Next sibling combinator

使用 + 選擇在同一個父元素下，緊跟在另一元素之后的元素，

p + strong {
  color: blue;
}

后繼兄弟連結符 Subsequent-sibling combinator

使用 ~ 選擇在同一父元素下的，某個元素后的元素，

可以配合使用 :checked 偽類創造一個純 CSS switch 元素，

:checked ~ .toggle__decor {
  background: rebeccapureple;
}

孩子選擇器 Child combinator

孩子選擇器或直接后代選擇器使用 > 限制連結符僅僅應用于直接后代上，

組合選擇器 Compound selector

可以把選擇器組合：

a.my-class {
  color: red;
}

/* 選擇具有 my-class 類的超鏈接 */

級聯 Cascade

級聯是一種解決當多個 CSS 規則應用于一個 HTML 元素產生沖突時的演算法，

級聯由 4 部分組成：

位置和次序：CSS 規則出現的次序
優先級（Specificity）：決定哪個 CSS 選擇器有最強的匹配
來源（Origin）：確定 CSS 的來源，例如：瀏覽器風格，瀏覽器擴展或者自己撰寫的 CSS
重要性：有些 CSS 規則比其他要更加優先，例如：!important，

位置和次序

對于多個相同形式的選擇器規則，最后一個宣告的生效，因為瀏覽器是從上往下讀取的，
在 HTML 中多個 link 標簽鏈接 CSS 檔案，最后一個 link 標簽生效，style 標簽同理，
如果 style 標簽宣告在 link 標簽之前，那么 link 標簽生效，
行內 style 屬性會覆寫除了 !important 之外所有的規則，
同一選擇器下的多條同種規則，最后一條規則生效，

優先級

使用權重或者評分機制計算哪個選擇器具有最高的優先性，

同一元素的類選擇器比單純的型別選擇器更優先，即使型別選擇器在類選擇器下面宣告，
id 選擇器的優先級更高，會覆寫其他直接應用的規則，所以一般不使用 id 選擇器，

優先級計算是累積的，每種選擇器都有特定的分數，把分數疊加就是優先級的分數，

CSS 選擇器應該盡可能簡單，

優先級評分：

通用選擇器 * ：0 分
元素或者偽元素選擇器：1 分
類，偽類，屬性選擇器：10 分
- :not() 偽類本身不加分，但是傳入的引數加分，例如：:not(.my-class) 為 10 分
ID 選擇器：100 分
- 注意是 ID 選擇器而不是帶有 id 的屬性選擇器
行內 style 屬性：1000 分
!important：10000 分，這是單個條目能得到的最大分

分數相同的情況下，會應用最下面的 CSS 規則，

來源

頁面的 CSS 并不僅僅來源于程式員撰寫的 CSS 代碼，

來源的優先級如下(從最低到最高優先級)：

用戶代理為基礎的樣式：瀏覽器默認應用到 HTML 的樣式
本地用戶樣式：作業系統層級，例如，基礎字體大小，或者減弱動態效果等；也有可能是瀏覽器擴展添加的樣式
撰寫的 CSS：自己撰寫的 CSS
使用了 !important
本地用戶樣式使用 !important
用戶代理使用 !important

重要性

重要性的優先級(從最低到最高優先級)：

常規規則，例如字體大小，背景，文本顏色
animation 規則
!important 規則
transition 規則

影片和轉換的優先級很高，因為它們的預期效果就是改變視覺，

樣式繼承 Inheritance

根元素 html 不會繼承任何樣式，因為它是第一個元素，

每一個 HTML 頁面都含有 body 元素，可以在 body 元素上使用 CSS 樣式，

設定 body 元素樣式的方法跟設定其他 HTML 元素樣式的方式一樣，并且其他元素也會繼承 body 中所設定的樣式，

繼承是自上而下的，

并不是所有的 CSS 屬性都是可以繼承的，

每一個 HTML 元素的每個 CSS 屬性都有初始值，初始值并不會繼承而是作為級聯失敗時的默認屬性，

使用 inherit 關鍵字使任何屬性繼承父元素的值，

.my-component strong {
  font-weight: inherit;
}

使用 initial 關鍵字恢復屬性值為默認值，

aside strong {
  font-weight: initial;
}

當某屬性是可繼承時，unset 關鍵字和 inherit 等同；反之和 initial 等同，因為記住哪些 CSS 屬性是可繼承的很難，所以 unset 可以發揮作用，

如果又給 p 加入了一些屬性，為了避免手動調整特定的 unset，可以添加 all 屬性，保證所有值都是不繼承的，

/* p 的全域樣式 */
p { 
  margin: 2em;
  color: goldenrod;
}

/* 重設 aside 中 p 的樣式 */
aside p {
  margin: unset;
  color: unset;
}

/* 重設 aside 中 p 的所有樣式 */
aside p {
  margin: unset;
  color: unset;
  all: unset;
}

樣式的優先級 Prioritize

! important > 行內 > id 選擇器 > 多個 class 中宣告在最后的樣式(CSS) > class 選擇器 > 繼承（body）

注：

HTML 元素里應用的 class 的先后順序無關緊要，
但是，在 <style> 標簽里面宣告的 class 順序十分重要，之后的宣告會覆寫之前的宣告，第二個宣告的優先級始終高于第一個宣告，因為：瀏覽器是由上到下讀取 CSS的，這就意味著，如果發生沖突，瀏覽器將會應用最后宣告的樣式，它會檢查 CSS 宣告順序，而不是 HTML 使用順序！
id 選擇器無論在 style 標簽的任何位置宣告，都會覆寫 class 宣告的樣式，
使用 CSS 庫， CSS 庫中的樣式也許會意外覆寫原有 CSS 樣式，可以使用 !important 保證 CSS 樣式不受影響
```
color: red !important;
```

單位 Unit

px 值，即像素，像素是一個長度單位，它告訴瀏覽器應該如何調整元素的大小和位置，

單位長度的型別可以分成 2 種：相對和絕對，

有些單位長度選項是相對視窗大小來改變值的，這種設定符合回應式網頁設計的原則，

絕對單位 Absolute Unit

絕對單位與長度的物理單位相關，例如，in 和 mm 分別代表著英寸和毫米，絕對長度單位會接近螢屏上的實際測量值，不過不同螢屏的解析度會存在差異，這就可能會造成誤差，

相對單位 Relative Unit

相對單位長度，比如 em 和 rem，它們的實際值會依賴其他長度的值而決定，比如 em 的大小基于元素字體的大小，如果使用它來設定 font-size 值，它的值會跟隨父元素的 font-size 值來改變，

顏色 Color

表示

預指定顏色

預指定顏色（predefined color）

color: blue;

black
silver
gray
white
maroon
red
purple
fuchsia
green
lime
olive
yellow
navy
blue
teal
aqua

16 進制編碼 Hex

十六進制編碼，簡稱 hex，

Hexadecimals（或 hex）基于 16 位數字，它包括 16 種不同字符，0-9 的符號代表 0 到 9 的值， A、B、C、D、E、F 代表 10 至 15 的值，在 CSS 里面，使用 6 個十六進制的數字來代表顏色，每兩個數字控制一種顏色，分別是紅（R）、綠（G）、藍（B），例如，#000000 代表黑色，同時也是最小的值，

紅色的 #FF0000 十六進制編碼可以縮寫成 #F00，在這種縮寫形式里，三個數字分別代表著紅（R）、綠（G）、藍（B）三原色，

不能混用縮寫和全稱，

color: #000000;
color: #F00 /* 縮寫 */
color: #F000 /* error */

RGB

RGB 值只需要指定每種顏色的亮度大小，數值范圍從 0 到 255；或者用百分制表示，

黑色是(0,0,0)，白色是(255,255,255)，

RGB 后加入 \ 表示透明度，

RGB 與 HEX 表示是等價的，

color: rgb(0,0,0)

color: rgb(0%,0%,0%)

color: rgb(0 0 0 / 0.5)

RGBA

rgba 代表：
r = red 紅色
g = green 綠色
b = blue 藍色
a = alpha 透明度

RGB 值可以取在 0 到 255 之間， alpha 值可取在 0 到 1 之間，其中 0 代表完全透明，1 代表完全不透明；也可以取十六進制的值，

rgba() 在需要設定顏色透明度時十分有用，可以做出一些很漂亮的半透明效果，

background-color: rgba(4,4,4,0.1)

background-color: #000000BF

注意：rgb() 和 hsl() 函式的逗號被取消了，因為新的顏色函式，例如 lab() 和 lch() 都是使用空格作為分隔符，但是為了向下兼容，可以繼續使用逗號，

HSL

色相、飽和度、亮度 Hue、Saturation、Lightness

顏色具有多種特性，包括色相、飽和度和亮度， CSS3 引入了 hsl()做為顏色的描述方式，

色相是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等，以顏色光譜為例，光譜左邊從紅色開始，移動到中間的綠色，一直到右邊的藍色，色相值就是沿著這條線的取值，在 hsl() 里面，色相用色環來代替光譜，色相值就是色環里面的顏色對應的從 0 到 360 度的角度值，

飽和度 是指色彩的純度，也就是顏色里灰色的占比，飽和度越高則灰色占比越少，色彩也就越純；反之則完全是灰色，飽和度的取值范圍是表示灰色所占百分比的 0 至 100，

亮度決定顏色的明暗程度，也就是顏色里白色或者黑色的占比，其中，100% 的亮度表示純白色， 0% 的亮度則表示純黑色；而 50% 的亮度就表示在色相中選取的顏色，

下面是一些使用 hsl() 描述顏色的例子，顏色都為滿飽和度，中等亮度:

顏色	HSL
紅	hsl(0, 100%, 50%)
黃	hsl(60, 100%, 50%)
綠	hsl(120, 100%, 50%)
藍綠	hsl(180, 100%, 50%)
藍	hsl(240, 100%, 50%)
品紅	hsl(300, 100%, 50%)

color: hsl(0,100%,50%);
color: hsl(.5turn 40% 60%);
color: hsl(2rad 50% 50%);
color: hsl(0 0% 0% / 20%)

HSLA

HSLA 之于 HSL 類似于 RGBA 和 RGB，

互補色 Complementary Color

色環是一個近色相鄰、異色相離的圓環，當兩個顏色恰好在色環的兩端時，這兩個顏色就互為補色，兩個互為補色的顏色會在混合后變成灰色，然而，補色搭配能形成強烈的視覺對比效果，

例子：

紅色（#FF0000）和藍綠色 (#00FFFF)
綠色（#00FF00）和品紅色（#FF00FF）
藍色（#0000FF）和黃色（#FFFF00）

二次色 & 三次色 Secondary color & Tertiary color

電腦顯示幕和各類螢屏都是基于顏色疊加的模型：將紅（R）、綠（G）、藍（B）三原色的色光以不同的比例相加，就可以產生各種色彩光，這在現代色彩理論中叫作三原色光模式（RGB Color Model），

紅色（R）、綠色（G）和藍色（B）叫作三原色，如果把兩種原色相加，就可以產生二次色：藍綠（G+B）、品紅（R+B）和黃色（R+G），這些二次色恰好是在合成它們時未使用的原色的補色，即在色環中位于兩端，例如，品紅色是紅色和藍色相加產生，它是綠色的補色，

三次色是由原色和二次色相加產生的顏色，例如，在 RGB 顏色模型中，紅色（原色）和黃色（二次色）相加產生橙色（三次色），將這六種顏色中相鄰的顏色相加，便產生了十二色色環，

文本顏色 Text Color

color: 顏色

背景顏色 Background Color

background-color: 顏色

顏色關鍵字

CSS 共有 148 種顏色關鍵字，用純英語表示，

所有的關鍵字是大小寫敏感的，但是很多系統顏色是首字母大寫的，這是為了區分兩者，

也有幾種特殊關鍵字：

transparent 是全透明的顏色，是背景顏色的默認值
currentColor 是 color 屬性背景關系的動態計算值，例如：文本顏色為紅色，把邊框顏色設定為 currentColor ，那么邊框顏色也是紅色，

字體 Font

字體大小 Font Size

font-size: 30px;

字體族名 Font Family

font-family: sans-serif;

引入 Google 字體

除了使用系統提供的默認字體以外，也可以使用自定義字體，Google 字體庫是一個免費的 Web 字體庫，只需要在 CSS 里設定字體的 URL 即可使用，

要引入 Google Font，需要從 Google Fonts 上復制字體的 URL，并粘貼到 HTML 里面，

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

font-family: FAMILY_NAME, GENERIC_NAME;

字體名區分大小寫，并且如果字體名含有空格，則在宣告時需要用引號包起來，例如，使用 "Open Sans" 字體需要添加引號，而 Lobster 則不需要，

字體降級 Degrade

所有瀏覽器都有幾種默認字體，包括 monospace、serif 和 sans-serif，

在字體不可用的時候，可以告訴瀏覽器通過“降級”去使用其他字體，

如果想把一個元素的字體設定成 Helvetica，但當 Helvetica 不可用時，降級使用 sans-serif 字體，那么可以這樣寫：

p {
  font-family: Helvetica, sans-serif;
}

通用字體名不區分大小寫，同時，也不需要使用引號，因為它們是 CSS 中的關鍵字，

元素寬度 Width

width: 20px;

width 屬性來指定元素的寬度，屬性值可以是相對單位（比如 em），絕對單位（比如 px），或者包含塊（父元素）寬度的百分比，

元素高度 Height

height: 20px;

height 屬性來指定元素的高度，屬性值可以是相對單位（比如 em），絕對單位（比如 px），或者包含塊（父元素）寬度的百分比，

每個 HTML 元素所占有的矩形空間由這三個重要的屬性來控制：內邊距 padding、外邊距 margin 、邊框 border，

方框模型 / 盒子模型

CSS 顯示的所有物件都是方框，

內容和大小

默認情況下，內容會影響方框的大小，

可以通過外部尺寸（extrinsic sizing）來控制方框的大小；或者，使用內部尺寸（intrinsic sizing），讓瀏覽器根據內容大小做決定，

如果給 HTML 元素規定了寬度，就是使用了外部尺寸，它會控制子內容的大小，可以添加的內容也有限制，如果超過了這個限制，內容就會溢位方框邊界，

防止溢位的一種方法是取消設定 width，或者可以把寬度設定為 min-content ，也就是使用內部寬度，內部寬度會把方框寬度調整為內容的最小寬度，

當發生溢位時，通過 overflow 管理元素處理溢位的方式，

方框模型的區域

content-box 內容框：內容所在區域，可以控制父級元素的大小，通常是最容易發生變化的區域
padding-box 填充框：位于內容框的周圍，方框的內部，是 padding 屬性創建的空間，方框的背景在填充框內可見，如果使用 overflow: auto 或者 overflow: scroll ，那么滾動條也會占用該空間，
border-box 邊框：位于填充框周圍，是 border 創建的范圍，邊框是方框的邊界，也是可以直觀看到的界限，
margin-box 邊距框：位于邊框的周圍，是 margin 創建的范圍，outline 和 shadow-box 也會占據該空間，邊距框不會影響邊框的大小，

檔案流：行內元素和塊級元素

HTML 元素的位置被稱為“檔案流（document flow）”，

通過 display 的值為 block 或 inline , 判斷行內元素和塊級元素，

塊級元素有著其父元素的全部水平寬度，以及其內容的實際高度，塊級元素會占據新的一行空間，

行內元素有邊距塊，但是其他元素視而不見，使用行內-塊級元素可以使解決該問題，同時依然表現為行內元素，

默認情況下，塊級元素會填充可用的行內空間，而行內元素和行內-塊級元素（inline-block）的寬度和高度只會和內容一樣大，

box-sizing 屬性決定了如何計算方框的大小，默認為 box-sizing: content-box，為其值時，設定寬度和高度會應用到內容框中，如果隨后設定 padding 和 border，則會將這些值增加到內容框的大小，

例如：

.mybox {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

默認的盒子大小是內容框，所以框的寬度是 200 + 2 * 10 + 2 * 20px = 260px，

也可以修改為：box-sizing: border-box，此時把總寬度應用到邊框，內容框為 200px，

邊框 Border

CSS 邊框具有 style、color、width、radius 屬性，分別代表邊框的種類、顏色、寬度、圓角半徑，

除像素外，也可以使用百分比來指定 border-radius 的值，

border-color: red;
border-width: 5px;
border-style: solid;
border-radius: 10px;
border-radius: 50%;

內邊距 Padding

內邊距 padding 用來控制元素內容與 border 之間的空隙大小，

/* 四個方向(單個屬性值) padding */
padding: 50px;
/* 四個方向(多個屬性值) padding */
/* 方向依次是 上 右 下 左 */
padding: 50px 20px 20px 50px 
/* 各個方向 padding */
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;

外邊距 Margin

外邊距 margin 用來控制元素的 border 與其他元素之間的 border 距離，把元素的 margin 設定為負值，元素會變得占用更多空間，

/* 四個方向(單個屬性值) margin */
margin: 50px;
/* 四個方向(多個屬性值) margin */
/* 方向依次是 上 右 下 左 */
margin: 50px 20px 20px 50px 
/* 各個方向 margin */
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
/* 負值 */
margin: -16px;

CSS 變數 CSS Variable

CSS 變數可以實作僅需要更新一個值，就可以將更改應用到多個 CSS 樣式屬性上，

為創建一個 CSS 變數，在變數名前添加兩個連字符號，并為其賦值即可，例子如下：

--penguin-skin: gray;

為使用 CSS 變數，在屬性后添加 var 關鍵字，然后把變數值用括號括起來，例子如下：

background: var(--penguin-skin);

可以設定一個備用值來防止由于某些原因導致變數不生效的情況，

background: var(--penguin-skin, black);

當創建一個變數時，變數會在創建變數的選擇器里可用，同時，在這個選擇器的后代選擇器里也是可用的，這是因為 CSS 變數是可繼承的，和普通的屬性一樣，

CSS 變數經常會定義在 :root 元素內，這樣就可被所有選擇器繼承，:root 是一個偽類選擇器，它是一個能夠匹配檔案根元素的選擇器，通常指的是 html 元素，在 :root 里創建變數在全域都可用，即在任何選擇器里都生效，

當在 :root 里創建變數時，這些變數的作用域是整個頁面，如果在元素里創建相同的變數，會重寫作用于整個頁面的變數的值，

CSS 變數可以簡化媒體查詢的定義方式，

例如，當螢屏小于或大于媒體查詢所設定的值，只要更新變數的值，那么使用了此變數的元素樣式就都會更改，

如果想提供瀏覽器降級方案，在宣告之前提供另一個更寬泛的值即可，這樣老舊的瀏覽器會降級使用這個方案，新的瀏覽器會在后面的宣告里覆寫降級方案，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509049.html

標籤：其他

上一篇：Html飛機大戰(十五): 上線

下一篇：深入淺出 JavaScript 中的 this

CSS 筆記

CSS