1.CSS-屬性和選擇器

1.文字屬性

fon-style:italic斜體;font-weight:bold加粗;font-size:10px;大小font-family:"微軟雅黑"字體。字體設置需要注意:字體可以進行備選的,就是後面設置多種字體。如果設置英語和中文的字體不一樣?該怎麼做,英文字體不能去設置中文,而中文字體可以設置英文。根據這個特性和字體備選這個特性相結合,我們就可以在前面放英文字體,後面放中文字體,就能達到中英字體不同的效果。另外可以使用font:italic bold 10px "微軟雅黑";這樣的寫法代替那種四行的寫法。在這種縮寫中,style和weight是可以省略的,而size和family是不可以省略的。並且style和weight的順序可以顛倒,而size和family的順序不能顛倒。

2.文本屬性

text-decoration:underline下劃線、line-through刪除線、overline上劃線、none無,a標籤自帶下劃線,若想去掉,可通過此方式。

text-align:center、left、right。對齊

text-indent:2em;縮進兩個字符。em是字符單位,1em代表一個字符的寬度

3.顏色屬性

color:賦值方法有5種,分別是(1)英文單詞,(2)rgb(),(3)rgba(),(4)十六進制如#FF0000,(5)十六進制縮寫如#F00。

英文單詞並不能顯示所有的顏色。rgb中r、g、b的取值若一樣,就是灰色。十六進制中前兩個字符代表的是R的取值,中間兩個字符代表的是G的取值,最後兩個代表的是B的取值.在css中,只要顏色的每兩位都是一樣的,就可以寫成縮寫形式。這也就明白了之前寫的#CCC和#CCCCCC是一樣的道理,並且#CCC代表的是r、g、b取值一樣,那麼就一定是灰色的了。並且十六進制中大小寫都一樣。

4.選擇器

標籤選擇器、ID選擇器、class選擇器、後代選擇器、子元素選擇器之前經常使用,已經掌握。

(1)交集選擇器,作用是選擇兩個選擇器的交集,用法爲:選擇器1選擇器2,注意兩個選擇器之間不能有任何符號和空格,在企業開發中不建議使用這個方法。

(2)並集選擇器,用法:選擇器1,選擇器2{},這個之前用過

(3)兄弟選擇器分爲相鄰兄弟選擇器和通用兄弟選擇器。相鄰兄弟選擇器用法:選擇器1+選擇器2{},但是這個只能找到和選擇器1近鄰着的選擇器2,中間不能隔任何標籤。而通用選擇器用法:選擇器1~選擇器2,能夠找到選擇器1的所有兄弟中符號選擇器2的兄弟。

(4)CSS3中新增的最具有代表性的選擇器就是序選擇器。

p:first-child是找到所有同級別(代)的標籤,然後找到第一個,若第一個是P,則滿足,否則不滿足。比如說,兒子:first-child的意思是從爺爺到孫子,一共三代,分別找出來,爺爺的兄弟姐妹們的第一個看是不是兒子,若是則滿足,父親的兄弟姐妹找出來,看第一代是不是兒子,若是則滿足,孫子同樣是這個道理。這叫不區分類型,通喫。

現在如果想找到這不同三代的第一個兒子,怎麼找?使用p:first-of-type,這個叫區分類型。

同樣也有last-child和last-of-type

p:nth-child(n),同樣,先把每一代給分出來,然後從每一代中進行查找,選擇p中的第n個,這個是不區分類型的。同樣也有p:nth-of-type(n)

p:nth-last-child(n),同樣,先分代,然後選擇p中倒數第n個,不區分類型。同樣也有nth-last-of-type(n)

p:only-child,是指從html的body標籤開始進行遍歷,假如遍歷到一個div標籤,裏面只有一個p標籤,那麼p標籤被選中,若還有其他標籤,那麼p就不被選中,即不區分類型。同樣,only-of-type是指從body標籤開始遍歷,假如遍歷到一個div,裏面有一個p標籤和很多h標籤,那麼p標籤將被選中。

p:nth-child(odd){}選擇同級別中所有序號爲奇數的p標籤,同樣p:nth-child(even)是偶數。同樣p:nth-of-type(odd){}選中的是同類型的奇數,同樣even是偶數。

p:nth-child(xn+y){}選擇同級別中的p標籤,規則是,n取0-n,x和y客戶自即定義。

p[id]{},屬性選擇器,首先找到所有的p標籤,然後找到p標籤中有id的標籤。

p:[attribute=value],比如p:[class=cc],就是指在所有的p標籤中,先找到有class的,再從中篩選出class=cc的。

CSS3中img[alt^=abc]代表img標籤中alt的屬性是以abc開頭的標籤。CSS2中img[alt|=value]代表img標籤中alt的屬性是以abc開頭的標籤,但是這個abc只能以-進行分割,比如,abcdef就不行,而abc-def卻可以,在css3中,這些都可以。

img[alt$=abc]是指結尾,其他和上面那個一樣

css3中img[alt*=abc]代表包含abc的都被選中,css2中img[alt~=abc]代表包含abc的,但這個abc的前後必須要被空格隔開

*{}這個全選的選擇器叫做通配符選擇器

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章