2018-09-29

選擇器的辨別

1.Type Selector:

plate

2.Type Selector:

bento

3.ID Selector:

#fancy

4.Descendant(后代)Selector:

plate apple

5.Combine the Descendant & ID Selectors(合并后代和ID選擇器):

#fancy pickle

6.Class Selector:

.small

7.Combine the Class Selector:

orange.small

8.bento orange

9.Comma Combinator:

plate,bento

10.(The Universal Selector)通用選擇器:

*

11.Combine the Universal Selector()

plate *

12.Adjacent Sibling Selector(相鄰選擇器):

plate+apple

13.General Sibling Selector(一般兄弟姐妹選擇器):

bento~pickle

14.Child Selector:

plate>apple

15.First Child Pseudo-selector:

p :first-child

16.Only Child Pseudo-selector:

plate :only-child

17.Last Child Pseudo-selector

.small:last-child

18.Nth Child Pseudo-selector:

:nth-child(3)

19.Nth Last Child Selector

:nth-last-child(4)

20.First of Type Selector

apple:first-of-type

21.Nth of Type Selector

:nth-of-type(even)

22.Nth-of-type Selector with Formula(帶式選擇器式選擇器)

:nth-of-type(2n+3)

23.Only of Type Selector

apple:only-of-type

24.Last of Type Selector

.small:last-of-type

25.Empty Selector

bento:empty

26.Negation Pseudo-class:否定偽類

apple:not(.small)

選擇器的分類

類型語法

元素選擇器標(biāo)簽名

類選擇器. 類名

id選擇器#id名

復(fù)合選擇器A.B

群組選擇器A,B

通用選擇器*

后代選擇器A B(>表示只是子一代)

選擇第一個子標(biāo)簽:first-child

選擇最后一個子標(biāo)簽:last-child

選擇指定位置的子元素:nth-child(A)

選擇指定類型的子元素:first-of-type,:last-of-type,:nth-of-type

兄弟選擇器+表示后邊一個元素,~表示后面所有元素

否定偽類:not(X)

CSS權(quán)重的等級劃分

!important,加在樣式屬性值后,權(quán)重值為 10000

內(nèi)聯(lián)樣式,如:style=””,權(quán)重值為1000

ID選擇器,如:#content,權(quán)重值為100

類,偽類和屬性選擇器,如: content、:hover 權(quán)重值為10

標(biāo)簽選擇器和偽元素選擇器,如:div、p、:before 權(quán)重值為1

通用選擇器(*)、子選擇器(>)、相鄰選擇器(+)、同胞選擇器(~)、權(quán)重值為0

文本標(biāo)簽

著重點通常為斜體

重要性通常為粗體

類似于上邊沒有語義只是斜體和粗體

小一個字號

使用cite標(biāo)簽可以指明對某內(nèi)容的引用或參考。

blockquote和q表示標(biāo)記引用的文本。

blockquote用于長引用,q用于短引用。

上標(biāo)下標(biāo)

下劃線刪除線

    無序列表

    有序列表

定義列表

文本格式化

px:像素

em:相對于font-size來說:1em = 1font-size

RGB

– RGB(100%,0%,0%)

– RGB(0,255,0)

RGBA

RGBA表示一個顏色和RGB類似,只不過比RGB多了一個A(alpha)來表示透明度,? 透明度需要一個0-1的值。0表示完全透明,1表示完全不透明。– RGBA(255,100,5,0.5)

字體

font-size:設(shè)置大小

font-family:設(shè)置類型,可以多個類型例如:p{font-family:Arial , Helvetica , sans-serif}

font-style用來指定文本的斜體。

指定斜體:font-style:italic

指定非斜體:font-style:normal

font-weight用來指定文本的粗體。

指定粗體:font-weight:bold

指定非粗體:font-weight:normal

font語法:

font:加粗 斜體 小型大寫 大小/行高 字體

這里前邊幾個加粗、斜體和小型大寫的順 序無所謂,也可以不寫,但是大小和字體 必須寫且必須寫到后兩個。

line-height用于設(shè)置行高,行高越大則行 間距越大。

行間距 = line-height – font-size

text-transform樣式用于將元素中的字母全都變成大寫。

大寫:text-transform:uppercase

小寫:text-tansform:lowercase

首字母大寫:text-transform:capitalize

正常:text-transform:none

text-decoration屬性,用來給文本添加各 種修飾。通過它可以為文本的上方、下方 或者中間添加線條。

可選值:

underline

overline

line-through

none

letter-spacing用來設(shè)置字符之間的間距。

word-spacing用來設(shè)置單詞之間的間距。

這兩個屬性都可以直接指定一個長度或百 分?jǐn)?shù)作為值。正數(shù)代表的是增加距離,而 負數(shù)代表減少距離。

text-align用于設(shè)置文本的對齊方式。

可選值:

left:左對齊

right:右對齊

justify:兩邊對齊

center:居中對齊

text-indent用來設(shè)置首行縮進。

該樣式需要指定一個長度,并且只對第一 行生效

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容