css樣式分為內(nèi)部樣式表:CSS樣式編寫到head中的style標簽里昆烁,通過CSS選擇器選定指定元素餐禁,可以同時為這些元素一起設(shè)置樣式饶辙,也可是樣式進一步復(fù)用,表現(xiàn) 結(jié)構(gòu)進一步分離岸晦。
外部樣式表 : 編寫到外部的CSS文件中,通過link標簽將外部的CSS文件引入到當前頁面中睛藻。利用瀏覽器的緩存启上,加快用戶訪問的速度,提高了用戶體驗店印。
內(nèi)聯(lián)樣式:編寫到元素的style屬性當中冈在,只對當前的元素中內(nèi)容起作用,不方便復(fù)用
塊和內(nèi)聯(lián)元素:
塊元素:會獨占一行
????????????? 常見的塊元素:div? p?? h1??? h2???? h3
內(nèi)聯(lián)元素(行內(nèi)元素):只占自身大小的元素按摘,不會占用一行
?????????????? 常見的內(nèi)聯(lián)元素:span ?? a ?? img ? ?? iframe
一般情況下使用塊元素去包含內(nèi)聯(lián)元素包券,而不會使用內(nèi)聯(lián)元素去包含一個塊元素
常用的選擇器有:
??????????????????????????? 元素選擇器:可以選擇頁面中的所有指定元素????????? 語法:標簽{ }
??????????????????????????? id選擇器:通過元素的id屬性值選擇唯一一個元素????? 語法:#id屬性值{ }
??????????????????????????? 類選擇器:元素的class屬性值選中一組元素????? 語法:.class屬性值{ }
???????????????????????????? 選擇器分組(并集選擇器):選擇器分組可以同時選中多個選擇器對應(yīng)的元素???????????????? 語法:選擇器1,選擇器2炫贤,選擇器n{ }
??????????????????????????? 通配選擇器:選擇頁面中所有元素?????????????? 語法:*{ }
??????????????????????????? 復(fù)合選擇器(交集選擇器):選中同時滿足多個選擇器的元素?????????????? 語法:選擇器1溅固,選擇器2,選擇器n{ }
??????????????????????? ? ? 后代元素選擇器:選中指定元素的指定后代元素???????????? 語法:祖先元素? 后代元素{ }
??????????????????????????? 子元素選擇器:選中指定父元素的指定子元素????????? ?? 語法:父元素 > 子元素
??????????????????????????? 偽類選擇器:用來表示元素一種特殊狀態(tài)
?????????????? visited:表示訪問過的鏈接
??????????????? hover:表示鼠標移入的狀態(tài)
??????????????? active:表示超鏈接被點擊的狀態(tài)
????????????????????????????? 偽元素:使用偽元素表示元素中一些特殊的位置
??????????????? before:表示元素最后邊的部分
???????????????? after:表示元素最后邊的部分
????????????????????????????? 屬性選擇器:根據(jù)元素中的屬性或?qū)傩灾祦磉x取指定元素
???????????????????????????? 子元素選擇器:
?????????????????? first-child:選中第一個子元素
?????????????????? last-child:選中最后一個子元素
?????????????????? nth-child:選中任意位置的子元素
????????????????????????????? 兄弟元素選擇器:選中一個元素后緊挨著的指定的兄弟元素??????????????? 語法:前一個+后一個
?????????????????????????????????????????????????????????? 選中后面所有兄弟元素???????????????? 語法:前一個~后邊所有
???????????????????????????? 否定偽類:可以從已選中的元素中剔除出某些元素??????????? 語法:not(選擇器)
????????????????????????????? a的偽類:
???????????????????????? link??????? visited???????? hover?????? active
1.?? plate
2.?? bento
3. ? #fancy
4.?? plate>apple
5. ? #fancy>pickle
6.?? apple.small
7.?? orange.small
8.?? bento>orange.small
9.?? plate,bento
10.? *
11.? plate*
12.? plate+apple,plate+apple
13.? bento~pickle
14.? plate>apple
15.? orange:first-child
16.? apple:only-child,pickle:only-child
17.? apple:last-child,pickle:last-child
18.? plate:nth-child(3)
19.? bento:nth-last-child(4)
20.? apple:first-of-type
21.? plate:nth-of-type(even)
22.? plate:nth-of-type(6n+3),plate:nth-of-type(6n+5)
23.? apple:only-of-type
24.? orange:last-of-type,apple:last-of-type
25.? bento:empty
26.? apple:not(.small)
就算跌倒照激,也要豪邁的笑