# 什么是Css

如何學(xué)習(xí)

1.CSS是什么

2.CSS怎么用 (快速入門)

3.CSS 選擇器(重點(diǎn) + 難點(diǎn))

4.美化網(wǎng)頁 (文字，陰影，超鏈接，列表,漸變....)

5.盒子模型

6.浮動(dòng)

7.定位

8.網(wǎng)頁動(dòng)畫 (特效效果)

## 一、什么是CSS

### 1.1、CSS是什么

#### cascading style sheet ?層疊級(jí)聯(lián)樣式表

html：內(nèi)容層

css：表現(xiàn)層 美化網(wǎng)頁

### 1.2、發(fā)展史

- CSS1.0

- CSS2.0 DIV（塊）＋CSS，HTML與CSS結(jié)構(gòu)分離的思想，網(wǎng)頁變得簡單，SEO

- CSS2.1 浮動(dòng)，定位

- CSS3.0 圓角，陰影，動(dòng)畫．I．瀏覽器兼容性

### 1.3 ?css的優(yōu)勢：

#### 1、內(nèi)容和表現(xiàn)分離

#### 2、網(wǎng)頁結(jié)構(gòu)表現(xiàn)統(tǒng)一，可以實(shí)現(xiàn)復(fù)用

#### 3、樣式十分的豐富

#### 4、建議使用獨(dú)立于html的css文件

#### 5、利用SEO，容易被搜索引擎收錄！ Vue

#### 6、樣式表示例，style標(biāo)簽與css文件?

## 二、CSS怎么用-四種導(dǎo)入方式

?CSS的四種導(dǎo)入方式?

#### 層疊樣式表（CSS）可以通過三種方式與 HTML 文檔進(jìn)行關(guān)聯(lián)：

#### 1.內(nèi)部樣式。

在 HTML 的head標(biāo)簽中使用 <style> 標(biāo)簽，將 CSS 樣式直接嵌入到 HTML 文件中。

#### 2.外部樣式。

在 HTML 的head標(biāo)簽中中使用 <link> 標(biāo)簽，將 CSS 文件與 HTML 文件進(jìn)行鏈接。

#### 3.行內(nèi)樣式。

在 HTML的body標(biāo)簽中使用style屬性，直接在標(biāo)簽內(nèi)部添加 CSS 樣式。

#### 5、外部樣式的第二種import導(dǎo)入方法

?

外部樣式

外部樣式的兩種寫法

1head 標(biāo)簽內(nèi)寫link?

2 @import方式導(dǎo)入

## 三、CSS選擇器

選擇器：選擇頁面上的某一種/個(gè)/類的元素 ，指定樣式該應(yīng)用到哪個(gè)元素上而已。

### 1.1、三種基本選擇器

#### 1、標(biāo)簽選擇器

#### 2、類選擇器 class?

#### 3、ld 選擇器

#### 4、優(yōu)先級(jí)id>class>標(biāo)簽

? ?最小原則，id只能作用于一個(gè)元素，class是一組，標(biāo)簽是全部

不同優(yōu)先級(jí)的選擇器，是覆蓋 。

同一優(yōu)先級(jí)，選擇器的組合使用示例：

后代選擇器：選擇所有嵌套在 div 元素內(nèi)部的 p 元素，并將它們的顏色設(shè)置為橘色。

### 1.2層次選擇器

#### 1、后代選擇器

#### 2、子選擇器

#### 3 、向下弟弟

#### 4、通用選擇器

### 1.3結(jié)構(gòu)偽類選擇器

### 1.4屬性選擇器（常用）

## 如何學(xué)習(xí)

## 1．CSS是什么

## 2．CSS怎么用（快速入門）

## 3．CSS選擇器（重點(diǎn)＋難點(diǎn)）

## 4．美化網(wǎng)頁（文字，陰影，超鏈接，列表，漸變．．．．）

## 5．盒子模型

## 6．浮動(dòng)

## 7．定位

## 8．網(wǎng)頁動(dòng)畫（特效效果）