1.引入外部樣式表的格式： <link rel=”stylesheet” type=”text/css” href=”../css/style1.css”> 2.樣式表第一行應註明編碼類型： @charset “utf-8”; 3.css語法： ①一個元素中多個屬性用分號隔開，多個元素之間用逗號隔開 ...
1.引入外部樣式表的格式：
<link rel=”stylesheet” type=”text/css” href=”../css/style1.css”>
2.樣式表第一行應註明編碼類型：
@charset “utf-8”;
3.css語法：
①一個元素中多個屬性用分號隔開，多個元素之間用逗號隔開；
②元素中屬性的值一般不加引號，但是當值是若幹個單詞，就要給值加引號；
③註釋：/*```*/ （快捷鍵是ctr+?）；
④優先順序：內聯樣式>內部樣式>外部樣式；但是!important是強制優先的作用；
4.css選擇器：行內樣式優先順序>id選擇器優先順序>類選擇器優先順序>元素選擇器優先順序
①常用選擇器：
②屬性選擇器：
⑴選擇具有value和style屬性的input元素：
⑵選擇具有value屬性且屬性值等於vip的input元素：
⑶選擇具有value屬性且屬性值有多個且其中一個的值等於vip的input元素：
⑷選擇具有lang屬性且屬性值以en開頭且用’-’分隔的p元素：
⑸選擇具有value屬性且屬性值以vip開頭的input元素：
⑹選擇具有value屬性且屬性值以vip結尾的input元素：
⑺選擇具有value屬性且屬性值包含vip的input元素：
③關係選擇器：
⑴後代選擇器（包含選擇器）：
⑵子元素選擇器：與後代選擇器相比，只能選擇作為某元素子元素的元素，縮小了選擇範圍。
⑶相鄰選擇符：選擇緊貼在**元素之後的元素。
⑷兄弟選擇器：選擇**元素之後的所有兄弟元素。
④偽元素選擇器：
⑴E:first-letter/e::first-letter：設置e元素內第一個字元的樣式。
⑵E:first-line/e::first-line：設置e元素內第一行樣式。
⑶E:before/e::before：在每個e元素之前插入內容。用來和content屬性一起使用。
⑷E:after/e::after：在每個e元素之後插入內容。用來和content屬性一起使用。
⑸E:selection/e::selection：設置對象被選擇時的顏色。
⑤偽類選擇器：
E:first-child：選擇父元素的第一個子元素e。
:root：選擇文檔的根元素。
E:last-child：最後一個子元素e。
E:only-child：僅有的一個子元素e。
E:only-of--type：只有一種類型的子元素。
E:nth-child(n)：匹配父元素的第n個子元素e。
E: nth-last-child(n)：匹配父元素的倒數第n個子元素e。
E: first-of--type：匹配同類型中第一個同級兄弟元素e。
E: last-of--type：匹配同類型中最後一個同級兄弟元素e。
E: nth-of-type(n)：匹配同類型中第n個同級兄弟元素e。
E: nth-last-of-type(n)：匹配同類型中倒數第n個同級兄弟元素e。
E:empty：匹配沒有任何子元素的元素。
⑥UI偽類選擇器：
E:active：向被激活的元素添加樣式（點擊的時候）。
E:hover：當滑鼠懸浮在元素上方時，向元素添加樣式。
E:link：當未被訪問的鏈接添加樣式。
E:visited：向已被訪問的鏈接添加樣式。
⑦其他選擇器：
E:focus：向擁有鍵盤焦點的元素添加樣式。
E:lang(en)：向帶有指定lang屬性的元素添加樣式。
#E:target：選擇當前活動的錨點元素。
:not(E)：選擇e元素之外的每個元素。
Input:checked：選擇每個被選中的input元素。
Input:disabled：選擇每個被禁用的input元素。
Input:enabled：選擇每個被啟用的input元素。
5.css3中表示顏色的幾種方式：
⑴顏色名稱、十六進位、RGB方式；
⑵RGBA方式：新增了alpha參數，介於0.0（完全透明）到1.0（完全不透明）之間；
⑶HSL方式：分別表示色調、飽和度、亮度。
H色調：取值區間在0-360，0或360表示紅色，120表示綠色，240表示藍色；
S飽和度：取值為0.0%-100.0%；
L亮度：取值為0.0%-100.0%；
⑷HSLA方式：新增了alpha參數，介於0.0（完全透明）到1.0（完全不透明）之間；
6.css3文字與字體：
①Font-size：大小。
⑴通常使用px、百分比、em來設置大小；
⑵xx-small、x-small、small、medium、large、x-large、xx-large設置為不同尺寸，預設值medium；
⑶smaller設置為比父元素更小的尺寸；
⑷larger設置為比父元素更大的尺寸；
②Font-variant：規定是否以小型大寫字母的字體顯示文本。
⑴Normal預設值，瀏覽器會顯示一個標準字體；
⑵Small-caps瀏覽器會顯示小型大寫字母的字體；
③Font-style：樣式。
⑴Normal預設值，顯示一個標準字體；
⑵Italic顯示一個斜體的樣式；
⑶Oblique顯示一個斜體的樣式；
④Font-weight：粗細。
⑴Normal預設值；
⑵Bold粗體；
⑶Bolder更粗的粗體，lighter更細的字體；
⑷100-900：定義由粗到細的字體。400等同於normal，700等同於bold；
⑤Font-family：字體系列（宋體、楷體、黑體）。
⑥Font：在一個聲明中設置所有字體屬性。
⑴至少要指定字體大小size和字體系列family；
⑵可以按預設順序設置：font-style/font-variant/font-weight/font-size/font-family；
⑦@font-face：嵌入字體。
有字網：https://www.webfont.com/vipcsslist/index
7.css3文本屬性：
①Color：顏色。
②Text-align：文本水平對齊方式。
⑴Left預設值，right，center，justify兩端對齊；
⑵新增start相當於left，end相當於right；
③Line-height：行高。
Normal，數字，百分比，px，em；
④Text-indent：首行縮進。
常用單位像素，百分比，em；
⑤Text-decoration：添加修飾。
⑴None預設值；
⑵Underline加下劃線；
⑶Overline加上劃線；
⑷Line-through加穿過文本的線；
⑸Blink加閃爍的文本；
⑥Letter-spacing/word-spacing：字元間距。
⑦Text-transform：大小寫。
⑴None預設值；
⑵Uppercase轉換為大寫；
⑶Lowercase轉換為小寫；
⑷Capitalize轉換為首字母大寫；
⑧Text-shadow添加陰影。
