學(xué)習(xí)目標(biāo)
1肃叶、CSS簡(jiǎn)介
2、CSS語(yǔ)法
3十嘿、樣式的創(chuàng)建
4因惭、兩種引入外部樣式表的區(qū)別
5、樣式表的優(yōu)先級(jí)和作用域
6绩衷、CSS選擇器
7蹦魔、選擇器的權(quán)重
8、浮動(dòng)屬性的簡(jiǎn)單應(yīng)用
9咳燕、HTML勿决、CSS注釋
一、CSS簡(jiǎn)介
英文全名：cascading style sheets(百度百科) === cascading style sheet
層疊樣式表,WEB標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言,表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言在網(wǎng)頁(yè)中主要對(duì)網(wǎng)頁(yè)信息的顯示進(jìn)行控制招盲，簡(jiǎn)單說(shuō)就是如何修飾網(wǎng)頁(yè)信息的顯示樣式低缩。
目前推薦遵循的是W3C發(fā)布的CSS3.0.
用來(lái)表現(xiàn)XHTML或者XML等樣式文件的計(jì)算機(jī)語(yǔ)言。
1998年5月21日由w3C正式推出的css2.0
二曹货、CSS語(yǔ)法
CSS語(yǔ)法：選擇符{屬性：屬性值咆繁；屬性：屬性值讳推；}
選擇符表示要定義樣式的對(duì)象，可以是元素本身么介，也可以是一類元素或者制定名稱的元素.
屬性：屬性是指定選擇符所具有的屬性娜遵，它是css的核心，css2共有150多個(gè)屬性
屬性值：屬性值包括法定屬性值及常見(jiàn)的數(shù)值加單位壤短，如25px设拟，或顏色值等。
說(shuō)明：
1）每個(gè)CSS樣式由兩部分組成久脯，即選擇符和聲明纳胧，聲明又分為屬性和屬性值；
2）屬性必須放在花括號(hào)中帘撰，屬性與屬性值用冒號(hào)連接跑慕。
3）每條聲明用分號(hào)結(jié)束。
4）當(dāng)一個(gè)屬性有多個(gè)屬性值的時(shí)候摧找，屬性值與屬性值不分先后順序核行。
5）在書(shū)寫樣式過(guò)程中，空格蹬耘、換行等操作不影響屬性顯示芝雪。
三、樣式的創(chuàng)建(內(nèi)部樣式 外部樣式 內(nèi)聯(lián)樣式)综苔、兩種引入外部樣式表的區(qū)別
A惩系、內(nèi)部樣式
語(yǔ)法：
<style type="text/css">
/css語(yǔ)句/
</style>注：使用style標(biāo)記創(chuàng)建樣式時(shí)，最好將該標(biāo)記寫在<head></head>;
B如筛、外部樣式
*方法一：外部樣式表的創(chuàng)建：
<link rel="stylesheet" type="text/css" href="目標(biāo)文件的路徑及文件名全稱" />
說(shuō)明：
使用link元素導(dǎo)入外部樣式表時(shí)堡牡，需將該元素寫在文檔頭部，即<head>與</head>之間杨刨。
rel（relation）：用于定義文檔關(guān)聯(lián)晤柄，表示關(guān)聯(lián)樣式表；
type：定義文檔類型妖胀；
*方法二：外部樣式表的導(dǎo)入
<style type="text/css">
@import url(目標(biāo)文件的路徑及文件名全稱);
</style>
注：@和import之間沒(méi)有空格 url和小括號(hào)之間也沒(méi)有空格可免；必須結(jié)尾以分號(hào)結(jié)束；
C做粤、內(nèi)聯(lián)樣式 （行間樣式，行內(nèi)樣式捉撮，嵌入式樣式）
語(yǔ)法：<標(biāo)簽 style="屬性：屬性值;屬性:屬性值;"></標(biāo)簽>
四怕品、兩種引入外部樣式表link和import之間的區(qū)別
擴(kuò)展知識(shí)點(diǎn)：link和import導(dǎo)入外部樣式的區(qū)別：
差別1：本質(zhì)的差別：link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式巾遭。
差別2：加載順序的差別：當(dāng)一個(gè)頁(yè)面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候）肉康，link引用的CSS會(huì)同時(shí)被加載闯估，而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開(kāi)始會(huì)沒(méi)有樣式（就是閃爍）吼和，網(wǎng)速慢的時(shí)候還挺明顯涨薪。
差別3：兼容性的差別：@import是CSS2.1提出的，所以老的瀏覽器不支持炫乓，@import只有在IE5以上的才能識(shí)別刚夺，而link標(biāo)簽無(wú)此問(wèn)題。
差別4：使用dom(document object model文檔對(duì)象模型 )控制樣式時(shí)的差別：當(dāng)使用javascript控制dom去改變樣式的時(shí)候末捣，只能使用link標(biāo)簽侠姑，因?yàn)锧import不是dom可以控制的.
五、樣式表的優(yōu)先級(jí)
A箩做、內(nèi)聯(lián)樣式表的優(yōu)先級(jí)別最高
B莽红、內(nèi)部樣式表與外部樣式表的優(yōu)先級(jí)和書(shū)寫的順序有關(guān)，后書(shū)寫的優(yōu)先級(jí)別高邦邦。
六安吁、CSS選擇符（選擇器）
常用的選擇符有十種左右
類型選擇符，id選擇符燃辖，class選擇符鬼店，通配符，群組選擇符
包含選擇符郭赐，偽類選擇符(偽類選擇符CSS中已經(jīng)定義好的選擇器,不能隨便取名)薪韩，偽對(duì)象選擇符(設(shè)置在對(duì)象后發(fā)生的內(nèi)容。用來(lái)和content屬性一起使用 )
1） 元素選擇符/類型選擇符（element選擇器 )
語(yǔ)法：元素名稱{屬性：屬性值捌锭；}
說(shuō)明：
a)元素選擇符就是以文檔語(yǔ)言對(duì)象類型作為選擇符俘陷，即使用結(jié)構(gòu)中元素名稱作為選擇符。例如>body观谦、div拉盾、p,img,em,strong,span......等。
b)所有的頁(yè)面元素都可以作為選擇符;
用法：
1)如果想改變某個(gè)元素得默認(rèn)樣式時(shí)豁状，可以使用類型選擇符捉偏；
（如：改變一個(gè)div、p泻红、h1樣式）
- 當(dāng)統(tǒng)一文檔某個(gè)元素的顯示效果時(shí)夭禽，可以使用類型選擇符
（如：改變文檔所有p段落樣式）
2) id選擇器
語(yǔ)法：#id名{屬性：屬性值;}
說(shuō)明：
A）當(dāng)我們使用id選擇符時(shí)，應(yīng)該為每個(gè)元素定義一個(gè)id屬性
如：<div id="div1"></div>
B）id選擇符的語(yǔ)法格式是“#”加上自定義的id名
如：#box{width:300px; height:300px;}C) 起名時(shí)要取英文名谊路，不能用關(guān)鍵字：(所有的標(biāo)記和屬性都是關(guān)鍵字)
如：head標(biāo)記
D）一個(gè)id名稱只能對(duì)應(yīng)文檔中一個(gè)具體的元素對(duì)象讹躯，因?yàn)閕d只能定義頁(yè)面中某一個(gè)唯一的元素>對(duì)象。
E) 最大的用處：創(chuàng)建網(wǎng)頁(yè)的外圍結(jié)構(gòu)。
3）class選擇器
語(yǔ)法：.class名{屬性：屬性值;}
說(shuō)明：
A）當(dāng)我們使用class選擇符時(shí)潮梯，應(yīng)先為每個(gè)元素定義一個(gè)類名稱
B）class選擇符的語(yǔ)法格式是："如：<div class="top"></div>"
用法：class選擇符更適合定義一類樣式骗灶；
4)*通配符
語(yǔ)法：{屬性：屬性值；}
說(shuō)明：通配選擇符的寫法是“”秉馏，其含義就是所有元素耙旦。
用法：常用來(lái)重置樣式。
5）群組選擇器
語(yǔ)法：選擇符1萝究，選擇符2免都，選擇符3{屬性：屬性值;}
說(shuō)明：當(dāng)有多個(gè)選擇符應(yīng)用相同的樣式時(shí)，可以將選擇符用“糊肤，”分隔的方式琴昆，合并為一組。
6） 包含選擇器
語(yǔ)法：選擇符1 選擇符2{屬性：屬性值;}
說(shuō)明：選擇符1和選擇符2用空格隔開(kāi)馆揉，含義就是選擇符1中包含的所有選擇符2;
用法：當(dāng)我的元素存在父級(jí)元素的時(shí)候业舍，我要改變自己本身的樣式，可以不另加選擇符升酣，直接用包含選擇器的方式解決舷暮。
7） 偽類選擇器(偽類選擇符)
語(yǔ)法 ：
a:link{屬性：屬性值;}超鏈接的初始狀態(tài);
a:visited{屬性：屬性值;}超鏈接被訪問(wèn)后的狀態(tài);
a:hover{屬性：屬性值;}鼠標(biāo)懸停，即鼠標(biāo)劃過(guò)超鏈接時(shí)的狀態(tài);
a:active{屬性：屬性值;}超鏈接被激活時(shí)的狀態(tài)噩茄，即鼠標(biāo)按下時(shí)超鏈接的狀態(tài);
要讓他們遵守一個(gè)愛(ài)恨原則LoVe/HAte,也就是Link--visited--hover--active下面。
說(shuō)明：
A）當(dāng)這4個(gè)超鏈接偽類選擇符聯(lián)合使用時(shí)，應(yīng)注意他們的順序绩聘，正常順序?yàn)椋?br> a:link,a:visited,a:hover,a:active,錯(cuò)誤的順序有時(shí)會(huì)使超鏈接的樣式失效沥割；
B）為了簡(jiǎn)化代碼，可以把偽類選擇符中相同的聲明提出來(lái)放在a選擇符中凿菩；
例如：a{color:red;} a:hover{color:green;} 表示超鏈接的三種狀態(tài)都相同机杜，只有鼠標(biāo)劃過(guò)變顏色。
七衅谷、CSS選擇符的權(quán)重
css中用四位數(shù)字表示權(quán)重椒拗，權(quán)重的表達(dá)方式如：0，0获黔，0蚀苛，0
類型選擇符的權(quán)重為0001
class選擇符的權(quán)重為0010
id選擇符的權(quán)重為0100
子選擇符的權(quán)重為0000
屬性選擇符的權(quán)重為0010
偽類選擇符的權(quán)重為0010
偽元素選擇符的權(quán)重為0010
包含選擇符的權(quán)重：為包含選擇符的權(quán)中之和
內(nèi)聯(lián)樣式的權(quán)重為1000
繼承樣式的權(quán)重為0000
- 當(dāng)不同選擇符的樣式設(shè)置有沖突的時(shí)候，高權(quán)重選擇 符的樣式會(huì)覆蓋低權(quán)重選擇符的樣式玷氏。
例如：b .demo的權(quán)重是1+10=11
.demo的權(quán)重是10
所以經(jīng)常會(huì)發(fā)生.demo的樣式失效
- 相同權(quán)重的選擇符堵未，樣式遵循就近原則：哪個(gè)選擇符最后定義，就采用哪個(gè)選擇符樣式盏触。 （注意：是css樣式中定義該選擇符的先后渗蟹，而不是html中使用先后）
八侦厚、浮動(dòng)屬性的簡(jiǎn)單應(yīng)用
語(yǔ)法：float:none/left/right;
float:定義網(wǎng)頁(yè)中其它文本如何環(huán)繞該元素顯示
浮動(dòng)的目的：就是讓豎著的東西橫著來(lái)
有三個(gè)取值：
left:元素活動(dòng)浮動(dòng)在文本左面
right:元素浮動(dòng)在右面
none:默認(rèn)值，不浮動(dòng)拙徽。
九、頁(yè)面中的注釋
擴(kuò)展知識(shí)點(diǎn)：
Html注釋
css的注釋
/* 我是css的注釋 */
