【CSS簡介、基礎選擇器、字型屬性、文字屬性、引入方式】前端小抄(2) - Pink老師自學筆記

JERRY瑞瑞瑞發表於2021-08-29

CSS前端筆記

【CSS簡介、基礎選擇器、字型屬性、文字屬性、引入方式】前端小抄(2)

本學習筆記是個人對 Pink 老師課程的總結歸納，轉載請註明出處！

一、CSS簡介

CSS 的主要使用場景就是佈局網頁，美化頁面的。

1.1 HTML的侷限性

HTML 只關注內容的語義，雖然 HTML 可以做簡單的樣式，但是帶來的是無盡的臃腫和繁瑣……

1.2 CSS網頁的美容師

CSS 是 層疊樣式表 的簡稱。

有時我們也會稱之為 CSS 樣式表 或 級聯樣式表。

CSS 也是一種 標記語言。

CSS 主要用於設定 HTML 頁面中的文字內容（字型、大小、顏色、對齊方式……）、圖片的外形（寬高、邊框樣式、邊距……）以及版面的佈局和外觀顯示樣式。

CSS 讓我們的網頁更加豐富多彩，佈局更加靈活自如，簡單理解：CSS 可以美化 HTML，讓 HTML 更漂亮，讓頁面佈局更簡單。

總結：

HTML 主要做結構，顯示元素內容
CSS 美化 HTML，佈局網頁元素
CSS 最大價值：由 HTML 專注去做結構呈現，樣式交給 CSS，即：結構與樣式分離

1.3 CSS語法規範

使用 HTML 時，需要遵從一定的規範，CSS 也是如此，要想熟練地使用 CSS 對網頁進行修飾，首先需要了解 CSS 樣式規則。

CSS 規則由兩個主要的部分構成：選擇器 以及 一條或多條宣告。

選擇器 是用於指定 CSS 樣式的 HTML 標籤，花括號內是對該物件設定的具體樣式
屬性 和 屬性值 以 “鍵值對” 的形式出現
屬性是對指定的物件設定的樣式屬性，例如：字型大小、文字顏色等
屬性和屬性值之間用英文 : 分開
多個 “鍵值對” 之間用英文 ; 進行區分（末尾的鍵值對可以不加 ;）

所有的樣式，都包含在 <style> 標籤內，表示是樣式表。<style> 一般寫到 </head> 裡。

<head>
    <style type="text/css">
        h4 {
            color: bule;
            font-size: 100px;
        }
    </style>
</head>

注意：<style> 標籤可以寫到其他標籤內部並作用與該標籤區域內，但是這種寫法並不推薦！

1.4 CSS程式碼風格

1.4.1 樣式格式書寫

緊湊格式

h3 { color: deeppink; font-size: 20px; }

展開格式

h3 {
	color: deeppink;
	font-size: 20px;
}

強烈推薦第二種格式，因為更直觀！同時不用擔心佔用空間，因為後期可以通過程式碼壓縮工具來壓縮程式碼。

1.4.2 樣式大小書寫

小寫

h3 {
	color: pink;
}

大寫

H3 {
	COLOR: PINK;
}

強烈推薦樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母，特殊情況除外。

1.4.3 空格規範

h3 {
	color: pink;
}

屬性值前面，冒號後面，保留一個空格
選擇器（標籤）和前花括號中間保留空格

二、CSS基礎選擇器

2.1 CSS選擇器的作用

選擇器（選擇符）就是根據不同的需求把不同的標籤選出來這就是選擇器的作用，簡單來說，就是：選擇標籤用的。

h1 {
	color: red;
	font-size: 25px;
}

以上 CSS 做了兩件事：

找到所有的 h1 標籤。（選對人）
設定這些標籤的樣式：顏色為紅色、字型大小為 25 畫素。（做對事）

2.2 選擇器的分類

選擇器分為 基礎選擇器 和 複合選擇器 兩個大類，本文首先介紹一下基礎選擇器。

基礎選擇器是由 單個 選擇器組成的
基礎選擇器又包括：標籤選擇器、類選擇器、id 選擇器、萬用字元選擇器

2.3 標籤選擇器

標籤選擇器（元素選擇器）是指用 HTML 標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的 CSS 樣式。

語法：

標籤名 {
	屬性1: 屬性值1;
	屬性2: 屬性值2;
	屬性3: 屬性值3;
	...
}

作用：

標籤選擇器可以把某一類標籤全部選擇出來，比如所有的 <div> 標籤和所有的 <span> 標籤。

優點：

能快速為頁面中同型別的標籤統一設定樣式。

缺點：

不能設計差異化樣式，只能選擇全部的當前標籤。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基礎選擇器之標籤選擇器</title>
    <style type="text/css">
        /* 會對所有的該標籤元素運用樣式，優點：快速統一，缺點：無法差異化設定 */
        p {
            color: green;
        }

        div {
            color: pink;
        }
    </style>
</head>

<body>
    <p>男</p>
    <p>男</p>
    <p>男</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

</html>

2.4 類選擇器

如果想要差異化選擇不同的標籤，單獨選一個或者某幾個標籤，可以使用 類選擇器 。

語法：

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

例如：將所有擁有 red 類的 HTML 元素均設定為紅色。

.red {
	color: red;
}

語法：

<div class="red">變紅色</div>

類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個 . 號顯示。

注意：

類選擇器使用 .（英文點號）進行標識，後面緊跟類名（自定義，我們自己命名的）
可以理解為給這個標籤起了一個別名來表示
長名稱或片語可以使用中橫線 - 來為類命名
不能使用已有的關鍵字作為類名
不要使用純數字、中文等命名，儘量使用英文字母來表示
命名要有意義，儘量使別人一眼就知道這個類名的目的（可讀性第一，長度第二，推薦使用英語，如果是使用拼音請使用全拼）
命名規範：見附件（Web 前端開發規範手冊.doc）

記憶口訣：樣式點定義，結構類呼叫，一個或多個，開發最常用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基礎選擇器之類選擇器</title>
    <style type="text/css">
        /* 類選擇器口訣：樣式 . 定義，結構 class 呼叫，一個或多個，開發最常用 */
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

</html>

類選擇器——多類名

我們可以給一個標籤指定多個類名，從而達到更多的選擇目的，這些類名都可以選出這個標籤，簡單理解就是一個標籤有多個名字。

在標籤 class 屬性中寫多個類名
多個類名中間必須用 空格 分開
這個標籤就可以分別具有這些類名的樣式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基礎選擇器之類選擇器</title>
    <style type="text/css">
        /* 一個標籤可以運用多個類選擇器，之間用空格隔開 */
        .red {
            color: red;
        }

        .font35 {
            font-size: 35px;
        }
    </style>
</head>

<body>
    <div class="red font35">zhoujirui</div>
</body>

</html>

多類名開發中使用場景

可以把一些標籤元素相同的樣式（共同的部分）放到一個類裡面
這些標籤都可以呼叫這個公共的類，然後再呼叫自己獨有的類
從而節省 CSS 程式碼，統一修改也非常方便

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基礎選擇器之類選擇器</title>
    <style type="text/css">
        /* 類選擇器最大的優勢在於：複用 */
        .box {
            width: 100px;
            height: 100px;
        }

        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>

</html>

多類名選擇器在後期佈局比較複雜的情況下，是使用得較多的。

2.5 id選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

HTML 元素以 id 屬性來設定 id 選擇器，CSS 中 id 選擇器以 # 來定義。

語法：

#id名 {
	屬性1: 屬性值1;
	...
}

例如：將 id 為 nav 元素中的內容設定為紅色。

#nav {
	color: red;
}

注意：id 屬性只能在每個 HTML 文件中出現一次。

口訣：樣式 # 定義，結構 id 呼叫，只能呼叫一次，別人切勿使用。

id 選擇器和類選擇器的區別：

類選擇器 (class) 好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用
id 選擇器好比人的身份證號碼，全中國是唯一的，不可重複（同一個 id 選擇器只能呼叫一次）
id 選擇器和類選擇器最大的不同在於使用次數上
類選擇器在修改樣式中用的最多，id 選擇器一般用於頁面唯一性的元素上，經常和 JavaScript 搭配使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基礎選擇器之id選擇器</title>
    <style type="text/css">
        /* id 選擇器口訣：樣式 # 定義，結構 id 呼叫，只能呼叫一次，別人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="pink">zhoujirui</div>
</body>

</html>

再次強調：同一 id 只能定義一次，同一 id 選擇器也只能呼叫一次！（對於 CSS 修改樣式來說，最好使用類選擇器，id 選擇器主要與後面的 JS 搭配使用）。

2.6 萬用字元選擇器

在 CSS 中，萬用字元選擇器使用 * 定義，它表示選取頁面中所有元素（標籤）。

語法：

* {
	屬性1: 屬性值1;
	...
}

萬用字元選擇器不需要呼叫，自動就給所有的元素使用樣式
特殊情況才使用，後面講解使用場景（以下是清除所有的元素標籤的內外邊距，後期講）

* {
	margin: 0;
	padding: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基礎選擇器之萬用字元選擇器</title>
    <style type="text/css">
        /* * 給 html 標籤所有的元素都使用樣式，並且這個過程是自動完成的，不需要手動呼叫 */
        * {
            color: red;
        }
    </style>
</head>

<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>還是我的</li>
    </ul>
</body>

</html>

2.7 基礎選擇器總結

基礎選擇器	作用	特點	使用情況	用法
標籤選擇器	可以選出所有相同的標籤，比如：p	不能差異化選擇	較多	`p {color: red;}`
類選擇器	可以選出 1 個或者多個標籤	可以根據需求選擇	非常多	`.nav {color: red;}`
id 選擇器	一次只能選擇 1 個標籤	ID 屬性只能在每個 HTML 文件中出現一次，也只能呼叫一次	一般和 js 搭配	`#nav {color: red;}`
萬用字元選擇器	選擇所有的標籤	選擇的太多，有部分不需要	特殊情況使用	`* {color: red;}`

每個基礎選擇器都有使用場景，都需要掌握
如果是修改樣式，類選擇器是使用最多的

三、CSS字型屬性

CSS Fonts（字型）屬性用於定義：字型系列、大小、粗細、和 文字樣式（如：斜體）。

3.1 字型系列

CSS 使用 font-family 屬性定義文字的字型系列。

p {
	font-family: '微軟雅黑';
}

div {
	font-family: Arial, 'Microsoft YaHei';
}

各種字型之間必須使用英文狀態下的逗號隔開
一般情況下，如果有空格隔開的多個單片語成的字型，加單引號
儘量使用系統預設自帶字型，保證在任何使用者的瀏覽器中都能正確顯示
最常見的幾個字型：body {font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字型屬性之字型系列</title>
    <style type="text/css">
        /* 瀏覽器會從第一個字型開始進行適配，如果本機可以適配的話，那麼就使用該字型，否則看下一個字型，
           如果都不可以，那麼瀏覽器會使用自帶的預設字型，所以實際開發中一般建議使用比較標準化的字型 */
        h2 {
            /* font-family: '微軟雅黑'; 可以使用中文，但不建議 */
            font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
        }

        p {
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
</head>

<body>
    <h2>JERRY的祕密</h2>
    <p>姓名：周吉瑞</p>
    <p>生日：2000年5月4日</p>
    <p>性別：男</p>
    <p>婚姻狀況：單身</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字型屬性之字型系列</title>
    <style type="text/css">
        /* 一些情況下，如果要全域性設定字型可以直接在 body 標籤選擇器中指明 */
        body {
            font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body>
    <h2>JERRY的祕密</h2>
    <p>姓名：周吉瑞</p>
    <p>生日：2000年5月4日</p>
    <p>性別：男</p>
    <p>婚姻狀況：單身</p>
</body>

</html>

注意：瀏覽器字型是依據使用者作業系統來呼叫的，所以這裡介紹一種 Windows 系統安裝字型的方法。

3.2 字型大小

CSS 使用 font-size 屬性定義字型大小。

p {
	font-size: 20px;
}

px（畫素）大小是我們網頁的最常用的單位
谷歌瀏覽器預設的文字大小為：16px
不同瀏覽器可能預設顯示的字號大小不一致，我們儘量給一個明確值大小，不要預設大小
可以給 body 指定整個頁面文字的大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字型屬性之字型大小</title>
    <style type="text/css">
        /* 全域性設定時，一般在 body 標籤選擇器中指定文字大小，谷歌瀏覽器預設 16px，
           但是最好還是指定一個明確值，以保證在不同瀏覽器中的效果是一樣的 */
        body {
            font-size: 24px;
        }

        /* 標題標籤比較特殊，需要單獨指定文字大小 */
        h2 {
            font-size: 54px;
        }
    </style>
</head>

<body>
    <h2>JERRY的祕密</h2>
    <p>姓名：周吉瑞</p>
    <p>生日：2000年5月4日</p>
    <p>性別：男</p>
    <p>婚姻狀況：單身</p>
</body>

</html>

3.3 字型粗細

CSS 使用 font-weight 屬性設定文字字型的粗細。

p {
	font-weight: bold;
}

屬性值	描述
`normal`	預設值（不加粗的）
`bold`	定義粗體（加粗的）
`100-900`	400 等同於 normal，而 700 等同於 bold，注意這個數字後面不跟單位

學會讓加粗標籤（比如 h 和 strong 等）變為不加粗，或者讓其他標籤加粗
實際開發時，我們更喜歡用數字表示粗細

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字型屬性之字型粗細</title>
    <style type="text/css">
        .bold {
            /* font-weight: bold; */
            /* 實際開發中，我們更提倡使用數字來表示加粗的效果 */
            /* 這個 700 的後面不要跟單位 */
            /* 具體效果請查閱 CSS 文件 */
            font-weight: 700;
        }

        /* 使文字不加粗 */
        h2 {
            /* font-weight: normal; */
            font-weight: 400;
        }
    </style>
</head>

<body>
    <h2>JERRY的祕密</h2>
    <p>姓名：周吉瑞</p>
    <p>生日：2000年5月4日</p>
    <p>性別：男</p>
    <p class="bold">婚姻狀況：單身</p>
</body>

</html>

3.4 文字樣式

CSS 使用 font-style 屬性設定文字的風格。

p {
	font-style: normal;
}

屬性值	作用
`normal`	預設值，瀏覽器會顯示標準的字型樣式 font-style: normal;
`italic`	瀏覽器會顯示斜體的字型樣式

注意：平時我們很少給文字加斜體，反而要給斜體標籤 (em、i) 改為不傾斜字型。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字型屬性之字型樣式（風格）</title>
    <style type="text/css">
        p {
            /* 讓不傾斜的字型傾斜 */
            font-style: italic;
        }

        em {
            /* 讓傾斜的字型不傾斜 */
            font-style: normal;
        }
    </style>
</head>

<body>
    <p>上課時候的你</p>
    <em>下課時候的你</em>
</body>

</html>

3.5 字型複合屬性

字型屬性可以把以上文字樣式綜合來寫，這樣可以更節約程式碼。

body {
	font: font-style font-weight font-size/line-height font-family;
}

使用 font 屬性時，必須按上面語法格式中的順序書寫，不能更換順序，並且各個屬性間以空格隔開
不需要設定的屬性可以省略（取預設值），但必須保留 font-size 和 font-family 屬性，否則 font 屬性將不起作用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字型屬性之複合屬性</title>
    <style type="text/css">
        /* 想要 div 文字變傾斜、加粗、字號設定為 16 畫素，並且是微軟雅黑 */
        div {
            /* font-style: italic;
               font-weight: 700;
               font-size: 16px;
               font-family: 'Microsoft YaHei'; */

            /* 複合屬性：簡寫的方式，裡面的順序不能打亂 以空格隔開 */
            /* font: font-style font-weight font-size/line-height font-family; */
            font: italic 700 16px 'Microsoft YaHei';
            /* 注意：不需要設定的屬性可以省略（取預設值），但必須保留 font-size 和 font-family 屬性，否則 font 屬性將不起作用 */
            /* font: 20px 'Microsoft YaHei'； */
        }
    </style>
</head>

<body>
    <div>三生三世十里桃花，一心一意百行程式碼</div>
</body>

</html>

3.6 字型屬性總結

屬性	表示	注意點
`font-size`	字號	我們通常用的單位是 px 畫素，一定要跟上單位
`font-family`	字型	實際工作中按照團隊約定來寫字型
`font-weight`	字型屬性	記住加粗是 700 或者 bold 不加粗是 normal 或者 400 記住數字不要跟單位
`font-style`	字型樣式	記住傾斜是 italic 不傾斜是 normal 工作中我們最常用 normal
`font`	字型連寫	1、字型連寫是有順序的不能隨意換位置，2、其中字號和字型必須同時出現

四、CSS文字屬性

CSS Text（文字）屬性可定義文字的 外觀，比如：文字顏色、文字對齊、文字裝飾、文字縮排、行間距 等。

4.1 文字顏色

color 屬性用於定義文字的顏色。

div {
	color: red;
}

表示方式	屬性值
預定義的顏色值	red，green，blue，還有我們的御用色 pink
十六進位制	#FF0000，#FF6600，#29D794（每兩位對應：#紅R綠G藍B）
RGB 程式碼	rgb(255, 0, 0) 或 rgb(100%, 0%, 0%)

注意：開發中最常用的是十六進位制。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字外觀屬性之文字顏色</title>
    <style type="text/css">
        div {
            /* color: deeppink; */
            /* color: #FF1493; 最常用 */
            color: rgb(255, 20, 147);
        }
    </style>
</head>

<body>
    <div>pink</div>
</body>

</html>

4.2 文字對齊

text-align 屬性用於設定元素內文字內容的水平對齊方式。

div {
	text-align: center;
}

屬性值	解釋
left	左對齊（預設值）
rigth	右對齊
center	居中對齊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字外觀之文字對齊</title>
    <style type="text/css">
        h1 {
            /* 本質是讓 h1 盒子裡面的文字水平居中對齊 */
            /* text-align: center; */
            text-align: right;
        }
    </style>
</head>

<body>
    <h1>右對齊的標題</h1>
</body>

</html>

注意：

text-align 屬性只能作用於 塊級元素，同時讓該塊級元素內的 行內元素 實現居中（不一定是文字）。

上述例子中：h1 為塊級元素，所以給 h1 設定 text-align，便會作用於裡面的文字（如果裡面還有行內元素的話，也會一同作用）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字外觀之文字對齊</title>
    <style type="text/css">
        div {
            text-align: center;
        }
    </style>
</head>

<body>
   <div>
	   <p>zhoujiruizhoujirui</p>
   </div>
</body>

</html>

上述例子中：為 div 設定 text-align 之所以能夠使其內部的塊級元素 p 裡的文字居中，原因是 p 會繼承父元素 div 的 text-align 屬性，所以相當於對 p 設定了 text-align。

4.3 文字裝飾

text-decoration 屬性規定新增到文字的修飾，可以給文字新增 下劃線、刪除線、上劃線 等。

div {
	text-decoration: underline;
}

屬性值	描述
`none`	預設，沒有裝飾線（最常用）
`underline`	下劃線，連結 a 自帶下劃線（常用）
`overline`	上劃線（幾乎不用）
`line-through`	刪除線（不常用）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字外觀之文字裝飾</title>
    <style type="text/css">
        /* 預設為 none 沒有裝飾 */
        div {
            /* 上劃線 幾乎不用 */
            /* text-decoration: overline; */
            /* 刪除線 不常用 */
            /* text-decoration: line-through; */
            /* 下劃線 常用，連結 a 自帶下劃線 */
            text-decoration: underline;
        }

        a {
            /* 取消 a 預設的下劃線 */
            text-decoration: none;
            color: #333333;
        }
    </style>
</head>

<body>
    <div>粉紅色的回憶</div>
    <a href="http://jerry-z-j-r.github.io">JERRY</a>
</body>

</html>

4.4 文字縮排

text-indent 屬性用來指定文字的第一行的縮排，通常是將段落的首行縮排。

div {
	text-indent: 10px;
}

通過設定該屬性，所有元素的第一行都可以縮排一個給定的長度，甚至該長度可以是負值。

p {
	text-indent: 2em;
}

em 是一個相對單位，就是當前元素 (font-size) 1 個文字的大小，如果當前元素沒有設定大小，則會按照父元素的 1 個文字大小。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字外觀之文字縮排</title>
    <style type="text/css">
        p {
            font-size: 24px;
            /* 文字的首行縮排多少距離，不僅可以為正值，還可以為負值 */
            /* text-indent: 20px; */
            /* em 為相對於當前元素的大小單位 */
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>開啟北京、上海與廣州的地鐵地圖，你會看見三張縱橫交錯的線路網路，
        這代表了中國最成熟的三套城市軌道交通系統</p>

    <p>可即使是這樣，在北上廣生活的人依然少不了對地鐵的抱怨，其中談及最多的問題便是擁擠，
        對很多人而言，每次擠地鐵的過程，都像是一場硬仗。更何況，還都是敗仗居多。</p>

    <p>那麼，當越來越多的二線甚至三線城市迎接來了自己的地鐵，中國哪裡的地鐵是最擁擠的呢？</p>
</body>

</html>

4.5 行間距

line-height 屬性用於設定行間的距離（行高），可以控制文字行與行之間的距離。

p {
	line-height: 26px;
}

行間距 = 上間距 + 文字高度 + 下間距
上下間距 = （行間距 - 文字高度）/ 2
文字高度 = font-size

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字外觀之行間距</title>
    <style type="text/css">
        /* 行間距 = 上間距 + 文字高度 + 下間距 */
        /* 行間距 = 行高 */
        /* 文字高度 = 字型畫素大小 */
        /* 上下間距 = （行間距 - 文字高度）/ 2 */
        p {
            line-height: 25px;
        }
    </style>
</head>

<body>
    <p>開啟北京、上海與廣州的地鐵地圖，你會看見三張縱橫交錯的線路網路，
        這代表了中國最成熟的三套城市軌道交通系統</p>

    <p>可即使是這樣，在北上廣生活的人依然少不了對地鐵的抱怨，其中談及最多的問題便是擁擠，
        對很多人而言，每次擠地鐵的過程，都像是一場硬仗。更何況，還都是敗仗居多。</p>

    <p>那麼，當越來越多的二線甚至三線城市迎接來了自己的地鐵，中國哪裡的地鐵是最擁擠的呢？</p>
</body>

</html>

補充：行間距測量技巧：上一行文字的底部與本行文字的底部之間的距離就是行間距。

4.6 文字屬性總結

屬性	表示	注意點
`color`	文字顏色	我們通常用十六進位制而且通常是簡寫形式 #fff（6 個一樣可以簡寫）
`text-align`	文字對齊	可以設定文字水平的對齊方式
`text-indent`	文字縮排	通常我們用於段落首行縮排2個字的距離 text-indent: 2em;
`text-decoration`	文字修飾	牢記新增下劃線 underline 取消下劃線 none
`line-height`	行高	控制行與行之間的距離

五、CSS引入方式

5.1 CSS的三種引入方式

按照 CSS 樣式書寫的位置（或者引入的方式），CSS 樣式表可以分為三大類：

行內樣式表（行內式）
內部樣式表（嵌入式）
外部樣式表（外鏈式）

5.2 行內樣式表

行內樣式表（內聯樣式表）是在元素標籤內部的 style 屬性中設定 CSS 樣式，適合於修改簡單樣式。

<div style="color: red; font-size: 12px;">
    青春不常在，抓緊談戀愛
</div>

style 其實就是標籤的屬性
在雙引號中間，寫法要符合 CSS 規範
可以控制當前的標籤設定樣式
由於書寫繁瑣，並且沒有體現出結構與樣式相分離的思想，所以不推薦大量使用，只有對當前元素新增簡單樣式的時候，可以考慮使用
使用行內樣式表設定 CSS，通常也被稱為 行內式引入

5.3 內部樣式表

內部樣式表（內嵌樣式表）時寫到 HTML 頁面內部，是將所有的 CSS 程式碼抽取出來，單獨放到一個 <style> 標籤中。

<style type="text/css">
    div {
        color: red;
        font-size: 12px;
    }
</style>

<style> 標籤理論上可以放在 HTML 文件的任何地方，但一般會放到文件的 <head> 標籤中
目前的瀏覽器已經支援省略 type 屬性
通過此種方式，可以方便控制當前整個頁面中的元素樣式設定
程式碼結構清晰，但是並沒有實現結構與樣式完全分離
使用內部樣式表設定 CSS，通常也被稱為 嵌入式引入，這種方式是我們練習時常用的方式

5.4 外部樣式表

實際開發都是外部樣式表，適合於樣式比較多的情況，核心是：樣式單獨寫到 CSS 檔案中，之後把 CSS 檔案引入到 HTML 頁面中使用。

引入外部樣式表分為兩步：

新建一個字尾名為：.css 的樣式檔案，把所有的 CSS 程式碼都放入此檔案中
在 HTML 頁面中，使用 <link> 標籤引入這個檔案

<link rel="stylesheet" type="text/css" href="css檔案路徑">

屬性	作用
`rel`	定義當前文件與被連結文件之間的關係，在這裡需要指定為 "stylesheet"，表示被連結的文件是一個樣式表檔案
`type`	定被連結文件的 MIME 型別，該屬性最常見的 MIME 型別是 "text/css"，該型別描述樣式表，目前的瀏覽器已經支援省略 type 屬性
`href`	定義所連結外部樣式表檔案的 URL，可以是相對路徑，也可以是絕對路徑

注意：使用外部樣式表設定 CSS，通常也被稱為 外鏈式 或 連結式引入，這種方式是開發中常用的方式。

5.5 CSS引入方式總結

樣式表	優點	缺點	使用情況	控制範圍
行內樣式表（行內式）	書寫方便，權重高	結構樣式混寫	較少	控制一個標籤
內部樣式表（嵌入式）	部分結構和樣式分離	沒有徹底分離	較多	控制一個頁面
外部樣式表（外鏈式）	完全實現結構和樣式相分離	需要引入	最多，吐血推薦	控制多個頁面

【與我聯絡 - 周吉瑞（JERRY）】

QQ：1846334075

微信：zhoujirui54

郵箱：www.zjr1846334075@foxmail.com

GitHub：https://github.com/JERRY-Z-J-R

【CSS複合選擇器、元素顯示模式、背景】前端小抄(3) - Pink老師自學筆記
2021-08-30
CSS模式前端筆記
CSS筆記——屬性選擇器
2018-11-26
CSS筆記
CSS字型屬性和文字屬性詳解
2019-03-10
CSS
[CSS]屬性選擇器
2021-09-14
CSS
css文字屬性2
2018-11-09
CSS
CSS基礎2--屬性
2018-08-09
CSS
CSS——CSS 給文字加樣式：① 字型屬性
2019-04-17
CSS
精讀《使用 CSS 屬性選擇器》
2018-11-26
CSS
css字型樣式屬性
2018-11-02
CSS
CSS 常用文字屬性
2024-03-24
CSS
css常用文字屬性
2020-10-18
CSS
前端基礎問題：CSS vertical-align 屬性
2021-05-11
前端CSS
css文字外觀屬性
2018-11-08
CSS
【譯】使用這些 CSS 屬性選擇器來提高前端開發效率！
2019-05-07
CSS前端
vue 基礎入門筆記 19:計算屬性和偵聽屬性
2019-08-19
Vue筆記
CSS基礎-行快屬性，hover
2021-11-14
CSS
CSS介紹、選擇器、屬性相關
2024-05-25
CSS
使用 CSS 選擇器實現對不含 title 屬性元素的選擇
2024-07-16
CSS
【CSS】CSS簡介，CSS基礎選擇器詳解
2024-03-02
CSS
【譯】用CSS屬性選擇器來拼接HTML的DNA
2018-10-31
CSSHTML
【小技巧】巧用CSS屬性值正則匹配選擇器
2020-03-11
CSS
CSS——CSS 給文字加樣式：② 文字屬性
2019-04-18
CSS
CSS3新增選擇器（屬性選擇器、結構偽類選擇器、偽元素選擇器）
2023-04-03
CSSS3
css基礎02-操作文字屬性、背景屬性、補充知識（去掉列表的前標、列表
2021-09-09
CSS
CSS 屬性篇(七)：Display屬性
2019-02-22
CSS
pandas - 基礎屬性
2024-03-10
CSS（1）基礎語法、常見屬性
2021-05-28
CSS
重學前端筆記21-css選擇器
2019-03-27
前端筆記CSS
React學習手記2-屬性校驗和預設屬性
2019-02-26
React
C#學習筆記-欄位、屬性、索引器
2024-05-01
C#筆記索引
CSS入門之引用、選擇器、屬性（六分之三）
2018-07-11
CSS
css display 屬性
2019-09-24
CSS
CSS perspective 屬性
2019-04-20
CSS
CSS transform 屬性
2019-04-20
CSSORM
css盒子模型的屬性介紹
2021-09-11
CSS模型
JavaSE基礎:Properties屬性類
2019-02-28
Java
前端筆記 - vue2.x計算屬性computed初始化
2018-05-29
前端筆記Vue
ArcPy批量選擇指定屬性的要素
2020-10-31

【CSS簡介、基礎選擇器、字型屬性、文字屬性、引入方式】前端小抄(2) - Pink老師自學筆記

【CSS簡介、基礎選擇器、字型屬性、文字屬性、引入方式】前端小抄(2)

一、CSS簡介

1.1 HTML的侷限性

1.2 CSS網頁的美容師

1.3 CSS語法規範

1.4 CSS程式碼風格

1.4.1 樣式格式書寫

1.4.2 樣式大小書寫

1.4.3 空格規範

二、CSS基礎選擇器

2.1 CSS選擇器的作用

2.2 選擇器的分類

2.3 標籤選擇器

2.4 類選擇器

2.5 id選擇器

2.6 萬用字元選擇器

2.7 基礎選擇器總結

三、CSS字型屬性

3.1 字型系列

3.2 字型大小

3.3 字型粗細

3.4 文字樣式

3.5 字型複合屬性

3.6 字型屬性總結

四、CSS文字屬性

4.1 文字顏色

4.2 文字對齊

4.3 文字裝飾

4.4 文字縮排

4.5 行間距

4.6 文字屬性總結

五、CSS引入方式

5.1 CSS的三種引入方式

5.2 行內樣式表

5.3 內部樣式表

5.4 外部樣式表

5.5 CSS引入方式總結

相關文章