柚子快報(bào)激活碼778899分享：【前端】零基礎(chǔ)學(xué)會(huì)編寫(xiě)CSS

http://yzkb.51969.com/

一、什么是CSS

CSS?(Cascading Style Sheets，層疊樣式表）是一種是一種用來(lái)為結(jié)構(gòu)化文檔（如 HTML 文檔）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語(yǔ)言，能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)別的精確控制，實(shí)現(xiàn)美化頁(yè)面的效果。

html決定一個(gè)頁(yè)面的結(jié)構(gòu)，那么css就用來(lái)控制頁(yè)面的展示效果

二、CSS基本語(yǔ)法?

首先介紹基本的概念，CSS的基本語(yǔ)法由選擇器和聲明組成

選擇器用來(lái)決定修改誰(shuí)的樣式，聲明則決定了修改成什么樣子，每條聲明都是一個(gè)鍵值對(duì)

例如這個(gè)例子：

p {

color: red; /*設(shè)置字體顏色*/

font-size: 20px; /*設(shè)置字體大小*/

}

就是將所有

元素的文本都設(shè)置為紅色，字體大小為20px

一個(gè)樣式可以寫(xiě)在同一行，但是更推薦一個(gè)聲明一行的風(fēng)格，顯得沒(méi)那么擁擠

三、CSS的引入方式

CSS需要以一定的方式才能夠插入HTML中

3.1 內(nèi)部樣式表

將CSS寫(xiě)在style標(biāo)簽中，直接嵌入到HTML內(nèi)部

例如：

頁(yè)面內(nèi)容

這樣可以將CSS和HTML合并在一個(gè)文件中，一般將style標(biāo)簽放在HTML的head標(biāo)簽中，也能夠做到樣式與頁(yè)面結(jié)構(gòu)分離

不過(guò)這種方式分離的不夠徹底，當(dāng)CSS內(nèi)容很多時(shí)會(huì)顯得雜亂

3.2 行內(nèi)樣式表

這種方法相比上面的內(nèi)部樣式表，分離程度更低，但優(yōu)先級(jí)較高，且只針對(duì)單個(gè)標(biāo)簽生效

直接在某個(gè)標(biāo)簽中定義style屬性來(lái)指定該標(biāo)簽的樣式，但一般只適合寫(xiě)一些簡(jiǎn)單的樣式

例如：

行內(nèi)樣式表的優(yōu)先級(jí)較高，會(huì)覆蓋其他引入方式的樣式

3.3 外部樣式表

另外創(chuàng)建一個(gè)CSS文件，并使用link標(biāo)簽在HTML文件中引入該CSS文件，例如：

頁(yè)面內(nèi)容

這種方式的分離程度最高，是實(shí)際開(kāi)發(fā)中最常用的方式

四、選擇器

前面提到，選擇器決定了要對(duì)誰(shuí)的樣式進(jìn)行修改，我們必須選中了目標(biāo)，才能設(shè)置屬性。

選擇器也有不同的種類(lèi)

4.1 基礎(chǔ)選擇器

（1）標(biāo)簽選擇器

前面的例子使用的就是標(biāo)簽選擇器，能夠快速的修改同一標(biāo)簽的所有元素，但無(wú)法進(jìn)行差異化修改

例如：

頁(yè)面內(nèi)容

（2）類(lèi)選擇器

定義某個(gè)元素的類(lèi)名，然后通過(guò)指定類(lèi)名來(lái)修改其樣式

例如：

測(cè)試

一些細(xì)節(jié)需要注意：

使用類(lèi)選擇器時(shí)類(lèi)名前需要帶點(diǎn)通過(guò)定義某元素的class屬性來(lái)定義其類(lèi)名一個(gè)類(lèi)名可以被多個(gè)元素同時(shí)使用，一個(gè)元素也可以同時(shí)使用多個(gè)類(lèi)名，多個(gè)類(lèi)名用空格分隔

例如：

測(cè)試

長(zhǎng)類(lèi)名可以用 - 分割不要用純數(shù)字、中文和標(biāo)簽名作為類(lèi)名

（3）id選擇器

定義某個(gè)元素的id，并通過(guò)指定id來(lái)修改其樣式

例如：

測(cè)試

id選擇器和類(lèi)選擇器相似，區(qū)別在于：

選擇器開(kāi)頭使用#而不是點(diǎn)id是唯一的，不能同時(shí)被多個(gè)元素使用，這是和類(lèi)選擇器最大的區(qū)別

（4）通配符選擇器

使用星號(hào) * 來(lái)選取所有的元素，例如：

頁(yè)面內(nèi)容

頁(yè)面中的所有文字都會(huì)被改成紅色

4.2 復(fù)合選擇器

（1）后代選擇器

也叫包含選擇器，用于選擇某個(gè)父元素的某個(gè)子元素

元素1 元素2 { 聲明 }

父子元素間要用空格分隔，前面的是父元素，后面的是子元素，只會(huì)修改子元素的樣式

多個(gè)元素間可以使用不同的基礎(chǔ)選擇器，例如元素1用類(lèi)選擇器，元素2用標(biāo)簽選擇器

例如：

1. 1
2. 2
3. 3

元素2不一定非要是子元素，孫子輩的元素也可以

（2）并集選擇器

用于同時(shí)對(duì)多個(gè)目標(biāo)的樣式進(jìn)行修改，例如：

并集選擇器通過(guò)逗號(hào)分割不同的目標(biāo)。

任何基礎(chǔ)選擇器（如上面的類(lèi)選擇器）都可以使用并集選擇器

（3）偽類(lèi)選擇器

偽類(lèi)用于定義元素的特殊狀態(tài)

一些網(wǎng)頁(yè)上的鏈接，鼠標(biāo)沒(méi)放上去的時(shí)候是黑色的，但是我們把鼠標(biāo)放上去后就變?yōu)榱似渌伾?，這是如何做到的呢？

我們可以使用偽類(lèi)選擇器來(lái)實(shí)現(xiàn)這樣的效果，例如：

鏈接

其中：

a:link代表未被訪問(wèn)過(guò)的鏈接a:visited代表已被訪問(wèn)過(guò)的鏈接a:hover代表鼠標(biāo)指針懸停處的鏈接a:active代表鼠標(biāo)按下但沒(méi)松開(kāi)的鏈接

上面的例子中，我們?cè)O(shè)置的鏈接未訪問(wèn)時(shí)是黑色字體的，將鼠標(biāo)放在上面就會(huì)變?yōu)樗{(lán)色，按下但不松開(kāi)時(shí)字體則會(huì)變?yōu)榧t色，點(diǎn)擊鏈接過(guò)后字體變?yōu)樽仙?/p>

在測(cè)試上面的例子時(shí)，鏈接被訪問(wèn)后就會(huì)一直顯示紫色字體

如果我們要將一個(gè)被訪問(wèn)過(guò)的鏈接恢復(fù)為未訪問(wèn)的狀態(tài)，則需要用ctrl+shift+delete清空瀏覽器歷史記錄

使用偽類(lèi)選擇器時(shí)，需要注意按照l(shuí)ink-visited-hover-active的順序定義

除了鏈接我們還可以在其他元素上使用偽類(lèi)，例如

Vova全球外貿(mào)站