跟著禹神學前端——CSS 基礎 (1)

李商隐的猫發表於2024-10-31

前端CSS

1. CSS 簡介

CSS 的全稱為：層疊樣式表（Cascading Style Sheets)。

CSS 也是一種標記語言。用於給 HTML 結構設定樣式，例如：文字大小，顏色，元素寬高等等。

簡單理解：CSS可以美化HTML，讓HTML更漂亮。
核心思想：HTML搭建結構，CSS新增樣式，實現了：結構與樣式的分離。

2. CSS 的編寫位置

2.1 行內樣式

寫在標籤的 style 屬性中（又稱：內聯樣式）。

語法：

 <h1 style="color:brown;font-size: 30px;">歡迎學習前端CSS</h1>

注意點：

style 屬性的值不能隨便寫。寫要符合CSS 語法規範，是 名:值; 的形式。
行內樣式表，只能控制當前標籤的樣式，對其他標籤無效。

存在的問題：

書寫繁瑣，樣式不能複用、並且沒有體現出結構與樣式分離的思想，不推薦大量使用，只有對當前元素新增簡單樣式時，才偶爾使用。

2.2 內部樣式

寫在 html 頁面內部，將所有的 CSS 程式碼提取出來，單獨放在 <style> 標籤中。

語法：

<style>
	h1{
		color: brown;
		font-size: 30px;
	}
</style>

注意點：

<stype> 標籤理論上可以放在 HTML 文件的任何地方，但一般都放在 <head> 標籤中。
此種寫法：樣式可以複用，程式碼結構清晰。

存在的問題：

並沒有實現：結構與樣式完全分離。
多個 HTML 頁面無法複用樣式。

2.3 外部樣式

寫在單獨的 .css 檔案中，隨後在 HTML 檔案中引入使用。

語法：

1、新建一個副檔名為 .css 的樣式檔案，把所有 CSS 程式碼都放入此檔案中。

h1 {
    color: brown;
    font-size: 30px;
}

2、在 HTML 檔案中引入 .css 檔案。

<link rel="stylesheet" href="./position.css">

注意點：

<link> 標籤要寫在 <head> 標籤中。
<link> 標籤屬性說明：
- href：引入的文件來自於哪裡。
- rel：（relation: 關係）說明引入的文件與當前文件之間的關係。
外部樣式的優勢：樣式可以服用、結構清晰、可觸發瀏覽器的快取機制，提供訪問速度，實現了結構與樣式的完全分離。
實際開發中，幾乎都使用外部樣式，這是最推薦的使用方式。

3. 樣式表的優先順序

優先順序規則：行內樣式 > 內部樣式 = 外部樣式

內部樣式、外部樣式，這二者的優先順序相同，且: 後面的會覆蓋前面的（簡記：“後來者居上“)。

同一個樣式表中，優先順序也和編寫順序有關，且: 後面的會覆蓋前面的（簡記：“後來者居上”)。

分類	優點	缺點	使用頻率	作用範圍
行內樣式	優先順序最高	1. 結構與樣式未分離 2. 程式碼結構混亂 3. 樣式不能複用	很低	當前標籤
內部樣式	1. 樣式可服用 2. 程式碼結構清晰	1. 結構與樣式未徹底分離 2.樣式不能多頁複用	一般	當前頁面
外部樣式	1. 樣式可多頁面服用 2. 程式碼結構清晰 3. 可觸發瀏覽器的快取機制 4. 結構與樣式徹底分離	需要引入才能使用	最高	多個頁面

4. CSS語法規範

CSS語法有兩部分構成。

選擇器：找到要新增樣式的元素。
宣告塊：設定具體的樣式（宣告塊是有一個或多個宣告組成的），宣告的格式為：屬性名: 屬性值;

最後一個宣告後的分號理論上能省略，但最好還是加上。

選擇器與宣告塊之間，屬性名與屬性值之間，均有一個空格，理論上能省略，但最好還是寫上。

註釋的寫法：

/* 給h1元素新增樣式 */
h1 {
    /* 設定文字顏色為酒紅色 */
    color: brown;
    /* 設定字型大小為40px */
    font-size: 30px;
}

5. CSS程式碼風格

展開風格 ——開發時推薦，便於維護和除錯

h1 {
    color: green;
    font-size: 20px;
}

緊湊風格 ——專案上線時推薦，可減小檔案體積

h1{color: green;font-size: 20px;}

專案上線時，我們會透過工具將【展開風格】的程式碼，變成【緊湊風格】，這樣可以減小檔案體積，節約網路流量，同時也能讓使用者開啟網頁時速度更快。

6.CSS基本選擇器

CSS 基本選擇器包含以下四種：

通配選擇器
元素選擇器
類選擇器
id選擇器

6.1 通配選擇器

作用：可以選中所有的 HTML 元素。

語法：

* {
  	屬性名：屬性值;
}

舉例：

/* 選中所有元素 */
* {
		color: red;
}

目前來看通配選擇器貌似有點雞肋，但後面清除樣式時，會對我們有很大的幫助。

6.2 元素選擇器

作用：為頁面中某種元素統一設定樣式。

語法：

標籤名 {
  	屬性名： 屬性值
}

舉例：

/* 選中所有h1元素 */
h1 {
    color: red;
    font-size: 40px;
}
/* 選中所有h2元素 */
h2 {
    color: green;
}
/* 選中所有p元素 */
p {
    color: brown;
}

元素選擇器無法實現差異化設定。例如上面的程式碼中，所有p元素效果都一樣。

6.3 類選擇器

作用：根據元素的 class 值，來選中某些元素。

class 翻譯過來有：種類，類別的含義，所以 class 值，又稱：類名。

語法：

.類名 {
  	屬性名: 屬性值;
}

舉例：

/* 選中頁面中所有類名為shuo的元素 */
.text {
    color: brown;
}
/* 選中頁面中所有類名為shi的元素 */
.shi {
    color: rgb(69, 144, 88);
}

注意點：

元素的 class 屬性值不帶，但 CSS 的類選擇器要帶。
class 值，是我們自定義的，按照標準：不要使用純數字、中文。儘量使用英文與數字的組合，若由多個單片語成，使用 - 做連線，例如：left-menu ，且命名要有意義，做到“見名知意”。
一個元素不能寫多個 class 屬性，下面是錯誤示例：

<!-- 該寫法錯誤，元素的屬性不能重複，後寫的會失效 -->
<h1  class="speak" class="big">你好</h1>

一個元素的 class 屬性，能寫多個值，要用空格隔開，例如：

<!-- 該寫法正確，class屬性，能寫多個值 -->
<p class="text shi">詩詞鑑賞</p>

6.4 ID選擇器

作用：根據元素的 id 屬性值，來精準的選中某個元素。

語法：

#id值 {
  	屬性名：屬性值;
}

舉例：

#myid {
		color: blueviolet;
}

注意：

id 屬性值：儘量由字母、數字、下劃線( _)、短槓(- ) 組成，最好以字母開頭，不要包含空格, 區分大小寫。
一個元素只能擁有一個 id 屬性。多個元素的 id 屬性值不能相同。
一個元素可以同時擁有 id 和 class 屬性。

6.5 基本選擇器總結

基本選擇器	特點	用法
通配選擇器	選中所有標籤，一般用於清除樣式。	`* {color: red;}`
元素選擇器	選中所有同種標籤，但是不能差異化選擇。	`h1 {color:red;}`
類選擇器	選中所有特定類名（`class`值）的元素——使用頻率很高	`.say {color:red;}`
ID選擇器	選中特定`id`值的那個元素（唯一的）。	`#earthy {color:red;}`

7. CSS複合選擇器

7.1 交集選擇器

作用：選中同時符合多個條件的元素。

交集有並且的含義（通俗理解：即......又......的意思），例如：年輕且帥氣。

語法：選擇器1選擇器2選擇器3......選擇器n { }

舉例：

/* 選中類名為a的p標籤，此種寫法用的非常多 */
p.beauty {
    color: black;
}
/* 選中類名包含rich和beauty的元素 */
.rich.beauty {
    color: green;
}

注意：

有標籤名，標籤名必須寫在前面。
id選擇器，理論上可以作為交集的條件，但實際應用中幾乎不用，————因為沒有意義。
交集選擇起中不可能出現兩個元素選擇器，應為一個元素，不可能既是 p 元素，又是 span 元素。
用的最多的交集選擇器是：元素選擇器配合類名選擇器，例如：p.beauty .

7.2 並集選擇器

作用：選中多個選擇起對應的元素，又稱：分組選擇器。

所謂並集就是或者的含義。

語法：選擇器 1, 選擇器 2, 選擇器 3, ......選擇器 n { }

多個選擇器透過英文逗號連線，此處的英文逗號就代表：或。

舉例：

/* 選中 id 為ad、或者類名為 rich、或者類名為 beauty 的元素 */
#ad, 
.beauty,
.rich {
    font-size: 40px;
    background-color:cadetblue;
    width: 320px;
}

注意：

並集選擇器，我們一般豎著寫。
任何形式的選擇器，都可以作為並集選擇器的一部分。
並集選擇器，通常用於集體宣告，可以縮小樣式表體積。

7.3 後代選擇器

作用：選中指定元素中，符合要求的後代元素。

語法：選擇器1 選擇器2 選擇器3 ...... 選擇器n { } （注意先寫祖先，再寫後代）

選擇器之間，用空格隔開，空格可以理解為：“xxx中的”，其實就是後代的意思。

選擇器 1234......n，可以是我們學習的任何一種選擇器。

舉例：

/* 選中ul標籤中的所有li標籤 */
ul li{
    color: blueviolet;
}
/* 選中ol中的所有li */
ol li{
    color: aquamarine;
}
/* 選中li中的所有a標籤 */
li a{
    color:cadetblue;
}
/* 選中類名為subject的元素中的所有類名為sing的元素 */
.subject .sing{
    color: brown;
}
/* 選中類名為subject的元素中的所有類名為frontend的li標籤 */
.subject li.frontend{
  color: blue;
}

7.4 子代選擇器

作用：選中指定元素中，符合要求的子元素（兒子元素）。

子代選擇器又稱：子元素選擇器，子選擇器。

語法：選擇器1>選擇器2>選擇器3>...... 選擇器n {}

選擇器之間，用 > 隔開，>可以理解為：“xxx 的子代”。

選擇器 1234......n, 可以是我們之前學習的任何一種選擇器。

舉例：

/* div中的子代a元素 */
div>a{
    color: brown;
}

/* div中的子代p標籤的子代a元素 */
div>p>a{
    color:aquamarine;
}

/* 類名為 person的元素中的子代a元素 */
.person>a{
    color:red;
}

注意：

子代選擇器，最終選擇的是子代，不是父級。
子、孫子、重孫子、重重孫子...... 統稱後代，子就是指兒子。

7.5 兄弟選擇器

相鄰兄弟選擇器

作用：選中指定元素後，符合條件的相鄰兄弟元素。

所謂相鄰，就是緊挨著自己的下一個。

語法：選擇器 1+選擇器 2 { }

示例：

/* 選中div後面緊緊相鄰的p元素（睡在我下鋪的兄弟） */
div+p{
    color: brown;
}

通用兄弟選擇器

作用：選中指定元素後，符合條件的所有兄弟元素。

語法：選擇器1~選擇器2 { }

示例：

/* 選中div後面所有的兄弟p元素（睡在我下鋪的所有兄弟） ——通用兄弟選擇器*/
div~p{
    color: brown;
}

注意：兩種兄弟選擇器，選擇的是下面的兄弟

7.6 屬性選擇器

作用：選中屬性值符合要求的元素。

語法：

[屬性名] 選中具有某個屬性的元素。
[屬性名="值"] 選中包含某個屬性，且屬性值等於指定值的元素。
[屬性名^="值"] 選中包含某個屬性，且屬性值以指定的值開頭的元素。
[屬性名$="值"] 選中包含某個屬性，且屬性值以指定的值結尾的元素。
[屬性名*="值"] 選中包含某個屬性，且屬性值包含指定值的元素。

示例：

/* 第一種寫法 ：選中具有 title 屬性的元素 */
[title]{
    color: brown;
}

/* 第二種寫法： 選中具有title屬性，且屬性值為vue2的元素*/
[title="vue2"]{
    color: brown;
}

/* 第三種寫法： 選中具有title屬性，且屬性值以字母a開頭的元素*/
[title^="J"]{
    color: blue;
}

/* 第四種寫法： 選中具有title屬性，且屬性值以字母a結尾的元素*/
[title$="a"]{
    color:blueviolet;
}

/* 第五種寫法： 選中具有title屬性，且屬性值包含字母J的元素*/
[title*="J"]{
    color:rgb(185, 128, 149);
}

7.7 偽類選擇器

作用：選中特殊狀態的元素。

如何理解“偽” ？—— 虛假的，不是真的。

如何理解“偽類” ？—— 像類（class），但不是類，是元素的一種特殊狀態。

常用的偽類選擇器：

1、動態偽類：

:link 超連結未被訪問的狀態。

:visited 超連結訪問過的狀態。

:hover 滑鼠劃過 (懸停)元素上的狀態。

:active 元素啟用的狀態。

什麼是啟用？ —— 按下滑鼠不鬆手。

注意點：遵循 LVHA 的順序，即： link、visited、hovr、active。

:focus 獲取焦點的元素。

表單類元素才能使用 :focus 偽類。

當使用者：點選元素、觸控元素、或者透過鍵盤的 tab 鍵等方式選擇元素時，就是獲得焦點。

2、結構偽類：

:first-child 所有兄弟元素中的第一個。

:last-child 所有兄弟元素的最後一個。

:nth-child(n) 所有兄弟元素的第 n 個。

:first-of-type 所有同型別兄弟元素中的第一個。

:last-of-type 所有同型別兄弟元素中的最後一個。

:nth-of-type 所有同型別兄弟元素中的第 n 個。

關於 n 的取值：

0 或者不寫：什麼都選不中 —— 幾乎不用。

n：選中所有子元素 —— 幾乎不用。

1～正無窮的整數：選中對應序號的子元素。

2n 或 even：選中序號為偶數的子元素。

2n+1 或 odd：選中序號為奇數的子元素。

-n+3：選中前三個。

示例：

/* 選中div的子代中的p元素，且是第一個（按照所有兄弟計算，不是隻看p元素裡面的第一個） */
div>p:first-child {
    color: red;
}

/* 選中div的子代中的p元素，且是最後一個（按照所有兄弟計算） */
div>p:last-child {
    color: green;
}

/* 選中div的子代中的第n個p元素（按照所有兄弟計算） */
div>p:nth-child(3) {
    color: blue;
}

/* 選中div的子代中的第偶數個數的p元素（按照所有兄弟計算） */
div>p:nth-child(2n) {
    color: brown;
}

/* 選中div的子代中的p元素且在p元素中是第一個兒子（所有同型別兄弟計算） */
div>p:first-of-type{
    color:rgb(159, 65, 210)
}

/* 選中div的子代中的p元素且在p元素中是第一個兒子（所有同型別兄弟計算） */
div>p:last-of-type{
    color:rgb(131, 138, 205)
}

/* 選中div的子代中的p元素且在p元素中是第n個（所有同型別兄弟計算） */
div>p:nth-of-type(3){
    color:rgb(107, 153, 50)
}

瞭解即可：

:nth-last-child(n) 所有兄弟元素中的倒數第n 個。

nth-last-of-type(n) 所有同型別兄弟元素中的倒數第 n 個。

only-child 選擇沒有兄弟的元素(獨生子女)。

only-of-type 選擇沒有同型別兄弟的元素。

root 根元素。

empty 內容為空元素（空格也算內容）。

示例：
/* 選中div的子代中的p元素中是倒數第n個兒子（所有兄弟計算） */
div>p:nth-last-child(2) {
color:rgb(61, 45, 151);
}

/* 選中div的子代中的p元素且在p元素中是倒數第n個兒子（所有同型別兄弟計算） */
div>p:nth-last-of-type(2) {
color:aqua;
}

/* 選中沒有兄弟的span元素 */
span:only-child {
color:red;
}

/* 選中沒有同型別兄弟的span元素 */
span:only-of-type {
color:red;
}

/* 選中根元素 */
:root {
background-color: rgb(192, 116, 116);
}

/* 選中沒有內容的div元素 /
div:empty {
background-color: red;
width: 180px;
height: 100px;
}
/ 選中div的子代中的p元素中是倒數第n個兒子（所有兄弟計算） */
div>p:nth-last-child(2) {
color:rgb(61, 45, 151);
}

/* 選中div的子代中的p元素且在p元素中是倒數第n個兒子（所有同型別兄弟計算） */
div>p:nth-last-of-type(2) {
color:aqua;
}

/* 選中沒有兄弟的span元素 */
span:only-child {
color:red;
}

/* 選中沒有同型別兄弟的span元素 */
span:only-of-type {
color:red;
}

/* 選中根元素 */
:root {
background-color: rgb(192, 116, 116);
}

/* 選中沒有內容的div元素 */
div:empty {
background-color: red;
width: 180px;
height: 100px;
}

3、否定偽類

:not(選擇器) 排除滿足括號中條件的元素。

示例：

/* 選中div的兒子p元素，但是排除類名為fail的元素 */
div>p:not(.fail) {
    color: brown;
}

/* 選中div的兒子p元素，但是排除title 屬性值包含“加油”的元素 */
div>p:not([title*="加油"]) {
    color: brown;
}

/* 選中div 的兒子 p 元素，但是排除第一個兒子元素 */
div>p:not(:first-child){
    color:green;
}

4、UI 偽類

:checked 被選中的核取方塊或單選按鈕。

:enable 可用的表單元素（沒有 disabled屬性）。

:disabled 不可用的表單元素（有 disabled 屬性）。

示例：

/* 選中勾選的核取方塊 */
input:checked {
    width: 100px;
    height: 100px;
}

/* 選中的是禁用的input元素 */
input:disabled{
    background-color: gray;
}

/* 選中的是可用的input元素（不常用） */
input:enabled{
    background-color: green;
}

5、目標偽類

：target 選中錨點指向的元素。

示例：

div:target {
		background-color: forestgreen;
}

6、語言偽類

:lang() 根據指定的語言選擇元素（本質是看 lang 屬性的值）。

示例：

/* 選中 div 語言是 en 的元素 */
div:lang(en) {
    color: red;
}

/* 選中語言是 zh-CN 的元素 */
:lang(zh-CN) {
    color: green;
}

7.8 偽元素選擇器

作用：選中元素中的一些特殊位置。

常用的偽元素：

::first-letter 選中元素中的第一個文字。
::first-line 選中元素中的第一行文字。
::selection 選中被滑鼠選中的內容。
::placeholder 選中輸入框的提示文字。
::before 在元素最開始的位置，建立一個子元素（必須用 content 屬性指定內容）。
::after 在元素最末尾的位置，建立一個子元素（必須用 content 屬性指定內容）。

示例：

/* 選中的是div中的第一個文字 */
div::first-letter {
    color: red;
    font-size: 40px;
}

/* 選中的是div中的第一行文字 */
div::first-line {
    background-color:brown
}

/* 選中的是div中被滑鼠選中的文字 */
div::selection {
    background-color: yellow;
}

/* 選中的是輸入框中的提示文字 */
input::placeholder {
    color: aquamarine;
}

/* 選中的是p元素最開始的位置，隨後建立一個子元素 */
p::before { 
    content: "¥";
}

/* 選中的是p元素最末尾的位置，隨後建立一個子元素 */
p::after{
    content: ".00";
}

8. 選擇器的優先順序

透過不同的選擇器，選中相同的元素，並且為相同的樣式名設定不同的值時，就發生了樣式衝突，到底應用哪個樣式，此時就需要看優先順序了。

行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器 > 通配選擇器

詳細描述：

1.計算方式：每個選擇器，都可以計算出一組權重，格式為：（a, b, c）

a：ID 選擇器的個數。

b：類、偽類、屬性 選擇器的個數。

c：元素、偽元素選擇器額個數。

例如：

選擇器權重

ul>li (0, 0, 2)

div ul>li p a span (0, 0, 6)

#atguigu .slogan (1, 1, 0)

#atguigu .slogan a (1, 1, 1)

#atguigu .slogan a:hover (1, 2, 1)

選擇器	權重
`ul>li`	(0, 0, 2)
`div ul>li p a span`	(0, 0, 6)
`#atguigu .slogan`	(1, 1, 0)
`#atguigu .slogan a`	(1, 1, 1)
`#atguigu .slogan a:hover`	(1, 2, 1)

2.比較規則：按照從左到右的順序，一次比較大小，當前位置勝出後，後面的不用在比較了，例如：

(1, 0, 0) > (0, 2, 2)

(1, 1, 0) > (1, 0, 3)

(1, 1, 3) > (1, 1, 2)

3.特殊規則：

行內樣式權重大於所有選擇器。
!important 的權重，大於行內樣式，大於所有選擇器，權重最高！

9. CSS三大特性

1.層疊性

概念：如果發生了樣式衝突，那就會根據一定的規則（選擇器優先順序）進行樣式的層疊（覆蓋）。

什麼是樣式衝突？元素的同一個樣式名，被設定了不同的值，這就是衝突。

2.繼承性

概念：元素會自動擁有其父元素、或者其祖先元素上所設定的某些樣式。

規則：優先繼承離得近的（離得最近的上級節點）。

常見的可繼承屬性：

test-??, font-??, line-??, color ......

備註：參照 MDN 網站，可查詢屬性是否可被繼承。

3.優先順序

!important > 行內樣式 > ID 選擇器 > 類選擇器 > 元素選擇器 > * > 繼承的樣式

計算權重時需要注意：並集選擇器的每一個部分是分開計算的！

10. 顏色屬性

表示方式一：顏色名

編寫方式：直接使用顏色對應的英文單詞，編寫比較簡單，例如：

紅色：red
綠色：green
藍色：blue
紫色：purple
橙色：orange
灰色：gray
......

顏色名這種方式，表達的顏色比較單一，所以用的並不多。

具體顏色名參考 MDN 官方文件。

表示方式二：rgb 或 rgba

編寫方式：使用紅、綠、藍這三種光的三原色進行組合。

r：表示紅色
g：表示綠色
b：表示藍色
a：表示透明度

舉例：

/* 使用 0～255 之間的數字表示一種顏色 */
color: rgb(255, 0, 0);/* 紅色 */
color: rgb(0, 255, 0);/* 綠色 */
color: rgb(0, 0, 255);/* 藍色 */
color: rgb(0, 0, 0);  /* 黑色 */
color: rgb(255, 255, 255); /* 白色 */

/* 混合出任意種顏色 */
color: rgb(138, 43,226); /* 紫羅蘭色 */
color: rgb(255,0,0,0.5); /* 半透明的紅色 */

/* 也可以使用百分比表示一種顏色（用的少） */
color: rgb(100%, 0%, 0%); /* 紅色 */
color: rgb(100%, 0%, 0%, 50%); /* 半透明的紅色 */

小規律：

若三種顏色值相同，呈現的是灰色，值越大，灰色越淺。

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

對於 rgba 來說，前三位的 rgb 形式要保持一致，要麼都是0～255 的數字，要麼都是百分比。

表示方式三：HEX 或 HEXA

HEX 的原理與 rgb 一樣，依然是透過：紅、綠、藍 進行組合，只不過要用 6 個字元，分成三組** 來表示（其實就是16 進位制的 rgb）。

格式為：#00FF00

每一位字元的取值範圍是：0～f，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f ）

所以每一種光的最小值是：00，最大值是：ff

color: #ff0000; /* 紅色 */
color: #00ff00; /* 綠色 */
color: #0000ff; /* 藍色 */
color: #000000; /* 黑色 */
color: #ffffff; /* 白色 */

/* 如果每種顏色的兩位都是相同的，就可以簡寫 */
color: #ff9988; /* 可簡寫為：#f98 */

/* 但是要注意：前三位簡寫了，那麼透明度也要簡寫 */
color: #ff998866; /* 可簡寫為：#f986 */

注意點：IE 瀏覽器不支援 HEXA，但支援 HEX。

表示方式四： HSL 或 HSLA

HSL：是透過：色相、飽和度、亮度，來表示一個顏色的，格式為：HSL(色相, 飽和度, 亮度);

色相：取值範圍是0～360 度，具體度數對應的顏色如下圖：

飽和度：取值範圍是 0%～100%。（向色相中對應顏色中新增灰色，0%全灰，100%沒有灰）

亮度：取值範圍是 0%～100%。（0%亮度沒了，就是黑色。100%亮度最強，就是白色）

HSLA：HSLA 其實就是在 HSL 的基礎上，新增了透明度。

11. 字型屬性

11.1 字型大小

屬性名： font-size

語法：

div {
		font-size: 20px;
}

注意點：

Chrome 瀏覽器支援的最小文字為 12px，預設文字大小為 16px，並且 0px 會自動消失。

不同的瀏覽器預設的字型大小可能不一致。所以最好給一個明確的值。不要用預設大小。

通常以給 body 設定 font-size 屬性，這樣 body 中的企業元素就都可以繼承了。

藉助控制檯檢視樣式：

11.2 字型族

屬性名： font-family

語法：

div {
		font-family: "STCaiyun", "Microsoft YaHei", sans-serif
}

注意：

使用字型的英文名字相容性會更好，具體的英文名可以自行查詢，或在電腦的設定裡面去尋找。

如果字型名包含空格，必須使用引號包裹起來。

可以設定多個字型，按照從左到右的順序逐個查詢。找到就用，沒有找到就使用後面的，且通常在最後寫上 serif (非襯線字型) 或 sans-serif (非襯線字型)

windows系統重，預設的字型就是微軟雅黑。

11.3 字型風格

屬性名：font-style

常用值：

normal：正常（預設值）。
italic：斜體（使用字型自帶的斜體效果）。
oblique：（強制傾斜產生的斜體效果）。

實現斜體時，更推薦使用 italic。

語法：

div {
		font-style: italic;
}

11.4 字型粗細

屬性名：font-weight

常用值：

lighter：細
normal：正常
bold：粗
bolder：很粗（多數字體不支援）
數值：100~1000 且無單位，數值越大，字型越粗（或一樣粗，具體得看字型設計時的精確程度）。100~300 等同於 lighter，400~500 等同於 noremal，600 及以上等同於 bold。

語法：

div {
  	font-weight: bold;
}

div {
  	font-weight: 600;
}

11.5 字型複合屬性

屬性名: font 可以把上述字型樣式合併成一個屬性。

編寫規則：

字型大小，字型族必須都寫上。
字型族必須是最後一位，字型大小必須是倒數第二位。
各個屬性之間用空格隔開。

實際開發中更推薦複合寫法，但這也不是絕對的，比如只想設定字型大小，那就直接用 font-size 屬性。

12. 文字屬性

12.1 文字顏色

屬性名：color

可選值：

顏色名
rgb 或rgba
HEX 或 HEXA （十六進位制）
HSL 或 HSLA

開發中常用的是：rgb/rgba 或 HEX/HEXA（十六進位制）。

舉例：

div {
  	color: rgb(112, 45, 78)
}

12.2 文字間距

字母間距：letter-spacing

單詞間距：word-spacing（透過空格識別單詞）

屬性值為畫素（px），正值讓間距增大，負值讓間距縮小。

12.3 文字修飾

屬性名：text-decoration

可選值：

none：無裝飾線（常用）
underline：下劃線（常用）
overline：上劃線
line-through：刪除線

可搭配以下值使用：

dotted：虛線
wavy：波浪線
也可以指定顏色

舉例：

a {
		text-decoration:none;
}

12.4 文字縮排

屬性名：text-indent

屬性值：css 中的長度單位，例如：40px

舉例：

div {
  	text-indent: 40px;
}

後面我們會學習css 中一些新的長度單位，目前我們只學到了畫素（px），所以這裡只介紹畫素單位。

12.5 文字對齊

屬性名：text-align

常用值：

left：左對齊
right：右對齊
center：居中對齊

舉例：

div {
  	text-align: center;
}

12.6 行高

屬性名：line-height

可選值：

normal：由瀏覽器根據文字大小決定的一個預設值。
畫素（px）。
數字：參考自身 font-size 的倍數（常用）。
百分比：參考自身 font-size 的百分比。

由於字型設計原因，文字在一行中，並不是絕對垂直居中，若一行中都是文字，不會太影響觀感。

舉例：

div {
		line-height: 60px;
  	line-height: 1.5;
  	line-height: 150%;
}

行高注意事項：

line-height 過小會怎樣？ --文字產生重疊，且最小值是0，不能為負數。
line-height 是可以繼承的，且為了能更好的呈現文字，最好寫數值。
line-height 和 height 是什麼關係？

設定了 height ，那麼高度就是 height 的值。
不設定 height 的時候，會根據 line-height 計算高度。

應用場景：

對於多行文字：控制行與行之間的距離。
對於單行文字：讓height等於line-height，可以實現文字垂直居中。

由於字型設計原因，靠上述辦法實現的居中，並不是絕對的垂直居中，但如果一行中都是文字，不會太影響觀感。

12.7 文字對齊-垂直

頂部：無需任何屬性，在垂直方向上，預設就是頂部對齊。
居中：對於單行文字，讓 height = line - height 即可。

問題：多行文字垂直居中怎麼辦？——後面我們透過定位去做。
底部：對於單行文字，目前一個臨時的方法：

讓 line - height =（height x 2）- font - size - x

問題：垂直方向上的底部對齊，更好的解決辦法是什麼？——後面我們透過定位去做。

12.8 vertical-align

屬性名：vertical-align

作用：用於指定同一行元素之間，或 表格單元格內文字的的垂直對齊方式。

常用值：

baseline（預設值）：使元素的基線與父元素的基線對齊。
top：使元素的頂部與其所在行的頂部對齊。
middle：使元素的中部與父元素的基線加上父元素字母 x 的一半對齊。
bottom：使元素的底部與其所在行的底部對齊。

特別注意：vertical-align 不能控制塊元素。

# 13. CSS 列表相關屬性

列表相關屬性，可以作用在 ul、ol、li 元素上。

CSS屬性名	功能	屬性值
`list-style-type`	設定列表符號	常用值如下： `none`：不顯示前面的標識（常用！） `square`：實心方塊 `disc`：圓形 `decimal`：數字 `lower-roman`：小寫羅馬數字 `upper-roman`：大寫羅馬數字 `lower-alpha`：小寫字母 `upper-alpha`：大寫字母
`list-style-position`	設定列表符號的位置	`inside`：在 li 的裡面 `outside`：在 li 的外面
`list-style-image`	自定義列表符號	`url(圖片地址)`
`list-style`	複合屬性	沒有數量，順序的要求

14. 表格相關屬性

邊框相關屬性(其他元素也能用)：

CSS 屬性名	功能	屬性值
`border-width`	邊框寬度	CSS 中可用的長度值
`border-color`	邊框顏色	CSS 中可用的顏色值
`border-style`	邊框風格	`none`：預設值 `solid`：實線 `dashed`：虛線 `dotted`：點線 `double`：雙實線
`border`	邊框複合屬性	沒有數量、順序的要求

以上 4 個邊框相關屬性，其他元素也可以使用，這是我們第一次遇見他們。

在後面的盒子模型中，會詳細介紹邊框相關知識。

表格獨有屬性（只有 table 標籤才能使用)

CSS 屬性名	功能	屬性值
`table-layout`	設定列寬度	`auto`：自動，列寬根據內容計算(預設值)。 `fixed`：固定列寬，平均分。
`boder-spacing`	單元格間距	CSS中可用的長度值。生效的前提：單元格邊框不能合併
`boder-collapse`	合併單元格邊框	`collapse`：合併 `separate`：不合並
`empty-cells`	隱藏沒有內容的單元格	`show`：顯示，預設 `hide`：隱藏生效前提：單元格不能合併
`caption-side`	設定表格標題位置	`top`：在表格上面(預設值) `bottom`：在表格下面

以上 5 個屬性，只有表格才能使用，即：<table>標籤。

15. 背景相關屬性

CSS 屬性名	功能	屬性值
`background-color`	設定背景顏色	符合 CSS 中顏色規範的值預設背景顏色是 `transparent`（透明）。
`background-image`	設定背景圖片	`url(圖片地址)`
`background-repeat`	設定背景重複方式	`repeat`：重複，鋪滿整個元素，預設值 `repeat-x`：只在水平方向重複 `repeat-y`：只在垂直方向重複 `no-repeat`：不重複
`background-position`	設定背景圖位置	透過關鍵字設定位置：寫兩個值，用空格隔開：水平：`left`、`center`、`right` 垂直：`top`、`center`、`bottom` 如果只寫一個值，另一個防線的取值預設為 `center`。透過長度指定座標位置：以元素左上角為座標原點，設定圖片左上角的位置。兩個值，分別為 `x` 座標和 `y` 座標。只寫一個值，會被當做 `x` 座標，`y` 座標預設為 `center`。
`background`	複合屬性	沒有數量和順序要求

16. 滑鼠相關屬性

CSS 屬性名	功能	屬性值
`cursor`	設定滑鼠游標的樣式	`pointer`：小手 `move`: 移動圖示 `text`: 文字選擇器 `crosshair`：十字架 `wait`：等待 `help`：幫助

擴充套件：自定義滑鼠圖示
/*自定義滑鼠游標*/  `cursor：url("./a.jpg"), pointer;`

div{
    width: 400px;
    height: 400px;
    background-color: skyblue;
    cursor: url("./image/ps.png"), pointer;
}
button{
    cursor: help;
}

跟著禹神學前端——CSS 基礎 (2)
2024-10-31
前端CSS
前端基礎學習1 | Web、Html、CSS
2024-03-05
前端WebHTMLCSS
前端基礎_CSS
2019-03-02
前端CSS
CSS——CSS基礎(1)
2022-07-07
CSS
css基礎1
2024-09-28
CSS
跟著老貓來搞GO，基礎進階
2021-11-08
Go
《大前端基礎元件》系列 CSS基礎架構
2020-04-06
前端元件CSS架構
前端基礎面試題@CSS篇
2018-05-14
前端面試題CSS
安心學習，重學前端之（js基礎篇（1））
2019-04-07
前端JS
前端入門3-CSS基礎
2018-10-30
前端CSS
前端-html和css基礎知識
2021-10-19
前端HTMLCSS
零基礎學前端之CSS文字與字型綜合案例
2023-02-02
前端CSS
【機器學習基礎】神經網路/深度學習基礎
2021-11-05
機器學習神經網路深度學習
Css基礎學習—索引
2008-09-12
CSS索引
【WEB基礎】HTML & CSS 基礎入門（1）初識
2019-05-20
WebHTMLCSS
python之前端HTML/CSS基礎知識學習筆記
2017-06-06
Python前端HTMLCSS筆記
python之前端HTML/CSS基礎知識學習筆記
2017-11-12
Python前端HTMLCSS筆記
前端基礎知識複習之CSS
2018-03-15
前端CSS
跟著 React 官方文件學 Hooks
2019-05-14
ReactHook
跟著菜鳥學python
2020-11-13
Python
跟著Zepto學dom操作（一）
2017-11-04
《前端運維》一、Linux基礎--基礎命令（1）
2021-05-09
前端運維Linux
#06-1你認真學了css？佈局基礎
2021-09-09
CSS
0基礎學如何學web前端？
2021-07-04
Web前端
HTML與CSS基礎day1
2020-04-01
HTMLCSS
CSS2基礎（part-1）
2024-08-20
CSS
CSS 基礎學習筆記
2018-11-06
CSS筆記
前端面試基礎手冊（HTML+CSS）
2018-07-29
前端面試HTMLCSS
前端開發基礎知識整理–css篇
2018-03-09
前端CSS
零基礎學前端難嗎?前端好學嗎?
2021-08-23
前端
【跟著大佬學JavaScript】之節流
2022-07-07
JavaScript
跟著廖雪峰學python 005
2023-02-19
Python
前端進階：跟著開源專案學習外掛化架構
2020-06-23
前端架構
卷積神經網路—基礎知識（1）
2018-06-08
卷積神經網路
JavaScript學習（1）：基礎
2013-07-06
JavaScript
高中化學基礎（1）
2024-08-11
前端學習記錄 1：HTML 基礎知識點歸納
2020-02-05
前端HTML
css與javascript重難點，學前端，基礎不好一切白費！
2019-10-31
CSSJavaScript前端

跟著禹神學前端——CSS 基礎 (1)

1. CSS 簡介

2. CSS 的編寫位置

2.1 行內樣式

2.2 內部樣式

2.3 外部樣式

3. 樣式表的優先順序

4. CSS語法規範

5. CSS程式碼風格

6.CSS基本選擇器

6.1 通配選擇器

6.2 元素選擇器

6.3 類選擇器

6.4 ID選擇器

6.5 基本選擇器總結

7. CSS複合選擇器

7.1 交集選擇器

7.2 並集選擇器

7.3 後代選擇器

7.4 子代選擇器

7.5 兄弟選擇器

7.6 屬性選擇器

7.7 偽類選擇器

7.8 偽元素選擇器

8. 選擇器的優先順序

9. CSS三大特性

10. 顏色屬性

11. 字型屬性

11.1 字型大小

11.2 字型族

11.3 字型風格

11.4 字型粗細

11.5 字型複合屬性

12. 文字屬性

12.1 文字顏色

12.2 文字間距

12.3 文字修飾

12.4 文字縮排

12.5 文字對齊

12.6 行高

12.7 文字對齊-垂直

12.8 vertical-align

14. 表格相關屬性

15. 背景相關屬性

16. 滑鼠相關屬性

相關文章