【CSS複合選擇器、元素顯示模式、背景】前端小抄(3) - Pink老師自學筆記

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

CSS模式前端筆記

【CSS複合選擇器、元素顯示模式、背景】前端小抄(3)

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

一、CSS的複合選擇器

1.1 什麼是複合選擇器

在 CSS 中，可以根據選擇器的型別把選擇器分為：基礎選擇器 和 複合選擇器，複合選擇器是建立在基礎選擇器之上，對基礎選擇器進行組合形成的。

複合選擇器可以更準確、更高效的選擇目標元素（標籤）
複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的
常用的複合選擇器包括：後代選擇器、子選擇器、並集選擇器、偽類選擇器等

1.2 後代選擇器

後代選擇器 又稱為 包含選擇器，可以選擇父元素裡面子元素。其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生巢狀時，內層標籤就成為外層標籤的後代。

語法：

元素1 元素2 { 樣式宣告 }

上述語法表示選擇元素 1 裡面的所有元素 2 （後代元素）。

例如：

ul li { 樣式宣告 } 		/* 選擇 ul 裡面所有的 li 標籤元素 */

元素1 和元素2 中間用空格隔開
元素1 是父級，元素2 是子級，最終選擇的是元素2，即元素1 是不會生效樣式的
元素2 可以是兒子，也可以是孫子等，只要是元素1 的後代即可
元素1 和元素2 可以是任意基礎選擇器

<!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>
        /* 把 ol 裡面的小 li 選出來改為 pink */
        ol li {
            color: pink;
        }

        /* 把 ol 裡面的小 a 選出來改為 red */
        ol a {
            color: red;
        }

        /* 把 ul 裡面的小 li 選出來改為 green */
        ul li {
            color: green;
        }

        /* 把 nav 類中的 li 裡面的 a 選出來改為 yellow */
        .nav li a {
            color: yellow;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是 ol 的孩子</li>
        <li>我是 ol 的孩子</li>
        <li>我是 ol 的孩子</li>
        <li><a href="#">我是 ol 的孫子</a></li>
    </ol>
    <ul>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li><a href="#">我是 ul 的孫子，但是我不會變化</a></li>
    </ul>
    <ul class="nav">
        <li><a href="#">我偏要變色！並且只能我一個人色……</a></li>
    </ul>
</body>

</html>

1.3 子選擇器

子元素選擇器（子選擇器）只能選擇作為某元素的最近一級子元素，簡單理解就是選親兒子元素。

注意：是最近一級而並非最近一個！

語法：

元素1>元素2 { 樣式宣告 }

上述語法表示選擇元素1 裡面的所有直接後代（子元素）元素2。

例如：

div>p { 樣式宣告 } 	/* 選擇 div 裡面所有最近一級 p 標籤元素 */

元素1 和元素2 中間用大於號隔開
元素1 是父級，元素2 是子級，最終選擇的是元素2，即元素1 是不會生效樣式的
元素2 必須是親兒子，其孫子、重孫之類都不歸他管，你也可以叫：親兒子選擇器

<!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>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是兒子</a>
        <p>
            <a href="#">我是孫子</a>
        </p>
    </div>
</body>

</html>

1.4 並集選擇器

並集選擇器 可以選擇多組標籤，同時為他們定義相同的樣式，通常用於集體宣告。
並集選擇器 是各選擇器通過英文逗號 , 連線而成，任何形式的選擇器都可以作為並集選擇器的一部分。

語法：

元素1, 元素2, 元素3 { 樣式宣告 }

元素1,
元素2,
元素3 {
    樣式宣告
}
/* 推薦寫法，編碼風格 */

上述語法表示選擇元素1、元素2 和元素3。

例如：

ul, div { 樣式宣告 }		 /* 選擇 ul 和 div標籤元素 */

元素1 和元素2 中間用逗號隔開（最後一個不加逗號）
逗號可以理解為和的意思
並集選擇器通常用於集體宣告

<!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>        /* 要求1：請把熊大和熊二改為粉色 */        /* div,        p {            color: pink;        } */        /* 要求2：請把熊大和熊二改為紅色，還有小豬一家改為粉色 */        div,        p,        .pig li {            color: pink;        }        /* 語法規範：並集選擇器通常豎著寫 */    </style></head><body>    <div>熊大</div>    <p>熊二</p>    <span>光頭強</span>    <ul class="pig">        <li>小豬佩奇</li>        <li>豬爸爸</li>        <li>豬媽媽</li>    </ul></body></html>

1.5 偽類選擇器

偽類選擇器 用於向某些選擇器新增特殊的效果，比如：給連結新增特殊效果，或選擇第 1 個，第 n 個元素。
偽類選擇器 書寫最大的特點是用冒號 : 表示，比如：:hover、:first-child。
因為偽類選擇器很多，比如：連結偽類、結構偽類 等，所以這裡先講解常用的連結偽類選擇器。

1.6 連結偽類選擇器

連結偽類選擇器注意事項：

為了確保生效且不衝突，請按照 LVHA 的循順序宣告 :link :visited :hover :active
記憶法：love hate 或者 lv 包包 hao
因為 a 連結在瀏覽器中具有預設樣式，所以我們實際工作中都需要給連結單獨指定樣式

連結偽類選擇器實際工作開發中的寫法：

/* a 是標籤選擇器 所有的連結 */a {	color: gray;}/* :hover 是連結偽類選擇器 滑鼠經過 */a:hover {	color: red; 	/* 滑鼠經過的時候，由原來的 灰色 變成了紅色 */}

<!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>        /* 注意：要學會觸類旁通，這裡不只是可以改變顏色，當連結為圖片時還可以改圖片 */        /* 1、a:link 把沒有點選過的（訪問過的）連結選出來 */        a:link {            color: #333;            text-decoration: none;        }        /* 2、a:visited 選擇點選過的（訪問過的）連結選出來 */        a:visited {            color: orange;        }        /* 3、a:hover 選擇滑鼠經過（停留）的那個連結 */        a:hover {            color: skyblue;        }        /* 4、a:active 選擇的是我們滑鼠正在按下還沒有彈起滑鼠的那個連結 */        a:active {            color: green;        }    </style></head><body>    <a href="#">小豬佩奇</a></body></html>

1.7 :focus偽類選擇器

:focus 偽類選擇器用於選取獲得焦點的表單元素。

焦點就是游標，一般情況 <input> 類表單元素才能獲取，因此這個選擇器也主要針對於表單元素來說。

input:focus {	background-color: yellow;}

<!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>複合選擇器之focus偽類選擇器</title>    <style>        /* 把獲得游標的 input 表單元素選區出來 */        input:focus {            background-color: pink;            color: red;        }    </style></head><body>    <input type="text">    <input type="text">    <input type="text"></body></html>

1.8 複合選擇器總結

選擇器	作用	特徵	使用情況	隔開符號及用法
後代選擇器	用來選擇後代元素	可以是子孫後代	較多	符號是空格 `.nav a`
子代選擇器	選擇最近一級元素	只選親兒子	較少	符號是大於 `.nav>p`
並集選擇器	選擇某些相同樣式的元素	可以用於集體宣告	較多	符號是逗號 `.nav`, `.header`
連結偽類選擇器	選擇不同狀態的連結	跟連結相關	較多	重點記住 `a{}` 和 `a:hover` 實際開發的寫法
`:focus` 選擇器	選擇獲得游標的表單	跟表單相關	較少	`input:focus` 記住這個寫法

強調：複合選擇器的層級寫得越細越好（可讀性，可維護性，安全性），同時將複合選擇器的層級寫得越細，可以提前避免大部分的選擇器優先順序混亂！

二、CSS 的元素顯示模式

2.1 什麼是元素顯示模式

作用：網頁的標籤非常多，在不同地方會用到不同型別的標籤，瞭解他們的特點可以更好的佈局我們的網頁。

元素顯示模式 就是元素（標籤）以什麼方式進行顯示，比如 <div> 自己佔一行，比如一行可以放多個 <span>。

HTML 元素一般分為 塊元素 和 行內元素 兩種型別。

2.2 塊元素

常見的塊元素有 <h1> ~ <h6>、<p>、<div>、<ul>、<ol>、<li> 等，其中 <div> 標籤是最典型的塊元素。

塊級元素的特點：

比較霸道，自己獨佔一行
高度，寬度、外邊距以及內邊距都可以控制
寬度預設是容器（父級寬度）的 100%
是一個容器及盒子，裡面可以放行內或者塊級元素

注意：

文字類的塊級元素內不能放置塊級元素，會發生語法錯誤
<p> 標籤主要用於存放文字，因此 <p> 裡面不能放塊級元素，特別是不能放 <div>
同理， <h1> ~ <h6> 等都是文字類塊級標籤，裡面也不能放其他塊級元素

2.3 行內元素

常見的行內元素有 <a>、<span> 等，其中 <span> 標籤是最典型的行內元素，有的地方也將行內元素稱為內聯元素。

行內元素的特點：

相鄰行內元素在一行上，一行可以顯示多個
高、寬直接設定是無效的
預設寬度就是它本身內容的寬度
行內元素只能容納文字或其他行內元素（a 除外）

注意：

連結裡面不能再放連結
特殊情況連結 <a> 裡面可以放塊級元素，但是給 <a> 轉換一下塊級模式最安全

2.4 行內塊元素

在行內元素中有幾個特殊的標籤 —— <img />、<input />、<td>，它們同時具有 塊元素 和 行內元素 的特點，有些資料稱它們為 行內塊元素。

行內塊元素的特點：

和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內元素特點）
預設寬度就是它本身內容的寬度（行內元素特點）
高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）

2.5 元素顯示模式總結

元素模式	元素排列	設定樣式	預設寬度	包含
塊級元素	一行只能放一個塊級元素	可以設定寬度和高度	容器的 100%	容量級可以包含任何標籤
行內元素	一行可以放多個行內元素	不可以直接設定寬度和高度	它本身內容的寬度	容納文字或其他行內元素
行內快元素	一行放多個行內塊元素	可以設定寬度和高度	它本身內容的寬度

學習元素顯示模式的主要目的是分清它們各自的特點，當我們網頁佈局的時候，在合適的地方用合適的標籤元素。

2.6 元素顯示模式轉換

特殊情況下，我們需要元素模式的轉換，簡單理解: 一個模式的元素需要另外一種模式的特性
比如想要增加連結 <a> 的觸發範圍。

轉換為塊元素：display: block;（由於經常需要設定寬高，所以通常會將行內元素轉換為塊元素）
轉換為行內元素：display: inline;
轉換為行內塊：display: inline-block;（常用）

<!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>        a {            width: 150px;            height: 50px;            background-color: orange;            /* 把行內元素 a 轉換為 塊級元素 */            display: block;        }        div {            width: 300px;            height: 100px;            background-color: black;            color: white;            /* 把 div 塊級元素轉化為行內元素 */            display: inline;        }        span {            width: 300px;            height: 30px;            background-color: skyblue;            /* 行內元素轉化為行內塊元素 */            display: inline-block;        }    </style></head><body>    <a href="#">我是行內元素</a>    <a href="#">我是行內元素</a>    <div>我是塊級元素</div>    <div>我是塊級元素</div>    <span>行內元素轉化為行內塊元素</span>    <span>行內元素轉化為行內塊元素</span></body></html>

2.7 簡潔版小米側邊欄案例

<!DOCTYPE html><html lang="zh-CN"><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>        /* 1、把 a 轉換為塊級元素 */        a {            display: block;            width: 230px;            height: 40px;            background-color: #55585a;            font-size: 14px;            color: #fff;            text-decoration: none;            text-indent: 2em;            /* 一個小技巧：單行文字垂直居中的程式碼，讓文字的行高等於盒子的高度 */            line-height: 40px;        }        /* 2、滑鼠經過連結變換背景顏色 */        a:hover {            background-color: #ff6700;        }    </style></head><body>    <!--    說明：在實際開發中，為了避免連結堆疊，從而降低瀏覽器排名    開發中一般都將這些連結放在無序列表中，這裡只是為了方便演示才這樣使用	-->    <a href="#">手機 電話卡</a>    <a href="#">電視 盒子</a>    <a href="#">筆記本 平板</a>    <a href="#">出行 穿戴</a>    <a href="#">智慧 路由器</a>    <a href="#">健康 兒童</a>    <a href="#">耳機 音響</a></body></html>

2.8 小技巧：單行文字垂直居中

CSS 沒有給我們提供文字垂直居中的程式碼，這裡我們可以使用一個小技巧來實現。

解決方案：讓 文字的行高 等於 盒子的高度 就可以讓文字在當前盒子內垂直居中。

簡單理解：行高的上空隙和下空隙把文字擠到中間了，如果行高小於盒子高度，文字會偏上，如果行高大於盒子高度，則文字偏下。

三、CSS 的背景

通過 CSS 背景屬性，可以給頁面元素新增背景樣式。
背景屬性可以設定 背景顏色、背景圖片、背景平鋪、背景圖片位置、背景影像固定 等。

3.1 背景顏色

background-color 屬性定義了元素的背景顏色。

background-color: 顏色值;

一般情況下元素背景顏色預設值是 transparent（透明），我們也可以手動指定背景顏色為透明色。

background-color: transparent;

目前 CSS 還支援豐富的漸變色，但是某些瀏覽器不支援，這裡瞭解即可，具體內容請查閱資料。

<!DOCTYPE html><html lang="zh-CN"><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>        #grad1 {            height: 200px;            /* 瀏覽器不支援時顯示 */            background-color: red;            /* 線性漸變 - 從上到下（預設情況下）*/            background-image: linear-gradient(#e66465, #9198e5);        }    </style></head><body>    <h3>線性漸變 - 從上到下</h3>    <p>從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：</p>    <div id="grad1"></div>    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支援漸變。</p></body></html>

【詳細內容】https://www.runoob.com/css3/css3-gradients.html

3.2 背景圖片

background-image 屬性描述了元素的背景影像，實際開發常見於 logo 或者一些裝飾性的小圖片或者是超大的背景圖片, 優點是非常便於控制位置（精靈圖也是一種運用場景）。

background-image : none | url(url)

引數值	作用
`none`	無背景圖（預設的）
`url`	使用絕對或相對地址指定背景影像

注意：背景圖片後面的地址，千萬不要忘記加 URL，同時裡面的路徑不要加引號。

background-color: pink;background-image: url(../images/logo.png);/* 1、背景圖片不平鋪 *//* background-repeat: no-repeat; *//* 2、預設情況下，背景圖片是平鋪的 *//* background-repeat: repeat; *//* 3、沿著x軸平鋪 *//* background-repeat: repeat-x; *//* 4、沿著y軸平鋪 */background-repeat: repeat-y;/* 頁面元素既可以新增背景顏色也可以新增背景圖片，只不過背景圖片區域會覆蓋背景顏色 */

3.3 背景平鋪

如果需要在 HTML 頁面上對背景影像進行平鋪，可以使用 background-repeat 屬性。

注：平鋪可以簡單的理解為“重複”。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

引數值	作用
`repeat`	背景影像在縱向和橫向上平鋪（預設的）
`no-repeat`	背景影像不平鋪
`repeat-x`	背景影像在橫向上平鋪
`repeat-y`	背景影像在縱向上平鋪

3.4 背景圖片位置

利用 background-position 屬性可以改變圖片在背景中的位置。

background-position: x y;

引數代表的意思是：x 座標和 y 座標，可以使用 方位名詞 或者 精確單位。

引數值	說明
`length`	百分數 \| 由浮點數字和單位識別符號組成的長度值
`position`	top \| center \| bottom \| left \| center \| rigth 方位名詞

引數是方位名詞
- 如果指定的兩個值都是方位名詞，則兩個值前後順序無關，比如 left top 和 top left 效果一致
- 如果只指定了一個方位名詞，另一個值省略，則第二個值預設居中對齊
引數是精確單位
- 如果引數值是精確座標，那麼第一個肯定是 x 座標，第二個一定是 y 座標
- 如果只指定一個數值，那該數值一定是 x 座標，另一個預設垂直居中
引數是混合單位
- 如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是 x 座標，第二個值是 y 座標

3.5 背景影像固定（背景附著）

background-attachment 屬性設定背景影像是否固定或者隨著頁面的其餘部分滾動。

background-attachment 後期可以製作 視差滾動 的效果。

background-attachment : scroll | fixed

引數	作用
`scroll`	背景影像是隨物件內容滾動的（可見區域取決於背景影像的高度）
`fixed`	背景影像固定

<!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>        body {            background-image: url(images/bg.jpg);            background-repeat: no-repeat;            background-position: center top;            /* 把背景圖片固定住 */            background-attachment: fixed;            color: #fff;            font-size: 20px;        }    </style></head><body>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p>    <p>天王蓋地虎, pink老師一米五</p></body></html>

3.6 背景複合寫法

為了簡化背景屬性的程式碼，我們可以將這些屬性合併簡寫在同一個屬性 background 中，從而節約程式碼量。
當使用簡寫屬性時，沒有特定的書寫順序，一般習慣約定順序為：
background: 背景顏色背景圖片地址背景平鋪背景影像滾動背景圖片位置。

background: transparent url(image.jpg) repeat-y fixed top;

這是實際開發中，我們更提倡的寫法。

3.7 背景色半透明

CSS3 為我們提供了背景顏色半透明的效果。

background: rgba(0, 0, 0, 0.3);

最後一個引數是 alpha 透明度，取值範圍在 0~1 之間
我們習慣把 0.3 的 0 省略掉，寫為 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子裡面的內容不受影響
CSS3 新增屬性，是 IE9+ 版本瀏覽器才支援的
但是現在實際開發，我們不太關注相容性寫法了，可以放心使用

<!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>        div {            width: 300px;            height: 300px;            /* background-color: black; */            /* background: rgba(0, 0, 0, 0.3); */            background: rgba(0, 0, 0, .3);        }    </style></head><body>    <!-- 只是讓背景顏色半透明，盒子裡的內容並不受影響 -->    <div>zhoujirui</div></body></html>

3.8 背景總結

屬性	作用	值
`backgroud-color`	背景顏色	預定義的顏色值 / 十六進位制 / RGB程式碼
`backgroud-image`	背景圖片	url（圖片路徑）
`backgroud-repeat`	是否平鋪	repeat / no-repeat / repeat-x / repeat-y
`backgroud-position`	背景位置	length / position 分別是 x 和 y 座標
`backgroud-attachment`	背景附著	scroll（背景滾動）/ fixed（背景固定）
`背景簡寫`	書寫更簡單	背景顏色背景圖片地址背景平鋪背景滾動背景位置
`背景色半透明`	背景顏色半透明	background: rgba(0, 0, 0, 0.3); 後面必須是4個值

背景圖片：實際開發常見於 logo 或者一些裝飾性的小圖片或者是超大的背景圖片，優點是非常便於控制位置（精靈圖也是一種運用場景）。

3.9 王者榮耀案例

<!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>        /* 對於 logo 圖片來說，最常用的方法便是利用背景來設定，而並非直接插入圖片 */        h3 {            width: 118px;            height: 40px;            font-size: 14px;            font-weight: 400;            line-height: 40px;            background-image: url(../image/icon.png);            background-repeat: no-repeat;            background-position: left center;            text-indent: 2em;        }        h3 a {            color: #000;            text-decoration: none;        }    </style></head><body>    <h3><a href="#">成長守護平臺</a></h3></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>背景位置案例二之王者榮耀背景圖片</title>    <style>        body {            background-image: url(../image/b.jpg);            background-repeat: no-repeat;            background-position: center top;        }    </style></head><body>    <!-- 對於網頁中的大面積圖片而言，一般不採用直接插入圖片的方式來做，    因為圖片的解析度及尺寸是固定的但是顯示器或網頁視窗的大小解析度則是會改變的，    直接插入圖片的話不方便控制圖片大小及位置 -->    <!-- <img src="../image/b.jpg" alt=""> --></body></html>

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

QQ：1846334075

微信：zhoujirui54

郵箱：www.zjr1846334075@foxmail.com

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

【CSS簡介、基礎選擇器、字型屬性、文字屬性、引入方式】前端小抄(2) - Pink老師自學筆記
2021-08-29
CSS前端筆記
CSS筆記-2：元素的顯示模式
2020-10-28
CSS筆記模式
前端筆記之HTML5&CSS3（中）選擇器&偽類偽元素&CSS3效果&漸變背景&過渡
2019-04-06
前端筆記HTMLCSSS3
博學谷 - CSS筆記05 - CSS 的複合選擇器
2020-11-19
CSS筆記
基本CSS選擇器,複合選擇器,後代選擇器
2017-11-16
CSS
四種CSS 複合選擇器
2020-12-23
CSS
css 元素顯示模式
2024-03-20
CSS模式
CSS選擇器筆記
2009-03-12
CSS筆記
重學前端筆記21-css選擇器
2019-03-27
前端筆記CSS
CSS 元素選擇器
2018-10-21
CSS
CSS3第二天（元素顯示模式、圖片背景設定）
2024-08-07
CSSS3模式
好程式設計師web前端培訓分享HTMLCSS學習筆記css3選擇器
2020-05-13
程式設計師Web前端HTMLCSS筆記S3
IE CSS Bug系列：列表元素背景不顯示
2013-11-06
CSS
圖解CSS3 讀書筆記——選擇器
2015-11-14
圖解CSSS3筆記
CSS3新增選擇器（屬性選擇器、結構偽類選擇器、偽元素選擇器）
2023-04-03
CSSS3
重學前端筆記22-css 選擇器機制
2019-03-27
前端筆記CSS
CSS筆記——屬性選擇器
2018-11-26
CSS筆記
【CSS】【3】CSS選擇器
2017-11-09
CSS
CSS選擇器（6）——偽元素
2017-11-17
CSS
css 選擇器及權重筆記
2018-07-23
CSS筆記
CSS 小結筆記之選擇器
2018-08-03
CSS筆記
筆記-10.2、HTML-CSS選擇器筆記
2016-03-31
筆記HTMLCSS
CSS5-選擇器5-子元素選擇器
2017-06-11
CSS
CSS E::after 偽元素選擇器
2018-08-15
CSS
CSS3選擇器02—CSS3部分選擇器
2018-03-10
CSSS3
組合使用css選擇器
2015-04-24
CSS
css樣式選擇器學習筆記
2021-09-09
CSS筆記
CSS 小結筆記之元素的隱藏與顯示
2018-09-10
CSS筆記
css3選擇器
2017-10-12
CSSS3
CSS3 - 選擇器
2016-12-16
CSSS3
css3 選擇器：屬性選擇器（五）
2017-06-19
CSSS3
css3偽元素選擇器before 和 after 的使用
2019-02-06
CSSS3
01、CSS3-選擇器
2021-09-09
CSSS3
CSS系列：CSS3新增選擇器
2015-03-29
CSSS3
jQuery選擇器標籤選擇元素+css簡單新增移除操作
2017-07-26
jQueryCSS
css3實現多個元素依次顯示
2017-12-11
CSSS3
老舊筆記本改造成便攜KVM（鍵盤顯示器）
2020-10-21
筆記
使用 CSS 選擇器實現對不含 title 屬性元素的選擇
2024-07-16
CSS

【CSS複合選擇器、元素顯示模式、背景】前端小抄(3) - Pink老師自學筆記

【CSS複合選擇器、元素顯示模式、背景】前端小抄(3)

一、CSS的複合選擇器

1.1 什麼是複合選擇器

1.2 後代選擇器

1.3 子選擇器

1.4 並集選擇器

1.5 偽類選擇器

1.6 連結偽類選擇器

1.7 :focus偽類選擇器

1.8 複合選擇器總結

二、CSS 的元素顯示模式

2.1 什麼是元素顯示模式

2.2 塊元素

2.3 行內元素

2.4 行內塊元素

2.5 元素顯示模式總結

2.6 元素顯示模式轉換

2.7 簡潔版小米側邊欄案例

2.8 小技巧：單行文字垂直居中

三、CSS 的背景

3.1 背景顏色

3.2 背景圖片

3.3 背景平鋪

3.4 背景圖片位置

3.5 背景影像固定（背景附著）

3.6 背景複合寫法

3.7 背景色半透明

3.8 背景總結

3.9 王者榮耀案例

相關文章