柚子快報激活碼778899分享：前端 CSS簡介

http://yzkb.51969.com/

1. CSS簡介

CSS(Cascading Style Sheets)層疊樣式表，又叫級聯(lián)樣式表，簡稱樣式表，文件后綴名為.css，用于HTML文檔中元素樣式的定義。CSS語法：

這是一個h1標(biāo)題

2. CSS的引入樣式

3. 選擇器

3.1 全局選擇器

可以與任何元素匹配，優(yōu)先級最低，一般做樣式初始化。

這是一個h1標(biāo)題

3.2 元素選擇器

HTML文檔中的元素，p、b、div、a、img、body等所有的標(biāo)簽，選擇的使頁面上所有這種類型的標(biāo)簽。

這是一個h1標(biāo)題

3.3 類選擇器

用 . 來定義，針對想要的所有標(biāo)簽使用

這是一個h1標(biāo)題

3.4 ID選擇器

以 # 來定義，針對某一個特定的標(biāo)簽來使用，只能使用一次，ID名稱不可重復(fù)。

這是一個h1標(biāo)題

3.5 合并選擇器

提取共同的樣式，減少重復(fù)代碼

這是一個h1標(biāo)題

3.6 選擇器的優(yōu)先級

4.背景屬性

CSS背景屬性：

設(shè)置背景顏色：通過background-color實現(xiàn)

這是一個h1標(biāo)題

設(shè)置背景圖片：通過background-image實現(xiàn)

這是一個h1標(biāo)題

設(shè)置如何平鋪背景圖像：通過background-repeat實現(xiàn)。

這是一個h1標(biāo)題

設(shè)置背景圖像的大?。和ㄟ^background-size實現(xiàn)

這是一個h1標(biāo)題

5. 文本屬性

指定元素文本的水平對齊方式：通過text-align實現(xiàn)

這是一個h1標(biāo)題

設(shè)置添加到文本的修飾，通過text-decoration實現(xiàn)

這是一個h1標(biāo)題

控制文本的大小寫：通過text-transform實現(xiàn)

這是一個h1標(biāo)題apple,banana

設(shè)置文本塊中首行文本的縮進(jìn)：通過text-indent實現(xiàn)

這是一個h1標(biāo)題apple,banana

6. 表格屬性

設(shè)置表格邊框：通過border實現(xiàn)

設(shè)置表格的邊框是否被折疊成一個單一的邊框或隔開：通過border-collapse實現(xiàn)

設(shè)置表格的寬度和高度：通過weith和height實現(xiàn)

設(shè)置表格文字對齊方式：通過text-align實現(xiàn)

設(shè)置表格線和文字之間的間隙：通過padding實現(xiàn)

設(shè)置表格的顏色：通過background-color來實現(xiàn)

7. 關(guān)系選擇器

后代選擇器： 選擇所有被E元素包含的F元素，中間用空格隔開： E F{}。

• 蘋果
• 香蕉
• 橘子

子代選擇器： 選擇所有作為E元素的直接子元素F，對更深一層的元素不起作用，用>表示。 E>F{}。

• 水果
  蘋果

飲料

可樂

相鄰兄弟選擇器 選擇緊跟E元素后面的F元素，用加號表示，E+F{}。

h2標(biāo)題

段落1

段落2

通用兄弟選擇器 選擇E元素之后的所有兄弟元素F，作用于多個元素 E~F{}。

h2標(biāo)題

段落1

段落2

8. CSS盒子模型

h2標(biāo)題

段落1

段落2

9. 文檔流

標(biāo)準(zhǔn)流有諸多限制：

高矮不齊，底邊對齊空白折疊

無論多少個空格、換行、tab，都會折疊為一個空格

這是一段文本

10. 浮動

浮動原理：

浮動以后使元素脫離了文檔流浮動只有左、右浮動

• 導(dǎo)航1
• 導(dǎo)航2
• 導(dǎo)航3
• 導(dǎo)航4

• 導(dǎo)航1
• 導(dǎo)航2
• 導(dǎo)航3
• 導(dǎo)航4

絕對定位固定定位

11. 清除浮動

柚子快報激活碼778899分享：前端 CSS簡介

http://yzkb.51969.com/

推薦閱讀