《前端開發基礎---CSS/CSS3》
------------------------------------------❀持續更新❀------------------------------------------------------------------
1.字體大小注意事項
p {
font-size: 20px;
}
px（像素）大小是我們網頁的最常用的單位
谷歌瀏覽器默認的文字大小爲16px
不同瀏覽器可能默認顯示的字號大小不一致，我們儘量給一個明確值大小，不要默認大小
可以給 body 指定整個頁面文字的大小
2.字體複合屬性，即簡寫
body {
font: font-style font-weight font-size/line-height font-family;
}
使用 font 屬性時，必須按上面語法格式中的順序書寫，不能更換順序，並且各個屬性間以空格隔開
不需要設置的屬性可以省略（取默認值），但必須保留 font-size 和 font-family 屬性，否則 font 屬性將不起作用
3.css文本屬性
1.text-align 屬性用於設置元素內文本內容的水平對齊方式。
div {
text-align: center;//居中對齊，還有right/left
}
2.text-decoration 屬性規定添加到文本的修飾。可以給文本添加下劃線。
div {
text-decoration：underline；//下劃線
text-decoration：none；//默認沒有裝飾線條，如果想要a標籤去除下劃線可使用
}
3.text-indent 屬性用來指定文本的第一行的縮進，通常是將段落的首行縮進。
p{
text-indent:2em;//縮進兩個文字大小距離
}
附：em 是一個相對單位，就是當前元素（font-size) 1 個文字的大小, 如果當前元素沒有設置大小，則會按照父元素的 1 個文字大小。
4.line-height 屬性用於設置行間的距離（行高）。可以控制文字行與行之間的距離.
p {
line-height: 26px;
}
4.emmet語法生成快速生成html標籤
1–生成標籤 直接輸入標籤名 按tab鍵或者回車即可 比如 div 然後tab 鍵， 就可以生成
<div></div>
*這個最常用，應該沒有人不知道的吧
2–如果想要生成多個相同標籤 加上 * 就可以了 比如 div3 就可以快速生成3個div*
3–如果有父子級關係的標籤，可以用 > 比如 ul>li就可以了，例如ul包含li
4–如果有兄弟關係的標籤，用 + 就可以了 比如 div+p
5–如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了
默認是div標籤，如果你要其他標籤，那就這樣：
6–如果生成的div 類名是有順序的， 可以用 自增符號 $
7–如果想要在生成的標籤內部寫內容可以用 { } 表示
5.emmet語法快速生成css樣式
- CSS 基本採取簡寫形式即可
- 比如 w200 按tab 可以 生成 width: 200px;
- 比如 lh26px 按tab 可以生成 line-height: 26px
6.vscode保存時自動格式化代碼配置方法
Vscode 快速格式化代碼: shift+alt+f
也可以設置 當我們 保存頁面的時候自動格式化代碼:
1）文件 ------.>【首選項】---------->【設置】；
2）搜索emmet.include;
3）在settings.json下的【工作區設置】中添加以下語句：
“editor.formatOnType”: true,
“editor.formatOnSave”: true
7.鏈接僞類選擇器
/* 1.未訪問的鏈接 a:link 把沒有點擊過的(訪問過的)鏈接選出來 */
a:link {
color: #333;
text-decoration: none; /*去除下劃線 */
}
/*2. a:visited 選擇點擊過的(訪問過的)鏈接 */
a:visited {
color: orange;
}
/*3. a:hover 選擇鼠標經過的那個鏈接 ，這個最常用*/
a:hover {
color: skyblue;
}
/* 4. a:active 選擇的是我們鼠標正在按下還沒有彈起鼠標的那個鏈接 */
a:active {
color: green;
}
注意：按照 LVHA 的循順序聲明 :link－:visited－:hover－:active。
8.:focus 僞類選擇器
:focus 僞類選擇器用於選取獲得焦點的表單元素。
焦點就是光標，一般情況 類表單元素才能獲取，因此這個選擇器也主要針對於表單元素來說。
input:focus {
background-color:yellow;
}
9.複合選擇器總結
