1.emmet語法
1）快速生成HTML結構語法
---標簽名+tab鍵即可生成標簽
---標簽+*+數量即可生成多個標簽
---如果有父子級關系的標簽，用>，比如ul>li+tab鍵
---如果有兄弟級的標簽，用++tab鍵
---如果生成帶有類名或者id名字的，直接寫.demo/#demo +tab鍵
---如果生成的div類名是有順序的，用自增符號$
---如果想要在生成的標簽內部寫內容可以用{}表示
2）快速生成CSS樣式語法
基本采用簡寫形式。
<style>.one{text-align: center; /* tac+tab可以快速生成 */text-indent: 2px; /* ti2+tab可以快速生成 */width: 100px; /* w100+tab可以快速生成 */height: 200px; /* h200+tab可以快速生成 */line-height: 26; /* lh26+tab可以快速生成 */}</style>2.CSS復合選擇器
1）后代選擇器
<ol><li>卷卷卷</li><li>卷卷卷</li><li>卷卷卷</li></ol><ul><li>卷卷卷</li><li>卷卷卷</li><li>卷卷卷</li></ul>將ol中的小li設置樣式，標簽、類選擇器顯然不行，此時用到我們的后代選擇器。
語法：元素1+空格+元素2+空格+{樣式聲明}
元素1和元素2必須用空格隔開，元素1必須是父級，元素2必須是后代，最終選擇的是元素2
<style>ol li {color: red;}</style>
<ol><li>卷卷卷</li><li>卷卷卷</li><li><a href="#">卷卷卷</a></li></ol>
<style>ol li a {color: red;}</style>2）子選擇器
---只能選擇作為某元素的最近一級子元素
語法：元素1>元素2{樣式聲明}
3）并集選擇器
---可以選擇多組標簽，同時為他們定義相同的樣式。用英文逗號,分隔。
語法：元素1,元素2{ 樣式聲明 }
4）偽類選擇器
---用?:?表示
（1）鏈接偽類選擇器
---a:link選擇所有還沒有被訪問的鏈接的樣式
---a:hover選擇鼠標指針位于其上的鏈接
---a:visted選擇所有已被訪問的鏈接
---a:active選擇活動鏈接（鼠標按下沒有彈起的鏈接）
<body><a href="#">2025</a>
</body>
<style>/* 沒有訪問的鏈接 */a:link {color: black;text-decoration: none;}/* 選擇點擊過的鏈接 */a:visited {color: blue;}/* 選擇鼠標經過的那個鏈接，沒有點擊 */a:hover {color: yellow;}/* 選擇鼠標按下沒有彈起的鏈接 */a:active {color :green;}</style>書寫時注意：按照LVHA的順序寫，即link、visited、hover、active。鏈接單獨指定樣式。
（2）:focus偽類選擇器
---用于選擇獲得焦點的表單元素。焦點就是光標。一般情況<input>類表單元素才能獲取，因此這個選擇器主要針對與表單元素。
<input type="text"><input type="text"><input type="text">
<style>/* 把獲得光標的表單元素選擇出來 */input:focus{background-color: red;}</style>復合選擇器總結
3.CSS的元素顯示模式
---元素分為塊元素和行內元素
1）塊元素
特點：
1.獨占一行
2.可以設置高度、寬度、內外邊距
3.寬度默認是容器的寬度
4.是容器，里面可以放行內或者塊級元素
注意：文字類的元素內不能使用塊級元素，<p>標簽主要用于存放文字，因此p里面不能放塊級元素，特別不能放div，同理h1~h6也不能放塊級元素。
2）行內元素（內聯元素）
特點：
1.相鄰行內元素在一行上，一行可以顯示多個。
2.高、寬設置是無效的。
3.默認寬度是本身內容的寬度。
4.行內元素只能容納文本或者其他行內元素。
注意：鏈接里面不能再放鏈接；特殊情況鏈接<a>里面可以放塊級元素，但是給<a>轉換一下塊級模式最安全
3）行內塊元素
eg：<img/>、<input/>、<td>同時具有塊元素和行內元素的特點
特點：
1.和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個。
2.默認寬度就是它本身內容的寬度。
3.高度、行高、內外邊距可以控制。
4）元素顯示模式總結
5）顯示模式轉換
轉換為塊元素：display:block;
<style>a {width: 150px;;height: 50px;background-color: pink;display:block;}</style>
<body><a href="#">2025</a>
</body>轉換為行內元素：display:inline;
<style>div {width: 300px;height: 100px;background-color: green;display:inline;}</style>
<body><div>2025</div><div>2025</div>
</body>行內元素轉換為行內塊元素：display:inline-block;
<style>span {width: 100px;height: 30px;background-color: green;display: inline-block;}</style>
<body><span>2025</span><span>2025</span>
</body>單行文字垂直居中：讓文字的行高等于盒子的高度
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>簡單版側邊欄</title><style>a {width: 230px;height: 40px;background-color: #55585a;font-style: 14px;color: #fff;text-decoration: none;text-indent: 2em;line-height: 40px;display: block;}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的背景
1）背景顏色
語法：background-color : transparent(透明的) | color
2）背景圖片
優點：便于控制位置
語法：background-image : none | url (url)
注意：這里的url()不要丟掉
3）背景平鋪
語法：background-repeat : repeat | no-repeat | repeat-x |repeat-y
背景圖片默認是平鋪的，其中，no-repeat：不平鋪，repeat-x：沿x軸平鋪，repeat-y：沿y軸平鋪
4）背景圖片位置
語法：background-position: x y;
可以使用方位名詞或者精確單位，如果是方位名詞，跟順序無關，center left和left center效果相同，如果只寫一個，那么另一個默認是center。如果背景圖片位置是精確位置，那么第一個肯定是x坐標，第二個肯定是y坐標。如果參數只寫一個值，那肯定是x的值，另一個默認垂直居中。方位名詞和精確單位可以混合使用，第一個肯定是x坐標，第二個肯定是y坐標。
5）背景圖像固定（背景附著）
background-attachment屬性設置背景圖像設置圖像是否固定或者隨著頁面的其余部分滾動。可以制作視差滾動的效果。
語法：background-attachment : scroll | fixed
6）背景復合寫法
background:背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置;
7）背景色半透明
語法：background: rgba(0,0,0,0.3);
最后一個參數是alpha透明度，取值范圍在0~1之間。CSS3新增屬性，是IE9+版本瀏覽器才支持的
8）總結
5.CSS的三大特性
層疊性、繼承性、優先級。
1）層疊性
相同選擇器設置相同的樣式，此時一個樣式就會覆蓋另一個沖突的樣式。層疊性主要解決樣式沖突的問題。
原則：樣式沖突，遵循就近原則，哪個樣式離結構近，就執行哪個樣式；樣式不沖突，不會層疊。（后來者居上）
2）繼承性
子標簽會繼承父標簽的某些樣式，如文本顏色和字號。簡單的理解就是：子承父業。可以簡化代碼，降低CSS樣式的復雜性。
<!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>div {color: blue;}</style>
</head><body><div><p>2025</p></div>
</body></html>此時p標簽中的內容為藍色。
行高的繼承
font:字體大小/相對行高，這里的1.5是指字體大小的1.5倍
font: 15px/1.5 'Microsoft YaHei';
若上述代碼是父標簽的字體屬性且子標簽設置了字體大小，則子標簽會繼承父標簽的行高，即子標簽行高為子標簽字體大小的1.5倍。
3）優先級
當同一個元素指定多個選擇器，就會有優先級的產生。
若選擇器相同，則執行層疊性。
選擇器不同，則根據選擇器權重執行。
<style>div {color: blue!important;}.nav {color: red;}#demo {color: pink;}</style>
<body><div class="nav" id="demo" style="color:yellow">2025</div>
</body>優先級注意點：權重是有4組數字組成，但是不會有進位；繼承的權重是0；從左到右比較大小。
權重疊加：如果是復合選擇器，則會有權重疊加，需要計算權重。
<style>/* ul li 權重 0，0，0，1+0，0，0，1=0，0，0，2 */ul li {color: red;}/* li 的權重0，0，0，1 */li {color: blue;}</style>
<body><ul><li>2025</li><li>2024</li><li>2023</li></ul>
</body>因此li標簽中應為紅色。
)
