目錄
1.Emmet寫法
2.背景屬性
（1）?background-color
（2）?background-image
（3）?background-repeat
（4）background-position
（5）background-size
（6）background-attachment
（7）background
2.顯示模式
（1）作用
①塊級元素
②行內元素
③行內塊元素
（2）實例
3.轉換顯示模式
（1）屬性名：display
（2）屬性值
4.綜合應用
1.Emmet寫法
代碼的簡寫方式，輸入縮寫VS Code會自動生成對應的代碼
- HTML
| 說明 | 標簽結構 | Emmet |
| 類選擇器 | <div class = "box">< /div > | 標簽名.類名 |
| id選擇器 | < div id ="box"></div> | 標簽名#id名 |
| 同級標簽 | <div></div><p></p> | div+p |
| 父子級標簽 | <div><p></p></div> | div>p |
| 多個相同標簽 | <span>1</span><span>2</span><span>3</span> | span*3 |
| 有內容的標簽 | <div>內容</div> | div{內容} |
- CSS：大多數簡寫方式為屬性單詞的首字母
2.背景屬性
（1）?background-color
-
作用：設定元素的背景顏色。
-
含義：背景顏色就是元素背后所顯示的顏色。
-
用法：直接在 CSS 中為元素指定?
background-color?屬性。 -
屬性值：可以是顏色名稱（如?
red、blue）、十六進制值（如?#FF0000）、RGB 值（如?rgb(255, 0, 0)）、RGBA 值（如?rgba(255, 0, 0, 0.5)）等。
div {background-color: lightblue;
}（2）?background-image
-
作用：設定元素的背景圖像。
-
含義：背景圖像就是元素背后顯示的圖片。
-
用法：使用?
background-image?屬性并指定圖像的 URL。 -
屬性值：圖像的 URL（如?
url('image.jpg')），也可以使用線性漸變、徑向漸變等。
body {background-image: url('background.jpg');
}（3）?background-repeat
-
作用：定義背景圖像的重復方式。（平鋪方式）
-
含義：當背景圖像尺寸小于元素時，可通過此屬性決定圖像如何重復填充。
-
用法：直接在 CSS 中為元素指定?
background-repeat?屬性。 -
屬性值：
-
repeat：默認值，背景圖像在水平和垂直方向都重復（平鋪，默認效果）。 -
repeat-x：背景圖像只在水平方向重復（水平方向平鋪）。 -
repeat-y：背景圖像只在垂直方向重復（垂直方向平鋪）。 -
no-repeat：背景圖像不重復（不平鋪）。
-
-
div {background-image: url('pattern.png');background-repeat: no-repeat; }（4）background-position -
作用：設定背景圖像的起始位置。
-
含義：可以指定背景圖像相對于元素的起始位置。
-
用法：直接在 CSS 中為元素指定?
background-position?屬性。 -
屬性值：可以是具體的長度值（如?
10px 20px）、百分比值（如?50% 50%），也可以使用關鍵字【如?top（頂部）；bottom（底部）；left（左側）；right（右部）；center（居中）；】。
div {background-image: url('icon.png');background-repeat: no-repeat;background-position: center;
}（5）background-size
-
作用：設定背景圖像的尺寸。
-
含義：可調整背景圖像的大小以適應元素。
-
用法：直接在 CSS 中為元素指定?
background-size?屬性。 -
屬性值：
-
具體的長度值（如?
100px 200px）。 -
百分比值（如?
50% 50%）。 -
cover：背景圖像會縮放以完全覆蓋元素，可能會有部分圖像被裁剪。 -
contain：背景圖像會縮放以適應元素，圖像全部可見，但可能會有空白區域。
-
div {background-image: url('big-image.jpg');background-size: cover;
}（6）background-attachment
-
作用：設定背景圖像是固定的還是隨頁面滾動。
-
含義：可以控制背景圖像在頁面滾動時的表現。
-
用法：直接在 CSS 中為元素指定?
background-attachment?屬性。 -
屬性值：
-
scroll：默認值，背景圖像隨頁面滾動。 -
fixed：背景圖像固定，不隨頁面滾動。 -
local：背景圖像隨元素內容滾動。
-
body {background-image: url('parallax.jpg');background-attachment: fixed;
}（7）background
-
作用：是一個簡寫屬性，可同時設置多個背景屬性。
-
含義：可以一次性設置背景顏色、圖像、重復方式、位置等。
-
用法：直接在 CSS 中為元素指定?
background?屬性。 -
屬性值：可以按照?
background-color、background-image、background-repeat、background-attachment、background-position?的順序指定值，中間用空格分隔。
div {background: lightblue url('pattern.png') no-repeat fixed center;
}2.顯示模式
（1）作用
布局網頁時，根據標簽的顯示模式選擇合適的標簽擺放內容
①塊級元素
- ?獨占一行；
- 寬度默認是父級的100%；
- ?添加寬高屬性生效。
②行內元素
- 一行可顯示多個；
- 設置寬高屬性不生效；
- 寬高尺寸由內容撐開。
③行內塊元素
- 一行可顯示多個；
- 設置寬高屬性生效；
- 寬高尺寸也可以由內容撐開。
（2）實例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>頁面</title><style>.div1{background-color: brown;width: 100px;height: 100px;}.div2{background-color: orange;width: 100px;height: 100px;}/*行內：一行共存多個；尺寸由內容撐開；加寬高 不生效*/span{width: 200px;height: 200px;}.span1{background-color: brown;}.span2{background-color: orange;}/*行內塊：一行共存多個；默認尺寸由內容撐開；加寬高生效*/img{width: 100px;height: 100px;}</style>
</head>
<body>
<!--塊元素--><div class="div1">div標簽1</div><div class="div2">div標簽2</div><br>
<!--行內元素--><span class="span1">span標簽1</span><span class="span2">span標簽2</span><br>
<!--行內塊元素--><img src="圖像/灰太狼.png"/><img src="圖像/灰太狼.png"/></body>
</html>效果圖：
3.轉換顯示模式
（1）屬性名：display
（2）屬性值
? ? ? ? ①block：塊級? ? ? ? （常用）
? ? ? ? ②inline-block：行內塊? ? ? ? （常用）
? ? ? ? ③inline：行內
4.綜合應用
效果圖：
源代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>網頁</title><style>/*默認效果*/a {display: block;width: 200px;height: 80px;background-color: #0977d2;color: #fff;text-decoration: none;text-align: center;line-height: 80px;font-size: 20px;}/*鼠標懸停效果*/a:hover{background-color: #00bbff}</style>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
</html> 
