基礎(chǔ)教程
層疊次序
當(dāng)同一個(gè)HTML元素被不止一個(gè)樣式定義時(shí)，使用優(yōu)先級(jí)如下所示（1優(yōu)先級(jí)最高）：
1.內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）
2.內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）
3.外部樣式表
4.瀏覽器缺省設(shè)置
基礎(chǔ)語(yǔ)法
由兩個(gè)主要部分構(gòu)成：選擇器，一條或多條聲明
selector {property: value; property: value; ...}
高級(jí)語(yǔ)法
1.選擇器的分組
h1,h2,h3,h4,h5,h6 {
color: green;
}
這樣被分組的選擇器可以分享相同的聲明疙赠。
2.繼承
body {
font-family: Verdana, sans-serif;
}
通過(guò)繼承馋贤，子元素(如h, p, td, ul, ol)均將繼承屬性碉怔，但并不是所有的瀏覽器都支持僧凰。
在繼承中通過(guò)自定義子元素屬性可擺脫父元素的規(guī)則筷畦。
派生選擇器
通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式
li strong {
font-style: italic;
font-weight: normal;
}
則只有l(wèi)i中的strong元素會(huì)有定義的屬性窒百。
id選擇器 id
1.id選擇器
為標(biāo)有特定id的HTML元素制定特定的樣式黍判，id選擇器以 # 來(lái)定義。
#red {color:red;}
#green {color:green;}
id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次
2.id選擇器和派生選擇器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的樣式只會(huì)應(yīng)用于出現(xiàn)在 id 是 sidebar 的元素內(nèi)的段落篙梢，這個(gè)元素很可能是 div 或者是表格單元顷帖。
不可以在內(nèi)聯(lián)元素 <span> 中嵌入 <p>
類(lèi)選擇器 class
類(lèi)選擇器以一個(gè)點(diǎn)號(hào)顯示
.center {text-align: center}
和 id 一樣，class 也可被用作派生選擇器渤滞。
.fancy td {
color: #f60;
background: #666;
}
元素也可以基于它們的類(lèi)而被選擇：
td.fancy {
color: #f60;
background: #666;
}
屬性選擇器 title
1.屬性選擇器
[title]
{
color:red;
}
2.屬性和值選擇器
[title=W3School]
{
border:5px solid blue;
}
為title="W3School" 的所有元素設(shè)置樣式贬墩。
3.屬性和值選擇器 - 多個(gè)值
[title~=hello] { color:red; }
為包含指定值的 title 屬性的所有元素設(shè)置樣式，適用于由空格分隔的屬性值妄呕。
[lang|=en] { color:red; }
為帶有包含指定值的 lang 屬性的所有元素設(shè)置樣式陶舞，適用于由連字符分隔的屬性值。
創(chuàng)建
1.外部樣式表
當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)趴腋，外部樣式表將是理想的選擇吊说。在使用外部樣式表的情況下，可以通過(guò)改變一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀优炬。每個(gè)頁(yè)面使用 <link> 標(biāo)簽鏈接到樣式表颁井。<link> 標(biāo)簽在（文檔的）頭部。
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
外部樣式表可以在任何文本編輯器中進(jìn)行編輯蠢护。文件不能包含任何的 html 標(biāo)簽雅宾。樣式表應(yīng)該以 .css 擴(kuò)展名進(jìn)行保存。下面是一個(gè)樣式表文件的例子：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
樣式
背景
1.背景色 background-color
p {background-color: gray;}
增加內(nèi)邊距padding使背景色塊往外延伸葵硕。
2.背景圖像 background-image
body {background-image: url(/i/eg_bg_04.gif);}
3.背景重復(fù) backgound-repeat
在頁(yè)面上對(duì)背景圖像進(jìn)行平鋪
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)眉抬，no-repeat 則不允許圖像在任何方向上平鋪。
3.背景定位 background-position
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
為屬性提供值的方法：
- 使用關(guān)鍵字：top懈凹、bottom蜀变、left、right 和 center
- 使用長(zhǎng)度值介评，如 100px 或 5cm
- 用百分?jǐn)?shù)值
4.背景關(guān)聯(lián) background-attachment
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
通過(guò)這個(gè)屬性库北，可以聲明圖像相對(duì)于可視區(qū)是固定的（fixed）爬舰。
文本
改變文本的顏色、字符間距寒瓦，對(duì)齊文本情屹，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)杂腰，等等垃你。
1.縮進(jìn) text-indent
p {text-indent: 5em;}
可以使用負(fù)值
可以使用百分比值
百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素父元素的寬度。換句話說(shuō)喂很，如果將縮進(jìn)值設(shè)置為 20%惜颇，所影響元素的第一行會(huì)縮進(jìn)其父元素寬度的 20%。
可以繼承
2.水平對(duì)齊 text-align
值 left恤筛、right 和 center 會(huì)導(dǎo)致元素中的文本分別左對(duì)齊官还、右對(duì)齊和居中芹橡。
注意：
text-align:center 與 <CENTER> 元素大不相同毒坛，<CENTER> 不僅影響文本，還會(huì)把整個(gè)元素居中林说。text-align 不會(huì)控制元素的對(duì)齊煎殷，而只影響內(nèi)部?jī)?nèi)容。元素本身不會(huì)從一段移到另一端腿箩，只是其中的文本受影響豪直。
3.字間隔 word-spacing
改變字（單詞）之間的標(biāo)準(zhǔn)間隔
接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。如果提供一個(gè)正長(zhǎng)度值珠移，那么字之間的間隔就會(huì)增加弓乙。為 word-spacing 設(shè)置一個(gè)負(fù)值，會(huì)把它拉近钧惧。
4.字母間隔 letter-spacing
與 word-spacing 的區(qū)別在于暇韧，字母間隔修改的是字符或字母之間的間隔。
5.字符轉(zhuǎn)換 text-transform
處理文本的大小寫(xiě)
這個(gè)屬性有 4 個(gè)值：
- none - 對(duì)文本不做任何改動(dòng)
- uppercase - 將文本轉(zhuǎn)換為全大寫(xiě)
- lowercase - 將文本轉(zhuǎn)換為全小寫(xiě)
- capitalize - 只對(duì)每個(gè)單詞的首字母大寫(xiě)
6.文本裝飾 text-decoration
有5個(gè)值：
- none - 關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾
- underline - 對(duì)元素加下劃線
- overline - 會(huì)在文本的頂端畫(huà)一個(gè)上劃線
- line-through - 在文本中間畫(huà)一個(gè)貫穿
- blink - 讓文本閃爍
7.處理空白符 white-space
影響用戶(hù)代理對(duì)源文檔中的空格浓瞪、換行和 tab 字符的處理
- p {white-space: normal;}
使丟掉多余的空白符 - p {white-space: pre;}
空白符不會(huì)被忽略 - p {white-space: nowrap;}
防止元素中的文本換行懈玻，除非使用了一個(gè) br 元素
8.CSS文本屬性
color 設(shè)置文本顏色
direction 設(shè)置文本方向。
line-height | 設(shè)置行高乾颁。
letter-spacing 設(shè)置字符間距涂乌。
text-align 對(duì)齊元素中的文本。
text-decoration 向文本添加修飾英岭。
text-indent 縮進(jìn)元素中文本的首行湾盒。
text-shadow 設(shè)置文本陰影。
text-transform 控制元素中的字母诅妹。
unicode-bidi 設(shè)置文本方向罚勾。
white-space 設(shè)置元素中空白的處理方式。
word-spacing 設(shè)置字間距。
字體
定義文本的字體系列荧库、大小堰塌、加粗、風(fēng)格（如斜體）和變形（如小型大寫(xiě)字母）
CSS 字體系列
- 通用字體系列
Serif, Sans-serif, Monospace, Cursive, Fantasy - 特定字體系列
1.指定字體系列
用font-family定義
2.字體風(fēng)格
用font-style定義
該屬性有三個(gè)值：
- normal - 文本正常顯示
- italic - 文本斜體顯示
- oblique - 文本傾斜顯示
3.字體變形
用font-variant定義
p {font-variant:small-caps;}
設(shè)定小型的大寫(xiě)字母分衫。
4.字體加粗
用font-weight定義
使用 bold 關(guān)鍵字可以將文本設(shè)置為粗體
關(guān)鍵字 100 ~ 900 指定9 級(jí)加粗度场刑。100 對(duì)應(yīng)最細(xì)的字體變形，900 對(duì)應(yīng)最粗的蚪战。數(shù)字 400 等價(jià)于 normal牵现，而 700 等價(jià)于 bold。
5.字體大小
用font-size定義
可以使用 em 單位代替 pixels邀桑，1em 等于當(dāng)前的字體尺寸瞎疼，在設(shè)置字體大小時(shí)，em 的值會(huì)相對(duì)于父元素的字體大小改變壁畸。
鏈接
1.設(shè)置鏈接的樣式
鏈接的四種狀態(tài)：
- a:link - 普通的贼急、未被訪問(wèn)的鏈接
- a:visited - 用戶(hù)已訪問(wèn)的鏈接
- a:hover - 鼠標(biāo)指針位于鏈接的上方
- a:active - 鏈接被點(diǎn)擊的時(shí)刻
a:link {color:#FF0000;} /* 未被訪問(wèn)的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問(wèn)的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標(biāo)指針移動(dòng)到鏈接上 */
a:active {color:#0000FF;} /* 正在被點(diǎn)擊的鏈接 */
當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時(shí)，請(qǐng)按照以下次序規(guī)則：
- a:hover 必須位于 a:link 和 a:visited 之后
- a:active 必須位于 a:hover 之后
2.常見(jiàn)的鏈接樣式
text-decoration用于去掉鏈接中的下劃線捏萍，兩個(gè)值：none, underline太抓。
列表
允許放置、改變列表項(xiàng)標(biāo)志令杈，或者將圖像作為列表項(xiàng)標(biāo)志走敌。
列表類(lèi)型
在一個(gè)無(wú)序列表中，列表項(xiàng)的標(biāo)志 (marker) 是出現(xiàn)在各列表項(xiàng)旁邊的圓點(diǎn)逗噩，通過(guò)下面的聲明把無(wú)序列表中的列表項(xiàng)標(biāo)志設(shè)置為方塊：
ul {list-style-type : square}
空心圓：circle
羅馬數(shù)字：upper-roman
字母：lower-alpha
列表項(xiàng)圖像
ul li {list-style-image : url(xxx.gif)}
列表標(biāo)志位置
ul{list-style-position:inside;}
簡(jiǎn)寫(xiě)列表樣式
將以上屬性合并為一個(gè)：
li {list-style : url(example.gif) square inside}
表格
設(shè)置表格用border屬性
1.表格邊框
為 table掉丽、th 以及 td 設(shè)置藍(lán)色邊框：
table, th, td
{
border: 1px solid blue;
}
具有雙線條邊框是由于 table、th 以及 td 元素都有獨(dú)立的邊框异雁，如果需要把表格顯示為單線條邊框捶障，使用 border-collapse 屬性。
2.折疊邊框
將表格邊框折疊為單一邊框：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
3.表格寬度和高度
用width 和 height 屬性定義表格的寬度和高度片迅。
4.表格文本對(duì)齊
text-align 屬性設(shè)置水平對(duì)齊方式残邀，比如左對(duì)齊、右對(duì)齊或者居中柑蛇。
vertical-align屬性設(shè)置垂直對(duì)齊方式芥挣，比如頂部對(duì)齊、底部對(duì)齊或居中對(duì)齊耻台。
5.表格內(nèi)邊距
用padding屬性空免。
6.表格顏色
用border設(shè)置邊框顏色。
用background-color設(shè)置背景顏色盆耽。
7.設(shè)置標(biāo)題位置
caption
{
caption-side:bottom
}
...
<caption>This is a caption</caption>
輪廓
輪廓（outline）是繪制于元素周?chē)囊粭l線蹋砚，位于邊框邊緣的外圍扼菠，可起到突出元素的作用。
outline 在一個(gè)聲明中設(shè)置所有的輪廓屬性坝咐。
outline-color 設(shè)置輪廓的顏色循榆。
outline-style 設(shè)置輪廓的樣式。
outline-width 設(shè)置輪廓的寬度墨坚。
框模型
框模型概述
- 背景應(yīng)用于由內(nèi)容和內(nèi)邊距秧饮、邊框組成的區(qū)域
- 內(nèi)邊距、邊框和外邊距都是可選的泽篮，默認(rèn)值是零
- width 和 height 指的是內(nèi)容區(qū)域的寬度和高度盗尸。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸帽撑，但是會(huì)增加元素框的總尺寸
- 外邊距可以是負(fù)值泼各，而且在很多情況下都要使用負(fù)值的外邊距
內(nèi)邊距
padding 簡(jiǎn)寫(xiě)屬性。作用是在一個(gè)聲明中設(shè)置元素的所內(nèi)邊距屬性亏拉。
padding-bottom 設(shè)置元素的下內(nèi)邊距扣蜻。
padding-left 設(shè)置元素的左內(nèi)邊距。
padding-right 設(shè)置元素的右內(nèi)邊距专筷。
padding-top 設(shè)置元素的上內(nèi)邊距弱贼。
邊框
1.邊框樣式
border-style定義了 10 個(gè)不同的非 inherit 樣式:
- none 定義無(wú)邊框。
- hidden 與 "none" 相同磷蛹。不過(guò)應(yīng)用于表時(shí)除外，對(duì)于表溪烤，hidden 用于解決邊框沖突味咳。
- dotted 定義點(diǎn)狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線檬嘀。
- dashed 定義虛線槽驶。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。
- solid 定義實(shí)線鸳兽。
- double 定義雙線掂铐。雙線的寬度等于 border-width 的值。
- groove 定義 3D 凹槽邊框揍异。其效果取決于 border-color 的值全陨。
- ridge 定義 3D 壟狀邊框。其效果取決于 border-color 的值衷掷。
- inset 定義 3D inset 邊框辱姨。其效果取決于 border-color 的值。
- outset 定義 3D outset 邊框戚嗅。其效果取決于 border-color 的值雨涛。
- inherit 規(guī)定應(yīng)該從父元素繼承邊框樣式枢舶。
定義單邊樣式：
2.邊框?qū)挾?/h3>
border-width
分別設(shè)置邊框各邊的寬度:
如果希望邊框出現(xiàn)，就必須聲明一個(gè)邊框樣式替久。
3.邊框顏色
border-color
定義單邊顏色：
外邊距
1.margin
2.值復(fù)制
- 如果缺少左外邊距的值凉泄，則使用右外邊距的值。
- 如果缺少下外邊距的值蚯根，則使用上外邊距的值旧困。
- 如果缺少右外邊距的值，則使用上外邊距的值稼锅。
3.單邊外邊距屬性
外邊距合并
外邊距合并指的是吼具，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距矩距。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者拗盒。
定位
文檔流是文檔中可顯示對(duì)象在排列時(shí)所占用的位置。
定位概述
position 屬性
選擇4種不同類(lèi)型的定位锥债，影響元素框生成的方式陡蝇。
- absolute 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位哮肚。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定登夫。
- fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位允趟。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定恼策。
- relative 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位潮剪。因此涣楷，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
static 默認(rèn)值抗碰。沒(méi)有定位绞蹦，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）吐句。 - inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
其他：
-
overflow屬性確定是否顯示滾動(dòng)條等行為：scroll 有滾動(dòng)條；hidden 多出的內(nèi)容被隱藏绩蜻；visible 默認(rèn)值妹孙，會(huì)溢出唆阿。 -
Z-index用于將一個(gè)元素放置于另一元素之后暖夭，默認(rèn)為0，可取1鹃觉，-1专酗。
相對(duì)定位
設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)距離。元素仍然保持其未定位前的形狀盗扇，它原本所占的空間仍保留祷肯。
絕對(duì)定位
絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)沉填，因此不占據(jù)空間。
浮動(dòng)
浮動(dòng)的框可以向左或向右移動(dòng)佑笋，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
由于浮動(dòng)框不在文檔的普通流中翼闹，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
浮動(dòng)
選擇器
通配符選擇器
* {color:red;}
使文檔中的每個(gè)元素都為紅色
多類(lèi)選擇器
若class值包含多個(gè)詞蒋纬，則聲明時(shí)應(yīng)如下所示：
.important.warning {background:silver;}
...
<p class="important warning">
This paragraph is a very important warning.
</p>
通過(guò)把兩個(gè)類(lèi)選擇器鏈接在一起猎荠，僅可以選擇同時(shí)包含這些類(lèi)名的元素（類(lèi)名的順序不限）。
id選擇器
- 用#號(hào)
- id不能重復(fù)
- 不允許有以空格分隔的詞列表
- 大小寫(xiě)敏感
屬性選擇器
把包含標(biāo)題（title）的所有元素變?yōu)榧t色蜀备，可以寫(xiě)作：
[title] {color:red;}
只對(duì)有 href 屬性的錨（a 元素）應(yīng)用樣式：
a[href] {color:red;}
可以根據(jù)多個(gè)屬性進(jìn)行選擇(同時(shí)存在)关摇，只需將屬性選擇器鏈接在一起即可:
a[href][title] {color:red;}
可以根據(jù)具體屬性值選擇
a[] {color: red;}
子串匹配屬性選擇器
- [abc^="def"] 選擇 abc 屬性值以 "def" 開(kāi)頭的所有元素
- [abc$="def"] 選擇 abc 屬性值以 "def" 結(jié)尾的所有元素
- [abc*="def"] 選擇 abc 屬性值中包含子串 "def" 的所有元素
后代選擇器
只對(duì)元素中指定樣式應(yīng)用樣式：
h1 em {color:red;}
...
<h1>This is a <em>important</em> heading</h1>
子元素選擇器
縮小范圍，只選擇某個(gè)元素的子元素
選擇只作為 h1 元素子元素的 strong 元素：
h1 > strong {color:red;}
...
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
會(huì)把第一個(gè) h1 下面的兩個(gè) strong 元素變?yōu)榧t色碾阁，但是第二個(gè) h1 中的 strong 不受影響输虱。
相鄰兄弟選擇器
選擇緊接在另一個(gè)元素后的元素，而且二者有相同的父元素
h1 + p {margin-top:50px;color:red;}
...
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
只會(huì)選擇到第一個(gè)p元素脂凶。
偽類(lèi)
用于向某些選擇器添加特殊的效果
對(duì)超鏈接使用:focus:
input:focus
{
background-color:yellow;
}
...
<input type="submit" value="Submit" />
首個(gè)子對(duì)象:first-child：
li:first-child {text-transform:uppercase;}
...
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
則只會(huì)定義第一個(gè)li的內(nèi)容宪睹。
語(yǔ)言:lang:
q:lang(no)
{
quotes: "~" "~"
}
...
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
則在“段落中的引用”兩邊會(huì)出現(xiàn)~符號(hào)蚕钦。
偽元素
用于向某些選擇器設(shè)置特殊效果
:first-line用于向文本的首行設(shè)置特殊樣式
可應(yīng)用于first-line 偽元素的屬性：font / color / background / word-spacing / letter-spacing / text-decoration / vertical-align / text-transform / line-height / clear
:first-letter用于向文本的首字母設(shè)置特殊樣式
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
可應(yīng)用于 :first-letter 的屬性: font / color / background / margin / padding / border / text-decoration / vertical-align (僅當(dāng) float 為 none 時(shí))/ text-transform / line-height / float / clear
- 偽元素可以與 CSS 類(lèi)配合使用
- 可以結(jié)合多個(gè)偽元素來(lái)使用
:before可以在元素的內(nèi)容前面插入新內(nèi)容
在每個(gè) <h1> 元素前面插入一幅圖片：
h1:before
{
content:url(logo.gif);
}
:after可以在元素的內(nèi)容之后插入新內(nèi)容
在每個(gè) <h1> 元素后面插入一幅圖片：
h1:after
{
content:url(logo.gif);
}
