考慮對人的描述方式
人 {
身高:175cm;
體重:70kg;
膚色:黃色
}
CSS基本語法結構
選擇器 {
聲明1;
聲明2;
……
}
h1 {
font-size:12px;
color:#F00;
}
CSS的最后一條聲明后的“;”可寫可不寫，但是，基于W3C標準規范考慮，建議最后一條聲明的結束“;” 都要寫上
style標簽
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
標簽選擇器
HTML標簽作為標簽選擇器的名稱
<h1>…<h6>、<p>、<img/>
p { font-size:16px;}
類選擇器
<標簽名 class= "類名稱">標簽內容</標簽名>
.類名稱 { font-size:16px;}
ID選擇器
<標簽名 id= "id名稱">標簽內容</標簽名>
#id名稱 { font-size:16px;}
標簽選擇器直接應用于HTML標簽
類選擇器可在頁面中多次使用
ID選擇器在同一個頁面中只能使用一次
取色器工具
用來拾取演示，和測量長度的輕量級工具。
雙擊執行
彈出取色器，點擊按鈕
測量寬高
選擇屏幕標尺
測量
拾取顏色
選擇屏幕取色器
隨意選取顏色
制作《早發白帝城》
使用標題標簽和段落標簽制作李白的詩《早發白帝城》，詩正文字體顏色為綠色，字體大小為14px。
制作《破陣子》
標題顏色為紅色，字體大小為18px；正文第一段字體大小為12px，字體顏色為紅色，第二段字體顏色為黑色，字體大小為12px
制作《浣溪沙》
使用標簽選擇器設置標題字體大小為20px
頁面中所有段落中的文本字體大小為16px
使用類選擇器設置正文和譯文內容字體顏色為綠色
使用ID選擇器設置譯文標題顏色為藍色
CSS復合選擇器
后代選擇器
交集選擇器
并集選擇器
后代選擇器
在CSS選擇器中通過嵌套的方式，對特殊位置的HTML標簽進行聲明
外層的標簽寫在前面，內層的標簽寫在后面，之間用空格分隔
標簽嵌套時，內層的標簽成為外層標簽的后代
h3 strong{color:blue; font-size:36px;}
交集選擇器
由兩個選擇器直接連接構成，選中二者各自元素范圍的交集
第一個必須是標簽選擇器，第二個必須是類選擇器或者ID選擇器
選擇器之間不能有空格，必須連續書寫
p.txt{color:blue; line-height:28px;}
并集選擇器
多個選擇器通過逗號連接而成
利用并集選擇器同時聲明風格相同樣式
h3,.first,.second,#end{
font-size:16px;
color:green;
font-weight:normal;
}
制作《花千骨大結局》
HTML中引入CSS樣式
- 行內樣式
- 內部樣式表
- 外部樣式表
行內樣式
使用style屬性引入CSS樣式
<h1 style="color:red;">style屬性的應用</h1>
<p style="font-size:14px; color:green;">直接在HTML標簽中設置的樣式</p>
內部樣式表
CSS代碼寫在<head>的<style>標簽中
優點
方便在同頁面中修改樣式
缺點
不利于在多頁面間共享復用代碼及維護，對內容與樣式的分離也不夠徹底
外部樣式表
CSS代碼保存在擴展名為.css的樣式表中.
HTML文件引用擴展名為.css的樣式表，有兩種方式
- 鏈接式
- 導入式
鏈接外部樣式表
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
導入外部樣式表
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
CSS繼承特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{color:red;}
</style>
</head>
<body>
<p>
父級P
<strong>子級strong</strong>
父級P
</p>
<ul>
<li>子級li1</li>
<li>子級li2</li>
</ul>
</body>
</html>
子標簽可以繼承父標簽的樣式風格
子標簽的樣式不會影響父標簽的樣式風格
<h1>勇氣</h1>
<p class="first">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。
</p>
<p id="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很<strong>簡單</strong>的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。
</p>
p{color:red;}
.first strong{color: blue}
CSS的優先級
ID選擇器>類選擇器>標簽選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{color:red;}
.first{color:green;}
</style>
</head>
<body>
<p class="first" id="pid">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p></body>
</html>
p和.first都匹配到了p這個標簽上，green是正確的顏色
在html文件中對于同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前后順序來決定，處于最后面的css樣式會被應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{color:red;}
p{color:green;}
</style>
</head>
<body>
<p class="first" id="pid">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p>
</body>
</html>
內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{color:red;}
p{color:blue;}
</style>
</head>
<body>
<p class="first" id="pid" style="color:green">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p>
</body>
</html>
有些特殊的情況需要為某些樣式設置具有最高權值，怎么辦？這時候我們可以使用!important來解決。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{color:red!important;}
.first{color:blue;}
</style>
</head>
<body>
<p class="first" id="pid" style="color:green">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p>
</body>
</html>
本章項目實戰
制作圖書列表
課后作業
必做任務
1.制作經典語錄（p標簽，h2標簽，圖片標簽）
2.制作莎士比亞的詩（ p標簽，h2標簽，br標簽，hr標簽）
3.制作商品列表（ul標簽，li標簽）
擴展任務
1.制作高數目錄（標簽嵌套）
2.制作手機app排行榜（標簽嵌套，圖片標簽）
