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