一、CSS簡介

什么是 CSS？

• CSS?指的是層疊樣式表*?(Cascading?Style?Sheets)

• CSS 描述了如何在屏幕、紙張或其他媒體上顯示 HTML 元素

• CSS?節(jié)省了大量工作。它可以同時(shí)控制多張網(wǎng)頁的布局

• 外部樣式表存儲(chǔ)在?CSS 文件中

為什么使用CSS

實(shí)現(xiàn)內(nèi)容與樣式的分離，便于團(tuán)隊(duì)開發(fā)

樣式復(fù)用，便于網(wǎng)站的后期維護(hù)

頁面的精確控制，讓頁面更精美

CSS作用

頁面外觀美化

布局和定位

二、基本用法

1、CSS語法

• 選擇器：要修飾的對象（東西）

• 屬性名：修飾對象的哪一個(gè)屬性（樣式）

• 屬性值：樣式的取值

效果:

2、CSS應(yīng)用方式

也稱為CSS引用方式，有三種方式：內(nèi)部樣式、行內(nèi)樣式、外部樣式

2.1 內(nèi)部樣式

也稱為內(nèi)嵌樣式，在頁面頭部通過style標(biāo)簽定義

對當(dāng)前頁面中所有符合樣式選擇器的標(biāo)簽都起作用

2.2 行內(nèi)樣式

也稱為嵌入樣式，使用HTML標(biāo)簽的style屬性定義

只對設(shè)置style屬性的標(biāo)簽起作用

2.3 外部樣式

使用單獨(dú)的?.CSS?文件定義，然后在頁面中使用?link標(biāo)簽

<link rel="stylesheet" type="text/css" href="CSS樣式文件的路徑">

提示：type屬性可以省略

三、選擇器

1、基礎(chǔ)選擇器

1.1 標(biāo)簽選擇器

也稱為元素選擇器，使用HTML標(biāo)簽作為選擇器的名稱

以標(biāo)簽名作為樣式應(yīng)用的依據(jù)

1.2 類選擇器

使用自定義的名稱，以?.?號(hào)作為前綴，然后再通過HTML標(biāo)簽的class屬性調(diào)用類選擇器

以標(biāo)簽的class屬性作為樣式應(yīng)用的依據(jù)

注意事項(xiàng)：

• 調(diào)用時(shí)不能添加?.?號(hào)

• 同時(shí)調(diào)用多個(gè)類選擇器時(shí)，以?空格?分隔

• 類選擇器名稱不能以?數(shù)字?開頭

1.3 ID選擇器

使用自定義名稱，以?#?作為前綴，然后通過HTML標(biāo)簽的id屬性進(jìn)行名稱匹配

以標(biāo)簽的id屬性作為樣式應(yīng)用的依據(jù)，一對一的關(guān)系

效果:

2、復(fù)雜選擇器

2.1 復(fù)合選擇器

標(biāo)簽選擇器和類選擇器、標(biāo)簽選擇器和ID選擇器，一起使用

必須同時(shí)滿足兩個(gè)條件才能應(yīng)用樣式

2.2組合選擇器

也稱為集體聲明

將多個(gè)具有相同樣式的選擇器放在一起聲明，使用逗號(hào)隔開

2.3 嵌套選擇器

在某個(gè)選擇器內(nèi)部再設(shè)置選擇器，通過空格隔開

只有滿足層次關(guān)系最里層的選擇器所對應(yīng)的標(biāo)簽才會(huì)應(yīng)用樣式

注意：使用?空格?時(shí)不區(qū)分父子還是后代，使用CSS3中新增的?>?時(shí)必須是父子關(guān)系才行

效果:

3、選擇器優(yōu)先級(jí)

3.1 優(yōu)先級(jí)

行內(nèi)樣式>ID選擇器>類選擇器>標(biāo)簽選擇器

原因：首先加載標(biāo)簽選擇器,再加載類選擇器，然后加載ID選擇器，最后加載行內(nèi)樣式

后加載會(huì)覆蓋先加載的同名樣式

3.2 內(nèi)外部樣式加載順

就近原則

原因：按照書寫順序依次加載，在同優(yōu)先級(jí)的前提下，后加載的會(huì)覆蓋先加載的同名樣式，所以離的越近越優(yōu)先

四、常用CSS屬性

1.字體屬性

設(shè)置字體相關(guān)的樣式

2.文本屬性

3.背景屬性

五、盒子模型

1.簡介

盒子模型是網(wǎng)頁布局的基礎(chǔ)，將頁面中所有元素都看作是一個(gè)盒子，盒子都包含以下幾個(gè)屬性：

• width 寬度

• height 高度

• border 邊框

• padding 內(nèi)邊距

• margin 外邊距

2.盒子模型

2.1 border

表示盒子的邊框

分為四個(gè)方向：

• 上top、右right、下bottom、左left

• border-top、border-right、border-bottom、border-left

樣式style的取值：

solid實(shí)線、dashed虛線、dotted點(diǎn)線、double雙線、inset內(nèi)嵌的3D線、outset外嵌的3D線

2.2 padding

表示盒子的內(nèi)邊距，即內(nèi)容與邊框之間的距離

同樣也分為四個(gè)方向，也可以簡寫（按順時(shí)針方向，默認(rèn)上下一樣，左右一樣）

注意：如果上下沖突，則以上為準(zhǔn)，如果左右沖突，則以左為準(zhǔn)

2.3 margin

表示盒子的外邊距，即盒子與盒子之間的距離

同樣也分為四個(gè)方向，也可以簡寫（按順時(shí)針方向，默認(rèn)上下一樣，左右一樣）

居中對齊：

3.其他

3.1 元素所占空間

頁面中的元素實(shí)際所占的空間

• 寬度=width+左右padding+左右border+左右margin

• 高度=height+上下padding+上下border+上下margin

3.2 盒子屬性默認(rèn)值

不同標(biāo)簽的盒子屬性默認(rèn)值可能不同，需要自己設(shè)置

3.3 外邊距的合并

也稱為外邊距的折疊，指的是兩個(gè)塊級(jí)元素垂直外邊距相遇時(shí)，它們將合并為一個(gè)外邊距，合并后的外邊距值為其中較大的那個(gè)外邊距值

六、定位方式

1.簡介

通過position屬性實(shí)現(xiàn)對元素的定位，有四種定位方式

常用取值：

設(shè)置定位方式后，還要設(shè)置定位屬性（偏移量）：top、bottom、left、right

2.相對定位

先設(shè)置元素的position屬性為relative,然后再設(shè)置偏移量

3.絕對定位

先設(shè)置父標(biāo)簽為非static定位，然后設(shè)置元素的position屬性為absolute，最后再設(shè)置偏移量

注意：

• 一般來說都會(huì)將父標(biāo)簽設(shè)置為非static定位

• 如果父標(biāo)簽不是非static定位，則會(huì)相對于瀏覽器窗口進(jìn)行定位

• 設(shè)置元素為絕對定位后，元素會(huì)浮到頁面上方

4.固定定位

先設(shè)置元素的position屬性為fixed，然后再設(shè)置偏移量

設(shè)置元素為固定定位后，元素會(huì)浮動(dòng)在面面上方

七、頁面布局

1.簡介

常見頁面布局：

• 表格布局

• div布局

2.表格布局

2.1 簡介

不適用于復(fù)雜布局，僅用于簡單 、有規(guī)則的結(jié)構(gòu)

定位相對準(zhǔn)確，與瀏覽器基本無關(guān)，適用于簡單分隔

2.2 用法

table常用樣式的屬性

• border在表格外圍設(shè)置邊框

• border-spacing設(shè)置單元格之間的距離（相當(dāng)于table標(biāo)簽中的cellspacing屬性，即間距）

• border-collapse表格中相鄰邊框是否合并，取值：seprate、collapse

th/td常用樣式屬性：

• border為單元格設(shè)置邊框

• padding設(shè)置單元格的內(nèi)邊距（相當(dāng)于table標(biāo)簽中的cellpadding屬性，邊距）

3.div布局

效果: