CSS初識(shí)
CSS(Cascading Style Sheets) 美化樣式
CSS通常稱(chēng)為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表）捞附，主要用于設(shè)置HTML頁(yè)面中的文本內(nèi)容（字體巾乳、大小、對(duì)齊方式等）鸟召、圖片的外形（寬高胆绊、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式欧募。
CSS以HTML為基礎(chǔ)压状，提供了豐富的功能，如字體跟继、顏色种冬、背景的控制及整體排版等，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式舔糖。
引入CSS樣式表（書(shū)寫(xiě)位置）
CSS可以寫(xiě)到那個(gè)位置娱两？ 是不是一定寫(xiě)到html文件里面呢？
內(nèi)部樣式表
內(nèi)嵌式是將CSS代碼集中寫(xiě)在HTML文檔的head頭部標(biāo)簽中剩盒，并且用style標(biāo)簽定義谷婆，其基本語(yǔ)法格式如下：
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
語(yǔ)法中，style標(biāo)簽一般位于head標(biāo)簽中title標(biāo)簽之后辽聊，也可以把他放在HTML文檔的任何地方纪挎。
type="text/CSS" 在html5中可以省略， 寫(xiě)上也比較符合規(guī)范跟匆， 所以這個(gè)地方可以寫(xiě)也可以省略异袄。
行內(nèi)式（內(nèi)聯(lián)樣式）
內(nèi)聯(lián)樣式，又有人稱(chēng)行內(nèi)樣式玛臂、行間樣式烤蜕、內(nèi)嵌樣式。是通過(guò)標(biāo)簽的style屬性來(lái)設(shè)置元素的樣式迹冤，其基本語(yǔ)法格式如下：
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>
語(yǔ)法中style是標(biāo)簽的屬性讽营，實(shí)際上任何HTML標(biāo)簽都擁有style屬性，用來(lái)設(shè)置行內(nèi)式泡徙。其中屬性和值的書(shū)寫(xiě)規(guī)范與CSS樣式規(guī)則相同橱鹏，行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用。
外部樣式表（外鏈?zhǔn)剑?/h2>
鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中，通過(guò)link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中莉兰，其基本語(yǔ)法格式如下：
<head>
<link href="CSS文件的路徑" rel="stylesheet" />
</head>
注意： link 是個(gè)單標(biāo)簽哦!!!
該語(yǔ)法中挑围，link標(biāo)簽需要放在head頭部標(biāo)簽中，并且必須指定link標(biāo)簽的三個(gè)屬性糖荒，具體如下：
href：定義所鏈接外部樣式表文件的URL杉辙，可以是相對(duì)路徑，也可以是絕對(duì)路徑捶朵。
type：定義所鏈接文檔的類(lèi)型蜘矢，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表综看。
rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系硼端，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件寓搬。
三種樣式表總結(jié)（位置）
| 樣式表 | 優(yōu)點(diǎn) | 缺點(diǎn) | 使用情況 | 控制范圍 |
|---|---|---|---|---|
| 行內(nèi)樣式表 | 書(shū)寫(xiě)方便，權(quán)重高 | 沒(méi)有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離 | 較少 | 控制一個(gè)標(biāo)簽（少） |
| 內(nèi)部樣式表 | 部分結(jié)構(gòu)和樣式相分離 | 沒(méi)有徹底分離 | 較多 | 控制一個(gè)頁(yè)面（中） |
| 外部樣式表 | 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離 | 需要引入 | 最多县耽，強(qiáng)烈推薦 | 控制整個(gè)站點(diǎn)（多） |
CSS樣式規(guī)則
使用HTML時(shí)句喷，需要遵從一定的規(guī)范。CSS亦如此兔毙，要想熟練地使用CSS對(duì)網(wǎng)頁(yè)進(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ī)則部分被稱(chēng)為選擇器（選擇符）品山。
CSS基礎(chǔ)選擇器
標(biāo)簽選擇器（元素選擇器）
標(biāo)簽選擇器是指用HTML標(biāo)簽名稱(chēng)作為選擇器胆建，按標(biāo)簽名稱(chēng)分類(lèi)，為頁(yè)面中某一類(lèi)標(biāo)簽指定統(tǒng)一的CSS樣式肘交。其基本語(yǔ)法格式如下：
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標(biāo)簽選擇器最大的優(yōu)點(diǎn)是能快速為頁(yè)面中同類(lèi)型的標(biāo)簽統(tǒng)一樣式笆载，同時(shí)這也是他的缺點(diǎn)，不能設(shè)計(jì)差異化樣式。
類(lèi)選擇器
類(lèi)選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)宰译，后面緊跟類(lèi)名檐蚜，其基本語(yǔ)法格式如下：
.類(lèi)名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標(biāo)簽調(diào)用的時(shí)候用 class=“類(lèi)名” 即可。
類(lèi)選擇器最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式沿侈。 可以選擇一個(gè)或者多個(gè)標(biāo)簽
<img src="media/good.png" />小技巧：
1.長(zhǎng)名稱(chēng)或詞組可以使用中橫線來(lái)為選擇器命名闯第。
2.不建議使用“_”下劃線來(lái)命名CSS選擇器。
輸入的時(shí)候少按一個(gè)shift鍵;
瀏覽器兼容問(wèn)題 (比如使用_tips的選擇器命名缀拭，在IE6是無(wú)效的)
能良好區(qū)分JavaScript變量命名(JS變量命名是用“_”)
3.不要純數(shù)字咳短、中文等命名， 盡量使用英文字母來(lái)表示蛛淋。
課堂案例：
<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>
多類(lèi)名選擇器
我們可以給標(biāo)簽指定多個(gè)類(lèi)名咙好，從而達(dá)到更多的選擇目的。
<img src="media/lei.png" />
注意：
1. 樣式顯示效果跟HTML元素中的類(lèi)名先后順序沒(méi)有關(guān)系,受CSS樣式書(shū)寫(xiě)的上下順序有關(guān)褐荷。
2. 各個(gè)類(lèi)名中間用空格隔開(kāi)勾效。
多類(lèi)名選擇器在后期布局比較復(fù)雜的情況下挪捕，還是較多使用的胁住。
<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>
類(lèi)名選擇器 ：< div class=“nav”> 這個(gè) div 的名字 就是 nav nav 就是 div 這個(gè) div 也是 nav
< 人 class = 劉德華 > 我們想要吧div 找到 div {} .nav {}
id選擇器
id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名爽航，其基本語(yǔ)法格式如下：
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該語(yǔ)法中其监，id名即為HTML元素的id屬性值萌腿，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的抖苦，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素毁菱。
用法基本和類(lèi)選擇器相同。
id選擇器和類(lèi)選擇器區(qū)別
W3C標(biāo)準(zhǔn)規(guī)定锌历，在同一個(gè)頁(yè)面內(nèi)贮庞，不允許有相同名字的id對(duì)象出現(xiàn)，但是允許相同名字的class究西。
類(lèi)選擇器（class） 好比人的名字贸伐， 是可以多次重復(fù)使用的， 比如 張偉 王偉 李偉 李娜
id選擇器 好比人的身份證號(hào)碼怔揩， 全中國(guó)是唯一的捉邢， 不得重復(fù)。 只能使用一次商膊。
id選擇器和類(lèi)選擇器最大的不同在于 使用次數(shù)上伏伐。
通配符選擇器
通配符 選擇器用“*”號(hào)表示，他是所有選擇器中作用范圍最廣的晕拆，能匹配頁(yè)面中所有的元素藐翎。其基本語(yǔ)法格式如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如下面的代碼材蹬，使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距吝镣。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內(nèi)邊距*/
}
注意：
這個(gè)通配符選擇器堤器，就像我們的電影明星中的夢(mèng)中情人， 想想它就好了末贾，但是它不會(huì)和你過(guò)日子闸溃。
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)頁(yè)中常用的字體有宋體屿愚、微軟雅黑、黑體等务荆，例如將網(wǎng)頁(yè)中所有段落文本的字體設(shè)置為微軟雅黑渺鹦，可以使用如下CSS樣式代碼：
p{ font-family:"微軟雅黑";}
可以同時(shí)指定多個(gè)字體，中間以逗號(hào)隔開(kāi)蛹含，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)塞颁，直到找到合適的字體浦箱。
<img src="media/good.png" />常用技巧：
1. 現(xiàn)在網(wǎng)頁(yè)中普遍使用14px+。
2. 盡量使用偶數(shù)的數(shù)字字號(hào)祠锣。ie6等老式瀏覽器支持奇數(shù)會(huì)有bug酷窥。
3. 各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開(kāi)。
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è)置字體名稱(chēng)，直接寫(xiě)中文是可以的。但是在文件編碼（GB2312迹辐、UTF-8 等）不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤蝶防。xp 系統(tǒng)不支持 類(lèi)似微軟雅黑的中文。
方案一： 你可以使用英文來(lái)替代明吩。 比如 font-family:"Microsoft Yahei"间学。
方案二： 在 CSS 直接使用 Unicode 編碼來(lái)寫(xiě)字體名稱(chēng)可以避免這些錯(cuò)誤。使用 Unicode 寫(xiě)中文字體名稱(chēng)贺喝，瀏覽器是可以正確的解析的菱鸥。
font-family: "\5FAE\8F6F\96C5\9ED1"，表示設(shè)置字體為“微軟雅黑”躏鱼。
<img src="media/shs.png" />
可以通過(guò)escape() 來(lái)測(cè)試屬于什么字體氮采。
| 字體名稱(chēng) | 英文名稱(chēng) | Unicode 編碼 |
|---|---|---|
| 宋體 | SimSun | \5B8B\4F53 |
| 新宋體 | NSimSun | \65B0\5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隸書(shū) | LiSu | \96B6\4E66 |
| 幼園 | YouYuan | \5E7C\5706 |
| 華文細(xì)黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細(xì)明體 | MingLiU | \7EC6\660E\4F53 |
| 新細(xì)明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
為了照顧不同電腦的字體安裝問(wèn)題，我們盡量只使用宋體和微軟雅黑中文字體
font-weight:字體粗細(xì)
字體加粗除了用 b 和 strong 標(biāo)簽之外染苛，可以使用CSS 來(lái)實(shí)現(xiàn)鹊漠，但是CSS 是沒(méi)有語(yǔ)義的。
font-weight屬性用于定義字體的粗細(xì)茶行，其可用屬性值：normal躯概、bold、bolder畔师、lighter娶靡、100~900（100的整數(shù)倍）。
<img src="media/good.png" />小技巧：
數(shù)字 400 等價(jià)于 normal看锉，而 700 等價(jià)于 bold姿锭。 但是我們更喜歡用數(shù)字來(lái)表示。
font-style:字體風(fēng)格
字體傾斜除了用 i 和 em 標(biāo)簽之外伯铣，可以使用CSS 來(lái)實(shí)現(xiàn)呻此，但是CSS 是沒(méi)有語(yǔ)義的。
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è)置览效，其基本語(yǔ)法格式如下：
選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時(shí)却舀，必須按上面語(yǔ)法格式中的順序書(shū)寫(xiě)，不能更換順序锤灿，各個(gè)屬性以空格隔開(kāi)挽拔。
注意：其中不需要設(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)，必須寫(xiě)為0%港庄。
line-height:行間距
ine-height屬性用于設(shè)置行間距倔既，就是行與行之間的距離，即字符的垂直間距攘轩，一般稱(chēng)為行高。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 | 定義穿過(guò)文本下的一條線。 |
開(kāi)發(fā)者工具（chrome）
此工具是我們的必備工具厚棵，以后代碼出了問(wèn)題蕉世，我們首先第一反應(yīng)就是：
“按F12”或者是 “shift+ctrl+i” 打開(kāi) 開(kāi)發(fā)者工具。
菜單： 右擊網(wǎng)頁(yè)空白出---查看
<img src="media/chrome.png" />
<img src="media/good.png" />小技巧：
- ctrl+滾輪 可以 放大開(kāi)發(fā)者工具代碼大小婆硬。
- 左邊是HTML元素結(jié)構(gòu) 右邊是CSS樣式狠轻。
- 右邊CSS樣式可以改動(dòng)數(shù)值和顏色查看更改后效果。
CSS復(fù)合選擇器
復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器柿祈，通過(guò)不同的方式組合而成的,目的是為了可以選擇更準(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 選擇的是： 類(lèi)名為 .one 的 段落標(biāo)簽。
用的相對(duì)來(lái)說(shuō)比較少虚茶，不太建議使用戈鲁。
并集選擇器
并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過(guò)<strong style="color:#f00">逗號(hào)</strong>連接而成的，任何形式的選擇器（包括標(biāo)簽選擇器嘹叫、class類(lèi)選擇器id選擇器等）婆殿，都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同罩扇，或部分相同婆芦，就可以利用并集選擇器為它們定義相同的CSS樣式。
<img src="media/bing.png" />
記憶技巧：
并集選擇器 和 的意思喂饥， 就是說(shuō)消约，只要逗號(hào)隔開(kāi)的，所有選擇器都會(huì)執(zhí)行后面樣式员帮。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個(gè)選擇器都會(huì)執(zhí)行顏色為紅色或粮。 通常用于集體聲明。
后代選擇器
后代選擇器又稱(chēng)為包含選擇器捞高，用來(lái)選擇元素或元素組的后代氯材，其寫(xiě)法就是把外層標(biāo)簽寫(xiě)在前面渣锦，內(nèi)層標(biāo)簽寫(xiě)在后面，中間用空格分隔浓体。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)泡挺，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。
<img src="media/hou.png" />
子孫后代都可以這么選擇命浴。 或者說(shuō)娄猫，它能選擇任何包含在內(nèi) 的標(biāo)簽。
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素生闲。其寫(xiě)法就是把父級(jí)標(biāo)簽寫(xiě)在前面媳溺，子級(jí)標(biāo)簽寫(xiě)在后面，中間跟一個(gè) > 進(jìn)行連接碍讯，注意悬蔽，符號(hào)左右兩側(cè)各保留一個(gè)空格。
<img src="media/zi1.png" />
白話： 這里的子 指的是 親兒子 不包含孫子 重孫子之類(lèi)捉兴。
比如： .demo > h3 {color: red;} 說(shuō)明 h3 一定是demo 親兒子蝎困。 demo 元素包含著h3。
測(cè)試題
<div class="nav"> <!-- 主導(dǎo)航欄 -->
<ul>
<li><a href="#">公司首頁(yè)</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í)菜單鏈接文字顏色為綠色。（難)
偽類(lèi)選擇器
偽類(lèi)選擇器用于向某些選擇器添加特殊的效果虽缕。比如給鏈接添加特殊效果始藕， 比如可以選擇 第1個(gè)，第n個(gè)元素氮趋。
偽娘
類(lèi) .one
偽類(lèi) :link
為了和我們剛才學(xué)的類(lèi)選擇器相區(qū)別伍派， 類(lèi)選擇器是一個(gè)點(diǎn) 比如 .demo {} 而我們的偽類(lèi) 用 2個(gè)點(diǎn) 就是 冒號(hào) 比如 :link{}
鏈接偽類(lèi)選擇器
- :link /* 未訪問(wèn)的鏈接 */
- :visited /* 已訪問(wèn)的鏈接 */
- :hover /* 鼠標(biāo)移動(dòng)到鏈接上 */
- :active /* 選定的鏈接 */
注意寫(xiě)的時(shí)候，他們的順序盡量不要顛倒 按照 lvha 的順序剩胁。 love hate 愛(ài)上了討厭 記憶法 或者 lv 包包 非常 hao
a { /* a是標(biāo)簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類(lèi)選擇器 鼠標(biāo)經(jīng)過(guò) */
color: red; /* 鼠標(biāo)經(jīng)過(guò)的時(shí)候诉植，由原來(lái)的 灰色 變成了紅色 */
}
CSS注釋
CSS規(guī)則是使用 /* 需要注釋的內(nèi)容 */ 進(jìn)行注釋的，即在需要注釋的內(nèi)容前使用 “/*” 標(biāo)記開(kāi)始注釋?zhuān)趦?nèi)容的結(jié)尾使用 “*/”結(jié)束昵观。
例如：
p {
font-size: 14px; /* 所有的字體是14像素大小*/
}
sublime快捷方式
sublime可以快速提高我們代碼的書(shū)寫(xiě)方式
生成標(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
-
如果生成帶有類(lèi)名或者id名字的建车， 直接寫(xiě) .demo 或者 #two tab 鍵就可以了
?
標(biāo)簽顯示模式（display）
非洲黑人： 皮膚內(nèi)黑色素含量高扩借，以吸收陽(yáng)光中的紫外線椒惨，保護(hù)皮膚內(nèi)部結(jié)構(gòu)免遭損害，頭發(fā)象羊毛一樣卷曲潮罪，使每根卷發(fā)周?chē)加性S多空隙康谆，空隙充滿空氣，卷發(fā)有隔熱作用沃暗。
歐洲白人： 生活寒帶或著是說(shuō)常年溫度較低的地緣,加上年日照時(shí)間少月洛，身體的黑色素沉淀比較少``所以出現(xiàn)皮膚、發(fā)色、瞳暈都呈現(xiàn)淺色
最重要的總結(jié)： 是為了更好的適應(yīng)環(huán)境而完成的自然選擇总滩。
同理愚隧，我們網(wǎng)頁(yè)的標(biāo)簽非常多，再不同地方會(huì)用到不同類(lèi)型的標(biāo)簽锻全，以便更好的完成我們的網(wǎng)頁(yè)狂塘。
標(biāo)簽的類(lèi)型(顯示模式)
HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類(lèi)型录煤，它們也稱(chēng)塊元素和行內(nèi)元素。具體如下：
塊級(jí)元素(block-level)
每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行荞胡，可以對(duì)其設(shè)置寬度妈踊、高度、對(duì)齊等屬性泪漂，常用于網(wǎng)頁(yè)布局和網(wǎng)頁(yè)結(jié)構(gòu)的搭建廊营。 霸道
常見(jiàn)的塊元素有<h1>~<h6>、<p>萝勤、<div>赘风、<ul>、<ol>纵刘、<li>等邀窃，其中<div>標(biāo)簽是最典型的塊元素。
塊級(jí)元素的特點(diǎn)：
（1）總是從新行開(kāi)始
（2）高度假哎，行高瞬捕、外邊距以及內(nèi)邊距都可以控制。
（3）寬度默認(rèn)是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素舵抹。
行內(nèi)元素(inline-level)
行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨(dú)立的區(qū)域肪虎，僅僅靠自身的字體大小和圖像尺寸來(lái)支撐結(jié)構(gòu)，一般不可以設(shè)置寬度惧蛹、高度扇救、對(duì)齊等屬性，常用于控制頁(yè)面中文本的樣式香嗓。
常見(jiàn)的行內(nèi)元素有<a>迅腔、<strong>、<b>靠娱、<em>沧烈、<i>、<del>像云、<s>锌雀、<ins>、<u>迅诬、<span>等腋逆，其中<span>標(biāo)簽最典型的行內(nèi)元素。
行內(nèi)元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素在一行上侈贷。
（2）高惩歉、寬無(wú)效，但水平方向的padding和margin可以設(shè)置，垂直方向的無(wú)效柬泽。
（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，他們都是文字類(lèi)塊級(jí)標(biāo)簽睬棚，里面不能放其他塊級(jí)元素第煮。
- 鏈接里面不能再放鏈接。
- a里面可以放塊級(jí)元素
塊級(jí)元素和行內(nèi)元素區(qū)別
塊級(jí)元素的特點(diǎn)：
（1）總是從新行開(kāi)始
（2）高度抑党，行高包警、外邊距以及內(nèi)邊距都可以控制。
（3）寬度默認(rèn)是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素底靠。
行內(nèi)元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素在一行上害晦。
（2）高、寬無(wú)效暑中，但水平方向的padding和margin可以設(shè)置壹瘟，垂直方向的無(wú)效。
（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ì)稱(chēng)它們?yōu)樾袃?nèi)塊元素枚抵。
行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會(huì)有空白縫隙线欲。
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（3）高度汽摹，行高询筏、外邊距以及內(nèi)邊距都可以控制。
標(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.寫(xiě) 三個(gè) div 給定 100 * 100 的紅色盒子 -- 寬度 高度 背景色
2.三個(gè) span 也要求 150 * 150 綠色盒子
- 三個(gè) a 鏈接 80 * 20 藍(lán)色 盒子 要求 必須一行顯示 這三個(gè)盒子
- 鼠標(biāo)經(jīng)過(guò)3個(gè)a鏈接的時(shí)候踱讨， 背景顏色變?yōu)? 橙色 hover bgc
- 導(dǎo)航欄案例
CSS書(shū)寫(xiě)規(guī)范
開(kāi)始就形成良好的書(shū)寫(xiě)規(guī)范，是你專(zhuān)業(yè)化的開(kāi)始砍的。
空格規(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ù)雜瓢湃，開(kāi)始學(xué)習(xí)，我們可以先從簡(jiǎn)單地方入手學(xué)會(huì)赫蛇。
<img src="media/1.png" />
上距離和下距離總是相等的绵患，因此文字看上去是垂直居中的。
如果 行高 等 height 高度 文字會(huì) 垂直居中
如果行高 大于 高度 文字會(huì) 偏下
如果行高小于高度 文字會(huì) 偏上
