有了HTML之后呕童，我們下面就要學(xué)習(xí)CSS崔赌，使用 CSS 同時(shí)控制多重網(wǎng)頁(yè)的樣式和布局意蛀，通過(guò)CSS來(lái)提升工作效率！
目錄：
一健芭、CSS簡(jiǎn)介
二县钥、CSS語(yǔ)法
三、樣式的創(chuàng)建(內(nèi)部樣式 外部樣式 內(nèi)聯(lián)樣式)
四慈迈、CSS選擇符（選擇器）和基礎(chǔ)屬性
五若贮、CSS選擇符的權(quán)重
一省有、CSS簡(jiǎn)介
CSS 概述
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常存儲(chǔ)在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲(chǔ)在 CSS 文件中
多個(gè)樣式定義可層疊為一個(gè)
使用CSS的好處
樣式解決了一個(gè)普遍的問(wèn)題
HTML 標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容谴麦。通過(guò)使用 <h1>蠢沿、<p>、<table> 這樣的標(biāo)簽匾效，HTML 的初衷是表達(dá)“這是標(biāo)題”舷蟀、“這是段落”、“這是表格”之類(lèi)的信息面哼。同時(shí)文檔布局由瀏覽器來(lái)完成野宜，而不使用任何的格式化標(biāo)簽。
由于兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標(biāo)簽和屬性（比如字體標(biāo)簽和顏色屬性）添加到 HTML 規(guī)范中魔策，創(chuàng)建文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來(lái)越困難匈子。
為了解決這個(gè)問(wèn)題，萬(wàn)維網(wǎng)聯(lián)盟（W3C）闯袒，這個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟虎敦，肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命，并在 HTML 4.0 之外創(chuàng)造出樣式（Style）搁吓。
所有的主流瀏覽器均支持層疊樣式表原茅。
樣式表極大地提高了工作效率
樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標(biāo)簽和顏色屬性所起的作用那樣堕仔。樣式通常保存在外部的 .css 文件中擂橘。通過(guò)僅僅編輯一個(gè)簡(jiǎn)單的 CSS 文檔，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀摩骨。
由于允許同時(shí)控制多重頁(yè)面的樣式和布局通贞，CSS 可以稱(chēng)得上 WEB 設(shè)計(jì)領(lǐng)域的一個(gè)突破。作為網(wǎng)站開(kāi)發(fā)者恼五，你能夠?yàn)槊總€(gè) HTML 元素定義樣式昌罩，并將之應(yīng)用于你希望的任意多的頁(yè)面中。如需進(jìn)行全局的更新灾馒，只需簡(jiǎn)單地改變樣式茎用，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。
多重樣式將層疊為一個(gè)
樣式表允許以多種方式規(guī)定樣式信息睬罗。樣式可以規(guī)定在單個(gè)的 HTML 元素中轨功，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中容达。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表古涧。
層疊次序
當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢花盐？
一般而言羡滑，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中菇爪，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。
1柒昏、瀏覽器缺省設(shè)置
2凳宙、外部樣式表
3、內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
4昙楚、內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
因此近速，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標(biāo)簽中的樣式聲明堪旧，外部樣式表中的樣式聲明削葱，或者瀏覽器中的樣式聲明（缺省值）。
二淳梦、CSS的基礎(chǔ)語(yǔ)法
1析砸、導(dǎo)入樣式表：
當(dāng)想要將樣式運(yùn)用到整個(gè)網(wǎng)站而不是單張頁(yè)面時(shí)，管理樣式的更好的方法是將它們從網(wǎng)頁(yè)中分離出來(lái)爆袍，放到稱(chēng)作樣式表的獨(dú)立文件中首繁，以便在需要時(shí)導(dǎo)入。
(1).使用CSS的@immport指令導(dǎo)入樣式表：
<style> @import url('styles.css');</style>
因?yàn)榇嬖诩虞d順序的問(wèn)題以及兼容問(wèn)題陨囊，所以不推薦使用
(2).從HTML內(nèi)部導(dǎo)入樣式表：
<link rel='stylesheet' type='text/css' href='styles.cdd' />
(3).嵌入樣式:
<div style='font-style:italic; color:blue;'>Hello there</div>
2弦疮、CSS規(guī)則：
CSS規(guī)則是指一條或一系列語(yǔ)句，用以告訴網(wǎng)頁(yè)瀏覽器怎樣在頁(yè)面上渲染某個(gè)或某些元素蜘醋。CSS規(guī)則中的每條語(yǔ)句以選擇器開(kāi)始胁塞，指定施加規(guī)則的元素。規(guī)則中所有要修改的屬性必須在選擇器后面的"{"和"}"內(nèi)出現(xiàn)压语。
例如啸罢，要將一號(hào)標(biāo)題改為紅色并放大24%：
h1 { font-size:240%; color:red; }
三 、樣式的創(chuàng)建(內(nèi)部樣式 外部樣式 內(nèi)聯(lián)樣式)
1胎食、內(nèi)部樣式
寫(xiě)在head標(biāo)簽里扰才，title標(biāo)簽下
<!DOCTYPE html>
????<html lang="en">
????????<head>
????????<meta charset="UTF-8">
????????<title>小五的技術(shù)blog</title>
????????<!-- 這里是css內(nèi)部樣式 -->
????????<style type="text/css">
????????????body{ background: red; }
????????</style>
????</head>
<body>
</body>
</html>
2、外部樣式
在head標(biāo)簽里厕怜，title標(biāo)簽下衩匣，引入外部css樣式文件??
<!DOCTYPE html>
<html lang="en">
????<head>? ? ? ?
?????????<meta charset="UTF-8">????????
????????<title>小五的技術(shù)blog</title>???????
?????????<!-- 這里是css引入外部樣式 -->? ? ? ?
????????<link rel="stylesheet" type="text/css" href="index.css">?
????</head>
????<body>
????</body>
</html>
3、內(nèi)聯(lián)樣式
直接在html的標(biāo)簽里寫(xiě)css樣式
<!DOCTYPE html>
<html lang="en">
????<head>? ? ? ?
?????????<meta charset="UTF-8">????????
????????<title>小五的技術(shù)blog</title>? ? ? ?
????</head>
? ??<!-- 這里是css內(nèi)聯(lián)樣式 -->
????<body style="background: red">????
????</body>
</html>
四粥航、CSS選擇器
用于在頁(yè)面上訪問(wèn)一個(gè)或多個(gè)元素的方法稱(chēng)為選擇舵揭，在CSS規(guī)則中的這一部分被稱(chēng)為選擇器。
(1) 類(lèi)型選擇器：類(lèi)型選擇器為HTML元素指定 類(lèi)型躁锡，像<p>、<div>等：
p { text-align:justify; }
(2) 后代選擇器：允許將樣式施加在那些包含在其他元素的元素之上：
p b { color:red; }
(3) 子選擇器：與后代選擇器類(lèi)似置侍，但具有更具有強(qiáng)制性映之，僅選擇那些作為其他元素的直接子元素：
p > b { color:red; }
(4) 相鄰選擇器：對(duì)應(yīng)于同一級(jí)上前后相鄰的元素拦焚，在它們之間不存在別的元素，但可以有文本：
i + b { color:red; }
(5) id選擇器：如果給元素設(shè)置一個(gè)id(例如杠输，id='mydiv')赎败，就可以使用id直接從CSS訪問(wèn)它：
#mydiv { font-style:italic; }
(6) 類(lèi)選擇器：當(dāng)在一個(gè)頁(yè)面中有許多元素要使用相同樣式時(shí)，可以賦予它們相同的類(lèi)名(例如蠢甲，class='myclass')僵刮，然后創(chuàng)建一個(gè)規(guī)則來(lái)一次性改變所有這些元素：
.myclass { margin-left:10px; }
此外，還可以通過(guò)明確元素類(lèi)型的方式來(lái)縮小類(lèi)的范圍鹦牛。例如搞糕，創(chuàng)建僅對(duì)使用main類(lèi)的段落起作用的規(guī)則：
p.main { text-indent:30px; }
(7) 屬性選擇器：許多HTML標(biāo)記支持屬性，使用這種選擇器可以避免使用ID和類(lèi)引用屬性曼追。例如窍仰，將屬性為type="submit"的所有元素設(shè)置為100像素：
[ type="submit" ] { width:100px; }
注：由'#'和'.'開(kāi)頭的id選擇器和類(lèi)選擇器，可以視為屬性選擇器的簡(jiǎn)寫(xiě)礼殊，不過(guò)它們擁有更高的優(yōu)先級(jí)驹吮。
(8) 通用選擇器：“*”通配符或通用選擇器可以匹配任何元素，“*”不會(huì)自身發(fā)揮作用猪勇，但是當(dāng)它作為一條復(fù)合規(guī)則的一部分時(shí)卻十分強(qiáng)大蔗喂。例如耕姊，下面的語(yǔ)句只對(duì)所有段落中ID為boxout的元素的非直接子元素起作用：
#boxout * p { border:1px solid green; }
?(9) 分組選擇:CSS可以同時(shí)將一個(gè)規(guī)則施加于用逗號(hào)分隔的多個(gè)元素、類(lèi)或其他類(lèi)型的選擇器上：
p, #idname, .classname { border-bottom:1px dotted orange }
4族沃、<div>和<span>的區(qū)別
<div>和<span>都是容器類(lèi)型，不過(guò)有一些不同的性質(zhì)近忙。默認(rèn)情況下竭业，<div>元素具有無(wú)限的寬度，而<span>元素只有它所包含的文本的寬度及舍。?
5未辆、CSS的單位
PX
px像素（Pixel）。相對(duì)長(zhǎng)度單位锯玛。像素px是相對(duì)于顯示器屏幕分辨率而言的咐柜。
PX特點(diǎn)
1. IE無(wú)法調(diào)整那些使用px作為單位的字體大小攘残；
2. 國(guó)外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位拙友；
3. Firefox能夠調(diào)整px和em，rem歼郭，但是96%以上的中國(guó)網(wǎng)民使用IE瀏覽器(或內(nèi)核)遗契。
EM
em是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸病曾。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置牍蜂，則相對(duì)于瀏覽器的默認(rèn)字體尺寸漾根。
EM特點(diǎn)
1. em的值并不是固定的；
2. em會(huì)繼承父級(jí)元素的字體大小鲫竞。
注意：任意瀏覽器的默認(rèn)字體高都是16px辐怕。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em从绘。為了簡(jiǎn)化font-size的換算寄疏，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說(shuō)只需要將你的原來(lái)的px數(shù)值除以10僵井，然后換上em作為單位就行了陕截。
所以我們?cè)趯?xiě)CSS的時(shí)候，需要注意兩點(diǎn)：
1. body選擇器中聲明Font-size=62.5%驹沿；
2. 將你的原來(lái)的px數(shù)值除以10艘策，然后換上em作為單位；
3. 重新計(jì)算那些被放大的字體的em數(shù)值渊季。避免字體大小的重復(fù)聲明朋蔫。
也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說(shuō)你在#content中聲明了字體大小為1.2em却汉，那么在聲明p的字體大小時(shí)就只能是1em驯妄，而不是1.2em, 因?yàn)榇薳m非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px合砂。
REM
rem是CSS3新增的一個(gè)相對(duì)單位（root em青扔，根em），這個(gè)單位引起了廣泛關(guān)注翩伪。這個(gè)單位與em有什么區(qū)別呢微猖？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小缘屹，但相對(duì)的只是HTML根元素凛剥。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小轻姿，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)犁珠。目前，除了IE8及更早版本外互亮，所有瀏覽器均已支持rem犁享。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單豹休，就是多寫(xiě)一個(gè)絕對(duì)單位的聲明炊昆。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。下面就是一個(gè)例子：
p {font-size:14px; font-size:.875rem;}
注意：?選擇使用什么字體單位主要由你的項(xiàng)目來(lái)決定，如果你的用戶群都使用最新版的瀏覽器窑眯，那推薦使用rem屏积，如果要考慮兼容性，那就使用px,或者兩者同時(shí)使用磅甩。
px 與 rem 的選擇？
對(duì)于只需要適配少部分手機(jī)設(shè)備姥卢，且分辨率對(duì)頁(yè)面影響不大的卷要，使用px即可 。
對(duì)于需要適配各種移動(dòng)設(shè)備独榴，使用rem僧叉，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備。
6棺榔、CSS字體和排版：
可以用CSS設(shè)置的四種主要的字體屬性：family(字體族)瓶堕、style(樣式)、size(大小)和weight(粗細(xì))症歇。
1.字體族：指定要使用的字體
p { font-family:Verdana, Arial, Helvetica, ans-serif, "Times New Roman"; }
注：在網(wǎng)頁(yè)上使用最安全的字體是：Arial郎笆、Helvetica、Times New Roman忘晤、Times宛蚓、Courier New和Courier，因?yàn)閹缀跛袨g覽器和操作系統(tǒng)都支持它們设塔。
2.字體樣式：通過(guò)這個(gè)屬性凄吏，可以選擇正常(normal)、斜體(italic)和傾斜(oblique)(一種類(lèi)似斜體的效果闰蛔，通常用于sans-serif字體)顯示字體痕钢。
.normal { font-style:normal; }
.italic { font-style:italic; }oblique {font-style:oblique; }
3.字體大小：利用前面的度量單位序六，可以設(shè)置字體的固定大小或相對(duì)尺寸
p { font-size:14pt; }
h3 { font-size:240%; }
4.字體粗細(xì)：制定字體的粗細(xì)任连，一般使用的主要是normal和bold這兩個(gè)值
.bold { font-weight:bold; }
?此外，還可以通過(guò)改變文本的修飾难咕、間距和對(duì)齊方式等來(lái)進(jìn)一步修改文本的顯示樣式课梳。
1.文本修飾：通過(guò) text-decoration (文本修飾)屬性，可以為文本設(shè)置下劃線余佃、刪除線暮刃、上劃線、閃爍等效果爆土。
2.設(shè)置間距：通過(guò) line-height (行高)屬性改變行距椭懊、word-spacing(字間距)和 letter-spacing(字符間距)屬性改變單詞和字符間的距離。
3.對(duì)齊方式：通過(guò)使用 text-align 屬性可設(shè)置文本的對(duì)齊方式，CSS可用的文本對(duì)齊方式有四種：左對(duì)齊(left)氧猬、右對(duì)齊(right）背犯、居中(center)和兩端對(duì)齊(justify)。
4.文本轉(zhuǎn)換：通過(guò)使用 text-transform 屬性進(jìn)行文本轉(zhuǎn)換盅抚，有四種屬性來(lái)轉(zhuǎn)換文本：無(wú)漠魏、首寫(xiě)字母大寫(xiě)、大寫(xiě)和小寫(xiě)妄均。
5.文本縮進(jìn)：通過(guò)使用 text-indent 屬性可以將一段文本的首行縮進(jìn)給定的大小柱锹。
七、CSS顏色
?使用color和backgrounnd-color屬性可以為文本和對(duì)象設(shè)置前景色和背景色丰包〗可以用顏色的名稱(chēng)、十六進(jìn)制的RGB三原色和CSS的rgb函數(shù)設(shè)置顏色邑彪。
1.使用顏色名稱(chēng)：W3C標(biāo)準(zhǔn)化組織定義的標(biāo)準(zhǔn)的16中顏色的名稱(chēng)分別是：aqua(水藍(lán))瞧毙、black(黑)、blue(藍(lán))寄症、fuchsia(紫紅)宙彪、gray(灰)、green(綠)瘸爽、lime(綠黃)您访、maroon(醬紫)、navy(深藍(lán))剪决、olive(橄欖綠)灵汪、ourple(紫)、red(紅)柑潦、silver(銀)享言、teal(青)、white(白)渗鬼、和yellow(黃)
2.使用十六進(jìn)制RGB：#ff0000览露、#00ff00、#0000ff等
3.使用rgb函數(shù)：rgb(0,255,255)
五譬胎、CSS選擇符的權(quán)重
css中用四位數(shù)字表示權(quán)重差牛，權(quán)重的表達(dá)方式如：0，0堰乔，0偏化，0
① 標(biāo)簽選擇符的權(quán)重為0001
② class選擇符的權(quán)重為0010
③ id選擇符的權(quán)重為0100
④ 屬性選擇符的權(quán)重為0010
⑤ 偽類(lèi)選擇符的權(quán)重為0010
⑥ 偽元素選擇符的權(quán)重為0001
⑦ 包含選擇符的權(quán)重：為包含選擇符的權(quán)中之和 內(nèi)聯(lián)樣式的權(quán)重為1000
擴(kuò)展知識(shí)點(diǎn)：選擇器特殊性是如何計(jì)算的？
通常镐侯，我們使用四個(gè)以逗號(hào)分隔的數(shù)字來(lái)表示特殊性侦讨，比如:
1. 每個(gè)元素或偽元素選擇器貢獻(xiàn)特殊性為 0，0，0韵卤，1
2. 每個(gè)類(lèi)（class）骗污、偽類(lèi)或者屬性選擇器的特殊性為 0，0沈条，1需忿，0
3. 每個(gè)ID選擇器的特殊性為 0，1蜡歹，0贴谎，0
4. 結(jié)合符和通配符的對(duì)特殊性沒(méi)有貢獻(xiàn)
版權(quán)聲明：本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議季稳，轉(zhuǎn)載請(qǐng)附上原文出處鏈接和本聲明。
