目錄
1. Emmet語法
1.1 快速生成HTML結構語法
1.2 快速生成CSS樣式語法
2. CSS的復合選擇器
2.1 后代選擇器
2.2 子選擇器
2.3 并集選擇器
2.4 偽類選擇器
2.4.1 鏈接偽類選擇器
?2.4.2 focus偽類選擇器
?2.5 復合選擇器總結
3. CSS的元素顯示模式
3.1 什么是元素顯示模式
3.2 塊元素
3.3 行內元素
3.4 行內塊元素
3.5 元素顯示模式總結
3.6 元素顯示模式轉換
3.7 snipaste工具
3.8 單行文字垂直居中
4. CSS背景
4.1 背景顏色
?4.2 背景圖片
4.3 背景平鋪
4.4 背景圖片位置
4.5 背景圖像固定（背景附著）
4.6?背景復合寫法
4.7 背景色半透明
4.8 背景總結
5. 綜合案例
6. CSS三大特性
6.1 層疊性
6.2 繼承性
6.3 優先性
1. Emmet語法
1.1 快速生成HTML結構語法
<body><!-- p*3 --><p></p><p></p><p></p><!-- 父子關系 > ，例ul>li --><ul><li></li></ul><!-- 兄弟關系 + ，例div+p --><div></div><p></p><!-- .nav ，默認div --><div class="nav"></div><!-- #banner --><div id="banner"></div><!-- p.red --><p class="red"></p><!-- ol>li#two --><ol><li id="two"></li></ol><!-- .demo$*3 --><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><!-- div{今年是2025年$}*5 --><div>今年是2025年1</div><div>今年是2025年2</div>
</body>1.2 快速生成CSS樣式語法
<style>.one {/* tac */text-align: center;/* ti2em */text-indent: 2em;/* w100 */width: 100px;/* h200 */height: 200px;/* lh26px */line-height: 26px;/* tdn */text-decoration: none;}</style>2. CSS的復合選擇器
2.1 后代選擇器
2.2 子選擇器
2.3 并集選擇器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 后代選擇器 */ol li {color: aqua;}.red li a {color: red;}/* 子選擇器 */div>a {color: brown;}/* 并集選擇器 豎著寫*/span,.pig li {color: pink;}</style>
</head><body><ol>我在ol內不在li內<li>我是ol的孩子</li><li>我是ol的孩子</li><li><a href="#">我是ol-1的孩子</a></li></ol><ol class="red"><li>我是ol的孩子</li><li>我是ol的孩子</li><li><a href="#">我是ol-2的孩子</a></li></ol><div><a href="#">我是div的兒子</a><p><a href="#">我是div的孫子</a></p></div><span>熊大</span><span>熊二</span><ul class="pig"><li>佩奇</li><li>豬媽媽</li></ul>
</body></html>2.4 偽類選擇器
2.4.1 鏈接偽類選擇器
<style>/* 1.未訪問的鏈接 a:link 把沒有點擊過的鏈接選出來 */a:link {color: #333;text-decoration: none;}/* 2.點擊過的鏈接 */a:visited {color: orange;}/* 3.選擇鼠標經過的鏈接 */a:hover {color: skyblue;}/* 4.選擇的是鼠標正在按下還沒有彈起的那個鏈接 */a:active {color: green;}</style>鏈接偽類選擇器實際開發中的寫法?
a {color: #333;text-decoration: none;}a:hover {color: skyblue;}?2.4.2 focus偽類選擇器
焦點就是光標，把獲得光標的input表單元素選取出來
<style>input:focus {background-color: pink;}</style>
?2.5 復合選擇器總結
3. CSS的元素顯示模式
3.1 什么是元素顯示模式
3.2 塊元素
3.3 行內元素
3.4 行內塊元素
3.5 元素顯示模式總結
3.6 元素顯示模式轉換
<style>a {width: 150px;height: 50px;background-color: pink;/* 把行內元素a 轉換為塊級元素 */display: block;}div {width: 300px;height: 100px;background-color: purple;/* 把div 塊級元素轉換成行內元素 */display: inline;}span {width: 300px;height: 30px;background-color: skyblue;/* 行內元素轉換成行內塊元素 */display: inline-block;}</style>3.7 snipaste工具
3.8 單行文字垂直居中
簡潔版小米邊框欄
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {display: block;width: 230px;height: 40px;line-height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;}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>
4. CSS背景
4.1 背景顏色
background-color: 顏色值;? /*（默認transparent，透明）*/
?4.2 背景圖片
4.3 背景平鋪
背景圖片和顏色可以同時設置，只不過背景顏色會被背景圖片覆蓋
<style>div {width: 300px;height: 300px;background-color: pink;background-image: url(../上一級路徑.jpg);/* 1.背景圖片不平鋪 (默認情況下背景平鋪）background-repeat: no-repeat; *//* 2.沿著x軸平鋪background-repeat: repeat-x; *//* 3.沿著y軸平鋪background-repeat: repeat-y; */}</style>4.4 背景圖片位置
4.5 背景圖像固定（背景附著）
4.6?背景復合寫法
background: black url() no-repeat fixed center top;
4.7 背景色半透明
4.8 背景總結
5. 綜合案例
<style>.nav a {display: inline-block;width: 120px;height: 58px;background-color: pink;text-align: center;line-height: 48px;color: #fff;text-decoration: none;}.nav .bg1 {background: url() no-repeat;}.nav .bg1:hover {background-image: url();}</style><body><div class="nav"><a href="" class="bg1">五彩導航</a><a href="">五彩導航</a><a href="">五彩導航</a><a href="">五彩導航</a><a href="">五彩導航</a></div>
</body>6. CSS三大特性
6.1 層疊性
6.2 繼承性
行高的繼承性
6.3 優先性
<style>div {color: red !important;}.test {color: pink;}#demo {color: green;}/* 不管父元素權重多高，子元素繼承的權重都是0 */body {color: #000 !important;}/* a鏈接瀏覽器默認制定了一個樣式，即 a {color: blue;} */a {color: aquamarine;}</style><body><div class="test" id="demo" style="color: purple;">hahaha</div><a href="#">a標簽</a>
</body>權重雖然會疊加，但不會進位
)
、組件ref的使用)