了解

Cascading Style Sheet：層疊級(jí)聯(lián)樣式表

CSS：表現(xiàn)層（美化網(wǎng)頁(yè)）如：字體、顏色、邊框、高度、寬度、背景圖片、網(wǎng)頁(yè)定位、網(wǎng)頁(yè)浮動(dòng)

css優(yōu)勢(shì)：?

1. 內(nèi)容和表現(xiàn)分離
2. 網(wǎng)頁(yè)結(jié)構(gòu)表現(xiàn)統(tǒng)一，可以實(shí)現(xiàn)復(fù)用
3. 樣式十分豐富
4. 建議使用獨(dú)立于html的css文件
5. 利用SEO，容易被搜索引擎收錄

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

行內(nèi)樣式

在需要設(shè)置的標(biāo)簽后面加style。優(yōu)先級(jí)最高

css內(nèi)部樣式

可在html文件中的head標(biāo)簽中寫(xiě)如下：

<style>
? 選擇器{
??????? 聲明1；

? ? ? ? 聲明2；

? ? ? ? 聲明3；
??? }
</style>

鏈接式外部樣式

在文件恰當(dāng)位置添加一個(gè)css文件

在需要引用樣式的HTML文件的head標(biāo)簽中添加link標(biāo)簽。

<link rel="stylesheet" href="css文件位置">

?內(nèi)部樣式與外部樣式優(yōu)先級(jí)一致，從上到下，誰(shuí)先寫(xiě)，誰(shuí)的優(yōu)先級(jí)就高。

導(dǎo)入式外部樣式（了解）

先在head標(biāo)簽中添加style標(biāo)簽

<style>
??? @import "css路徑";
</style>

選擇器

作用： 選擇頁(yè)面上的某一個(gè)或者某一類(lèi)元素

標(biāo)簽選擇器

會(huì)選擇到頁(yè)面上所有的這個(gè)標(biāo)簽的元素（選擇一類(lèi)標(biāo)簽），標(biāo)簽選擇器優(yōu)先級(jí)最低

標(biāo)簽選擇器{

? ? ? ? 聲明1；

? ? ? ? 聲明2；

}

類(lèi)選擇器class

在標(biāo)簽后加class，class屬性值為自定義，class值相同的為一組，可以復(fù)用，類(lèi)選擇器優(yōu)先級(jí)>標(biāo)簽選擇器（選擇所有class屬性值一致的標(biāo)簽）

<h1 class="類(lèi)名稱(chēng)"></h1>

樣式引用時(shí)，格式如下：

.類(lèi)名{

? ? ? ? 聲明1；

? ? ? ? 聲明2

}

id選擇器

在標(biāo)簽后加id，id屬性值為自定義，id全局唯一,優(yōu)先級(jí)最高

<h1 id="id名稱(chēng)"></h1>

樣式引用時(shí)，格式如下：

#id名{

? ? ? ? 聲明1；

? ? ? ? 聲明2

}

優(yōu)先級(jí)對(duì)比：id選擇器>類(lèi)選擇器>標(biāo)簽選擇器

層次選擇器

根據(jù)以下框架，寫(xiě)HTML文件的body結(jié)構(gòu)

紅色為類(lèi)選擇器，紫色為id選擇器

HMTL如下：

后代選擇器

在某個(gè)元素的后面,eg:body后面的所有p標(biāo)簽

標(biāo)簽1? 標(biāo)簽2{

? ? ? ? 聲明1；

}

body后面的p標(biāo)簽全部設(shè)置為紅色

?

類(lèi)tex后面的p標(biāo)簽全部設(shè)置為黃色背景

子選擇器

某個(gè)標(biāo)簽(選擇器)的子標(biāo)簽，eg：body標(biāo)簽后面的p標(biāo)簽，該處p標(biāo)簽不包含無(wú)序列表中的p標(biāo)簽

標(biāo)簽1>標(biāo)簽2{

? ? ? ? 聲明1；

}

body后面的第一輪子標(biāo)簽p字體全部設(shè)置為紅色,類(lèi)標(biāo)簽tex下的p標(biāo)簽背景為黃色

相鄰選擇器

某個(gè)標(biāo)簽（選擇器）的相鄰（下一個(gè)元素），eg：類(lèi)選擇器action的相鄰標(biāo)簽?

選擇器+標(biāo)簽{

? ? ? ? 聲明；

}

li的相鄰li標(biāo)簽設(shè)置為紅色字體

id選擇器的同級(jí)p設(shè)置為藍(lán)色背景，tex選擇器的同級(jí)p設(shè)置為黃色背景，action的同級(jí)p設(shè)置為紅色字體

通用選擇器

選中元素的向下的所有兄弟元素

選擇器+標(biāo)簽{

? ? ? ? 聲明；

}

類(lèi)選擇器action的相鄰p（所有下一個(gè)）元素，設(shè)置為橙色

結(jié)構(gòu)偽類(lèi)選擇器

偽類(lèi)選擇器格式：

標(biāo)簽：參數(shù){

? ? ? ? 聲明；

?}

first-child:第一個(gè)元素?

last-child：最后一個(gè)元素

標(biāo)簽：nth-child()選擇當(dāng)前p元素的父級(jí)下的第幾個(gè)元素,根據(jù)順序選擇

nth-of-type(2):選擇父元素下的p標(biāo)簽的第幾個(gè)，根據(jù)類(lèi)型選擇

擴(kuò)展：hover，鼠標(biāo)移動(dòng)改變效果

屬性選擇器?

設(shè)置10個(gè)標(biāo)簽，每個(gè)標(biāo)簽中包含許多屬性，為a標(biāo)簽設(shè)置默認(rèn)樣式，如下

<p class="demo"><a href="http://baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item "  >3</a><a href="images/123.png" class="links item "  >4</a><a href="images/123.ipg" class="links item "  >5</a><a href="abc" class="links item "  >6</a><a href="/a.pdf" class="links item "  >7</a><a href="/abc.pdf" class="links item "  >8</a><a href="abc.doc" class="links item "  >9</a><a href="abcd.doc" class="links item last"  >10</a>
</p>

默認(rèn)樣式：

<style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: red;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}</style>

a標(biāo)簽中存在id屬性的元素

標(biāo)簽：[屬性名]{

? ? ? ? 聲明；

}

選擇id屬性中屬性為first的元素?

標(biāo)簽：[屬性名=屬性值]{? ? ? ? //=是絕對(duì)等于

? ? ? ? 聲明；

}

class屬性中屬性值包含link的元素?

標(biāo)簽：[屬性名*=屬性值]{? ? ? ? //*=是包含這個(gè)元素

? ? ? ? 聲明；

}

?選中以href屬性中以http屬性值為開(kāi)頭的元素?

標(biāo)簽：[屬性名^=屬性值]{? ? ? ? //^=是以這個(gè)屬性值開(kāi)頭

? ? ? ? 聲明；

}

?選中以href屬性中以pdf屬性值為結(jié)尾的元素?

標(biāo)簽：[屬性名$=屬性值]{? ? ? ? //$=是以這個(gè)屬性值結(jié)尾

? ? ? ? 聲明；

}

字體樣式

span標(biāo)簽：重點(diǎn)突出的字，使用span標(biāo)簽

• font-family:字體樣式
• font-size:字體大小
• font-weight:字體粗細(xì)
• color:字體顏色