選擇器的辨別
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è)置首行縮進。
該樣式需要指定一個長度,并且只對第一 行生效