OXO1 寫在前面 1.HTML和CSS的對比 (1)HTML只關註語義和結構，主要是對網頁元素的整理和分類。 (2)CSS的主要使用場景就是美化頁面，佈局頁面。 (3)CSS和HTML搭配使用，實現網頁結構，表現分離。 2.CSS概述 （1）概念 CSS是疊層樣式表（Cascading Style ...
OXO1 寫在前面
1.HTML和CSS的對比
(1)HTML只關註語義和結構，主要是對網頁元素的整理和分類。
(2)CSS的主要使用場景就是美化頁面，佈局頁面。
(3)CSS和HTML搭配使用，實現網頁結構，表現分離。
2.CSS概述
（1）概念
CSS是疊層樣式表（Cascading Style Sheets)也稱為CSS樣式表或級聯樣式表。
也是一種標記語言。
（2)作用
CSS主要用於設置HTML頁面中的文本內容(字體，大小，對齊方式等)，圖片的外形（寬高，邊框樣式，邊距等）以及版面佈局和外觀顯示樣式。
(3)CSS語法
CSS主要是由選擇器和一條或者多條申明組成。
選擇器 {
屬性1: 值1；
屬性2: 值2；
屬性n: 值n；
}
demo:
p {
color: red;
font-size: 12px;
}
註：
選擇器：指定修改樣式的目標
聲明： 要改成的樣式
（4）CSS註釋：
/* 我是被註釋掉的內容 */
OXO2 選擇器的分類
一. 基礎選擇器
1.標簽選擇器
標簽選擇器(元素選擇器)是指用HTML標簽名稱作為選擇器，按照標簽分類，為頁面中某一類型的標簽，指定統一的CSS樣式。
語法 ：
標簽名 {
屬性1： 值1；
屬性2： 值2；
....
}
demo :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css標簽選擇器</title>
<style>
h1 {
color: blueviolet;
}
h2 {
color: red;
}
h3 {
color: yellow;
}
</style>
</head>
<body>
<h1>我是標題1,我用了css樣式</h1>
<h2>我是標題2,我用了css樣式</h2>
<h3>我是標題3,我用了css樣式</h3>
</body>
</html>
效果
2.類選擇器
使用類選擇器可以實現為不同的標簽差異化樣式。
語法:
/*定義*/
.類名 {
屬性1： 值1
屬性2： 值2
....
}
/*調用*/
<div class='類名'> xxxx </div>
類選擇器口訣：
樣式點定義
class來調用
一個或多個
開發最常用
註意：
長名稱或者片語可以使用中橫線連接來為類選擇器命名。
demo:
<style>
.blueviolet {
background-color: blueviolet;
}
.color {
color: cyan;
}
.box {
font-size: 35px;
}
</style>
</head>
<body>
<div class="blueviolet color box">吵過，鬧過，瘋狂過，卻從來沒有後悔過，我們越來越篤定地相信，天長地久也不久。</div>
** 註 ：**
可以一次調用多個選擇器，中間用空格分開。
3.ID選擇器
語法
/*定義*/
#id名 {
屬性: 屬性值；
}
/*調用*/
<div id="id名"></div>
口訣
#號來定義
id來定義
註意點:
ID選擇器一次只能調用一個
一個ID選擇器只能調用一次
demo：
<style>
#box {
font-size: 35px;
}
</style>
<body>
<div id="box">第一次調用</div>
</body>
4.通配符選擇器
語法
* {
屬性：屬性值；
}
註意點
通配符不需要調用，自動的就給所有的元素使用。
二.複合選擇器
1.後代選擇器（包含選擇器）
語法 :
元素1 元素2 { 樣式聲明
}
eg ：
ul li { 樣式申明 }
註釋：
元素2必須是元素1的後代元素。
後代選擇武器是對**後代元素**起作用
demo :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css標簽選擇器</title>
/*父級元素*/
<style>
.title {
background-color: azure;
}
.title h1 {
color: pink;
}
.title h1 em {
color:aqua;
}
</style>
</head>
<body>
<div class="title">
<h1>我是div-title的後代，我為pink色<em>我是em,我是我h1的後代，我為aqua色</em></h1>
</div>
</body>
</html>
效果
2.子選擇器
子選擇器只能作為某元素的最近一級後代元素（子元素）。
元素1>元素2 { 樣式聲明 }
3.並集選擇器
並集選擇器可以選擇多組標簽，同時定義樣式。
元素1,
元素2，
... ,
{ 樣式聲明}
4.偽類選擇器
偽類選擇器用於向某些選擇器添加特殊的效果，或者選擇第一或者第n個元素。例如：鏈接偽類，結構偽類等。
（1）鏈接偽類選擇器
a:link /*選擇所有未被訪問的鏈接*/
a:visited /* 選擇所有已被訪問的鏈接 */
a:hover /*選擇滑鼠指針位於其上的鏈接*/
a:active /*選擇活動鏈接(滑鼠按下未談起*/
註意點：
1.鏈接偽類標簽的順序（lvha) ：a:link a:visited a:hover a:active
2.a標簽在瀏覽器中有預設的樣式，需要根據需求更改樣式。
(2):focus偽類選擇器
：focus偽類選擇器用於選取獲得焦點（游標）的表單元素。
語法 ：
input:focus{
屬性： 屬性值；
}
（3）結構偽類選擇器（css3）
：first-child：選取父元素的首個子元素的指定選擇器
：last-child：選取父元素的最後一個子元素的制定選擇器
：nth-child（n）：匹配屬於父元素的第N個子元素，不論元素的類型
：nth-last-child（n）：匹配從父元素最後一個子元素開始倒數的子元素
demo :
<style>
li:first-child{ /*選擇第一個子元素*/
color: red;
}
li:last-child{ /*選擇最後一個子元素*/
color: blue;
}
li:nth-child(3){/*選擇第三個子元素 n 代表第幾個的意思*/
color: orange;
}
</style>
</head>
<body>
<ul>
<li>第一個子元素</li>
<li>第二個子元素</li>
<li>第三個子元素</li>
<li>第四個子元素</li>
<li>第五個子元素</li>
<li>第六個子元素</li>
<li>第七個子元素</li>
</ul>
</body>
效果
OXO3 CSS引入方式
1.內部樣式表（嵌入式）
嵌入式樣式表指的是把css寫在HTML頁面中，但是css是單獨抽取出來放在<style>標簽中。
語法 ：
<style>
div {
屬性: 屬性值；
}
</style>
2.行內樣式表
行內樣式表(內聯樣式表)是在元素標簽內部的style屬性中設定css樣式。
語法：
<div style="屬性： 屬性值;"> 鍵盤敲爛，去拾破爛</div>
3.外部樣式（鏈接式)
方式一
<link> rel="stylesheet" href="css文件路徑”>
方式二
<style type="text/css">
@import url("css/style.css");
</style>
註
<link>屬於HTML而@import屬於CSS
<link>的載入速度比@import快
OXO4CSS的三大特性
1.層疊性
兩個或者多個相同選擇器設置了相同的樣式，此時一個樣式就會覆蓋（層疊）另一個衝突的樣式。
層疊性原則：
樣式衝突 ： 遵循的原則是就近原則，哪個樣式離結構近，就執行那個。
樣式不衝突 ：不會層疊
2.繼承性
子標簽會繼承父標簽的某些樣式。
**demo : **
<style>
div {
color: red;
font-size: 18px;
}
<div>
<p>我是div的子標簽，我可以繼承父標簽的屬性</p>
</div>
</style>
註釋：
合理的使用繼承可以簡約代碼
可以繼承的屬性有：text-, font , line- 這些元素開頭以及color屬性。
註:
關於繼承的詳情，請參照這位大佬的博客
3.優先順序
當一個元素指向多個選擇器，但是選擇器定義的樣式是同一個的時候，就會有優先順序的產生。
註 ：
選擇器相同，則執行層疊性。
選擇器不同，則根據選擇器權重執行。
優先順序權重
| 選擇器 | 選擇器權重 |
|---|---|
| 繼承 或 * | 0.0.0.0 |
| 元素選擇器 | 0.0.0.1 |
| 類選擇器 偽類選擇器 | 0.0.1.0 |
| ID選擇器 | 0.1.0.0 |
| 行內樣式 style="" | 1.0.0.0 |
| important | 無窮大 |
註意點：
1.繼承的權重為0，，不管父級元素權重有多高，子元素的權重都是0。
2.從左到右開始比較，相同位，比較下一位。
3.複合選擇器會產生權重疊加 ,但是不會產生進位。
demo
<style>
/*標簽選擇器的權重為0.0.0.1*/
li {
color: red;}
/*兩個標簽選擇器的權重之和為0.0.0.2*/
ul li {
color: red;
}
</style>
