重拾前端基礎知識：CSS

前言
- 選擇器
- - 簡單選擇器
  - 屬性選擇器
  - 組合選擇器
- 插入CSS
- - 內嵌樣式（Inline Style）
  - 內部樣式（Internal Style）
  - 外部樣式（External Style）
- 層疊
- 顏色
- - 背景顏色
  - 文本顏色
  - RGB 顏色
  - HEX 顏色
  - HSL 顏色
- 背景
- - 背景顏色
  - 背景圖像
- 文本
- - 文本對齊
  - 垂直對齊
  - 文本裝飾
  - 文本轉換
  - 文字間距
  - 文本陰影
- 字體
- - 字體樣式
  - 字體大小
- 圖標
- 鏈接
- 列表
- 邊框
- 表格
- - 合并
  - 邊框
  - 寬度和高度
  - 水平對齊
  - 垂直對齊
  - 水平分隔線
  - 可懸停表格
  - 條狀表格
- 高度和寬度
- 盒模型
- - 外邊距
  - 內邊距
- 輪廓
- 布局
- - 顯示
  - 定位
  - 溢出
  - 浮動
- 偽類
- 偽元素
- 透明度
- 案例解析
- - 垂直導航欄
  - 水平導航欄

前言

CSS（層疊樣式表）是一種用于描述網頁內容外觀和布局的樣式表語言。它與 HTML 結合使用，可以控制網頁中元素的樣式、排版、顏色、大小等方面，從而實現頁面的美化和布局控制。

CSS的語法由選擇器和聲明塊組成：
在這里插入圖片描述
CSS注釋以 /* 開始, 以 */ 結束, 實例如下：

/*這是個注釋*/
p{/*這是另一個注釋*/color:black;
}

示例代碼如下：

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>p{color: red;}</style>
</head>
<body><p>css示例</p>
</body>
</html>

我們可以通過樣式修改字體的顏色，如圖所示：
在這里插入圖片描述

選擇器

CSS 使用選擇器來選中 HTML 文檔中的元素，并對其應用樣式。

簡單選擇器

常見的選擇器包括標簽選擇器（如 p、h1）、類選擇器（如 .myclass）、ID 選擇器（如 #myid）和屬性選擇器等。

標簽選擇器

標簽選擇器是 CSS 中最常見和最基礎的選擇器之一，它可以選擇 HTML 文檔中所有特定類型的元素，并對它們應用樣式。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>h1 {color:orange;}p {color: red;}</style>
</head>
<body><p>css示例</p><h1>css示例2</h1>
</body>
</html>

如圖所示

在這里插入圖片描述

類選擇器

類選擇器的語法使用一個點 (.) 后跟類名稱來定義，例如 .classname。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>.myclass{color: red;}</style>
</head>
<body><div class="myclass">css示例</div>
</body>
</html>

注意：類名不能以數字開頭！

ID選擇器

每個 HTML 元素都可以具有唯一的 ID 屬性，因此 ID 選擇器可用于選擇唯一的元素并為其應用樣式。ID 選擇器的語法使用一個井號 (#) 后跟 ID 名稱來定義，例如 #myid。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>#myid{color: red;}</style>
</head>
<body><div id="myid">css示例</div>
</body>
</html>

注意：id 名稱不能以數字開頭。

分組選擇器

如果多個標簽、class或id具有相同屬性，你可以用逗號(,)分隔。例如，如果要選擇同時具有 class1 和 class2 的元素，可以使用以下代碼：

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>.myclass,.myclass2{color: red;}</style>
</head>
<body><div class="myclass">css示例</div><div class="myclass2">css示例</div>
</body>
</html>

通用選擇器

用星號(*)表示，通用選擇器匹配文檔中的任何元素。

* {margin: 0;padding: 0;box-sizing: border-box;
}

屬性選擇器

屬性選擇器是 CSS 中一種用于根據元素的屬性值選擇元素并為其應用樣式的選擇器。屬性選擇器允許您根據元素的屬性及其對應的屬性值來選擇元素，從而實現更具靈活性的樣式控制。

選擇具有特定屬性的元素：

[attribute] {/* 樣式 */
}

示例：選中所有具有 target 屬性的鏈接元素。

a[target] {color: red;
}

選擇具有特定屬性及屬性值的元素：

[attribute=value] {/* 樣式 */
}

示例：選中所有 type 屬性值為 text 的輸入框元素。

input[type="text"] {border: 1px solid #ccc;
}

選擇具有包含特定屬性值的元素（屬性值包含指定值）：

[attribute*=value] {/* 樣式 */
}

示例：選中所有 class 屬性值中包含 btn 的按鈕元素。

button[class*="btn"] {background-color: yellow;
}

選擇具有以特定屬性值開頭的元素：

[attribute^=value] {/* 樣式 */
}

示例：選中所有 src 屬性值以 https 開頭的圖像元素。

img[src^="https"] {border: 2px solid green;
}

選擇具有以特定屬性值結尾的元素：

[attribute$=value] {/* 樣式 */
}

示例：選中所有 href 屬性值以 .pdf 結尾的鏈接元素。

a[href$=".pdf"] {color: blue;
}

組合選擇器

CSS 組合選擇器是一種將多個選擇器組合起來，以選擇滿足特定條件的元素的方法。組合選擇器允許您根據元素之間的關系來選擇元素，例如它們的父子關系、兄弟關系等。

后代選擇器（空格選擇器）

使用空格來選擇作為某個元素后代的元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div p{color: red;}</style>
</head>
<body><div><p>段落一</p><p>段落二</p></div><div>css示例</div>
</body>
</html>

如圖所示

在這里插入圖片描述

子選擇器（直接子元素選擇器）

使用大于號（>）選擇作為某個元素直接子元素的元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div>p{color: red;}</style>
</head>
<body><div><p>段落一</p><p>段落二</p></div><div>css示例</div>
</body>
</html>

如圖所示

在這里插入圖片描述

相鄰兄弟選擇器

使用加號（+）選擇與某個元素相鄰的下一個元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div+p{color: red;}</style>
</head>
<body><div><p>段落一</p></div><p>css示例</p><p>css示例2</p>
</body>
</html>

如圖所示

在這里插入圖片描述

一般兄弟選擇器

使用波浪號（~）選擇與某個元素具有相同父元素且在它之后的所有元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div~p{color: red;}</style>
</head>
<body><div><p>段落一</p></div><p>css示例</p><p>css示例2</p>
</body>
</html>

如圖所示

在這里插入圖片描述

插入CSS

在 HTML 中插入樣式表的方法有三種：內嵌樣式、內部樣式和外部樣式。

內嵌樣式（Inline Style）

在 HTML 元素中使用 style 屬性來定義樣式。這種方法適用于只需要修改單個元素的樣式，但不推薦在整個頁面中使用。

<p style="color: red; font-size: 16px;">這是一段紅色、字體大小為 16 像素的文本。</p>

內部樣式（Internal Style）

在 HTML 文件的 <head> 標簽中使用 <style> 標簽來定義樣式。這種方法適用于修改整個頁面或整個網站的樣式。

<head><style>p {color: red;font-size: 16px;}</style>
</head>
<body><p>這是一段紅色、字體大小為 16 像素的文本。</p>
</body>

外部樣式（External Style）

將樣式定義在一個獨立的 CSS 文件中，然后在 HTML 文件中使用 <link> 標簽來引用該文件。這種方法適用于修改整個網站的樣式，可以使樣式與內容分離。

在css文件中定義樣式：

p {color: red;font-size: 16px;
}

在 HTML 文件中引用該文件：

<head><link rel="stylesheet" href="styles.css">
</head>
<body><p>這是一段紅色、字體大小為 16 像素的文本。</p>
</body>

一般情況下，優先級如下：

內聯樣式 > 內部樣式 >外部樣式 > 瀏覽器默認樣式

層疊

當多個樣式規則應用到同一個元素時，CSS 使用層疊規則來確定最終的樣式。通常情況下，后面的規則會覆蓋先前的規則，但可以通過特定的選擇器權重和級別來進行調整。

<!DOCTYPE html>
<html lang="en">
<head><style>p {color: blue;font-size: 18px;}.special {color: red;}</style>
</head>
<body><p class="special" style="font-size: 20px;">這是一個段落文本。</p>
</body>
</html>

這個段落的樣式為文本顏色為紅色、字體大小為 20px。

如果兩個規則具有相同的重要性和特殊性，則后出現的規則將覆蓋前面的規則。

顏色

你可以使用CSS來修改顏色，比如：背景顏色、字體顏色、等。

背景顏色

可以使用background-color屬性定義背景顏色。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>p{background-color: yellow;}</style>
</head>
<body><p>css示例</p>
</body>
</html>

如圖所示
在這里插入圖片描述

文本顏色

使用color屬性定義字體顏色。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>p{color: red;}</style>
</head>
<body><p>css示例</p>
</body>
</html>

如圖所示
在這里插入圖片描述

RGB 顏色

在 CSS 中，RGB 顏色值表示一種使用紅色、綠色和藍色分量來混合生成顏色的方法。每個顏色分量的取值范圍是 0 到 255。你可以使用 rgb() 函數來指定一個顏色，語法

color: rgb(red, green, blue);

不同的數值展示的顏色深度也不同，如下：

<!DOCTYPE html>
<html>
<head><title>網頁標題</title>
</head>
<body><h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1><h1 style="background-color:rgb(0, 255, 0);">rgb(0, 255, 0)</h1><h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
</body>
</html>

如圖所示
在這里插入圖片描述
RGBA與 RGB 類似，但多了一個透明度（Alpha）分量，用來控制顏色的透明程度。RGBA 中透明度分量的取值范圍是 0.0 到 1.0。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title>
</head>
<body><h1 style="background-color:rgba(120, 120, 0, 1);">rgba(120, 120, 0, 1)</h1><h1 style="background-color:rgba(120, 120, 0, 0.5);">rgba(120, 120, 0, 0.5)</h1><h1 style="background-color:rgba(120, 120, 0, 0);">rgba(120, 120, 0, 0)</h1>
</body>
</html>

如圖所示

在這里插入圖片描述

HEX 顏色

在 CSS 中，可以使用以下格式的十六進制值來指定顏色：

三位十六進制值：使用三位十六進制數來表示顏色，其中每個分量由一個十六進制數字表示。每個分量的取值范圍是 0 到 F，其中 A 到 F 表示 10 到 15。

例如，使用三位十六進制值 #F00 表示紅色，#0F0 表示綠色，#00F 表示藍色。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title>
</head>
<body><h1 style="background-color:#F00;">#F00</h1><h1 style="background-color:#0F0;">#0F0</h1><h1 style="background-color:#00F;">#00F</h1>
</body>
</html>

在這里插入圖片描述

六位十六進制值：使用六位十六進制數來表示顏色，其中每個分量由兩個十六進制數字表示。每個分量的取值范圍是 00 到 FF。

例如，使用六位十六進制值 #FF0000 表示紅色，#00FF00 表示綠色，#0000FF 表示藍色。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title>
</head>
<body><h1 style="background-color:#FF0000;">#FF0000</h1><h1 style="background-color:#00FF00;">#00FF00</h1><h1 style="background-color:#0000FF;">#0000FF</h1>
</body>
</html>

在這里插入圖片描述

對于六位十六進制值，如果每個分量的兩個十六進制數字相同，可以縮寫為三位形式。例如，#FF0000 可以縮寫為 #F00，#00FF00 可以縮寫為 #0F0，#0000FF 可以縮寫為 #00F。

HSL 顏色

HSL（Hue、Saturation、Lightness）是一種基于顏色的色彩模型，它將顏色表示為色相、飽和度和亮度三個分量。在 HSL 模型中，色相是一個角度值，表示顏色在色輪上的位置；飽和度表示顏色的強度或純度；亮度表示顏色的亮度或黑暗程度。

在 CSS 中，我們可以使用 hsl() 函數來表示 HSL 顏色。其中，第一個參數表示色相，取值范圍為 0 到 360；第二個參數表示飽和度，取值范圍為 0% 到 100%；第三個參數表示亮度，也是取值范圍為 0% 到 100%。例如，紅色可以表示為 hsl(0, 100%, 50%)，其中色相為 0，飽和度為 100%，亮度為 50%

<!DOCTYPE html>
<html>
<head><title>網頁標題</title>
</head>
<body><h1 style="background-color:hsl(0, 100%, 50%)">hsl(0, 100%, 50%)</h1><h1 style="background-color:hsl(120, 100%, 50%)">hsl(120, 100%, 50%)</h1><h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
</body>
</html>

在這里插入圖片描述

除了 hsl() 函數外，還有 hsla() 函數可用于設置帶有透明度的 HSL 顏色，它的第四個參數表示透明度，取值范圍為 0 到 1。例如，帶有半透明效果的紅色可以表示為 hsla(0, 100%, 50%, 0.5)。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title>
</head>
<body><h1 style="background-color:hsla(0, 100%, 50%, 0)">hsla(0, 100%, 50%, 0)</h1><h1 style="background-color:hsla(120, 100%, 50%, 0.5)">hsla(120, 100%, 50%, 0.5)</h1><h1 style="background-color:hsla(240, 100%, 50%, 1);">hsla(240, 100%, 50%, 1)</h1>
</body>
</html>

在這里插入圖片描述

背景

CSS 背景屬性用于定義元素的背景效果。

背景顏色

使用background-color 屬性指定元素的背景色。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title>
</head>
<body style="background-color: blue;">
</body>
</html>

如圖所示

在這里插入圖片描述

opacity 屬性指定元素的不透明度/透明度。取值范圍為 0.0 - 1.0。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title>
</head>
<body><div style="background-color: blue;opacity: 0.1;"><h1>css示例</h1></div><div style="background-color: blue;opacity: 0.5;"><h1>css示例</h1></div>
</body>
</html>

如圖所示
在這里插入圖片描述
如果您不希望對子元素應用不透明度，例如上面的例子，請使用 RGBA 顏色值。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title>
</head>
<body><div style="background-color: rgba(38, 2, 243, 0.1);"><h1>css示例</h1></div><div style="background-color: rgba(38, 2, 243, 0.5);"><h1>css示例</h1></div>
</body>
</html>

如圖所示
在這里插入圖片描述

背景圖像

使用background-image 屬性指定用作元素背景的圖像（默認情況下，圖像會重復，以覆蓋整個元素）。

<body style="background-image: url(./1.webp);">

如圖所示

在這里插入圖片描述

默認情況下會在頁面的水平或者垂直方向平鋪。你可以使用background-repeat屬性設置水平或垂直平鋪。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>body{background-image: url(./1.webp);background-repeat:repeat-x;//repeat-x水平平鋪、repeat-y垂直平鋪}</style>
</head>
<body>
</body>
</html>

如圖所示

在這里插入圖片描述
如果你不想讓圖像平鋪可以設置為no-repeat。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>body{background-image: url(./1.webp);background-repeat:no-repeat;}</style>
</head>
<body>
</body>
</html>

如圖所示

在這里插入圖片描述
使用background-position屬性（可以接受一個關鍵字值（如 top、bottom、left、right、center）或者一個具體的長度值（像素、百分比等）），可以控制背景圖片相對于元素內部的位置，從而實現不同的布局效果。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>body{background-image: url(./1.webp);background-repeat:no-repeat;background-position:right top;//背景圖片位于元素的右上角。}</style>
</head>
<body>
</body>
</html>

如圖所示

在這里插入圖片描述
如需縮短代碼，也可以在一個屬性中指定所有背景屬性。它被稱為簡寫屬性。

body {background-color: #ffffff;background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;
}

簡寫后

body {background: #ffffff url("tree.png") no-repeat right top;
}

文本

CSS 提供了很多用于設置文本樣式的屬性，包括字體、顏色、大小、行高、字間距、文本陰影等。

前面顏色章節中介紹過文本顏色，使用color屬性設置，下面介紹文本的其他用法。

文本對齊

text-align 屬性用于設置文本的水平對齊方式，取值包括：left（將文本左對齊）、right：將文本右對齊、center：將文本居中對齊、justify：將文本兩端對齊，通過調整單詞間距來填充行的寬度。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><h1 style="text-align: left;">文本left對齊</h1><h1 style="text-align: right;">文本right對齊</h1><h1 style="text-align: center;">文本center對齊</h1><h1 style="text-align: justify;">文本justify對齊</h1>
</body>
</html>

如圖所示

在這里插入圖片描述

垂直對齊

vertical-align 屬性用于設置元素內聯元素的垂直對齊方式的 CSS 屬性。

取值包括：

（1）baseline：默認值，元素的基線與父元素的基線對齊。
（2）top：元素的頂部與父元素的頂部對齊。
（3）middle：元素在父元素中垂直居中對齊。
（4）bottom：將元素的底部與父元素的底部對齊。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div class="box" ><textarea name="" id="" cols="30" rows="10" style="vertical-align: top;"></textarea>top</div><div class="box" ><textarea name="" id="" cols="30" rows="10" style="vertical-align: middle;"></textarea>middle</div><div class="box" ><textarea name="" id="" cols="30" rows="10" style="vertical-align: bottom;"></textarea>bottom</div>
</body>
</html>

如圖所示

在這里插入圖片描述

文本裝飾

text-decoration 是 CSS 屬性，用于控制文本的裝飾效果，比如下劃線、刪除線、上劃線等。常見的屬性值包括：
（1）none：默認值，表示沒有任何裝飾效果。
（2）underline：在文本下方繪制一條下劃線。
（3）overline：在文本上方繪制一條上劃線。
（4）line-through：在文本中繪制一條刪除線。
（5）underline overline：同時繪制下劃線和上劃線。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="text-decoration:underline">underline text</div><div style="text-decoration:overline">overline text</div><div style="text-decoration:line-through">line-through text</div><div style="text-decoration:underline overline">underline overline text</div>
</body>
</html>

如圖所示

在這里插入圖片描述

文本轉換

通過text-transform屬性，我們可以將文本轉換為大寫、小寫或首字母大寫形式。常見的屬性值包括：
（1）uppercase：將所有字符轉換為大寫形式。
（2）lowercase：將所有字符轉換為小寫形式。
（3）capitalize：將每個單詞的首字母轉換為大寫。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="text-transform:lowercase">lowercase text</div><div style="text-transform:uppercase">uppercase text</div><div style="text-transform:capitalize">capitalize text</div>
</body>
</html>

如圖所示

在這里插入圖片描述

文字間距

text-indent 是 CSS 屬性，用于控制文本塊的首行縮進。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="text-indent:2em">這是一個美好的一天，從今天開始好好學習，天天向上</div>
</body>
</html>

如圖所示

在這里插入圖片描述
letter-spacing 屬性用于指定文本中字符之間的間距。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="letter-spacing: 3px">這是一個美好的一天，從今天開始好好學習，天天向上</div>
</body>
</html>

如圖所示

在這里插入圖片描述
line-height 屬性用于指定行之間的間距。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="line-height: 10px">這是一個美好的一天，<br>從今天開始好好學習，天天向上</div>
</body>
</html>

如圖所示

在這里插入圖片描述

文本陰影

text-shadow 是 CSS 屬性，用于為文本添加陰影效果。通過這個屬性，我們可以為文本設置陰影的顏色、模糊半徑和陰影的偏移距離。

（1）h-shadow：水平方向的陰影偏移距離，可以為正值（向右偏移）或負值（向左偏移）。
（2）v-shadow：垂直方向的陰影偏移距離，可以為正值（向下偏移）或負值（向上偏移）。
（3）blur-radius：陰影的模糊半徑，值越大表示陰影越模糊。
（4）color：陰影的顏色。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="text-shadow: 2px 2px 5px red;">這是一個美好的一天，從今天開始好好學習，天天向上</div>
</body>
</html>

如圖所示

在這里插入圖片描述

字體

在 CSS 中，你可以使用 font-family 屬性來設置文本的字體樣式。 font-family 屬性用于指定一個或多個字體名稱，瀏覽器會根據這些名稱來顯示文本（應包含多個字體名稱作為“后備”系統，以確保瀏覽器/操作系統之間的最大兼容性。請以您需要的字體開始，并以通用系列結束。字體名稱應以逗號分隔。）。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="font-family: Serif;">css用例</div><div style="font-family: Sans-serif;">css用例</div><div style="font-family: Monospace;">css用例</div><div style="font-family: Cursive;">css用例</div><div style="font-family: Fantasy;">css用例</div><div style="font-family: Arial, Helvetica, sans-serif;">css用例</div>
</body>
</html>

如圖所示

在這里插入圖片描述

字體樣式

font-style 是 CSS 屬性之一，用于設置文本的字體風格，例如斜體或正常體。這個屬性可以接受以下幾個值：
（1）normal：默認值，表示文本以正常字體展示。
（2）italic：表示文本以斜體展示。
（3）oblique：表示文本以傾斜的形式展示，類似于斜體。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="font-style: normal;">css用例</div><div style="font-style: italic;">css用例</div><div style="font-style: oblique;">css用例</div>
</body>
</html>

如圖所示

在這里插入圖片描述

font-weight 用于設置文本的字體粗細度。這個屬性可以接受以下幾個值：

（1）bold：表示文本以粗體展示。
（2）bolder：表示文本以更粗的字體展示。
（3）lighter：表示文本以更細的字體展示。
（4）數字值：表示文本以指定的粗細度展示，例如 font-weight: 500。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="font-weight: bold;">css用例</div><div style="font-weight: bolder;">css用例</div><div style="font-weight: lighter;">css用例</div><div style="font-weight: 50px;">css用例</div>
</body>
</html>

如圖所示

在這里插入圖片描述
font-variant 屬性指定是否以 small-caps 字體（小型大寫字母）顯示文本。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="font-variant: small-caps;">this is a css demo</div>
</body>
</html>

如圖所示

在這里插入圖片描述

字體大小

font-size 用于設置文本的字體大小。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="font-size: 10px;">css用例</div><div style="font-size: 50px;">css用例</div>
</body>
</html>

如圖所示

在這里插入圖片描述
為了避免Internet Explorer 中無法調整文本的問題，許多開發者使用 em 單位代替像素。

1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。因此，1em的默認大小是16px。可以通過下面這個公式將像素轉換為em：px/16=em

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="font-size: 1em;">css用例</div><div style="font-size: 2em;">css用例</div>
</body>
</html>

如圖所示
在這里插入圖片描述
為了縮短代碼，你可以使用 font 屬性來簡寫設置文本的字體樣式。

selector {font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}

以下是一個示例代碼，展示了如何使用 font 屬性來簡寫設置文本的字體樣式：

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><div style="font:italic small-caps bold 12px/30px Georgia, serif;">css用例</div>
</body>
</html>

如圖所示

在這里插入圖片描述

圖標

向 HTML 頁面添加圖標的最簡單方法是使用圖標庫，比如：Font Awesome、Bootstrap glyphicons等。

如需使用 Bootstrap glyphicons，請在 HTML 頁面的 <head> 部分內添加這行

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

完整代碼如下：

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body><i class="bi-alarm"></i><i class="bi bi-textarea-resize"></i><i class="bi bi-capsule-pill"></i>
</body>
</html>

如圖所示

在這里插入圖片描述

鏈接

可以根據鏈接處于什么狀態來設置鏈接的不同樣式。

a:link：正常的，未訪問的鏈接。

a:link {color: red;
}

在這里插入圖片描述

a:visited：用戶訪問過的鏈接

a:visited {color: black;
}

在這里插入圖片描述

a:hover：用戶將鼠標懸停在鏈接上時。

a:hover {color: pink;
}

在這里插入圖片描述

a:active：鏈接被點擊時。

a:active {color: blue;
}

在這里插入圖片描述

注意：在CSS定義中，a:hover 必須被置于 a:link 和 a:visited 之后，a:active 必須被置于 a:hover 之后，才是有效的。

列表

list-style-type: 設置列表項標記的類型，如 disc（實心圓）、circle（空心圓）、square（實心正方形）、decimal（數字）、lower-roman（小寫羅馬數字）等。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>ul.a {list-style-type: circle;}ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}</style>
</head>
<body><p>無序列表實例：</p><ul class="a"><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ul><ul class="b"><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ul><p>有序列表實例：</p><ol class="c"><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ol><ol class="d"><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ol>
</body>
</html>

如圖所示

在這里插入圖片描述
list-style-image 屬性將圖像指定為列表項標記：

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>ul.a {list-style-image: url('./a1.svg');}</style>
</head>
<body><ul class="a"><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ul>
</body>
</html>

如圖所示

在這里插入圖片描述

邊框

CSS 邊框（border）屬性用于定義元素的邊框樣式、寬度和顏色。通過設置不同的邊框屬性，可以為元素添加邊框以及調整其樣式。

border 屬性是用于設置 HTML 元素的邊框樣式、寬度和顏色的 CSS 屬性之一。它可以應用于幾乎所有 HTML 元素，包括 <div>、<p>、<table> 等。

border 屬性可以具有三個值：

border-style：設置邊框的樣式，常見的樣式包括實線 (solid)、虛線 (dotted)、雙實線 (double)、點劃線 (dashed) 等。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><p style="border-style:dotted">點狀邊框。</p><p style="border-style:dashed;">虛線邊框。</p><p style="border-style:solid;">實線邊框。</p><p style="border-style:double;">雙線邊框。</p><p style="border-style:groove;">凹槽邊框。</p><p style="border-style:ridge;">壟狀邊框。</p><p style="border-style:inset;">3D inset 邊框。</p><p style="border-style:outset;">3D outset 邊框。</p><p style="border-style:none;">無邊框。</p><p style="border-style:hidden;">隱藏邊框。</p>
</body>
</html>

如圖所示

在這里插入圖片描述

border-width：設置四個邊框的寬度（上邊框、右邊框、下邊框和左邊框）。可以是像素值（如 1px）、百分比值（相對于父元素寬度的百分比）。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><p style="border-style: solid;border-width:1px">實線邊框。</p><p style="border-style: solid;border-width:1px 2px">實線邊框。</p><p style="border-style: solid;border-width:1px 2px 3px">實線邊框。</p><p style="border-style: solid;border-width:1px 2px 3px 4px">實線邊框。</p>
</body>
</html>

如圖所示

在這里插入圖片描述

border-color：設置邊框的顏色，可以是具體的顏色值（如 red、#00ff00），可以設置一到四個值（用于上邊框、右邊框、下邊框和左邊框）。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><p style="border-style: solid;border-color:red">實線邊框。</p><p style="border-style: solid;border-color:red green blue yellow">實線邊框。</p>
</body>
</html>

如圖所示

在這里插入圖片描述

您還可以只為一個邊指定所有單個邊框屬性：

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><p style="border-top: 1px solid black;">top邊框</p><p style="border-right: 1px solid black;;">right邊框</p><p style="border-bottom: 1px solid black;;">bottom邊框</p><p style="border-left: 1px solid black;;">left邊框</p>
</body>
</html>

如圖所示

在這里插入圖片描述

你也可以簡寫，border: border-width border-style(必填) border-color;。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><p style="border: 1px solid red;">實線邊框。</p>
</body>
</html>

如圖所示

在這里插入圖片描述

表格

在 CSS 中，你可以使用樣式來美化和布局 HTML 表格。通過設置不同的 CSS 屬性，可以調整表格的邊框樣式、背景顏色、字體樣式等，從而定制表格的外觀。

合并

border-collapse: 設置表格邊框的合并方式，可以取值 collapse （合并邊框）或 separate （分開邊框）。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><table border="1px" style="border-collapse: collapse"><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Bill</td><td>Gates</td></tr><tr><td>Steve</td><td>Jobs</td></tr></table>
</body>
</html>

如圖所示

在這里插入圖片描述

邊框

border: 設置表格邊框的樣式、寬度和顏色，如 border: 1px solid black;。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><table border='1px solid black;'><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Bill</td><td>Gates</td></tr><tr><td>Steve</td><td>Jobs</td></tr></table>
</body>
</html>

如圖所示

在這里插入圖片描述

寬度和高度

表格的寬度和高度由 width 和 height 屬性定義。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>table {width: 100%;}th {height: 50px;}</style>
</head>
<body><table border='1px solid black;'><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Bill</td><td>Gates</td></tr><tr><td>Steve</td><td>Jobs</td></tr></table>
</body>
</html>

如圖所示

在這里插入圖片描述

水平對齊

text-align 屬性設置 <th> 或 <td> 中內容的水平對齊方式（左、右或居中）。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>table {width: 100%;}th {text-align: center;}td{text-align: left;}</style>
</head>
<body><table border='1px solid black;'><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Bill</td><td>Gates</td></tr><tr><td>Steve</td><td>Jobs</td></tr></table>
</body>
</html>

如圖所示

在這里插入圖片描述

垂直對齊

vertical-align 屬性設置 <th> 或 <td> 中內容的垂直對齊方式（上、下或居中）。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>table {width: 100%;height: 180px;}th {vertical-align: middle;}td{vertical-align: bottom;}</style>
</head>
<body><table border='1px solid black;'><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Bill</td><td>Gates</td></tr><tr><td>Steve</td><td>Jobs</td></tr></table>
</body>
</html>

如圖所示

在這里插入圖片描述

水平分隔線

使用 border-bottom 屬性，以實現水平分隔線：

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>th,td {border-bottom: 1px solid black;}</style>
</head>
<body><table><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Bill</td><td>Gates</td></tr><tr><td>Steve</td><td>Jobs</td></tr></table>
</body>
</html>

如圖所示

在這里插入圖片描述

可懸停表格

在 <tr> 元素上使用 :hover 選擇器，以突出顯示鼠標懸停時的表格行：

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>tr:hover {background-color: pink;}</style>
</head>
<body><table><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Bill</td><td>Gates</td></tr><tr><td>Steve</td><td>Jobs</td></tr></table>
</body>
</html>

如圖所示

在這里插入圖片描述

條狀表格

實現斑馬紋表格效果，請使用 nth-child() 選擇器。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>/* tr:nth-child(odd)為奇數 */tr:nth-child(even) {background-color: gray;}</style>
</head>
<body><table><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Bill</td><td>Gates</td></tr><tr><td>Steve</td><td>Jobs</td></tr></table>
</body>
</html>

如圖所示
在這里插入圖片描述

高度和寬度

height 和 width 屬性用于設置元素的高度和寬度。

auto - 默認。瀏覽器計算高度和寬度。
length - 以 px、cm 等定義高度/寬度。
% - 以包含塊的百分比定義高度/寬度。
initial - 將高度/寬度設置為默認值。
inherit - 從其父值繼承高度/寬度。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {height: 200px;width: 50%;background-color: powderblue;}</style>
</head>
<body><div>寬度和高度</div>
</body>
</html>

如圖所示
在這里插入圖片描述

盒模型

在 CSS 中，每個 HTML 元素被視為一個矩形的盒子，具有內容區、內邊距、邊框和外邊距。開發者可以利用這些屬性來控制元素的尺寸、間距和邊框等。

在這里插入圖片描述

外邊距（margin）：圍繞邊框的空白區域，用于控制元素與其他元素之間的距離。
邊框（border）：緊接著內邊距的邊界，用于定義內容區域的邊界。
內邊距（padding）：圍繞內容區域的空白區域，可以用來擴展或收縮內容與邊框之間的距離。
內容區域（content）：顯示元素的實際內容，如文本、圖片等。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {width: 200px;height: 100px;padding: 20px;margin: 25px;border: 2px solid black;}</style>
</head>
<body><div>這里是盒子內的實際內容。</div>
</body>
</html>

如圖所示

在這里插入圖片描述

外邊距

margin 屬性用于在任何定義的邊框之外，為元素周圍創建空間。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {width: 200px;height: 100px;margin: 25px;border: 1px solid black;}</style>
</head>
<body><div>這里是盒子內的實際內容。</div>
</body>
</html>

如圖所示

在這里插入圖片描述
CSS 擁有用于為元素的每一側指定外邊距的屬性：margin-top、margin-right、margin-bottom、margin-left。為了縮減代碼，可以在一個屬性中指定所有外邊距屬性（上邊距、右邊距、下邊距、左邊距）。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {width: 200px;height: 100px;margin: 25px 50px 75px 100px;border: 1px solid black;}</style>
</head>
<body><div>這里是盒子內的實際內容。</div>
</body>
</html>

如圖所示
在這里插入圖片描述
您可以將 margin 屬性設置為 auto，以使元素在其容器中水平居中。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {width: 200px;height: 100px;margin: auto;border: 1px solid black;}</style>
</head>
<body><div>這里是盒子內的實際內容。</div>
</body>
</html>

如圖所示

在這里插入圖片描述

你可以說設置為inherit 值，繼承自父元素邊距

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {width: 200px;height: 100px;margin-left: 10px;border: 1px solid black;}div p{margin: inherit;}</style>
</head>
<body><div><p>這里是盒子內的實際內容。</p></div>
</body>
</html>

如圖所示
在這里插入圖片描述

內邊距

padding 屬性用于在任何定義的邊界內的元素內容周圍生成空間。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {width: 200px;height: 100px;padding: 25px;border: 1px solid black;}</style>
</head>
<body><div><p>這里是盒子內的實際內容。</p></div>
</body>
</html>

如圖所示

在這里插入圖片描述
CSS 擁有用于為元素的每一側指定外邊距的屬性：padding-top、padding-right、padding-bottom、padding-left。為了縮減代碼，可以在一個屬性中指定所有外邊距屬性（上邊距、右邊距、下邊距、左邊距）。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {width: 200px;height: 100px;padding: 25px 50px 75px 100px;border: 1px solid black;}</style>
</head>
<body><div><p>這里是盒子內的實際內容。</p></div>
</body>
</html>

如圖所示
在這里插入圖片描述

輪廓

輪廓（outline）是一種繪制在元素周圍的線條，類似于邊框（border），但不影響布局。輪廓通常用于突出顯示元素，而不會改變元素本身的大小或位置。

輪廓（outline）屬性可以設置以下幾個方面：

outline-width：設置輪廓的寬度。
outline-style：設置輪廓的樣式，如實線、虛線等。
outline-color：設置輪廓的顏色。
outline-offset：設置輪廓與邊框之間的距離。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><p style="outline-style: dotted;">點狀輪廓</p><p style="outline-style: dashed;">虛線輪廓</p><p style="outline-style: solid;">實線輪廓</p><p style="outline-style: double;">雙線輪廓</p><p style="outline-style: groove;">凹槽輪廓。效果取決于 outline-color 值。</p><p style="outline-style: ridge;">凸脊輪廓。效果取決于 outline-color 值。</p><p style="outline-style: inset;">凹邊輪廓。效果取決于 outline-color 值。</p><p style="outline-style: outset;">凸邊輪廓。效果取決于 outline-color 值。</p>
</body>
</html>

如圖所示

在這里插入圖片描述

outline 屬性是用于設置以下各個輪廓屬性的簡寫屬性：

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style></style>
</head>
<body><p style="outline: 1px dotted red">點狀輪廓</p><p style="outline: 1px dashed red;">虛線輪廓</p>
</body>
</html>

如圖所示

在這里插入圖片描述
outline-offset 屬性在元素的輪廓與邊框之間添加空間。元素及其輪廓之間的空間是透明的。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {margin: 30px;border: 1px solid black;outline: 1px solid red;outline-offset: 15px;}</style>
</head>
<body><div>輪廓</div>
</body>
</html>

如圖所示

在這里插入圖片描述

輪廓（outline）和邊框（border）在CSS中都可以用來為元素添加一種邊界效果，但它們有一些區別：

影響布局：邊框會占據元素的空間并影響布局，而輪廓不會。邊框的大小和樣式會改變元素的尺寸和位置，而輪廓不會改變元素的盒子模型。
繪制位置：邊框繪制在元素的內邊距和內容之外，而輪廓則繪制在邊框之外。這意味著邊框是緊貼著元素內部的，而輪廓是在邊框外創建額外的邊界線。
樣式和屬性：邊框具有更多的樣式和屬性選項，可以設置邊框的寬度、樣式、顏色以及圓角等。輪廓的樣式只能是實線、虛線或雙線，且不能單獨設置圓角。
交互行為：默認情況下，輪廓通常在用戶焦點落在元素上時顯示，例如通過鍵盤導航或鼠標點擊。邊框則始終可見，無論焦點在元素上與否。

在實際應用中，邊框常用于為元素提供裝飾效果和分隔元素之間的空間，而輪廓常用于突出顯示焦點元素或指示元素的狀態。

布局

CSS 提供了多種布局方法，包括浮動、定位、彈性布局、網格布局和 Flexbox 等，可以實現復雜的頁面布局。

顯示

display 屬性用于定義元素的顯示類型，決定了元素如何在頁面中呈現。它可以控制元素是以塊級元素、內聯元素還是其他特殊類型顯示。
常見的 display 屬性值包括：

block：將元素顯示為塊級元素，獨占一行，并且默認會占滿其父容器的寬度。塊級元素可以設置寬度、高度、邊距等屬性，例如 <div> 元素默認就是塊級元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>span {display: block;}</style>
</head>
<body><span>示例1</span><span>示例2</span>
</body>
</html>

如圖所示
在這里插入圖片描述

inline：將元素顯示為內聯元素，不會獨占一行，而是與其他元素在同一行上排列。內聯元素的寬度由內容決定，無法設置寬度、高度等屬性，例如 <span> 元素默認就是內聯元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {display: inline;width: 10px;}</style>
</head>
<body><div>示例1</div><div>示例2</div>
</body>
</html>

如圖所示
在這里插入圖片描述

inline-block：將元素顯示為內聯塊級元素，類似于內聯元素，但可以設置寬度、高度、邊距等屬性。內聯塊級元素在同一行上排列，且可以在同一行上設置多個元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {display: inline-block;width: 10px;}</style>
</head>
<body><div>示例1</div><div>示例2</div>
</body>
</html>

如圖所示
在這里插入圖片描述

none：將元素隱藏，不會在頁面中顯示，也不會占據空間。隱藏的元素不會被渲染，對布局沒有影響。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {display: none;}</style>
</head>
<body><div>示例1</div><div>示例2</div>
</body>
</html>

定位

position 屬性用于控制元素在文檔中的位置。它有以下幾個值可選：

static（默認值）：元素按照其在文檔流中的位置進行布局。它不會受到top、bottom、left和right屬性的影響。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {width: 500px;position: static;top: 100px;border: 1px solid red;}</style>
</head>
<body><div>示例1</div>
</body>
</html>

如圖所示
在這里插入圖片描述

relative：元素相對于其正常位置進行定位，即相對于其在文檔流中的位置進行偏移。可以通過top、bottom、left和right屬性來指定偏移的距離。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div {width: 500px;position: relative;top: 100px;border: 1px solid red;}</style>
</head>
<body><div>示例1</div>
</body>
</html>

如圖所示

在這里插入圖片描述

相對定位元素經常被用來作為絕對定位元素的容器塊。

absolute：元素相對于其最近的已定位祖先元素進行定位，如果沒有已定位的祖先元素，則相對于瀏覽器窗口進行定位。可以通過top、bottom、left和right屬性來指定偏移的距離。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>.a {width: 400px;height: 400px;position: relative;border: 1px solid red;}.b {width: 100px;position: absolute;top: 20px;left: 50px;border: 1px solid red;}</style>
</head>
<body><div class="a"><div class="b">示例1</div></div>
</body>
</html>

如圖所示

在這里插入圖片描述

fixed：元素相對于瀏覽器窗口進行定位，即使頁面滾動也會保持在固定的位置。也可以使用top、bottom、left和right屬性來指定偏移的距離。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>.a {width: 100px;position: fixed;right: 5px;border: 1px solid red;}</style>
</head>
<body><p class="a">示例1</p><p>示例1</p><!-- 省略100個標簽 -->
</body>
</html>

如圖所示

在這里插入圖片描述

sticky：根據用戶的滾動位置進行定位。元素根據滾動位置在相對（relative）和固定（fixed）之間切換。起先它會被相對定位，直到在視口中遇到給定的偏移位置為止。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>.a {width: 100px;position: -webkit-sticky; /* Safari */position: sticky;top: 0;border: 1px solid red;}</style>
</head>
<body><p class="a">sticky示例</p><p>示例1</p><!-- 省略100個標簽 -->
</body>
</html>

如圖所示

在這里插入圖片描述

注：Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix

z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>img{position: absolute;top: 0px;z-index: -1;}</style>
</head>
<body><p>這是一個文字</p><img src="./123456.jpg" alt="title">
</body>
</html>

z-index屬性接受任何整數值和關鍵字auto。通常使用整數值，較大的值會使元素顯示在較小值的元素之上。

如圖所示

在這里插入圖片描述

溢出

當元素的內容超出其指定的尺寸或父容器的尺寸時，就會發生溢出（overflow）。可以使用overflow屬性來控制溢出內容的表現方式。

overflow屬性有以下幾個常用的取值：

visible：默認值。內容會溢出到元素框之外，可能會覆蓋其他元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div{width: 200px;height: 100px;overflow: visible;}</style>
</head>
<body><div>test文本>test文本>...</div>
</body>
</html>

如圖所示
在這里插入圖片描述

hidden：溢出的內容會被隱藏，不會顯示在元素框之外。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div{width: 200px;height: 100px;overflow: hidden;}</style>
</head>
<body><div>test文本>test文本>...</div>
</body>
</html>

如圖所示
在這里插入圖片描述

scroll/auto：如果內容溢出，則在需要時顯示滾動條。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div{width: 200px;height: 100px;overflow: scroll;}</style>
</head>
<body><div>test文本>test文本>...</div>
</body>
</html>

如圖所示
在這里插入圖片描述

overlay：在內容溢出時，內容會在元素框之上繼續顯示，但會截斷。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div{width: 200px;height: 100px;overflow: overlay;}</style>
</head>
<body><div>test文本>test文本>...</div>
</body>
</html>

如圖所示

在這里插入圖片描述

浮動

浮動（float）是一種常用的布局技術，用于將元素沿著左側或右側浮動，并使其脫離正常文檔流。浮動的元素會漂浮在其容器的左側或右側，并允許其他內容環繞在周圍。

float 屬性可以設置以下值之一：

left - 元素浮動到其容器的左側

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>img{float: left;}</style>
</head>
<body><div><img src="./123456.jpg" alt="title"> 這是一個文本內容</div>
</body>
</html>

如圖所示

在這里插入圖片描述

right - 元素浮動在其容器的右側

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>img{float: right;}</style>
</head>
<body><div><img src="./123456.jpg" alt="title"> 這是一個文本內容</div>
</body>
</html>

如圖所示

在這里插入圖片描述

none - 元素不會浮動（將顯示在文本中剛出現的位置）。默認值。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>img{float: none;}</style>
</head>
<body><div><img src="./123456.jpg" alt="title"> 這是一個文本內容</div>
</body>
</html>

如圖所示

在這里插入圖片描述

inherit - 元素繼承其父級的 float 值。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div{float: right;}img{float: inherit;}</style>
</head>
<body><div><img src="./123456.jpg" alt="title"> 這是一個文本內容</div>
</body>
</html>

如圖所示

在這里插入圖片描述
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。可設置以下值之一：
（1）left - 左側不允許浮動元素
（2）right- 右側不允許浮動元素
（3）both - 左側或右側均不允許浮動元素
（4）inherit - 元素繼承其父級的 clear 值

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>.a{float: left;width: 100px;height: 50px;border: 3px solid #73AD21;}.b{border: 3px solid yellow;width: 100px;height: 50px;clear: both;}</style>
</head>
<body><div class="a">這是一個文本內容</div><div class="b"></div>
</body>
</html>

如圖所示

在這里插入圖片描述

偽類

常見的偽類包括但不限于：

:hover：用于選擇鼠標懸停在元素上的狀態，通常用于創建交互效果。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div:hover{background-color: green;}</style>
</head>
<body><div>偽類示例</div>
</body>
</html>

如圖所示
在這里插入圖片描述

:active：用于選擇被激活的元素，例如當用戶點擊鼠標按鈕但尚未釋放時。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div:active{background-color: green;}</style>
</head>
<body><div>偽類示例</div>
</body>
</html>

:focus：用于選擇當前擁有鍵盤輸入焦點的元素，通常用于增強表單元素的可訪問性。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>input:focus {border: 11px solid yellow;}</style>
</head>
<body><input type="text">
</body>
</html>

如圖所示

在這里插入圖片描述

:first-child：選擇作為其父元素的第一個子元素的元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div:first-child{color: red;}</style>
</head>
<body><div>偽類示例</div><div>偽類示例</div>
</body>
</html>

如圖所示

在這里插入圖片描述

:last-child：選擇作為其父元素的最后一個子元素的元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div:last-child{color: red;}</style>
</head>
<body><div>偽類示例</div><div>偽類示例</div>
</body>
</html>

如圖所示
在這里插入圖片描述

:not()：選擇除了指定元素之外的所有元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div{color: black;}:not(div){color: red;}</style>
</head>
<body><div>偽類示例</div><p>偽類示例</p><div>偽類示例</div>
</body>
</html>

如圖所示
在這里插入圖片描述

:disabled：選擇被禁用的表單元素。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>input[type="text"]:enabled{color: red;}input[type="text"]:disabled{background:#dddddd;}</style>
</head>
<body><input type="text"><input type="text" disabled>
</body>
</html>

如圖所示
在這里插入圖片描述

除此之外，還有:empty、:only-child等等，有興趣的可以自己了解。

偽元素

偽元素是用于在元素的特定位置插入內容的虛擬元素。它們使用雙冒號 :: 來表示，用于向元素的特定位置添加樣式或內容。

::before：在元素內容的前面插入內容。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>p::before {content: "前置內容";color: red;}</style>
</head>
<body><p>偽元素</p>
</body>
</html>

如圖所示

在這里插入圖片描述

::after：在元素內容的后面插入內容。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>p::after {content: "后置內容";color: red;}</style>
</head>
<body><p>偽元素</p>
</body>
</html>

如圖所示
在這里插入圖片描述

::first-letter：選擇元素內容的第一個字母。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>p::first-letter {font-size: 2em;color: blue;}</style>
</head>
<body><p>偽元素</p>
</body>
</html>

如圖所示
在這里插入圖片描述

::first-line：選擇元素內容的第一行。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>p::first-line {color: red;}</style>
</head>
<body><p>偽元素<br>第二行</p>
</body>
</html>

如圖所示
在這里插入圖片描述

透明度

opacity 屬性指定元素的不透明度/透明度（取值范圍為 0.0-1.0。值越低，越透明）。

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>div{width: 150px;height: 150px;background-color: blue;opacity: 0.1;}div:hover{opacity: 1;}</style>
</head>
<body><div></div>
</body>
</html>

如圖所示

在這里插入圖片描述

案例解析

垂直導航欄

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>ul{list-style-type: none;padding: 0px;margin: px;border: 1px solid black;width: 200px;text-align: center;background-color: antiquewhite;}li:hover{background-color: gray;}</style>
</head>
<body><ul><li><a href="#home">主頁</a></li><li><a href="#news">新聞</a></li><li><a href="#contact">聯系</a></li><li><a href="#about">關于</a></li></ul>
</body>
</html>

如圖所示

在這里插入圖片描述

水平導航欄

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>ul{list-style-type: none;border: 1px solid black;overflow: hidden;background-color: black;}li{float: left;}li a {text-align: center;padding: 14px 16px;text-decoration: none;color: white;}li:hover{background-color: gray;}</style>
</head>
<body><ul><li><a href="#home">主頁</a></li><li><a href="#news">新聞</a></li><li><a href="#contact">聯系</a></li><li><a href="#about">關于</a></li></ul>
</body>
</html>

如圖所示

在這里插入圖片描述

下拉菜單

<!DOCTYPE html>
<html>
<head><title>網頁標題</title><style>ul{list-style-type: none;border: 1px solid black;overflow: hidden;background-color: black;}li{float: left;}li a {text-align: center;padding: 14px 16px;text-decoration: none;color: white;}li:hover{background-color: gray;}.dropdown-content {/*默認不顯示*/display: none;position: absolute;background-color: gray;}.dropdown-content a {display: inherit;}.dropdown-content a:hover {/*鼠標懸浮后顯示的背景色*/background-color: #f1f1f1}/*懸浮后顯示其他標簽*/.dropdown:hover .dropdown-content {display: block;}</style>
</head>
<body><ul><li><a href="#home">主頁</a></li><li><a href="#news">新聞</a></li><li><a href="#contact">聯系</a></li><li class="dropdown"><a href="#about">關于</a><div class="dropdown-content"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></li></ul></body>
</html>