CSS簡介
1.1 HTML的局限性
HTML局限性：
只關(guān)注內(nèi)容的語義救拉。比如<h1>表明這是一個(gè)大標(biāo)題，<p> 表明這是一個(gè)段落, <img>表明這兒有一個(gè)圖片 , <a>表示此處有鏈接邻悬。
很早的時(shí)候,世界上的網(wǎng)站雖然很多,但是他們都有一個(gè)共同的特點(diǎn)：丑映凳。
雖然HTML可以做簡單的樣式,但是帶來的是無盡的臃腫和繁瑣....
1.2 CSS-網(wǎng)頁的美容師
CSS是層疊樣式表（Cascading Style Sheets）的簡稱。有時(shí)我們也會(huì)稱之為CSS樣式表或級(jí)聯(lián)樣式表畏鼓。
CSS是也是一種標(biāo)記語言酱酬。
CSS主要用于設(shè)置HTML頁面中的文本內(nèi)容(字體、大小云矫、對(duì)齊方式等)膳沽、圖片的外形(寬高、邊框樣式让禀、邊距等)以及版面的布局和外觀顯示樣式挑社。
CSS讓我們的網(wǎng)頁更加豐富多彩，布局更加靈活自如巡揍。
簡單理解: CSS可以美化HTML痛阻，讓HTML更漂亮，讓頁面布局更簡單腮敌。
總結(jié):
HTML 主要做結(jié)構(gòu)阱当，顯示元素內(nèi)容俏扩。
CSS 美化HTML，布局網(wǎng)頁弊添。
CSS 最大價(jià)值：由HTML專注去做結(jié)構(gòu)呈現(xiàn)录淡，樣式交給CSS，即結(jié)構(gòu)(HTML)與樣式(CSS )相分離油坝。
1.3 CSS語法規(guī)范
CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器以及一條或多條聲明嫉戚。
[圖片上傳失敗...(image-d855b6-1616122013118)]
選擇器是用于指定CSS樣式的HTML標(biāo)簽，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式澈圈。
屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)彬檀。
屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性，例如字體大小瞬女、文本顏色等窍帝。
屬性和屬性值之間用英文 “ : ” 分開。
多個(gè) "鍵值對(duì)" 之間用英文 “ ; ” 進(jìn)行區(qū)分
1.4 CSS代碼風(fēng)格
以下代碼書寫風(fēng)格不是強(qiáng)制規(guī)范拆魏，而是符合實(shí)際開發(fā)書寫方式盯桦。
1.樣式格式書寫
①緊湊格式：
h3 {color: deeppink; font-size: 20px;}
②展開格式：
h3 {
color: pink;
font-size: 20px;
}
強(qiáng)烈推薦第二種格式，更直觀渤刃。
2.樣式大小寫風(fēng)格
①小寫
h3 {
color: pink;
}
②大寫
H3 {
COLOR: PINK;
}
強(qiáng)烈推薦樣式選擇器拥峦、屬性名、屬性值卖子、關(guān)鍵字全部使用小寫字母略号，特殊情況除外。
3.樣式空格風(fēng)格
h3 {
color: pink;
font-size: 20px;
}
①屬性值前面洋闽，冒號(hào)后面玄柠，保留一個(gè)空格。
②選擇器（標(biāo)簽）和大括號(hào)中間保留空格诫舅。
2 CSS基礎(chǔ)選擇器
2.1 CSS選擇器的作用
選擇器（選擇符）的作用：就是根據(jù)不同需求把不同的標(biāo)簽選出來羽利。
簡單來說，就是選擇標(biāo)簽用的刊懈。
以上CSS做了兩件事:
找到所有的h1標(biāo)簽这弧。選擇器 (選對(duì)人)。
設(shè)置這些標(biāo)簽的樣式虚汛，比如顏色為紅色(做對(duì)事)匾浪。
2.2 選擇器分類
選擇器 分為 基礎(chǔ)選擇器 和 復(fù)合選擇器 兩個(gè)大類。
基礎(chǔ)選擇器：①由單選擇器組成卷哩；
②包括：標(biāo)簽選擇器蛋辈、類選擇器、id選擇器将谊、通配符選擇器冷溶。
2.3 標(biāo)簽選擇器
標(biāo)簽選擇器（元素選擇器）是指用HTML標(biāo)簽名稱作為選擇器渐白，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式挂洛。
語法
標(biāo)簽名 {
屬性1：屬性值1礼预；
屬性2：屬性值2；
屬性3：屬性值3虏劲；
...
}
作用
標(biāo)簽選擇器可以把某一類標(biāo)簽全部選擇出來 ,比如所有的<div>標(biāo)簽和所有的<span>標(biāo)簽。
優(yōu)點(diǎn)
能快速為頁面中同類型的標(biāo)簽統(tǒng)一設(shè)置樣式褒颈。
缺點(diǎn)
不能設(shè)計(jì)差異化樣式柒巫，只能選擇全部的當(dāng)前標(biāo)簽。
2.4 類選擇器
2.4.1 類選擇器-單類名
差異化選擇不同標(biāo)簽谷丸，單獨(dú)選一個(gè)或某幾個(gè)標(biāo)簽堡掏，可以使用類選擇器。
類選擇器在HTML中以class屬性表示刨疼，在CSS中，類選擇器以一個(gè)點(diǎn) “.” 號(hào)顯示。
注意：①類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)释涛，后面緊跟類名（自定義侮攀，我們自己命名的）。
②可以理解為給這個(gè)標(biāo)簽起了一個(gè)名字迎卤，來表示拴鸵。
③長名稱或詞組可以使用中橫線來為選擇器命名。eg. ".star-sing"
④不要使用純數(shù)字蜗搔、中文等命名劲藐，盡量使用英文字母來表示。
⑤命名要有意義樟凄，盡量別人一眼就知道這個(gè)類名的目的聘芜。
⑥命名規(guī)范：
語法：
.類名 {
屬性1： 屬性值1;
...
}
例如：將所有擁有red類的HTML元素均為紅色。
.red {
color:red;
}
語法：
結(jié)構(gòu)需要用class屬性來調(diào)用class類的意思缝龄。
<html>
<head>
<style>
/*類選擇器口訣：樣式點(diǎn)定義 結(jié)構(gòu)類(class)調(diào)用 一個(gè)或多個(gè) 開發(fā)最常用*/
.red {
color: red;
}
</style>
</head>
<body>
<ul>
<li class="red">胡圖圖</li>
<li class="red">胡英俊</li>
<li>張小麗</li>
<li>小美</li>
<li>大耳朵圖圖</li>
</ul>
<div class="red">我也想變紅色</div>
</body>
</html>
案例：CSS選擇器：利用類選擇器畫3個(gè)盒子
2.4.2 類選擇器-多類名
我們可以給一個(gè)標(biāo)簽指定多個(gè)類名汰现，從而達(dá)到更多的選擇目的。這些類名都可以選出這個(gè)標(biāo)簽二拐。
簡單理解就是 一個(gè)標(biāo)簽有多個(gè)名字服鹅。
兩個(gè)甚至以上的類名比較常用。
1.多類名使用方式
<div class="red font20">亞瑟</div>
(1)在標(biāo)簽class屬性中寫多個(gè)類名
(2)多個(gè)類名中間必須用空格分開
(3)這個(gè)標(biāo)簽就可以分別具有這些類名的樣式
2.多類名使用場景
(1)可以把一些標(biāo)簽元素相同的樣式（共同的部分）放到一個(gè)類里面百新。
(2)這些標(biāo)簽都可以調(diào)用這個(gè)公共的類企软，然后再調(diào)用自己獨(dú)有的類。
(3)從而節(jié)省CSS代碼饭望，統(tǒng)一修改包非常方便仗哨。
總結(jié)：
- 各個(gè)類名中間空格隔開
- 簡單理解：就是給某個(gè)標(biāo)簽添加了多個(gè)類形庭，或者這個(gè)標(biāo)簽有多個(gè)名字
- 這個(gè)標(biāo)簽就可以分別具有這些類名的樣式
- 從而節(jié)省CSS代碼，統(tǒng)一修改也非常方便
- 多類名選擇器在后期布局比較復(fù)雜的情況下厌漂，還是較多使用的
<head>
<title>多類名的使用方式</title>
<style>
.blue {
color: blue;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="blue font35">劉德華</div>
</body>
2.5 id選擇器
id選擇器可以為標(biāo)有特定id的HTML元素指定的樣式萨醒。
HTML元素以id屬性來設(shè)置id選擇器，CSS中id選擇器以“#”來定義苇倡。
語法：
#id名 {
屬性1: 屬性值1;
...
}
注意：id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次富纸。
口訣：樣式#定義，結(jié)構(gòu)id調(diào)用旨椒，只能調(diào)用一次晓褪，別人切勿使用。
id選擇器和類選擇器的區(qū)別：
①類選擇器( class )好比人的名字综慎，一個(gè)人可以有多個(gè)名字涣仿，同時(shí)一個(gè)名字也可以被多個(gè)人使用。
②id 選擇器好比人的身份證號(hào)碼示惊，全中國是唯一的好港，不得重復(fù)。
③id 選擇器和類選擇器最大的不同在于使用次數(shù)上米罚。
④類選擇器在修改樣式中用的最多钧汹，id選擇器一般用于頁面唯一性的元素上，經(jīng)常和JavaScript搭配使用阔拳。
2.6 通配符選擇器
在CSS中崭孤，通配符選擇器使用 ” * “定義，它表示選取頁面中所有元素（標(biāo)簽）糊肠。
語法：
* {
屬性1: 屬性值1;
...
}
通配符選擇器不需要調(diào)用辨宠，自動(dòng)就給所有的元素使用樣式
-
特殊情況才使用
以下是清除所有的元素標(biāo)簽的內(nèi)外邊距:
* { margin: 0; padding: 0; }
2.7 基礎(chǔ)選擇器總結(jié)
| 基礎(chǔ)選擇器 | 作用 | 特點(diǎn) | 使用情況 | 用法 |
|---|---|---|---|---|
| 標(biāo)簽選擇器 | 可以選出所有相同的標(biāo)簽 | 不能差異化選擇 | 較多 | p {color: red;} |
| 類選擇器 | 可以選出1個(gè)或多個(gè)標(biāo)簽 | 可以根據(jù)需求選擇 | 非常多 | .nav {color: red;} |
| id選擇器 | 一次只能選擇1個(gè)標(biāo)簽 | id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次 | 一般和js搭配 | #nav {color: red;} |
| 通配符選擇器 | 選擇所有的標(biāo)簽 | 選擇的太多，有部分不需要 | 特殊情況使用 | * {color: red;} |
注：每個(gè)基礎(chǔ)選擇器都有使用場景货裹，都需要掌握嗤形；
如果是修改樣式，類選擇器是使用最多的弧圆。
3 CSS字體屬性
CSS Fonts (字體)屬性用于定義字體系列赋兵、大小、粗細(xì)搔预、文字樣式(如斜體)霹期。
3.1 字體系列
CSS使用font-family屬性定義文本的字體系列。
p {font-family: "微軟雅黑"}
div {font-family: Arial, "Microsoft Yahei", "微軟雅黑";}
●各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開
●一般情況下拯田，如果有空格隔開的多個(gè)單詞組成的字體历造，加引號(hào)
●盡量使用系統(tǒng)默認(rèn)自帶字體，保證在任何用戶的瀏覽器中都能正確顯示
●最常見的幾個(gè)字體：body {font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';}
3.2 字體大小
CSS使用font-size屬性定義字體大小。
p {
font-size: 20px;
}
●px(像素)大小是我們網(wǎng)頁的最常用的單位
●谷歌瀏覽器默認(rèn)的文字大小為16px
●不同瀏覽器可能默認(rèn)顯示的字號(hào)大小不一致吭产，我們盡量給一個(gè)明確值大小侣监，不要默認(rèn)大小
●可以給 body 指定整個(gè)頁面文字的大小
標(biāo)題標(biāo)簽比較特殊，需要單獨(dú)指定文字大小
谷歌瀏覽器 默認(rèn) 微軟雅黑 16px
3.3 字體粗細(xì)
CSS使用font-weight 屬性設(shè)置文本字體的粗細(xì)臣淤。
p {
font-weight: bold;
}
| 屬性值 | 描述 |
|---|---|
| normal | 默認(rèn)值（不加粗的） |
| bold | 定義粗體（加粗的） |
| 100-900 | 400等同于 normal橄霉， 而700等同于 bold。 注意這個(gè)數(shù)字后面不跟單位
|
●學(xué)會(huì)讓加粗標(biāo)簽（比如h和strong等）不加粗邑蒋，或者其他標(biāo)簽加粗
●實(shí)際開發(fā)時(shí)姓蜂，我們更喜歡用數(shù)字表示粗細(xì)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性-字體粗細(xì)</title>
<style>
.bold {
font-weight: 700;
}
</style>
</head>
<body>
<h2>珊珊愛學(xué)習(xí)</h2>
<P>珊珊最愛學(xué)前端</P>
<P>珊珊最愛學(xué)前端</P>
<P class="bold">珊珊最愛學(xué)前端</P>
<P>珊珊最愛學(xué)前端</P>
</body>
</html>
3.4 文字樣式
CSS使用font-style屬性設(shè)置文本的風(fēng)格寺董。
p{
font-style: normal;
}
/*讓傾斜字體不傾斜*/
| 屬性值 | 作用 |
|---|---|
| normal | 默認(rèn)值覆糟，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式font-style: normal; |
| italic | 瀏覽器會(huì)顯示斜體的字體樣式 |
注意：平時(shí)很少給文字加斜體，反而給斜體標(biāo)簽（em, i）改為不傾斜字體遮咖。
3.5 字體復(fù)合屬性
字體屬性可以把以上文字樣式綜合來寫，這樣可以節(jié)約代碼：
body {
font: font-style font-weight font-size/lin-height font-family;
}
注：使用font屬性時(shí)造虏，必須按照上面語法格式中的順序書寫御吞，不能更換順序，并且各個(gè)屬性間以空格隔開漓藕。
不需要設(shè)置的屬性可以忽略（取默認(rèn)值）陶珠，但必須保留font-size和font-family屬性，否則font屬性將不起作用享钞。
<html>
<head>
<title>字體復(fù)合屬性</title>
<style>
/*想要div文字變傾斜 加粗 字號(hào)設(shè)置為16像素 并且 是微軟雅黑*/
div {
/* font-style: italis;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft YaHei';*/
/*復(fù)合屬性：簡寫的方式*/
/*font: font-style font-weight font-size/line-height font-family; */
font: italic 700 16px/20px 'Microsoft YaHei';
/*
font: 16px 'Microsoft YaHei';
font: 16px '黑體'揍诽；
*/
}
</style>
</head>
<body>
<div>三生三世十里桃花，一心一意百行代碼</div>
</body>
</html>
3.6 字體總結(jié)
| 屬性 | 表示 | 注意點(diǎn) |
|---|---|---|
| font-size | 字號(hào) | 通常用的單位是 px 像素栗竖，一定要跟上單位 |
| font-family | 字體 | 實(shí)際工作中按照團(tuán)隊(duì)約定來寫字體 |
| font-weight | 字體粗細(xì) | 記住 加粗 是 700 或者 bold 暑脆，不加粗 是 normal 或者 400 ，記住數(shù)字不要跟單位 |
| font-style | 字體樣式 | 記住 傾斜 是 italic ,不傾斜 是 normal 狐肢，工作中最常用 normal |
| font | 字體連寫 | 1.字體連寫是有順序的添吗，不能隨意換位置； 2.其中 字號(hào) 和 字體 必須同時(shí)出現(xiàn) |
4 CSS文本屬性
CSS Text (文本)屬性可定義文本的外觀份名，比如 文本的顏色碟联、對(duì)齊文本、裝飾文本僵腺、文本縮進(jìn)鲤孵、行間距等。
4.1 文本顏色
color屬性用于定義文本的顏色辰如。
實(shí)際開發(fā)中普监，顏色都是在效果圖用吸管工具吸取。
div {
color: red;
}
<style>
div {
color: deeppink;
color: #ffe600da;
color: rag(255,0,255);
}
</style>
| 表示 | 屬性值 |
|---|---|
| 預(yù)定義的顏色值-----寫demo測試時(shí)常用 | red, green, blue, pink |
| 十六進(jìn)制--------------開發(fā)時(shí)最常用 | #FF0000, #FF6600, #29D794 |
| RGB代碼--red/green/blue | rgb(255,0,0) 或 rgb(100%, 0%, 0%) |
開發(fā)中最常用的是十六進(jìn)制。
4.2 對(duì)齊文本
text-align屬性用于設(shè)置元素內(nèi)文本內(nèi)容的水平對(duì)齊方式鹰椒。
<style>
h1 {
/* 本質(zhì)是讓h1盒子里面的文字水平居中對(duì)齊 */
text-align: center;
}
h2 {
/* 本質(zhì)是讓h2盒子里面的文字水平右對(duì)齊 */
text-align: right;
}
</style>
| 屬性值 | 解釋 |
|---|---|
| left | 左對(duì)齊（默認(rèn)值） |
| right | 右對(duì)齊 |
| center | 居中對(duì)齊 |
4.3 裝飾文本
text-decoration屬性規(guī)定添加到文本的修飾锡移。可以給文本添加 下劃線漆际、刪除線淆珊、上劃線 等。
<head>
<style>
/* 下劃線 */
div1 {
text-decoration: underline;
}
/* 刪除線 */
div2 {
text-decoration: line-through;
}
/* 上劃線 */
div3 {
text-decoration: overline;
}
/* 取消a默認(rèn)的下劃線 */
a {
text-decoration: none;
}
</style>
</head>
<body>
<div1>下劃線</div1>
<div2>刪除線</div2>
<div3>下劃線</div3>
<a href="#">取消a默認(rèn)的下劃線</a>
</body>
| 屬性值 | 描述 |
|---|---|
| none | 默認(rèn)奸汇。沒有裝飾線（最常用） |
| underline | 下劃線施符。鏈接a自帶下劃線（常用） |
| overline | 上劃線。（幾乎不用） |
| line-through | 刪除線擂找。（不常用） |
重點(diǎn)記憶：添加下劃線戳吝、刪除下劃線。（其余了解即可）
4.4 文本縮進(jìn)
text-indent屬性用來指定 文本 的 第一行 的縮進(jìn)贯涎，通常是將段落的首行縮進(jìn)听哭。
p {
text-indent: 20px;
}
通過設(shè)置該屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長度塘雳，甚至該長度可以是負(fù)值陆盘。
p {
text-indent: 2em;
}
em是一個(gè)相對(duì)單位，就是當(dāng)前元素（font-size）1個(gè)文字的大小败明，如果當(dāng)前元素沒有設(shè)置大小隘马，則會(huì)按照父元素的1個(gè)文字大小。
常用em
4.5 行間距
line-height屬性用于設(shè)置行間的距離妻顶∷嵩保可以控制文字行與行之間的距離。
文字默認(rèn)16px
div {
line-height: 16px;
}
測量間距標(biāo)尺工具： FSCapture.exe
4.6 文本屬性總結(jié)
| 屬性 | 表示 | 注意點(diǎn) |
|---|---|---|
| color | 文本顏色 | 通常用 十六進(jìn)制 而且是簡寫形式 比如 #fff |
| taxt-align | 文本對(duì)齊 | 可以設(shè)定文字水平的對(duì)齊方式 |
| taxt-indent | 文本縮進(jìn) | 通常我們用于段落首行縮進(jìn)2 個(gè)字的舉例 text-indent: 2em; |
| text-decoration | 文本修飾 | 記住 添加下劃線 underline 取消下劃線 none |
| line-height | 行高 | 控制行與行之間的距離 |
5 CSS的引入方式
5.1 CSS的三種樣式表
按照CSS樣式書寫的位置（或者引入的方式）讳嘱，CSS樣式表可以分為三大類：
- 行內(nèi)樣式表（行內(nèi)式）
- 內(nèi)部樣式表（嵌入式)
- 外部樣式表（鏈接式）
5.2 內(nèi)部樣式表
內(nèi)部樣式表（內(nèi)嵌樣式表）是寫到 html 頁面內(nèi)部幔嗦，是將所有的 css 代碼抽取出來，單獨(dú)放到一個(gè)<style>標(biāo)簽中呢燥。
<html>
<head>
<title>內(nèi)部樣式表</title>
<style>
div {
color: pink;
}
</style>
</head>
<body>
<div>所謂內(nèi)部樣式表崭添，就是在 html 頁面內(nèi)部寫樣式，但是是單獨(dú)寫到style標(biāo)簽內(nèi)部</div>
</body>
</html>
-
<style>標(biāo)簽理論上可以放在HTML文檔的任何地方叛氨，但一般會(huì)放在文檔的<head>標(biāo)簽中呼渣。 - 通過此種方式，可以方便控制當(dāng)前整個(gè)頁面中的元素樣式設(shè)置寞埠。
- 代碼結(jié)構(gòu)清晰屁置，但是并沒有實(shí)現(xiàn)結(jié)構(gòu)與樣式完全分離。
- 使用內(nèi)部樣式表設(shè)定CSS仁连，通常也被成為嵌入式引入蓝角，這種方式是我們練習(xí)時(shí)常用的方式阱穗。
5.3 行內(nèi)樣式表
行內(nèi)樣式表（內(nèi)聯(lián)樣式表）是在元素標(biāo)簽內(nèi)部的style屬性中設(shè)定CSS樣式，適用于修改簡單樣式使鹅。
<p style="color: pink; font-size: 20px;">給我一個(gè)粉紅的回憶</p>
- style其實(shí)就是標(biāo)簽的屬性
- 在雙引號(hào)中間揪阶，寫法要符合CSS規(guī)范
- 可以控制當(dāng)前的標(biāo)簽設(shè)置樣式
- 由于書寫繁瑣，并且沒有體現(xiàn)出結(jié)構(gòu)與樣式想分離的思想患朱，所以不推薦大量使用鲁僚，只有對(duì)當(dāng)前元素添加簡單樣式的時(shí)候，可以考慮使用裁厅。
- 使用行內(nèi)樣式表設(shè)定CSS冰沙，通常也被稱為行內(nèi)式引入
5.4 外部樣式表
實(shí)際開發(fā)都是外部樣式表，適合于樣式比較多的情況执虹。
核心是：樣式單獨(dú)寫到CSS文件中拓挥，之后把CSS文件引入到HTML頁面中使用。
引用外部樣式表分為兩步：
1.新建一個(gè)后綴名為.css的樣式文件袋励，把所有CSS代碼都放入此文件中侥啤。
2.在HTML頁面中，使用<link>標(biāo)簽引入這個(gè)文件茬故。
<link rel="stylesheet" href="css文件路徑"
| 屬性 | 作用 |
|---|---|
| rel | 定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系愿棋，在這里需要指定為 “stylesheet" ，表示被鏈接的文檔是一個(gè)樣式表文件 |
| href | 定義所鏈接外部樣式表文件的URL均牢，可以是相對(duì)路徑，也可以是絕對(duì)路徑 |
使用外部樣式表設(shè)定css, 通常也被稱為外鏈?zhǔn)交蜴溄邮揭氩哦茫@種方式是開發(fā)中常用的方式徘跪。
5.5 CSS引入方式總結(jié)
| 樣式表 | 優(yōu)點(diǎn) | 缺點(diǎn) | 使用情況 | 控制范圍 |
|---|---|---|---|---|
| 行內(nèi)樣式表 | 書寫方便、權(quán)重高 | 結(jié)構(gòu)樣式混寫 | 較少 | 控制一個(gè)標(biāo)簽 |
| 內(nèi)部樣式表 | 部分結(jié)構(gòu)和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個(gè)頁面 |
| 外部樣式表 | 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離 | 需要引入 | 最多琅攘，吐血推薦 | 控制多個(gè)頁面 |
6 綜合案例: 新聞頁面
制作頁面整體可以分為兩步：
1.搭建html結(jié)構(gòu)頁面
2.修改CSS樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>綜合案例：新聞頁面</title>
<style>
body {
font: 16px/28px 'Microsoft yahei';
}
h1 {
font-weight: 400;
text-align: center;
}
div {
font-size: 10px;
text-align: center;
color: #5F6368;
}
a {
text-decoration: none;
}
.search {
color: #8D9497;
width: 150px;
}
p {
text-indent: 2em;
}
.btn {
font-weight: 700;
}
.pic {
text-align: center;
}
.footer {
color: #888;
font-size: 12px;
}
</style>
</head>
<body>
<h1> 北方高溫明日達(dá)鼎盛 京津冀多地地表溫度將超60℃</h1>
<div>2019-07-03 16:31:47 來源:<a href="#">中國天氣網(wǎng)</a> <input type="text" value="請輸入查詢條件" class="search"><button
class="btn">
搜索</button></div>
<hr>
<!-- 水平線標(biāo)簽 hr 了解即可 -->
<p>中國天氣網(wǎng)訊
今天（3日）垮庐，華北、黃淮多地出現(xiàn)高溫天氣坞琴，截至下午2點(diǎn)哨查，北京、天津剧辐、鄭州等地氣溫突破35℃寒亥。預(yù)報(bào)顯示，今后三天（3-5日）荧关，這一帶的高溫天氣將繼續(xù)發(fā)酵溉奕，高溫范圍以及強(qiáng)度將在4日達(dá)到鼎盛，預(yù)計(jì)北京忍啤、天津加勤、石家莊、濟(jì)南等地明天的最高氣溫有望突破38℃，其中北京和石家莊的最高氣溫還有望創(chuàng)今年以來的新高鳄梅。
</p>
<h4>氣溫41.4℃叠国！地溫66.5！北京強(qiáng)勢迎七月首個(gè)高溫日</h4>
<p class="pic"><img src="images/pic.jpeg"></p>
<p>今天戴尸，華北粟焊、黃淮一帶的高溫持續(xù)發(fā)酵，截至今天下午2點(diǎn)校赤，陜西北部吆玖、山西西南部、河北南部马篮、北京沾乘、天津、山東西部浑测、河南北部最高氣溫已普遍超過35℃翅阵。大城市中，北京迁央、天津掷匠、鄭州均迎來高溫日。</p>
<p>在陽光暴曬下岖圈，地表溫度也逐漸走高讹语。今天下午2點(diǎn)，華北黃淮大部地區(qū)的地表溫度都在50℃以上蜂科，部分地區(qū)地表溫度甚至超過60℃顽决。其中，河北衡水地表溫度高達(dá)68.3℃导匣，天津站和北京站附近的地表溫度分別高達(dá)66.6℃和66.5℃才菠。
</p>
<h4>明日熱度再升級(jí)！京津冀攜手沖擊38℃+</h4>
<p>中國天氣網(wǎng)氣象分析師王偉躍介紹贡定，明天（4日）赋访，華北、黃淮地區(qū)35℃以上的高溫天氣還將繼續(xù)升級(jí)缓待，并進(jìn)入鼎盛階段蚓耽，高溫強(qiáng)度和范圍都將發(fā)展到最強(qiáng)。
明天命斧，北京南部田晚、天津大部、河北中部和南部国葬、山東中部和西部贤徒、山西南部局地芹壕、河南北部、東北部分地區(qū)的最高氣溫都將達(dá)到或超過35℃接奈。</p>
<p> 不過踢涌，專家提醒，濟(jì)南被雨水天氣完美繞開序宦，因此未來一周睁壁，當(dāng)?shù)氐母邷剡€會(huì)天天上崗。在此提醒當(dāng)?shù)鼐用褡⒁夥朗罱禍鼗グ疲婪冻掷m(xù)高溫帶來的各種不利影響潘明。（文/張慧 數(shù)據(jù)支持/王偉躍 胡嘯 審核/劉文靜 張方麗）</p>
<p class="footer"> 本文來源：中國天氣網(wǎng) 責(zé)任編輯：劉京_NO5631</p>
</body>
</html>
7 Chrome 調(diào)試工具
Chrome瀏覽器提供了一個(gè)非常好用的調(diào)試工具，可以用來調(diào)試我們的HTML結(jié)構(gòu)和CSS樣式秕噪。
1.打開調(diào)試工具
打開Chrome瀏覽器钳降，按下F12鍵或者右擊頁面空白處→檢查。
選擇 elements查看
2.使用調(diào)試工具
①Ctrl+滾輪 可以放大開發(fā)者工具代碼大小腌巾。
②左邊是HTML元素結(jié)構(gòu)遂填，右邊是CSS樣式。
③右邊CSS樣式可以改動(dòng)數(shù)值(左右箭頭或者直接輸入)和查看顏色澈蝙。
④Ctrl + 0復(fù)原瀏覽器大小吓坚。
⑤如果點(diǎn)擊元素，發(fā)現(xiàn)右側(cè)沒有樣式引入灯荧，極有可能是類名或者樣式引入錯(cuò)誤礁击。
⑥如果有樣式，但是樣式前面有黃色嘆號(hào)提示逗载，則是樣式屬性書寫錯(cuò)誤客税。
