課程目標(biāo):
- 學(xué)會(huì)使用CSS選擇器
- 熟記CSS樣式和外觀屬性
- 熟練掌握CSS各種選擇器
- 熟練掌握CSS各種選擇器
- 熟練掌握CSS三種顯示模式
- 熟練掌握CSS背景屬性
- 熟練掌握CSS三大特性
- 熟練掌握CSS盒子模型
- 熟練掌握CSS浮動(dòng)
10.熟練掌握CSS定位
11.熟練掌握CSS高級(jí)技巧強(qiáng)化CSS
typora-copy-images-to: media
CSS的發(fā)展歷程
從HTML被發(fā)明開始，樣式就以各種形式存在。不同的瀏覽器結(jié)合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。
隨著HTML的成長(zhǎng)，為了滿足頁面設(shè)計(jì)者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。于是CSS便誕生了。
CSS 網(wǎng)頁的美容師
CSS的出現(xiàn)，拯救了混亂的HTML，當(dāng)讓更加拯救了我們web開發(fā)者。 讓我們的網(wǎng)頁更加豐富多彩。
CSS的最大貢獻(xiàn)就是： 讓 HTML 從樣式中解脫苦海， 實(shí)現(xiàn)了 HTML 專注去做 結(jié)構(gòu)呈現(xiàn)。 而樣式交給 CSS 后，你完全可以放心的早點(diǎn)洗洗睡了！
而且。。。。。 CSS 做的很出色，如果JavaScript是網(wǎng)頁的魔法師，那么CSS它是我們網(wǎng)頁的美容師，不信，你看:
<img src="media/baby.jpeg" />
ps: 你跟Angelababy只差了一個(gè)妝容的距離
有人說， 沒有不漂亮的女人，只有不會(huì)打扮的女人。
我想說， 沒有不好看的網(wǎng)頁，只有不會(huì)CSS的前端。
CSS初識(shí)
CSS(Cascading Style Sheets) 美化樣式
CSS通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
CSS以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。
引入CSS樣式表（書寫位置）
CSS可以寫到那個(gè)位置？ 是不是一定寫到html文件里面呢？
內(nèi)部樣式表
內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義，其基本語法格式如下：
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
語法中，style標(biāo)簽一般位于head標(biāo)簽中title標(biāo)簽之后，也可以把他放在HTML文檔的任何地方。
type="text/CSS" 在html5中可以省略， 寫上也比較符合規(guī)范， 所以這個(gè)地方可以寫也可以省略。
行內(nèi)式（內(nèi)聯(lián)樣式）
內(nèi)聯(lián)樣式，又有人稱行內(nèi)樣式、行間樣式、內(nèi)嵌樣式。是通過標(biāo)簽的style屬性來設(shè)置元素的樣式，其基本語法格式如下：
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>
語法中style是標(biāo)簽的屬性，實(shí)際上任何HTML標(biāo)簽都擁有style屬性，用來設(shè)置行內(nèi)式。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同，行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用。
外部樣式表（外鏈?zhǔn)剑?/h2>
鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中，通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：
<head>
<link href="CSS文件的路徑" rel="stylesheet" />
</head>
注意： link 是個(gè)單標(biāo)簽哦!!!
該語法中，link標(biāo)簽需要放在head頭部標(biāo)簽中，并且必須指定link標(biāo)簽的三個(gè)屬性，具體如下：
href：定義所鏈接外部樣式表文件的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。
type：定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。
rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。
三種樣式表總結(jié)（位置）
| 樣式表 | 優(yōu)點(diǎn) | 缺點(diǎn) | 使用情況 | 控制范圍 |
|---|---|---|---|---|
| 行內(nèi)樣式表 | 書寫方便，權(quán)重高 | 沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離 | 較少 | 控制一個(gè)標(biāo)簽（少） |
| 內(nèi)部樣式表 | 部分結(jié)構(gòu)和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個(gè)頁面（中） |
| 外部樣式表 | 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離 | 需要引入 | 最多，強(qiáng)烈推薦 | 控制整個(gè)站點(diǎn)（多） |
CSS樣式規(guī)則
使用HTML時(shí)，需要遵從一定的規(guī)范。CSS亦如此，要想熟練地使用CSS對(duì)網(wǎng)頁進(jìn)行修飾，首先需要了解CSS樣式規(guī)則，具體格式如下：
<img src="media/gz.png" />
在上面的樣式規(guī)則中:
1.選擇器用于指定CSS樣式作用的HTML對(duì)象，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。
2.屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)。
3.屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性，例如字體大小、文本顏色等。
4.屬性和屬性值之間用英文“:”連接。
5.多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分。
可以用段落 和 表格的對(duì)齊的演示。
選擇器（重點(diǎn)）
要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器（選擇符）。
<img src="media/ax.png" />
如上圖所以，要把里面的小黃人分為2組，最快的方法怎辦？
很多， 比如 一只眼睛的一組，剩下的一組
選擇器干啥的？ 選擇標(biāo)簽用的
這就用到基礎(chǔ)選擇器組：
CSS基礎(chǔ)選擇器
標(biāo)簽選擇器（元素選擇器）
標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語法格式如下：
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標(biāo)簽選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式，同時(shí)這也是他的缺點(diǎn)，不能設(shè)計(jì)差異化樣式。
標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來 div span
課堂案例：
傳智簡(jiǎn)介
類選擇器
類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名，其基本語法格式如下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標(biāo)簽調(diào)用的時(shí)候用 class=“類名” 即可。
類選擇器最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式。 可以選擇一個(gè)或者多個(gè)標(biāo)簽
<img src="media/good.png" />小技巧：
1.長(zhǎng)名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器。
? 輸入的時(shí)候少按一個(gè)shift鍵;
瀏覽器兼容問題 (比如使用tips的選擇器命名，在IE6是無效的)
能良好區(qū)分JavaScript變量命名(JS變量命名是用“”)
3.不要純數(shù)字、中文等命名， 盡量使用英文字母來表示。
猜謎底游戲：
<img src="media/midi.png" width="450" /> 你猜？
命名規(guī)范： 見附件（Web前端開發(fā)規(guī)范手冊(cè).doc）
命名是我們通俗約定的，但是沒有規(guī)定必須用這些常用的命名。
課堂案例：
<img src="media/go.png" />
<head>
<meta charset="utf-8">
<style>
span {
font-size: 100px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
多類名選擇器
我們可以給標(biāo)簽指定多個(gè)類名，從而達(dá)到更多的選擇目的。
<img src="media/lei.png" />
注意：
1. 樣式顯示效果跟HTML元素中的類名先后順序沒有關(guān)系,受CSS樣式書寫的上下順序有關(guān)。
2. 各個(gè)類名中間用空格隔開。
多類名選擇器在后期布局比較復(fù)雜的情況下，還是較多使用的。
<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>
類名選擇器 ：< div class=“nav”> 這個(gè) div 的名字 就是 nav nav 就是 div 這個(gè) div 也是 nav
< 人 class = 劉德華 > 我們想要吧div 找到 div {} .nav {}
id選擇器
id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名，其基本語法格式如下：
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該語法中，id名即為HTML元素的id屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。
用法基本和類選擇器相同。
id選擇器和類選擇器區(qū)別
W3C標(biāo)準(zhǔn)規(guī)定，在同一個(gè)頁面內(nèi)，不允許有相同名字的id對(duì)象出現(xiàn)，但是允許相同名字的class。
類選擇器（class） 好比人的名字， 是可以多次重復(fù)使用的， 比如 張偉 王偉 李偉 李娜
id選擇器 好比人的身份證號(hào)碼， 全中國是唯一的， 不得重復(fù)。 只能使用一次。
id選擇器和類選擇器最大的不同在于 使用次數(shù)上。
<img src="media/zfb.jpg" />
通配符選擇器
通配符 選擇器用“*”號(hào)表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內(nèi)邊距*/
}
注意：
這個(gè)通配符選擇器，就像我們的電影明星中的夢(mèng)中情人， 想想它就好了，但是它不會(huì)和你過日子。
CSS字體樣式屬性
font-size:字號(hào)大小
font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長(zhǎng)度單位，也可以使用絕對(duì)長(zhǎng)度單位。其中，相對(duì)長(zhǎng)度單位比較常用，推薦使用像素單位px，絕對(duì)長(zhǎng)度單位使用較少。具體如下：
<img src="media/dd.png" />
font-family:字體
font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑，可以使用如下CSS樣式代碼：
p{ font-family:"微軟雅黑";}
可以同時(shí)指定多個(gè)字體，中間以逗號(hào)隔開，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到找到合適的字體。
<img src="media/good.png" />常用技巧：
1. 現(xiàn)在網(wǎng)頁中普遍使用14px+。
2. 盡量使用偶數(shù)的數(shù)字字號(hào)。ie6等老式瀏覽器支持奇數(shù)會(huì)有bug。
3. 各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開。
4. 中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。
5. 如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)，例如font-family: "Times New Roman";。
6. 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。
CSS Unicode字體
在 CSS 中設(shè)置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤。xp 系統(tǒng)不支持 類似微軟雅黑的中文。
方案一： 你可以使用英文來替代。 比如 font-family:"Microsoft Yahei"。
方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯(cuò)誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。
font-family: "\5FAE\8F6F\96C5\9ED1"，表示設(shè)置字體為“微軟雅黑”。
<img src="media/shs.png" />
可以通過escape() 來測(cè)試屬于什么字體。
| 字體名稱 | 英文名稱 | Unicode 編碼 |
|---|---|---|
| 宋體 | SimSun | \5B8B\4F53 |
| 新宋體 | NSimSun | \65B0\5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隸書 | LiSu | \96B6\4E66 |
| 幼園 | YouYuan | \5E7C\5706 |
| 華文細(xì)黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細(xì)明體 | MingLiU | \7EC6\660E\4F53 |
| 新細(xì)明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體
font-weight:字體粗細(xì)
字體加粗除了用 b 和 strong 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。
font-weight屬性用于定義字體的粗細(xì)，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數(shù)倍）。
<img src="media/good.png" />小技巧：
數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。 但是我們更喜歡用數(shù)字來表示。
font-style:字體風(fēng)格
字體傾斜除了用 i 和 em 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。
font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：
normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式。
italic：瀏覽器會(huì)顯示斜體的字體樣式。
oblique：瀏覽器會(huì)顯示傾斜的字體樣式。
<img src="media/good.png" />小技巧：
平時(shí)我們很少給文字加斜體，反而喜歡給斜體標(biāo)簽（em，i）改為普通模式。
font:綜合設(shè)置字體樣式 (重點(diǎn))
font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：
選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時(shí)，必須按上面語法格式中的順序書寫，不能更換順序，各個(gè)屬性以空格隔開。
注意：其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。
CSS外觀屬性
color:文本顏色
color屬性用于定義文本的顏色，其取值方式有如下3種：
1.預(yù)定義的顏色值，如red，green，blue等。
2.十六進(jìn)制，如#FF0000，#FF6600，#29D794等。實(shí)際工作中，十六進(jìn)制是最常用的定義顏色的方式。
3.RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時(shí)也不能省略百分號(hào)，必須寫為0%。
line-height:行間距
ine-height屬性用于設(shè)置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對(duì)值em和百分比%，實(shí)際工作中使用最多的是像素px
一般情況下，行距比字號(hào)大7.8像素左右就可以了。
text-align:水平對(duì)齊方式
text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，相當(dāng)于html中的align對(duì)齊屬性。其可用屬性值如下：
left：左對(duì)齊（默認(rèn)值）
right：右對(duì)齊
center：居中對(duì)齊
是讓盒子里面的內(nèi)容水平居中， 而不是讓盒子居中對(duì)齊
text-indent:首行縮進(jìn)
text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值, 建議使用em作為設(shè)置單位。
1em 就是一個(gè)字的寬度 如果是漢字的段落， 1em 就是一個(gè)漢字的寬度
text-decoration 文本的裝飾
text-decoration 通常我們用于給鏈接修改裝飾效果
| 值 | 描述 |
|---|---|
| none | 默認(rèn)。定義標(biāo)準(zhǔn)的文本。 |
| underline | 定義文本下的一條線。下劃線 也是我們鏈接自帶的 |
| overline | 定義文本上的一條線。 |
| line-through | 定義穿過文本下的一條線。 |
開發(fā)者工具（chrome）
此工具是我們的必備工具，以后代碼出了問題，我們首先第一反應(yīng)就是：
“按F12”或者是 “shift+ctrl+i” 打開 開發(fā)者工具。
菜單： 右擊網(wǎng)頁空白出---查看
<img src="media/chrome.png" />
<img src="media/good.png" />小技巧：
- ctrl+滾輪 可以 放大開發(fā)者工具代碼大小。
- 左邊是HTML元素結(jié)構(gòu) 右邊是CSS樣式。
- 右邊CSS樣式可以改動(dòng)數(shù)值和顏色查看更改后效果。
CSS復(fù)合選擇器
復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽。
交集選擇器
交集選擇器由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格，如h3.special。
<img src="media/jiao.png" />
記憶技巧：
交集選擇器 是 并且的意思。 即...又...的意思
比如： p.one 選擇的是： 類名為 .one 的 段落標(biāo)簽。
用的相對(duì)來說比較少，不太建議使用。
并集選擇器
并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過<strong style="color:#f00">逗號(hào)</strong>連接而成的，任何形式的選擇器（包括標(biāo)簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。
<img src="media/bing.png" />
記憶技巧：
并集選擇器 和 的意思， 就是說，只要逗號(hào)隔開的，所有選擇器都會(huì)執(zhí)行后面樣式。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個(gè)選擇器都會(huì)執(zhí)行顏色為紅色。 通常用于集體聲明。
<img src="media/hu.gif" /> 他和他，在一起， 在一起 一起的意思
后代選擇器
后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。
<img src="media/hou.png" />
子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內(nèi) 的標(biāo)簽。
<img src="media/li.png" />
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級(jí)標(biāo)簽寫在前面，子級(jí)標(biāo)簽寫在后面，中間跟一個(gè) > 進(jìn)行連接，注意，符號(hào)左右兩側(cè)各保留一個(gè)空格。
<img src="media/zi1.png" />
白話： 這里的子 指的是 親兒子 不包含孫子 重孫子之類。
比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。
<img src="media/san.jpg" />
測(cè)試題
<div class="nav"> <!-- 主導(dǎo)航欄 -->
<ul>
<li><a href="#">公司首頁</a></li>
<li><a href="#">公司簡(jiǎn)介</a></li>
<li><a href="#">公司產(chǎn)品</a></li>
<li>
<a href="#">聯(lián)系我們</a>
<ul>
<li><a href="#">公司郵箱</a></li>
<li><a href="#">公司電話</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav"> <!-- 側(cè)導(dǎo)航欄 -->
<div class="site-l">左側(cè)側(cè)導(dǎo)航欄</div>
<div class="site-r"><a href="#">登錄</a></div>
</div>
在不修改以上代碼的前提下，完成以下任務(wù)：
- 鏈接 登錄 的顏色為紅色,同時(shí)主導(dǎo)航欄里面的所有的鏈接改為橙色 (簡(jiǎn)單)
- 主導(dǎo)航欄和側(cè)導(dǎo)航欄里面文字都是14像素并且是微軟雅黑。（中等)
- 主導(dǎo)航欄里面的一級(jí)菜單鏈接文字顏色為綠色。（難)
偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個(gè)，第n個(gè)元素。
偽娘
類 .one
偽類 :link
為了和我們剛才學(xué)的類選擇器相區(qū)別， 類選擇器是一個(gè)點(diǎn) 比如 .demo {} 而我們的偽類 用 2個(gè)點(diǎn) 就是 冒號(hào) 比如 :link{}
鏈接偽類選擇器
- :link /* 未訪問的鏈接 */
- :visited /* 已訪問的鏈接 */
- :hover /* 鼠標(biāo)移動(dòng)到鏈接上 */
- :active /* 選定的鏈接 */
注意寫的時(shí)候，他們的順序盡量不要顛倒 按照 lvha 的順序。 love hate 愛上了討厭 記憶法 或者 lv 包包 非常 hao
a { /* a是標(biāo)簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標(biāo)經(jīng)過 */
color: red; /* 鼠標(biāo)經(jīng)過的時(shí)候，由原來的 灰色 變成了紅色 */
}
CSS注釋
CSS規(guī)則是使用 /* 需要注釋的內(nèi)容 */ 進(jìn)行注釋的，即在需要注釋的內(nèi)容前使用 “/*” 標(biāo)記開始注釋，在內(nèi)容的結(jié)尾使用 “*/”結(jié)束。
例如：
p {
font-size: 14px; /* 所有的字體是14像素大小*/
}
sublime快捷方式
sublime可以快速提高我們代碼的書寫方式
生成標(biāo)簽 直接輸入標(biāo)簽名 按tab鍵即可 比如 div 然后tab 鍵， 就可以生成 <div></div>
如果想要生成多個(gè)相同標(biāo)簽 加上 * 就可以了 比如 div*3 就可以快速生成3個(gè)div
如果有父子級(jí)關(guān)系的標(biāo)簽，可以用 > 比如 ul > li就可以了
如果有兄弟關(guān)系的標(biāo)簽，用 + 就可以了 比如 div+p
-
如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了
?
標(biāo)簽顯示模式（display）
<img src="media/people.png" />
非洲黑人： 皮膚內(nèi)黑色素含量高，以吸收陽光中的紫外線，保護(hù)皮膚內(nèi)部結(jié)構(gòu)免遭損害，頭發(fā)象羊毛一樣卷曲，使每根卷發(fā)周圍都有許多空隙，空隙充滿空氣，卷發(fā)有隔熱作用。
歐洲白人： 生活寒帶或著是說常年溫度較低的地緣,加上年日照時(shí)間少，身體的黑色素沉淀比較少``所以出現(xiàn)皮膚、發(fā)色、瞳暈都呈現(xiàn)淺色
傳智黃人： 我中間的。。。 <img src="media/h.jpg" alt="" />
最重要的總結(jié)： 是為了更好的適應(yīng)環(huán)境而完成的自然選擇。
同理，我們網(wǎng)頁的標(biāo)簽非常多，再不同地方會(huì)用到不同類型的標(biāo)簽，以便更好的完成我們的網(wǎng)頁。
標(biāo)簽的類型(顯示模式)
HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型，它們也稱塊元素和行內(nèi)元素。具體如下：
塊級(jí)元素(block-level)
每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。 霸道
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標(biāo)簽是最典型的塊元素。
<img src="media/xtf.jpg" />
塊級(jí)元素的特點(diǎn)：
（1）總是從新行開始
（2）高度，行高、外邊距以及內(nèi)邊距都可以控制。
（3）寬度默認(rèn)是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素。
行內(nèi)元素(inline-level)
行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對(duì)齊等屬性，常用于控制頁面中文本的樣式。
常見的行內(nèi)元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標(biāo)簽最典型的行內(nèi)元素。
<img src="media/wf.jpg" /> 我一樣重要
行內(nèi)元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設(shè)置，垂直方向的無效。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。（a特殊 a里面可以放塊級(jí)元素 ）
<img src="media/w.jpg" /> 注意：
- 只有 文字才 能組成段落 因此 p 里面不能放塊級(jí)元素，同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級(jí)標(biāo)簽，里面不能放其他塊級(jí)元素。
- 鏈接里面不能再放鏈接。
- a里面可以放塊級(jí)元素
塊級(jí)元素和行內(nèi)元素區(qū)別
塊級(jí)元素的特點(diǎn)：
（1）總是從新行開始
（2）高度，行高、外邊距以及內(nèi)邊距都可以控制。
（3）寬度默認(rèn)是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素。
行內(nèi)元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設(shè)置，垂直方向的無效。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。
行內(nèi)塊元素（inline-block）
在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />、<input />、<td>，可以對(duì)它們?cè)O(shè)置寬高和對(duì)齊屬性，有些資料可能會(huì)稱它們?yōu)樾袃?nèi)塊元素。
行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會(huì)有空白縫隙。
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（3）高度，行高、外邊距以及內(nèi)邊距都可以控制。
<img src="media/lyc.jpg" width="400" />
標(biāo)簽顯示模式轉(zhuǎn)換 display
塊轉(zhuǎn)行內(nèi)：display:inline;
行內(nèi)轉(zhuǎn)塊：display:block;
塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;
此階段，我們只需關(guān)心這三個(gè)，其他的是我們后面的工作。
課堂練習(xí)
1.寫 三個(gè) div 給定 100 * 100 的紅色盒子 -- 寬度 高度 背景色
2.三個(gè) span 也要求 150 * 150 綠色盒子
- 三個(gè) a 鏈接 80 * 20 藍(lán)色 盒子 要求 必須一行顯示 這三個(gè)盒子
- 鼠標(biāo)經(jīng)過3個(gè)a鏈接的時(shí)候， 背景顏色變?yōu)? 橙色 hover bgc
- 導(dǎo)航欄案例
CSS書寫規(guī)范
開始就形成良好的書寫規(guī)范，是你專業(yè)化的開始。
空格規(guī)范
【強(qiáng)制】 選擇器 與 { 之間必須包含空格。
示例： .selector { }
【強(qiáng)制】 屬性名 與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。
示例：
font-size: 12px;
選擇器規(guī)范
【強(qiáng)制】 當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)，每個(gè)選擇器聲明必須獨(dú)占一行。
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
【建議】 選擇器的嵌套層級(jí)應(yīng)不大于 3 級(jí)，位置靠后的限定條件應(yīng)盡可能精確。
示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
屬性規(guī)范
【強(qiáng)制】 屬性定義必須另起一行。
示例：
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【強(qiáng)制】 屬性定義后必須以分號(hào)結(jié)尾。
示例：
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
行高的測(cè)量
<img src="media/line1.png" />
<img src="media/line2.png" />
行高我們利用最多的一個(gè)地方是： 可以讓一行文本在盒子中垂直居中對(duì)齊。
做法就是： 文字的行高等于盒子的高度。
這里情況些許復(fù)雜，開始學(xué)習(xí)，我們可以先從簡(jiǎn)單地方入手學(xué)會(huì)。
<img src="media/1.png" />
上距離和下距離總是相等的，因此文字看上去是垂直居中的。
如果 行高 等 height 高度 文字會(huì) 垂直居中
如果行高 大于 高度 文字會(huì) 偏下
如果行高小于高度 文字會(huì) 偏上
CSS 三大特性
層疊 繼承 優(yōu)先級(jí) 是我們學(xué)習(xí)CSS 必須掌握的三個(gè)特性。
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加。
是瀏覽器處理沖突的一個(gè)能力,如果一個(gè)屬性通過兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉
比如先給某個(gè)標(biāo)簽指定了內(nèi)部文字顏色為紅色，接著又指定了顏色為藍(lán)色，此時(shí)出現(xiàn)一個(gè)標(biāo)簽指定了相同樣式不同值的情況，這就是樣式?jīng)_突。 就近原則
一般情況下，如果出現(xiàn)樣式?jīng)_突，則會(huì)按照CSS書寫的順序，以最后的樣式為準(zhǔn)。
- 樣式?jīng)_突，遵循的原則是就近原則。 那個(gè)樣式離著結(jié)構(gòu)近，就執(zhí)行那個(gè)樣式。
- 樣式不沖突，不會(huì)層疊
CSS最后的執(zhí)行口訣： 長(zhǎng)江后浪推前浪，前浪死在沙灘上。
<img src="media/hai.gif" width="600" height="400" />
CSS繼承性
所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可。
簡(jiǎn)單的理解就是： 子承父業(yè)。
CSS最后的執(zhí)行口訣： 龍生龍，鳳生鳳，老鼠生的孩子會(huì)打洞。
<img src="media/shu.gif" />
注意：
恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）
CSS優(yōu)先級(jí)
定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題。
在考慮權(quán)重時(shí)，初學(xué)者還需要注意一些特殊的情況，具體如下：
繼承樣式的權(quán)重為0。即在嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重多大，被子元素繼承時(shí)，他的權(quán)重都為0，也就是說子元素定義的樣式會(huì)覆蓋繼承來的樣式。
行內(nèi)樣式優(yōu)先。應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高，可以理解為遠(yuǎn)大于100?？傊?，他擁有比上面提高的選擇器都大的優(yōu)先級(jí)。
權(quán)重相同時(shí)，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說排在最后的樣式優(yōu)先級(jí)最大。
CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)。也就是說不管權(quán)重如何以及樣式位置的遠(yuǎn)近，!important都具有最大優(yōu)先級(jí)。
CSS特殊性（Specificity）
關(guān)于CSS權(quán)重，我們需要一套計(jì)算公式來去計(jì)算，這個(gè)就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個(gè)衡量CSS值優(yōu)先級(jí)的一個(gè)標(biāo)準(zhǔn) 具體規(guī)范入如下：
specificity用一個(gè)四位的數(shù) 字串(CSS2是三位)來表示，更像四個(gè)級(jí)別，值從左到右，左面的最大，一級(jí)大于一級(jí)，數(shù)位之間沒有進(jìn)制，級(jí)別之間不可超越。
| 繼承或者* 的貢獻(xiàn)值 | 0,0,0,0 |
|---|---|
| 每個(gè)元素（標(biāo)簽）貢獻(xiàn)值為 | 0,0,0,1 |
| 每個(gè)類，偽類貢獻(xiàn)值為 | 0,0,1,0 |
| 每個(gè)ID貢獻(xiàn)值為 | 0,1,0,0 |
| 每個(gè)行內(nèi)樣式貢獻(xiàn)值 | 1,0,0,0 |
| 每個(gè)!important貢獻(xiàn)值 重要的 | ∞ 無窮大 |
權(quán)重是可以疊加的
比如的例子：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
?
?
<img src="media/w.jpg" /> 注意：
1.數(shù)位之間沒有進(jìn)制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會(huì)存在10個(gè)div能趕上一個(gè)類選擇器的情況。
- 繼承的 權(quán)重是 0
總結(jié)優(yōu)先級(jí)：
- 使用了 !important聲明的規(guī)則。
- 內(nèi)嵌在 HTML 元素的 style屬性里面的聲明。
- 使用了 ID 選擇器的規(guī)則。
- 使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規(guī)則。
- 使用了元素選擇器的規(guī)則。
- 只包含一個(gè)通用選擇器的規(guī)則。
- 同一類選擇器則遵循就近原則。
總結(jié)：權(quán)重是優(yōu)先級(jí)的算法，層疊是優(yōu)先級(jí)的表現(xiàn)
CSS 背景(background)
CSS 可以添加背景顏色和背景圖片，以及來進(jìn)行圖片設(shè)置。
| background-color | 背景顏色 |
|---|---|
| background-image | 背景圖片地址 |
| background-repeat | 是否平鋪 |
| background-position | 背景位置 |
| background-attachment | 背景固定還是滾動(dòng) |
| 背景的合寫（復(fù)合屬性） | |
| background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置 |
背景圖片(image)
語法：
background-image : none | url (url)
參數(shù)：
none : 無背景圖（默認(rèn)的）
url : 使用絕對(duì)或相對(duì)地址指定背景圖像
background-image 屬性允許指定一個(gè)圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復(fù)地話，圖片覆蓋不到地地方都會(huì)被背景色填充。 如果有背景圖片平鋪，則會(huì)覆蓋背景顏色。
小技巧： 我們提倡 背景圖片后面的地址，url不要加引號(hào)。
背景平鋪（repeat）
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數(shù)：
repeat : 背景圖像在縱向和橫向上平鋪（默認(rèn)的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
<img src="media/y.png" width="600"/>
設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。
<img src="media/q.png" width="600"/>
背景位置(position)
語法：
background-position : length || length
background-position : position || position
參數(shù)：
length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。請(qǐng)參閱長(zhǎng)度單位
position : top | center | bottom | left | center | right
說明：
設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定background-image屬性。默認(rèn)值為：(0% 0%)。
如果只指定了一個(gè)值，該值將用于橫坐標(biāo)。縱坐標(biāo)將默認(rèn)為50%。第二個(gè)值將用于縱坐標(biāo)。
注意：
- position 后面是x坐標(biāo)和y坐標(biāo)。 可以使用方位名詞或者 精確單位。
- 如果和精確單位和方位名字混合使用，則必須是x坐標(biāo)在前，y坐標(biāo)后面。比如 background-position: 15px top; 則 15px 一定是 x坐標(biāo) top是 y坐標(biāo)。
實(shí)際工作用的最多的，就是背景圖片居中對(duì)齊了。
背景附著
語法：
background-attachment : scroll | fixed
參數(shù)：
scroll : 背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
fixed : 背景圖像固定
說明：
設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。
背景簡(jiǎn)寫
background屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的。為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最后一個(gè)參數(shù)是alpha 透明度 取值范圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不收影響。
導(dǎo)航欄案例
使用技巧：在一行內(nèi)的盒子內(nèi)，我們?cè)O(shè)定行高等于盒子的高度，就可以使文字垂直居中。
<head>
<meta charset="utf-8">
<style>
body {
background-color: #000;
}
a {
width: 200px;
height: 50px;
/* background-color: orange; */
display: inline-block; /* 把a(bǔ) 行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素 */
text-align: center; /* 文字水平居中 */
line-height: 50px; /* 我們?cè)O(shè)定行高等于盒子的高度，就可以使文字垂直居中 */
color: #fff;
font-size: 22px;
text-decoration: none; /* 取消下劃線 文本裝飾 */
}
a:hover { /* 鼠標(biāo)經(jīng)過 給我們的鏈接添加背景圖片*/
background: url(images/h.png) no-repeat;
}
</style>
</head>
<body>
<a href="#">專區(qū)說明</a>
<a href="#">申請(qǐng)資格</a>
<a href="#">兌換獎(jiǎng)勵(lì)</a>
<a href="#">下載游戲</a>
</body>
盒子模型（CSS重點(diǎn)）
其實(shí)，CSS就三個(gè)大模塊： 盒子模型 、 浮動(dòng) 、 定位，其余的都是細(xì)節(jié)。要求這三部分，無論如何也要學(xué)的非常精通。
所謂盒子模型就是把HTML頁面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。
看透網(wǎng)頁布局的本質(zhì)
網(wǎng)頁布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？
<img src="media/t.png" />
牛奶是怎樣運(yùn)輸，讓消費(fèi)者購買的呢？
<img src="media/m.jpg" />
我們說過，行內(nèi)元素比如 文字 類似牛奶，也需要一個(gè)盒子把他們裝起來，我們前面學(xué)過的雙標(biāo)簽都是一個(gè)盒子。有了盒子，我們就可以隨意的，自由的，擺放位置了。
看透網(wǎng)頁布局的本質(zhì)： 把網(wǎng)頁元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的過程，就是網(wǎng)頁布局。
<img src="media/t1.png" />
CSS 其實(shí)沒有太多邏輯可言 ， 類似我們小時(shí)候玩的積木,我們可以自由的，隨意的擺放出我們想要的效果。
<img src="media/j.jpg" width="300" />
盒子模型（Box Model）
這里略過 老舊的ie盒子模型（IE6以下），對(duì)不起，我都沒見過IE5的瀏覽器。
首先，我們來看一張圖，來體會(huì)下什么是盒子模型。
<img src="media/box.png" width="700" />
所有的文檔元素（標(biāo)簽）都會(huì)生成一個(gè)矩形框，我們成為元素框（element box），它描述了一個(gè)文檔元素再網(wǎng)頁布局匯總所占的位置大小。因此，<strong style="color: #f00;">每個(gè)盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。</strong>
<img src="media/boxs.png" width="700" />
盒子邊框（border）
邊框就是那層皮。 橘子皮。。柚子皮。。橙子皮。。。
語法：
border : border-width || border-style || border-color
邊框?qū)傩浴O(shè)置邊框樣式（border-style）
邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值如下：
none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）
solid：邊框?yàn)閱螌?shí)線(最為常用的)
dashed：邊框?yàn)樘摼€
dotted：邊框?yàn)辄c(diǎn)線
double：邊框?yàn)殡p實(shí)線
盒子邊框?qū)懛偨Y(jié)表
| 設(shè)置內(nèi)容 | 樣式屬性 | 常用屬性值 |
| 上邊框 | border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式 顏色; | |
| 下邊框 | border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度 樣式 顏色; | |
| 左邊框 | border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度 樣式 顏色; | |
| 右邊框 | border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度 樣式 顏色; | |
| 樣式綜合設(shè)置 | border-style:上邊 [右邊 下邊 左邊]; | none無（默認(rèn)）、solid單實(shí)線、dashed虛線、dotted點(diǎn)線、double雙實(shí)線 |
| 寬度綜合設(shè)置 | border-width:上邊 [右邊 下邊 左邊]; | 像素值 |
| 顏色綜合設(shè)置 | border-color:上邊 [右邊 下邊 左邊]; | 顏色值、#十六進(jìn)制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 邊框綜合設(shè)置 | border:四邊寬度 四邊樣式 四邊顏色; |
border-top: 1px solid red; /*上邊框*/
border-bottom: 2px solid green; /*下邊框*/
border-left: 1px solid blue;
border-right: 5px solid pink;
border: 1px solid red;
表格的細(xì)線邊框
以前學(xué)過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來。 讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。
table{ border-collapse:collapse; } collapse 單詞是合并的意思
border-collapse:collapse; 表示相鄰邊框合并在一起。
內(nèi)邊距（padding）
padding屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離。
padding-top:上內(nèi)邊距
padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距
<img src="media/w.jpg"/>注意： 后面跟幾個(gè)數(shù)值表示的意思是不一樣的。
| 值的個(gè)數(shù) | 表達(dá)意思 |
|---|---|
| 1個(gè)值 | padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素 |
| 2個(gè)值 | padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3個(gè)值 | padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4個(gè)值 | padding:上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時(shí)針 |
課堂案例： 新浪導(dǎo)航
<img src="media/al.gif" />
關(guān)于盒子寬度下列正確的是（）
(A) 盒子寬：就是width的大小
(B) 盒子寬： padding-left + width + padding-right
(C) 盒子寬： border-left + width + border-right
(D) 盒子寬： border-left+ padding-left + width + padding-right + border-right
w 100 padding 10 border 5 ? 實(shí)際大小 ？ 130
3關(guān)于盒子高度下列正確的是（）
(A) 盒子高：就是height的大小
(B) 盒子高：padding-top +height + padding-bottom
(C) 盒子高：border-top + height + border-bottom
(D) 盒子高：border-top + padding-top +height + padding-bottom + border-bottom
**4**** 關(guān)于根據(jù)下列代碼計(jì)算 盒子寬高下列說法正確的是（）******
div {
? width: 200px;
? height: 200px;
? border: 1px solid #000000;
? border-top: 5px solid blue;
? padding: 50px;
? padding-left: 100px;
? }
(A) 寬度為200px 高度為200px
(B) 寬度為352px 高度為306px
(C) 寬度為302px 高度為307px
(D) 寬度為302px 高度為252px
外邊距（margin）
margin屬性用于設(shè)置外邊距。 設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”， 這段空白通常不能放置其他內(nèi)容。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟內(nèi)邊距相同。
外邊距實(shí)現(xiàn)盒子居中
可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿足一下兩個(gè)條件：
- 必須是塊級(jí)元素。
- 盒子必須指定了寬度（width）
然后就給左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。
實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局，示例代碼如下：
.header{ width:960px; margin:0 auto;}
文字盒子居中圖片和背景區(qū)別
- 文字水平居中是 text-align: center
- 盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改為 auto 就闊以了 */
- 插入圖片 我們用的最多 比如產(chǎn)品展示類
- 背景圖片我們一般用于小圖標(biāo)背景 或者 超大背景圖片
section img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當(dāng)圖片也是一個(gè)盒子 */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /* 背景圖片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
}
清除元素的默認(rèn)內(nèi)外邊距
為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時(shí)，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
注意： 行內(nèi)元素是只有左右外邊距的，是沒有上下外邊距的。 內(nèi)邊距，在ie6等低版本瀏覽器也會(huì)有問題。
我們盡量不要給行內(nèi)元素指定上下的內(nèi)外邊距就好了。
外邊距合并
使用margin定義塊元素的垂直外邊距時(shí)，可能會(huì)出現(xiàn)外邊距的合并。
相鄰塊元素垂直外邊距的合并
當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
<img src="media/www.png" />
解決方案： 避免就好了。
嵌套塊元素垂直外邊距的合并
對(duì)于兩個(gè)嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會(huì)發(fā)生合并。
<img src="media/n.png" />
解決方案：
- 可以為父元素定義1像素的上邊框或上內(nèi)邊距。
- 可以為父元素添加overflow:hidden。
待續(xù)。。。。
content寬度和高度
使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。
width和height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比%，實(shí)際工作中最常用的是像素值。
大多數(shù)瀏覽器，如Firefox、IE6及以上版本都采用了W3C規(guī)范，符合CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：
/*外盒尺寸計(jì)算（元素空間尺寸）*/
Element空間高度 = content height + padding + border + margin
Element 空間寬度 = content width + padding + border + margin
/*內(nèi)盒尺寸計(jì)算（元素實(shí)際大?。?/
Element Height = content height + padding + border （Height為內(nèi)容高度）
Element Width = content width + padding + border （Width為內(nèi)容寬度）
注意：
1、寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效（ img 標(biāo)簽和 input除外）。
2、計(jì)算盒子模型的總高度時(shí)，還應(yīng)考慮上下兩個(gè)盒子垂直外邊距合并的情況。
3、如果一個(gè)盒子則會(huì)和父親一樣寬 占滿父親的寬度， 如果此盒子沒有給定寬度 則padding 不會(huì)影響本盒子大小。
盒子模型布局穩(wěn)定性
開始學(xué)習(xí)盒子模型，同學(xué)們最大的困惑就是， 分不清內(nèi)外邊距的使用，什么情況下使用內(nèi)邊距，什么情況下使用外邊距？
答案是： 其實(shí)他們大部分情況下是可以混用的。 就是說，你用內(nèi)邊距也可以，用外邊距也可以。 你覺得哪個(gè)方便，就用哪個(gè)。
但是，總有一個(gè)最好用的吧，我們根據(jù)穩(wěn)定性來分，建議如下：
按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）。
width > padding > margin
原因：
margin 會(huì)有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用。
padding 會(huì)影響盒子大小， 需要進(jìn)行加減計(jì)算（麻煩） 其次使用。
-
width 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法 高度剩余法來做。
?
圓角邊框(CSS3)
從此以后，我們的世界不只有矩形。radius 半徑（距離）
語法格式：
border-radius: 50%; 讓一個(gè)正方形 變成圓圈
盒子陰影(CSS3)
語法格式：
box-shadow:水平陰影 垂直陰影 模糊距離（虛實(shí)） 陰影尺寸（影子大?。? 陰影顏色 內(nèi)/外陰影；
[圖片上傳失敗...(image-b724f3-1542596902028)]
- 前兩個(gè)屬性是必須寫的。其余的可以省略。
- 外陰影 (outset) 但是不能寫 默認(rèn) 想要內(nèi)陰影 inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大?。?陰影顏色 內(nèi)/外陰影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
浮動(dòng)(float)
普通流(normal flow)
這個(gè)單詞很多人翻譯為 文檔流 ， 字面翻譯 普通流 或者標(biāo)準(zhǔn)流都可以。
前面我們說過，網(wǎng)頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動(dòng)和定位。
html語言當(dāng)中另外一個(gè)相當(dāng)重要的概念----------標(biāo)準(zhǔn)流！或者普通流。普通流實(shí)際上就是一個(gè)網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思，比如塊級(jí)元素會(huì)獨(dú)占一行，行內(nèi)元素會(huì)按順序依次前后排列；按照這種大前提的布局排列之下絕對(duì)不會(huì)出現(xiàn)例外的情況叫做普通流布局。
<img src="media/t.jpg" />
浮動(dòng)(float)
浮動(dòng)最早是用來控制圖片，以便達(dá)到其他元素（特別是文字）實(shí)現(xiàn)“環(huán)繞”圖片的效果。
<img src="media/l.png" style="width: 600px; border: 2px solid #000;"/>
后來，我們發(fā)現(xiàn)浮動(dòng)有個(gè)很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動(dòng)的特性來布局了。（CSS3已經(jīng)我們真正意義上的網(wǎng)頁布局，具體CSS3我們會(huì)詳細(xì)解釋）
<img src="media/d.png" />
什么是浮動(dòng)？
元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)標(biāo)準(zhǔn)流的控制，移動(dòng)到其父元素中指定位置的過程。
在CSS中，通過float屬性來定義浮動(dòng)，其基本語法格式如下：
選擇器{float:屬性值;}
| 屬性值 | 描述 |
|---|---|
| left | 元素向左浮動(dòng) |
| right | 元素向右浮動(dòng) |
| none | 元素不浮動(dòng)（默認(rèn)值） |
浮動(dòng)詳細(xì)內(nèi)幕特性
浮動(dòng)脫離標(biāo)準(zhǔn)流，====脫標(biāo)==== 不占位置，會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)。
1. 浮動(dòng)首先創(chuàng)建包含塊的概念（包裹）。就是說， 浮動(dòng)的元素總是找理它最近的父級(jí)元素對(duì)齊。但是不會(huì)超出內(nèi)邊距的范圍。
<img src="media/one.jpg" width="500" />
2.一個(gè)父盒子里面的子盒子，如果其中一個(gè)子級(jí)有浮動(dòng)的，則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示。
3. 元素添加浮動(dòng)后，元素會(huì)具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少浮動(dòng)根據(jù)元素書寫的位置來顯示相應(yīng)的浮動(dòng)。
總結(jié)： 浮動(dòng) --->
浮動(dòng)的目的就是為了讓多個(gè)塊級(jí)元素同一行上顯示。 最核心的關(guān)鍵點(diǎn)就是 怎么排列的， 是否占有位置
float 浮 漏 特
?。? 加了浮動(dòng)的元素盒子是浮起來的，漂浮在其他的標(biāo)準(zhǔn)流盒子上面。
漏： 加了浮動(dòng)的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標(biāo)準(zhǔn)流的盒子。
特： 特別注意，首先浮動(dòng)的盒子需要和標(biāo)準(zhǔn)流的父級(jí)搭配使用， 其次 特別的注意浮動(dòng)可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性。
版心和布局流程
閱讀報(bào)紙時(shí)容易發(fā)現(xiàn)，雖然報(bào)紙中的內(nèi)容很多，但是經(jīng)過合理地排版，版面依然清晰、易讀。同樣，在制作網(wǎng)頁時(shí)，要想使頁面結(jié)構(gòu)清晰、有條理，也需要對(duì)網(wǎng)頁進(jìn)行“排版”。
“版心”(可視區(qū)) 是指網(wǎng)頁中主體內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。
布局流程
為了提高網(wǎng)頁制作的效率，布局時(shí)通常需要遵守一定的布局流程，具體如下：
1、確定頁面的版心（可視區(qū)）。
2、分析頁面中的行模塊，以及每個(gè)行模塊中的列模塊。
3、制作HTML結(jié)構(gòu) 。
4、CSS初始化，然后開始運(yùn)用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個(gè)模塊。
一列固定寬度且居中
<img src="media/yl.jpg" width="400" />
最普通的，最為常用的結(jié)構(gòu)
兩列左窄右寬型
<img src="media/ll.jpg" width="400" />
比如小米 <a target="_blank"> 小米官網(wǎng) </a>
通欄平均分布型
<img src="media/tl.jpg" width="600" />
比如錘子 <a target="_blank"> 錘子官網(wǎng) </a>
清除浮動(dòng)
人生就像乘坐北京地鐵一號(hào)線：
途經(jīng)國貿(mào)，羨慕繁華；
途經(jīng)天安門，幻想權(quán)力；
途經(jīng)金融街，夢(mèng)想發(fā)財(cái)；
經(jīng)過公主墳，遙想華麗家族；
經(jīng)過玉泉路，依然雄心勃勃…
這時(shí)，有個(gè)聲音飄然入耳:乘客你好,八寶山馬上就要到了！
頓時(shí)醒悟：人生苦短，有始有終。
好比我們的浮動(dòng)，有浮動(dòng)開始，則就應(yīng)該有浮動(dòng)結(jié)束。
為什么要清除浮動(dòng)
我們前面說過，浮動(dòng)本質(zhì)是用來做一些文字混排效果的，但是被我們拿來做布局用，則會(huì)有很多的問題出現(xiàn)， 但是，你不能說浮動(dòng)不好 <img src="media/wq.jpg" height="100" />。
由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響，為了解決這些問題，此時(shí)就需要在該元素中清除浮動(dòng)。
準(zhǔn)確地說，并不是清除浮動(dòng)，而是清除浮動(dòng)后造成的影響
如果浮動(dòng)一開始就是一個(gè)美麗的錯(cuò)誤，那么請(qǐng)用正確的方法挽救它。
