1、CSS介紹
1.1 什么是CSS？
CSS （Cascading Style Sheets）層疊樣式表。
層疊：
css的一種特性，后面講。
樣式表：
如何描述一個(gè)人的外觀？
蒼老師
身高:165cm;
臉型:娃娃臉;
發(fā)色:黑色;
膚色:白色;
發(fā)型:馬尾辮;
胸圍：D
通過(guò)一系列屬性:值來(lái)描述外觀或樣式，這一系列屬性:值被稱(chēng)為樣式表。
1.2 CSS的使用方式
方式一：行內(nèi)樣式，標(biāo)簽的style屬性（不推薦使用）
<標(biāo)簽名 style=”樣式表屬性1:值;樣式表屬性2:值...”></標(biāo)簽名>
注意：
→ 要能夠區(qū)分 標(biāo)簽屬性 和 樣式屬性
→ 樣式表屬性和值之間用英文的冒號(hào)（:）分割，多個(gè)樣式屬性之間用英文的分號(hào)（;）分割。
方式二：內(nèi)部（內(nèi)聯(lián)、內(nèi)嵌）樣式，style標(biāo)簽（學(xué)習(xí)過(guò)程會(huì)用）
<style>
選擇到的元素目標(biāo) {
樣式表屬性1:值;
樣式表屬性2:值
...
}
</style>
注意：
→ style標(biāo)簽要寫(xiě)在head標(biāo)簽里
→ 樣式表屬性和值之間用英文的冒號(hào)（:）分割，多個(gè)樣式屬性之間用英文的分號(hào)（;）分割。
方式三：外聯(lián)樣式，link標(biāo)簽：（實(shí)際開(kāi)發(fā)用）
<link rel=”stylesheet” href=”樣式文件的路徑”>
link標(biāo)簽屬性：
→ rel告訴瀏覽器該標(biāo)簽所引用的內(nèi)容是樣式表
→ href通過(guò)路徑引入樣式表文件
注意：
→ 要單獨(dú)建立一個(gè)后綴名為.css的樣式表文件，文件里的內(nèi)容格式和方式二中style標(biāo)簽里的內(nèi)容是一樣的。
→ link標(biāo)簽要寫(xiě)在head標(biāo)簽里。
2、 web三層分離
web三層原則：
HTML
CSS
JS
- 這三種技術(shù)都作用于網(wǎng)頁(yè)，為了方便網(wǎng)頁(yè)后期的管理和維護(hù)，需要對(duì)這三種技術(shù)分而治之。
- 所謂的分而治之就是把這三種技術(shù)分為三種獨(dú)立的文件來(lái)管理（HTML文件、CSS文件、JS文件）
3、CSS樣式屬性
- 3.1 寬度、高度、背景色
- 3.2 字體屬性
font屬性聯(lián)寫(xiě)：
font:font-style font-weight font-size/line-height font-family
注意：在font聯(lián)寫(xiě)時(shí) font-style 、font-weight、line-height這三個(gè)屬性可以省略。
4、 CSS基本選擇器
- 4.1 什么是選擇器？
選擇器：
選擇器就是，要對(duì)頁(yè)面上的元素進(jìn)行樣式修飾時(shí)，得先找到要修飾的元素。 怎么找？就是通過(guò)選擇器（選擇的方式）來(lái)找網(wǎng)頁(yè)中要修飾的元素。
語(yǔ)法格式：
選擇器 {
樣式屬性1:值;
樣式屬性2:值;
...
}
注意：
→ 選擇器和第一個(gè)大括號(hào)之間要有空格。
→ 第二大括號(hào)要和選擇器的開(kāi)始垂直方向?qū)R。
→ 樣式屬性和值要寫(xiě)在大括號(hào)里，且在大括號(hào)里要有縮進(jìn)（2個(gè)或4個(gè)空格）。
→每一組樣式屬性和值要獨(dú)占一行，且要加分號(hào)。
- 4.2 基本選擇器（單個(gè)選擇器）
通配符選擇器：
語(yǔ)法：
* {
樣式屬性1:值;
樣式屬性2:值;
...
}
作用（特點(diǎn)）：
對(duì)頁(yè)面上所有元素進(jìn)行樣式修飾。
標(biāo)簽名選擇器：
語(yǔ)法：
標(biāo)簽名 {
樣式屬性1:值;
樣式屬性2:值;
...
}
作用（特點(diǎn)）：
對(duì)頁(yè)面上和選擇器中的標(biāo)簽名一樣的所有元素進(jìn)行樣式修飾。
id選擇器：
語(yǔ)法：
#id值 {
樣式屬性1:值;
樣式屬性2:值;
...
}
作用（特點(diǎn)）：
對(duì)頁(yè)面上和選擇器中id值一樣的單個(gè)元素進(jìn)行修飾。
注意：
→ 選擇器中的id值前要加#號(hào)
→ id就是標(biāo)簽的一個(gè)屬性。
→ id屬性的id值，id值在頁(yè)面上要唯一，不要重復(fù)。
→ id 命名規(guī)范，可以由數(shù)字、字母、下劃線組合，不能由數(shù)字開(kāi)頭。
class類(lèi)選擇器：
語(yǔ)法：
.類(lèi)名 {
樣式屬性1:值;
樣式屬性2:值;
...
}
作用（特點(diǎn)）：
對(duì)頁(yè)面上和選擇器中class屬性值一樣的元素進(jìn)行修飾。
注意：
→ class 是標(biāo)簽中的屬性。
→ class 屬性的值可以有多個(gè)，多個(gè)值之間要用空格隔開(kāi)。
→ class 屬性值可以重復(fù)。
→ 在選擇器中類(lèi)名之前要加點(diǎn)(.)。
→ class命名規(guī)范，可以由數(shù)字、字母、下劃線、中劃線組合，不能 由數(shù)字開(kāi)頭。
5、CSS組合選擇器
- 5.1 什么是組合選擇器？
組合選擇器就是由多個(gè)基本選擇器組合成的一個(gè)復(fù)合選擇器。
- 5.2 組合選擇器
子代選擇器：
語(yǔ)法：
選擇器1 >選擇器2 {
樣式屬性1:值;
樣式屬性2:值;
...
}
作用（特點(diǎn)）：
對(duì)選擇器2所選定的元素進(jìn)行樣式修飾，但條件是所選定的元素的父元素必須符合選擇器1。
后代選擇器：
語(yǔ)法：
選擇器1 選擇器2 {
樣式屬性1:值;
樣式屬性2:值;
...
}
作用：
對(duì)選擇器2所選定的元素進(jìn)行樣式修飾，但條件是所選定的元素的父元素或祖先元素必須符合選擇器1。
兄弟選擇器：
語(yǔ)法：
選擇器1+選擇器2 {
樣式屬性1:值;
樣式屬性2:值;
...
}
作用：
對(duì)選擇器2所選定的元素進(jìn)行樣式修飾，但條件是所選定的元素的上一個(gè)兄弟元素必須符合選擇器1。
交集選擇器：
語(yǔ)法：
選擇器1選擇器2 {
樣式屬性1:值;
樣式屬性2:值;
...
}
作用：
對(duì)選擇器2所選定的元素進(jìn)行樣式修飾，但條件是所選定的元素同時(shí)必須符合選擇器1。
注意：
→ 選擇器1通常是標(biāo)簽選擇器或類(lèi)選擇器。
→ 選擇器2通常是類(lèi)選擇器。
并集選擇器：
語(yǔ)法：
選擇器1,選擇器2 {
樣式屬性1:值;
樣式屬性2:值;
...
}
作用：
對(duì)于符合選擇器1或符合選擇器2的元素進(jìn)行樣式修飾。
6、CSS偽類(lèi)選擇器
- 6.1 錨偽類(lèi)
什么是錨偽類(lèi)？
和a標(biāo)簽相關(guān)的偽類(lèi)選擇器。
:link
作用：給超鏈接沒(méi)有被訪問(wèn)前修飾的樣式。
語(yǔ)法：
a:link {
樣式屬性1:值;
樣式屬性2:值;
...
}
注意：
僅僅對(duì)a標(biāo)簽有作用。
:visited
作用：給超鏈接被訪問(wèn)后修飾的樣式。
語(yǔ)法：
a:visited {
樣式屬性1:值;
樣式屬性2:值;
...
}
注意：
僅僅對(duì)a標(biāo)簽有作用。
:hover
作用：鼠標(biāo)懸停在元素上時(shí)修飾的樣式
語(yǔ)法：
a:hover {
樣式屬性1:值;
樣式屬性2:值;
...
}
注意：
→ 對(duì)所有標(biāo)簽有效果。
→ 針對(duì)超鏈接，:hover必須放在:link和:visited之后。
:active
作用：對(duì)元素鼠標(biāo)鍵按下不彈起時(shí)所修飾的樣式。
語(yǔ)法：
a:active {
樣式屬性1:值;
樣式屬性2:值;
...
}
注意：
→ 對(duì)所有標(biāo)簽有效果。
→ 針對(duì)超鏈接，:active必須放在:hover之后。
- 6.2 input輸入框偽類(lèi)
:focus
作用：input輸入框獲取焦點(diǎn)時(shí)要修飾的樣式。
語(yǔ)法：
input:focus {
樣式屬性1:值;
樣式屬性2:值;
...
}
7、CSS樣式表中的注釋
/* 注釋的內(nèi)容 */
注意： 注釋不能嵌套
8、元素的顯示模式
模式一：塊級(jí)元素
特點(diǎn)：
→ 獨(dú)占一行
→ 可設(shè)置寬高
默認(rèn)是塊級(jí)元素的標(biāo)簽有：
h1-h6、p、div、ul、ol、li、dl、dt、dd
通過(guò)樣式屬性將一個(gè)元素設(shè)為塊級(jí)元素：
display:block;
模式二：行內(nèi)元素
特點(diǎn)：
→ 不獨(dú)占一行
→ 不能設(shè)置寬高，寬高由內(nèi)容決定。
默認(rèn)的是行內(nèi)元素的標(biāo)簽有：
a、span
通過(guò)樣式屬性將一個(gè)元素設(shè)為行內(nèi)元素：
display:inline;
模式三：行內(nèi)塊級(jí)元素
特點(diǎn)：
→ 不獨(dú)占一行 （行內(nèi)元素的特點(diǎn)）
→ 可設(shè)置寬高 （塊級(jí)元素的特點(diǎn)）
默認(rèn)的是行內(nèi)塊級(jí)元素的標(biāo)簽有：
img,input,select,textarea
通過(guò)樣式屬性將一個(gè)元素設(shè)為行內(nèi)塊級(jí)元素：
display:inline-block
9、顏色
顏色表示方式：
方式一：顏色名稱(chēng)
如：red、blue、green
方式二：十六進(jìn)制 （應(yīng)用比較多）
0 1 2 3 4 5 6 7 8 9 A B C D E F
如：#FFB6C1 六個(gè) 或 三個(gè)
#ffbbcc → #fbc （字母大小寫(xiě)一樣）
方式三：rgb
red、green、blue 三種顏色調(diào)和，每個(gè)顏色等級(jí)范圍是0-255
如：rgb(255,0,0)
方式四：rgba
red、green、blue 三種顏色調(diào)和，每個(gè)顏色等級(jí)范圍是0-255
a是透明度alpha 透明度的等級(jí)是0-1，可包含小數(shù)。
如：rgba(0,0,0,0.5); 或 rgba(0,0,0,.5);
注意：最后一個(gè)數(shù)值是小數(shù)時(shí),可以省略.前面的0
