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