CSS定義：

CSS 指層疊樣式表 (Cascading Style Sheets)

CSS通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表）足陨，主要用于設(shè)置HTML頁(yè)面中的文本內(nèi)容（字體瓢省、大小丁逝、對(duì)齊方式等）椰于、圖片的外形（寬高惊搏、邊框樣式贮乳、邊距等）以及版面的布局等外觀顯示樣式忧换。

CSS以HTML為基礎(chǔ)，提供了豐富的功能向拆，如字體亚茬、顏色、背景的控制及整體排版等浓恳，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式刹缝。

CSS就是控制頁(yè)面布局和樣式。

CSS的版本：到了3.0版本颈将。（目前還是用2.1版本）

HTML和CSS的關(guān)系：

HTML結(jié)構(gòu)層負(fù)責(zé)從語(yǔ)義的角度搭建頁(yè)面結(jié)構(gòu)梢夯。（HTML：頁(yè)面結(jié)構(gòu)）

CSS樣式層負(fù)責(zé)從審美的角度美化頁(yè)面。（CSS：頁(yè)面樣式表現(xiàn)）

JavaScript行為層負(fù)責(zé)從交互的角度提升用戶體驗(yàn)晴圾。（JavaScript：交互行為）

引入CSS的方式：

所有的標(biāo)簽都有一個(gè)默認(rèn)樣式厨疙，我們稱為瀏覽器樣式，或者默認(rèn)樣式疑务。

缺省樣式（瀏覽器樣式）：

可以通過(guò)設(shè)置修改瀏覽器的樣式 沾凄；?所有的標(biāo)簽都有默認(rèn)的樣式：h1,h2,p,div,span,ul等。

缺省樣式（瀏覽器樣式）的優(yōu)先級(jí)是最低的知允。

所有級(jí)的標(biāo)簽都有自己的默認(rèn)的樣式（但是可以通過(guò)設(shè)置修改瀏覽器的樣式撒蟀，比如字體的大小……）

補(bǔ)充快捷鍵：看上圖。

行內(nèi)樣式：

行內(nèi)樣式温鸽，是通過(guò)在標(biāo)簽中設(shè)置style屬性來(lái)達(dá)到實(shí)現(xiàn)控制標(biāo)簽的樣式的效果保屯。（下圖）{red后面少了個(gè)；}

style="color: red" ?是設(shè)置字體變紅色 ?（color為屬性名涤垫，red為屬性值）

Style屬性中姑尺，可以設(shè)置多條的CSS樣式。（下圖）

此處是兩個(gè)CSS樣式

嵌入樣式：

嵌入樣式又叫：內(nèi)嵌樣式蝠猬、內(nèi)部樣式切蟋。

在head標(biāo)簽中，嵌套一個(gè)style標(biāo)簽榆芦，在style標(biāo)簽中可以書寫CSS的樣式內(nèi)容柄粹。

Style標(biāo)簽有一個(gè)屬性type屬性，默認(rèn)值就是text/css,可以省略匆绣。

外部樣式（外聯(lián)樣式）：

通過(guò)link標(biāo)簽引入css樣式文件驻右。

type屬性：只有一個(gè)選項(xiàng)，“text/css"崎淳，指定當(dāng)前為css文本文件堪夭。（）

rel：指定當(dāng)前HTML文件與CSS文件的關(guān)系是樣式表。href：指定外聯(lián)樣式表的路徑。

導(dǎo)入樣式：@import森爽，導(dǎo)入樣式會(huì)導(dǎo)致礼华，css文件不能并行下載。不推薦使用拗秘。

導(dǎo)入樣式的書寫必須在所有的css規(guī)則書寫之前。

接著看下圖變化

這里的main.css文件我理解成標(biāo)準(zhǔn)件祈惶，可重復(fù)使用

導(dǎo)入樣式：

@import雕旨，導(dǎo)入樣式會(huì)導(dǎo)致，css文件不能并行下載捧请。不推薦使用凡涩。

導(dǎo)入樣式的書寫必須在所有的css規(guī)則書寫之前。

main.css文件用上圖的

CSS語(yǔ)法：

選擇符疹蛉、屬性聲明活箕、括號(hào)。

換行不敏感可款、空格不敏感

這個(gè)是常見的CSS案例

CSS簡(jiǎn)單屬性：

width：設(shè)置寬度育韩，單位px像素。

height：高度闺鲸。

color：前景色筋讨，也就是文字的顏色。

background-color：背景色摸恍。

font-size:字體的大小悉罕。

CSS案例：

CSS注釋：

CSS的注釋語(yǔ)法： ? /*注釋的內(nèi)容*/

注釋不能嵌套，比如：? /*注釋的*/內(nèi)容*/? （中間多了*/立镶，是錯(cuò)誤的）

多行注釋：

/*

放多行的注釋內(nèi)容1

放多行的注釋內(nèi)容2

*/

一般用于模塊的 注釋：

文件頭的注釋：

例如：

CSS選擇器：

標(biāo)簽選擇器：

標(biāo)簽選擇器就是選擇當(dāng)前頁(yè)面中相同名字的標(biāo)簽

可以單獨(dú)設(shè)置頁(yè)面上所有P標(biāo)簽壁袄、h1標(biāo)簽、span標(biāo)簽媚媒，沒個(gè)設(shè)置度可以不一樣

通配符選擇器

通配符選擇器用“*”號(hào)表示嗜逻，他是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素缭召。

基本語(yǔ)法格式： ?*{屬性1:屬性值1;屬性2:屬性值2; 屬性3:屬性值3;}

使用通配符選擇器定義CSS樣式变泄，清除所有HTML標(biāo)記的默認(rèn)邊距。

通配符的穿透力很強(qiáng)恼琼，優(yōu)先級(jí)高于繼承的樣式妨蛹，會(huì)覆蓋繼承的樣式。一般不用晴竞。

ID選擇器

HTML標(biāo)簽中ID的屬性值在一個(gè)頁(yè)面中必須是唯一的蛙卤。

id一般用于css的選擇器和js的鉤子。

ID選擇器是可以幫助我們選擇當(dāng)前頁(yè)面中唯一id值的標(biāo)簽，也就是根據(jù)標(biāo)簽的id屬性值進(jìn)行選取設(shè)置樣式颤难。

id選擇器使用“#”進(jìn)行標(biāo)識(shí)神年，后面緊跟id名。

語(yǔ)法： ?#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

類選擇器：

類選擇器就是選取頁(yè)面中所有標(biāo)簽的class屬性值相同的一類標(biāo)簽行嗤。

類選擇器的符號(hào)是： ?.? (點(diǎn))

標(biāo)簽可以包含多個(gè)類選擇器已日，在class標(biāo)簽中用空格隔開。

P標(biāo)簽中加多一個(gè)demo

ID選擇器和class選擇器的區(qū)別

相同的Class屬性值栅屏，可以在HTML中出現(xiàn)多次飘千。ID屬性值在頁(yè)面中只能出現(xiàn)一次。

一個(gè)class的屬性可以有多個(gè)值栈雳，也就是說(shuō)一個(gè)標(biāo)簽可以有多個(gè)類护奈。

盡量使用類選擇器。使用ID時(shí)候情況：當(dāng)確實(shí)能唯一確定當(dāng)前頁(yè)面中標(biāo)簽只會(huì)出現(xiàn)一次哥纫，這時(shí)候可以使用ID選擇器霉旗。

如果不能保證相同的作用的標(biāo)簽在頁(yè)面中只出現(xiàn)一次，那么這時(shí)候就選擇使用類選擇器蛀骇。

選擇器綜合案例

CSS復(fù)合選擇器

復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器厌秒，通過(guò)不同的方式組合而成的。

標(biāo)簽指定式選擇器（即....又....）

標(biāo)簽指定式選擇器又稱交集選擇器擅憔，由兩個(gè)選擇器構(gòu)成简僧，其中第一個(gè)為標(biāo)記選擇器，第二個(gè)為class選擇器或id選擇器雕欺，兩個(gè)選擇器之間不能有空格岛马，如h3.special或p#one。

比如：h3.demo {} ,需要同時(shí)滿足既是標(biāo)簽h3又擁有demo類才能被選擇到屠列。

注意：使用非常少啦逆，一般不用。要么直接用id選擇器笛洛，要么直接用類選擇器夏志。

指定h3

后代選擇器：

后代選擇器用來(lái)選擇元素或元素組的后代，其寫法就是把外層標(biāo)記寫在前面苛让，內(nèi)層標(biāo)記寫在后面沟蔑，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)狱杰，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代瘦材。

注意：后代選擇器可以從左向右理解。但是真正瀏覽器在執(zhí)行的時(shí)候是從右向左進(jìn)行執(zhí)行過(guò)濾的仿畸。（工作原理的注釋）

并集選擇器：

并集選擇器是各個(gè)選擇器通過(guò)逗號(hào)連接而成的食棕，任何形式的選擇器（包括標(biāo)記選擇器眶拉、class類選擇器id選擇器等），都可以作為并集選擇器的一部分朝刊。如果某些選擇器定義的樣式完全相同备韧，或部分相同叠艳，就可以利用并集選擇器為它們定義相同的CSS樣式。

h1, h2, ?p 標(biāo)簽可以并在一起設(shè)置

子元素選擇器：

子代選擇器拒课，是讓CSS選擇器智能選擇兒子輩的元素早像。

尖括號(hào)和選擇器之間可以有空格也可以沒有卢鹦，沒有限制冀自。

建議:選擇器和尖括號(hào)間有空格。

紅圈中的兩個(gè) p 標(biāo)簽可以理解成是 div 兒子（div > p）

屬性選擇器：

屬性選擇器就是根據(jù)html標(biāo)簽的屬性進(jìn)行過(guò)濾選擇。

CSS偽類 偽元素：

狀態(tài)是動(dòng)態(tài)變化的，當(dāng)一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)樣式宋雏，當(dāng)狀態(tài)改變時(shí)，又失去這個(gè)樣式蚪燕。

它的功能和class有些類似，但它是基于文檔之外的抽象馆纳，所以叫偽類汹桦。

CSS偽類：

:link ? ? ? ?偽類將應(yīng)用于未被訪問過(guò)的鏈接鲁驶。IE6不兼容舞骆，解決此問題钥弯，直接使用a標(biāo)簽督禽。

:hover ? ? ? ?偽類將應(yīng)用于有鼠標(biāo)指針懸停于其上的元素赂蠢。在IE6只能應(yīng)用于a連接，IE7+所有元素都兼容第岖。

:active ? ? ? ?偽類將應(yīng)用于被激活的元素郊酒，如被點(diǎn)擊的鏈接遇绞、被按下的按鈕等。

:visited ? ? ? ?偽類將應(yīng)用于已經(jīng)被訪問過(guò)的鏈接

:focus ? ? ? ?偽類將應(yīng)用于擁有鍵盤輸入焦點(diǎn)的元素燎窘。

順序問題：LoVeHAte原則摹闽。看下圖（順序不要亂了）

頁(yè)面效果需要查看電腦文件： 11 Pseudo class case.html

偽元素選擇器

偽元素?是控制內(nèi)容褐健。

:first-line偽元素付鹿。

:first-letter偽元素。

注釋：以上兩個(gè)偽元素只能用于塊級(jí)元素蚜迅。

:first-child偽元素舵匾，選擇屬于第一個(gè)子元素的元素。

例如：span:first-child{ } ?（選擇屬于第一個(gè)子元素的所有span標(biāo)簽谁不。）

:before與:after偽元素坐梯，可以設(shè)置元素之前后之后的內(nèi)容，并且配合content設(shè)置相關(guān)內(nèi)容刹帕。比如：#demo:after,#demo:before{content:"--";display:block;}

重點(diǎn)吵血，圈起來(lái)，會(huì)考

下面兩圖有不同效果：

CSS的層疊性:

CSS的層疊性轩拨，也就是說(shuō)后來(lái)設(shè)置的樣式會(huì)層疊（覆蓋）之前的樣式践瓷，層疊性的前提是CSS的選擇器的優(yōu)先級(jí)相同院喜。

例如亡蓉，當(dāng)使用內(nèi)嵌式CSS樣式表定義標(biāo)記字號(hào)大小為12像素，鏈入式定義標(biāo)記顏色為紅色喷舀，那么段落文本將顯示為12像素紅色砍濒，即這兩種樣式產(chǎn)生了疊加。

效果找文件：? 14 Lamination.html ?（可以留下要的顏色層硫麻，把其他層顏色設(shè)置注釋掉爸邢，進(jìn)行查看）

?CSS繼承性：

所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)記會(huì)繼承父標(biāo)記的某些樣式（子容器的樣式會(huì)繼承父容器的樣式）拿愧，如文本顏色和字號(hào)杠河。想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可浇辜。

恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼券敌，降低CSS樣式的復(fù)雜性。但是柳洋，如果在網(wǎng)頁(yè)中所有的元素都大量繼承樣式待诅，那么判斷樣式的來(lái)源就會(huì)很困難，所以對(duì)于字體熊镣、文本屬性等網(wǎng)頁(yè)中通用的樣式可以使用繼承卑雁。例如募书，字體、字號(hào)测蹲、顏色莹捡、行距等可以在body元素中統(tǒng)一設(shè)置，然后通過(guò)繼承影響文檔中所有文本弛房。

所有字相關(guān)的都可以繼承道盏，比如：color、text-系列文捶、font-系列荷逞、line-系列、cursor

并不是所有的CSS屬性都可以繼承粹排，例如种远，下面的屬性就不具有繼承性：邊框、外邊距顽耳、內(nèi)邊距坠敷、背景、定位射富、元素寬高屬性膝迎。

所有盒子相關(guān)的屬性都不能繼承。

當(dāng)我給div標(biāo)簽設(shè)置樣式的時(shí)候胰耗，作為孩子的P標(biāo)簽中的字體也受父容器中設(shè)置的字體樣式影響限次。

CSS的特殊性（優(yōu)先級(jí)）：

CSS的特殊性，定義CSS樣式時(shí)柴灯，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上卖漫，那么誰(shuí)的優(yōu)先級(jí)更高呢，這就是CSS的特殊性赠群。

內(nèi)聯(lián)樣式最大羊始，內(nèi)聯(lián)樣式的優(yōu)先級(jí)最高。> ? ? ID選擇器的優(yōu)先級(jí)查描，僅次于內(nèi)聯(lián)樣式突委。> ? ?類選擇器優(yōu)先級(jí)低于ID選擇器。> ? ?標(biāo)簽選擇器低于類選擇器冬三。

256個(gè)標(biāo)簽選擇器相加大于 一個(gè)類選擇器 匀油， ?256個(gè)類選擇器相加大于 一個(gè)ID選擇器。

id選擇器比類選擇器優(yōu)先級(jí)高长豁，

在考慮權(quán)重時(shí)钧唐，還需要注意一些特殊的情況，具體如下：

繼承樣式的權(quán)重為0匠襟。即在嵌套結(jié)構(gòu)中钝侠，不管父元素樣式的權(quán)重多大该园，被子元素繼承時(shí)，他的權(quán)重都為0帅韧，也就是說(shuō)子元素定義的樣式會(huì)覆蓋繼承來(lái)的樣式里初。

行內(nèi)樣式優(yōu)先。應(yīng)用style屬性的元素忽舟，其行內(nèi)樣式的權(quán)重非常高双妨，可以理解為遠(yuǎn)大于100《Ｔ模總之刁品，他擁有比上面提高的選擇器都大的優(yōu)先級(jí)。

權(quán)重相同時(shí)浩姥，CSS遵循就近原則挑随。也就是說(shuō)靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說(shuō)排在最后的樣式優(yōu)先級(jí)最大勒叠。

所有都相同時(shí)兜挨，聲明靠后的優(yōu)先級(jí)大。

CSS定義了一個(gè)!important命令眯分，該命令被賦予最大的優(yōu)先級(jí)拌汇。也就是說(shuō)不管權(quán)重如何以及樣式位置的遠(yuǎn)近，!important都具有最大優(yōu)先級(jí)弊决。

綜述：行內(nèi)樣式 > 頁(yè)內(nèi)樣式 > 外部引用樣式 >瀏覽器默認(rèn)樣式噪舀。

?important > 內(nèi)聯(lián) >ID > 偽類|類 | 屬性選擇> 標(biāo)簽> 偽對(duì)象 >通配符 > 繼承。

結(jié)論一：繼承的樣式要大于默認(rèn)的樣式

結(jié)論2： 通配符選擇器的樣式的優(yōu)先級(jí)比繼承樣式的優(yōu)先級(jí)要高

結(jié)論三：標(biāo)簽的選擇器的優(yōu)先級(jí)要高于通配符選擇器的優(yōu)先級(jí)

結(jié)論四：類選擇器的樣式的優(yōu)先級(jí)要大于標(biāo)簽選擇器的樣式的優(yōu)先級(jí)

結(jié)論五：id選擇器的優(yōu)先級(jí)高于類選擇器的優(yōu)先級(jí)

結(jié)論六： 行內(nèi)樣式的選擇器的優(yōu)先級(jí)大于id選擇器的優(yōu)先級(jí)

復(fù)合選擇器的樣式優(yōu)先級(jí)核算：

代碼文件找回：17 CSS Priority case.html