Cascading Style Sheets (CSS) 是一門(mén)指定文檔該如何呈現(xiàn)給用戶的語(yǔ)言。
為什么要使用CSS
css 幫助我們 將文檔的內(nèi)容和如何展示內(nèi)容的細(xì)節(jié)分離開(kāi)來(lái) ，以便我們能
避免重復(fù)
如您的網(wǎng)站可能有成千上萬(wàn)的頁(yè)面外觀相似。使用CSS，您可以將樣式信息存儲(chǔ)在公共的文件中以供所有的頁(yè)面共用。
更容易維護(hù)
當(dāng)用戶顯示頁(yè)面時(shí)，用戶的瀏覽器將樣式信息和頁(yè)面內(nèi)容一同加載。
為不同的目的使用不同樣式而內(nèi)容相同
當(dāng)用戶打印頁(yè)面時(shí)，您可以提供不同的樣式信息，以便于打印出來(lái)的頁(yè)面更易于閱讀。
CSS 如何工作的
瀏覽器在展現(xiàn)一個(gè)文檔的時(shí)候，必須要把文檔內(nèi)容和相應(yīng)的樣式信息結(jié)合起來(lái)展示。 這個(gè)處理過(guò)程一般分兩個(gè)階段：
- 瀏覽器先將標(biāo)記語(yǔ)言和CSS轉(zhuǎn)換成DOM (文檔對(duì)象模型)結(jié)構(gòu)。 這時(shí)DOM 就代表了電腦內(nèi)存中的相應(yīng)文檔，因?yàn)樗呀?jīng)融合了文檔內(nèi)容和相應(yīng)的樣式表。
- 最后瀏覽器把 DOM的內(nèi)容展示出來(lái)。
層疊和繼承
一個(gè)元素的樣式，可以通過(guò)多種方式來(lái)定義，而多種定義方式之間通過(guò)復(fù)雜的影響關(guān)系決定了元素的最終樣式。這種復(fù)雜既造就了CSS的強(qiáng)大，也導(dǎo)致CSS顯得如此“混亂”而且難以調(diào)試。
對(duì)于層疊來(lái)說(shuō)，共有三種主要的樣式來(lái)源：
瀏覽器對(duì)HTML定義的默認(rèn)樣式。
用戶定義的樣式。
-
開(kāi)發(fā)者定義的樣式，可以有三種形式：
- 定義在外部文件（外鏈樣式）：本教程中案例主要是通過(guò)這種形式定義樣式。
- 在頁(yè)面的頭部定義（內(nèi)聯(lián)樣式）：通過(guò)這種形式定義的樣式只在本頁(yè)面內(nèi)生效。
- 定義在特定的元素身上（行內(nèi)樣式）：這種形式多用于測(cè)試，可維護(hù)性較差。
掌握CSS選擇器的含義和用法
除了標(biāo)簽名稱，你還可以在選擇器中使用屬性值。這樣你就可以更具體的描述你的規(guī)則.
類選擇器
ID 選擇器
-
偽類選擇器
- :link
- :visited
- :active
- :hover
- :focus
- :first-child
- :nth-child
- :nth-last-child
- :nth-of-type
- :first-of-type
- :last-of-type
- :empty
- :target
- :checked
- :enabled
- :disabled
-
基于關(guān)系的選擇器
- A E 元素A的任一后代元素E (后代節(jié)點(diǎn)指A的子節(jié)點(diǎn)，子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類推)
- A > E 元素A的任一子元素E(也就是直系后代)
- E:first-child 任一是其父母結(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)的元素E
- B + E 元素B的任一下一個(gè)兄弟元素E
- B ~ E B元素后面的擁有共同父元素的兄弟元素E
可以通過(guò)添加空白字符和注釋來(lái)提高樣式表的可讀性, 也可以把不同的選擇器放到一組中來(lái)，這樣同一樣式可以應(yīng)用到這一組中。
實(shí)踐并掌握CSS的顏色、字體、背景、邊框、盒模型、簡(jiǎn)單布局等樣式的定義方式
文本樣式
font
p {font: italic 75%/125% "Comic Sans MS", cursive;}
這條規(guī)則定義了字體的幾個(gè)屬性，使整個(gè)段落文本都變成斜體。
字體大小設(shè)置為每個(gè)段落父元素字體大小的3/4，行高設(shè)置為125%（比常規(guī)的間隔稍大一些）。
文本字體設(shè)置為 Comic Sans MS，假如該字體不被瀏覽器支持則使用默認(rèn)字體：cursive。
這條規(guī)則還把bold和small-caps這些效果給去掉了（設(shè)置它們的值為normal）。
特別的：
使用font-style: italic;指定文本為斜體;
使用 font-variant: small-caps;指定文本為小型大寫(xiě)字母;
圖片內(nèi)容
特別的：
可以通過(guò)將content 屬性值設(shè)置為某個(gè)圖片的URL，可以將圖片插到元素的前面或后面。
a.glossary::after {content: " " url("../images/glossary-icon.gif");}
列表
下面的規(guī)則為不同類的列表項(xiàng)指定了不同的標(biāo)記：
li.open {list-style: circle;}
li.closed {list-style: disc;}
特別的：
counter 計(jì)數(shù)器
可以用計(jì)數(shù)器來(lái)計(jì)數(shù)任何元素，不僅是列表元素。比如，在某些文檔中你可能想計(jì)數(shù)標(biāo)題和段落。
要想計(jì)數(shù)，你必須定義一個(gè)計(jì)數(shù)器。
在計(jì)數(shù)開(kāi)始前的某個(gè)元素上，設(shè)置 counter-reset屬性以重置計(jì)數(shù)器。被計(jì)數(shù)元素的父節(jié)點(diǎn)是一個(gè)不錯(cuò)的選擇。當(dāng)然，任何出現(xiàn)在被計(jì)數(shù)元素前面的元素都可以。
設(shè)置每個(gè)需要計(jì)數(shù)的元素的counter-increment 屬性為你的計(jì)數(shù)器名。
通過(guò)為選擇器增加 :before 或 :after 并設(shè)置 content 屬性來(lái)顯示計(jì)數(shù)器。 (如上一節(jié)所示, 內(nèi)容).
在content屬性的值中設(shè)置 counter()，在括號(hào)內(nèi)填上計(jì)數(shù)器的名字?？蛇x的是設(shè)置計(jì)數(shù)器類型。其類型和前面一節(jié) 有序列表 中相同。
正常情況下，顯示計(jì)數(shù)器的元素也會(huì)遞增計(jì)數(shù)器。
h3.numbered {counter-reset: mynum;}
p.numbered:before { content: counter(mynum) ": "; counter-increment: mynum; font-weight: bold;}
}
盒模型
外邊距-邊框-內(nèi)邊距-內(nèi)容
盒模型目前有 border-box content-box 兩種，前者把邊框的寬度也算在 width中，后者則不算
媒體
之前曾經(jīng)遇到定義打印時(shí)候需要隱藏頁(yè)面部分元素的問(wèn)題，這個(gè)時(shí)候才知道 style標(biāo)簽有media 屬性以及CSS的 @media 語(yǔ)法
為了網(wǎng)頁(yè)在被打印的時(shí)候去掉無(wú)用的信息，我們?cè)跇邮奖碇屑右粭l適配規(guī)則，使導(dǎo)航區(qū)域在打印時(shí)是被隱藏起來(lái)的:
@media print { \#nav-area {display: none;} }
一些常見(jiàn)的媒介類型：
- screen 彩色計(jì)算機(jī)顯示
- print 打印（分頁(yè)式媒體）
- projection 投影
- all 所有媒體 (默認(rèn))
