柚子快報(bào)激活碼778899分享：前端 CSS簡(jiǎn)介

http://yzkb.51969.com/

1. CSS簡(jiǎn)介

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

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

2. CSS的引入樣式

3. 選擇器

3.1 全局選擇器

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

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

3.2 元素選擇器

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

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

3.3 類選擇器

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

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

3.4 ID選擇器

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

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

3.5 合并選擇器

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

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

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

4.背景屬性

CSS背景屬性：

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

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

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

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

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

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

設(shè)置背景圖像的大小：通過(guò)background-size實(shí)現(xiàn)

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

5. 文本屬性

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

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

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

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

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

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

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

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

6. 表格屬性

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

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

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

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

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

設(shè)置表格的顏色：通過(guò)background-color來(lái)實(shí)現(xiàn)

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

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

• 蘋果
• 香蕉
• 橘子

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

• 水果
  蘋果

飲料

可樂(lè)

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

h2標(biāo)題

段落1

段落2

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

h2標(biāo)題

段落1

段落2

8. CSS盒子模型

h2標(biāo)題

段落1

段落2

9. 文檔流

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

高矮不齊，底邊對(duì)齊空白折疊

無(wú)論多少個(gè)空格、換行、tab，都會(huì)折疊為一個(gè)空格

這是一段文本

10. 浮動(dòng)

浮動(dòng)原理：

浮動(dòng)以后使元素脫離了文檔流浮動(dòng)只有左、右浮動(dòng)

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

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

絕對(duì)定位固定定位

11. 清除浮動(dòng)

柚子快報(bào)激活碼778899分享：前端 CSS簡(jiǎn)介

http://yzkb.51969.com/

推薦閱讀