CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）
生活随笔
收集整理的這篇文章主要介紹了
CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
CSS基礎(chǔ)
1. emmet 語(yǔ)法 —— 開(kāi)發(fā)效率
1.1 emmet 語(yǔ)法生成 html 標(biāo)簽
emmet 的特點(diǎn)和作用是什么？
-
通過(guò)簡(jiǎn)寫(xiě)提高編碼效率。
-
emmet 生成 HTML 結(jié)構(gòu)語(yǔ)法
序號(hào)符號(hào)含義示例 1 *N 連續(xù)生成 N 個(gè) div*5 2 父>子 生成父子關(guān)系結(jié)構(gòu) ul>li*5 3 兄+弟 生成兄弟關(guān)系結(jié)構(gòu) h1+div*2+h4+p*2 4 .class / #id 生成帶 class 或 id 的 div .red / #app 5 tag.class / tag#id 生成帶 class 或 id 的 tag p.red / span#nav 6 $*N $ 位置會(huì)被連續(xù)的數(shù)字替換 .demo$*5 7 {內(nèi)容$} 標(biāo)簽內(nèi)容 p{段落$}*5
生成多個(gè)相同的標(biāo)簽用哪個(gè)符號(hào)？
- *N div*5
父子關(guān)系用哪個(gè)符號(hào)？兄弟關(guān)系用哪個(gè)符號(hào)？
- 父>子 ul>li*5
- 兄+弟 h1+div*2+h4+p*2
帶類(lèi)名或者 id 的 div 如何編寫(xiě)？其他標(biāo)簽?zāi)?#xff1f;
- .class / #id
自增符號(hào)是哪個(gè)符號(hào)？
- $*N
- .demo$*5
標(biāo)簽內(nèi)容是哪個(gè)符號(hào)？
- {內(nèi)容$}
- p{段落$}*5
1.2 emmet 語(yǔ)法快速生成 css 樣式
emmet 生成 css 有什么規(guī)律？
- 常用屬性大多用英文單詞的首字母連寫(xiě)即可，示例如下：
- tac → text-align: center;
- ti2em → text-indent: 2em;
- lh26px → line-height: 26px;
- tdn → text-decoration: none;
如何設(shè)置寬高？
- w100 → width: 100px;
- h200 → height: 200px;
emmet 記不住怎么辦？
- 不要硬記，以完成代碼為主
- 會(huì)用在開(kāi)發(fā)時(shí)能夠快一點(diǎn)，不會(huì)用也不至于怎么樣，做出結(jié)果最重要！
1.3 快速格式化代碼
你認(rèn)為程序員編寫(xiě)出符合規(guī)范的代碼重要嗎？為什么？
- 非常重要
- 代碼是最好的文檔，代碼的可讀性非常重要，代碼寫(xiě)得規(guī)范，是專(zhuān)業(yè)性的體現(xiàn)
「快速格式化代碼」擴(kuò)展 —— 保存時(shí)自動(dòng)格式化
注意：
- VSCode 自帶的格式化器能夠在保存時(shí)自動(dòng)格式化 HTML 代碼（包含其中的 CSS）
- VSCode 自帶的格式化器目前不支持單獨(dú)的 CSS 文件做格式化
2. CSS 復(fù)合選擇器 —— 選擇器
2.1 復(fù)合選擇器簡(jiǎn)介
復(fù)合選擇器具有什么特點(diǎn)？
- 對(duì)基礎(chǔ)選擇器進(jìn)行組合
- 由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過(guò)不同方式組合而成的
復(fù)合選擇器能解決什么問(wèn)題？
- 更準(zhǔn)確、更高效的選擇目標(biāo)元素
常用的復(fù)合選擇器有幾類(lèi)？
- 4類(lèi)，
分別是：
2.2 后代選擇器
后代選擇器的應(yīng)用場(chǎng)景是什么？
- 可以選擇父元素中的子元素
后代選擇器的語(yǔ)法格式是什么？元素之間使用什么符號(hào)分開(kāi)？
語(yǔ)法格式：
選擇器1 選擇器2 {樣式聲明;}- 后代選擇器的選擇器之間使用空格分開(kāi)。
后代選擇器最終選中的元素是父代元素還是子代元素？
- 后代選擇器最終選中的元素是子代元素 → 后代元素
后代選擇器的元素除了使用標(biāo)簽選擇器，還可以使用其他的基礎(chǔ)選擇器嗎？
- 可以
- 后代選擇器中的元素可以是任一一種基礎(chǔ)選擇器
2.3 子元素選擇器
子代選擇器的應(yīng)用場(chǎng)景是什么？
- 選擇某個(gè)元素最近一級(jí)的子元素（親兒子）
子代選擇器的語(yǔ)法格式是什么？元素之間使用什么符號(hào)分開(kāi)？
-
語(yǔ)法格式
選擇器1 > 選擇器2 {樣式聲明;} -
子代選擇器的選擇器之間使用 > 分開(kāi)。
子代選擇器最終選中的元素是父代元素還是子代元素？
- 子代選擇器最終選中的元素是子代元素
2.5 并集選擇器
并集選擇器的應(yīng)用場(chǎng)景是什么？
- 集體聲明——選擇多組標(biāo)簽，同時(shí)設(shè)置相同的樣式
并集選擇器的語(yǔ)法格式是什么？元素之間使用什么符號(hào)分開(kāi)？有什么注意點(diǎn)？
- 語(yǔ)法格式
- 并集選擇器的選擇器之間使用 , 分開(kāi)，最后一個(gè)選擇器不需要逗號(hào)
- 并集選擇器通常會(huì)豎式排列選擇器，提高代碼的可讀性
并集選擇器可以使用后代選擇器或子代選擇器嗎？
- 可以
2.6 鏈接偽類(lèi)選擇器(上)
偽類(lèi)選擇器使用單冒號(hào) :，是某種狀態(tài)下的樣式，例如 :hover 表示鼠標(biāo)指向元素的狀態(tài)。
鏈接偽類(lèi)選擇器的應(yīng)用場(chǎng)景是什么？
- 針對(duì)鏈接的不同狀態(tài)設(shè)置不同的樣式
鏈接偽類(lèi)選擇器一共有幾個(gè)，分別表示什么含義？
-
鏈接偽類(lèi)選擇器說(shuō)明 a:link 選擇所有未被訪問(wèn)的鏈接 a:visited 選擇所有已經(jīng)被訪問(wèn)的鏈接 a:hover 選擇鼠標(biāo)指針位于其上的鏈接 a:active 選擇激活鏈接（鼠標(biāo)按下未抬起的鏈接
2.7 鏈接偽類(lèi)選擇器(下)
鏈接偽類(lèi)選擇器的書(shū)寫(xiě)順序有要求嗎？如何記憶？
- 有
- LoVe HAte（愛(ài)與恨）
在實(shí)際開(kāi)發(fā)中，需要給 a 標(biāo)簽單獨(dú)設(shè)置樣式嗎？為什么？
- 需要
- 因?yàn)?a 標(biāo)簽是有點(diǎn)擊跳轉(zhuǎn)行為的，默認(rèn)與其他文本的顯示樣式就不相同
在實(shí)際開(kāi)發(fā)中，通常只使用鏈接偽類(lèi)選擇器的哪一個(gè)狀態(tài)？為什么？
- :hover
- 因?yàn)橹挥惺髽?biāo)經(jīng)過(guò)鏈接時(shí)，與用戶(hù)的交互是最直接的
- 示例代碼如下：
2.8 focus 偽類(lèi)選擇器
focus 偽類(lèi)選擇器的應(yīng)用場(chǎng)景是什么？
- 在表單中突出顯示當(dāng)前獲得焦點(diǎn)的表單元素，提升用戶(hù)體驗(yàn)
2.9 復(fù)合選擇器總結(jié)
| 后代 | 找后代 | 較高 | 使用空格分隔 .nav a |
| 子代 | 找兒子 | 較少 | 使用 > 分隔 .nav>a |
| 并集 | 找大伙 | 較多 | 使用 , 分隔 .nav, .header |
| 鏈接偽類(lèi) | 鏈接狀態(tài) | 較多 | a:hover |
| focus | 表單狀態(tài) | 較少 | input:focus |
3. 元素的顯示模式 —— 布局認(rèn)知
3.1 什么是元素顯示模式
什么是元素顯示模式？HTML 元素一般有幾種顯示模式？
- 元素以什么方式進(jìn)行顯示
- HTML 一般有兩種顯示模式
猜一猜塊元素和行內(nèi)元素有什么特點(diǎn)？
- 塊元素獨(dú)占一行顯示
- 行內(nèi)元素可以一行顯示多個(gè)
3.2 塊元素 —— block
塊級(jí)元素有什么特點(diǎn)？
塊級(jí)元素有什么注意事項(xiàng)？
- 開(kāi)發(fā)時(shí)不要在文本類(lèi)元素中添加其他元素，專(zhuān)注于文本存放（h1~h6、p）
常見(jiàn)的塊級(jí)元素有哪些？如何驗(yàn)證？
- div、ul、ol、li、h1~h6、p
- 在 HTML 中添加一個(gè)盒子，在 Chrome 調(diào)試器中驗(yàn)證是否具有塊級(jí)元素特征
3.3 行內(nèi)元素 —— inline
行內(nèi)元素有什么特點(diǎn)？
行內(nèi)元素有什么注意事項(xiàng)？
a 標(biāo)簽中能夠放塊級(jí)元素嗎？應(yīng)用場(chǎng)景是什么？
3.4 行內(nèi)塊元素 —— inline-block
行內(nèi)塊元素有什么特點(diǎn)？
我們現(xiàn)在學(xué)習(xí)過(guò)的標(biāo)簽中，有那三個(gè)是行內(nèi)塊元素？
- img、input、td
3.5 元素顯示模式總結(jié)
| 塊級(jí)元素 | block | 一行一個(gè) | 可以 |
| 行內(nèi)元素 | inline | 一行多個(gè)，內(nèi)容撐開(kāi) | 不可以 |
| 行內(nèi)塊元素 | inline-block | 一行多個(gè) | 可以 |
3.6 顯示模式的轉(zhuǎn)換
顯示模式轉(zhuǎn)換的應(yīng)用場(chǎng)景是什么？
- 讓行內(nèi)元素具有寬高：把行內(nèi)元素轉(zhuǎn)換成塊元素或者行內(nèi)塊元素
- 讓塊元素一行顯示：把塊元素轉(zhuǎn)換成行內(nèi)塊元素
三種顯示模式轉(zhuǎn)換的代碼是什么？哪兩個(gè)比較重要？
- display: block 轉(zhuǎn)換為塊元素
- display: inline-block 轉(zhuǎn)換為行內(nèi)塊元素
- display: inline 轉(zhuǎn)化為行內(nèi)元素（使用較少）
在寫(xiě) CSS 時(shí)，記住把 display 轉(zhuǎn)換顯示模式的設(shè)置寫(xiě)在第一行。
3.7 簡(jiǎn)單小米側(cè)邊欄
<!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>12. 簡(jiǎn)單小米側(cè)邊欄</title><style>a {display: block;width: 200px;height: 30px;background-color: pink;margin-top: 2px;text-align: center;text-decoration: none;font: normal 100 20px/30px "微軟雅黑";}a:hover {background-color: rgba(224, 127, 0, 0.945);}</style> </head><body><a href="#">手機(jī) 電話卡</a><a href="#">電視 盒子</a><a href="#">筆記本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 兒童</a><a href="#">耳機(jī) 音響</a> </body></html>3.8 單行文字垂直居中
如何實(shí)現(xiàn)單行文字的垂直居中？
- 將 line-height 設(shè)置為盒子的高度。
行高實(shí)現(xiàn)原理
4. 背景圖片 —— 樣式
4.1 背景顏色
一般情況下元素的背景顏色是什么？
- transparent 透明的
4.2 背景圖片
背景圖片的應(yīng)用場(chǎng)景是什么？
背景圖片有什么優(yōu)點(diǎn)？
- 非常容易控制位置
背景圖片的語(yǔ)法是什么？
background-image: none | url(url);指定背景圖片的 url 時(shí)需要引號(hào)嗎？
- 不需要
4.3 背景平鋪
在使用背景圖片時(shí)，默認(rèn)背景是平鋪的嗎？
- 默認(rèn)是平鋪的
背景平鋪有哪些屬性？
| repeat | 默認(rèn)，水平垂直平鋪 |
| no-repeat | 不平鋪 |
| repeat-x | 水平平鋪 |
| repeat-y | 垂直平鋪 |
使用了背景圖片還能再指定背景顏色嗎？
- 可以
4.4 背景位置-方位名詞
哪一個(gè)屬性可以改變圖片在背景中的位置？
- background-position (背景位置)
使用方位名詞指定背景圖片有順序要求嗎？
- 沒(méi)有
- 因?yàn)閺姆轿幻~能夠分清方向
方位名詞都分別對(duì)應(yīng)哪些方位？
- 水平方向：left / right / center
- 垂直方向：top / bottom / center
如果指指定了一個(gè)方位名詞，第二個(gè)值默認(rèn)如何對(duì)齊？
- 居中對(duì)齊
如何讓背景圖片水平垂直居中？
- background-position: center;
4.5 背景位置案例
<!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>13. 背景位置案例</title><style>h3 {width: 200px;height: 50px;background-color: rgb(180, 155, 155);background-image: url(./images/icon.png);background-repeat: no-repeat;background-position: left;text-indent: 2em;line-height: 50px;}</style> </head> <body><h3>背景位置案例</h3> </body> </html>4.6 王者榮耀背景圖片
<!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>13. 王者榮耀背景圖片</title><style>body {background-image: url(./images/bg.jpg);background-repeat: no-repeat;background-position: top;}</style> </head> <body></body> </html>4.7 背景位置-精確單位
使用精確坐標(biāo)指定背景圖片有順序要求嗎？
- 有
- 第一個(gè)值一定是 x / 第二個(gè)值一定是 y
如果只指定了一個(gè)值，是哪個(gè)方向的值？另一個(gè)方向呢？
- x 方向的
- 垂直方向居中顯示
4.8 背景位置-混合單位
指定背景圖片可以混合使用單位嗎？順序有沒(méi)有要求？
- 可以
- 第一個(gè)值一定是 x / 第二個(gè)值一定是 y
4.9 背景固定
背景固定的應(yīng)用場(chǎng)景是什么？
- 可以制作視差滾動(dòng)效果
background-attachment 有哪兩個(gè)參數(shù)？分別代表什么含義？
- scroll 默認(rèn)，背景圖像跟隨滾動(dòng)
- fixed 背景圖像固定
4.10 背景屬性復(fù)合寫(xiě)法
我們已經(jīng)學(xué)過(guò)了哪個(gè)屬性的復(fù)合寫(xiě)法？
- font: font-style font-weight font-size/line-height font-family
背景屬性的復(fù)合寫(xiě)法有順序要求嗎？
- 沒(méi)有
- 但是推薦順序是：background: color image repeat attachment position
背景屬性的復(fù)合寫(xiě)法在開(kāi)發(fā)中用的多嗎？每次都要寫(xiě)全嗎？
- 多
- 不需要每次都要寫(xiě)全，需要啥就寫(xiě)啥
4.11 背景顏色半透明
使用 background-color 能夠設(shè)置背景顏色半透明嗎？為什么？
- 可以 background: rgba(0, 0, 0, 0.3); 本質(zhì)上就是在設(shè)置背景顏色。
rgba 中的 alpha 取值范圍是多少？
- 取值范圍：0 ~ 1
- 0 完全透明 / 1 完全不透明
4.12 背景總結(jié)
| background-color | 顏色 | 顏色 / #f00 / rgba(red, green, blue, alpha) |
| background-image | 圖像 | url(圖片路徑) |
| background-repeat | 平鋪 | repeat / no-repeat / repeat-x / repeat-y |
| background-position | 位置 | x, y / left right center top bottom center |
| background-attachment | 附著方式 | scroll / fixed |
復(fù)合寫(xiě)法推薦順序：background: color image repeat attachment position。
總結(jié)
以上是生活随笔為你收集整理的CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 360惊天后门曝光：“盗梦盒子”重现江湖
- 下一篇： CSS浮动+背景图片+边框+文字排版+段