1. CSS基礎
1) CSS的創建與使用
插入樣式表方法
–a) 外部樣式表
當樣式需要應用於很多頁面時，外部樣式表是理想的選擇。
格式：
<link rel="stylesheet" type="text/css" href="test.css">–b) 內部樣式表
當單個文檔需要特殊的樣式是，就應使用內部樣式表。
<head>
<style type="text/css">
body {
background-color: blue;
}
h1 {
background-color: #00f00;
}
h2 {
background-color: transparent;
}
p {
background-color: rgb(250, 255, 255)
}
p.no2 {
background-color: gray;
padding: 20px;
}
</style>
</head><head>
<style type="text/css">
body {
background-color: blue;
}
h1 {
background-color: #00f00;
}
h2 {
background-color: transparent;
}
p {
background-color: rgb(250, 255, 255)
}
p.no2 {
background-color: gray;
padding: 20px;
}
</style>
</head>–c) 內聯樣式
將表現和內容混雜在一起，內聯樣式會損失樣式表的優勢。
<h1 style="color: sienna; margin-left: 20px">標題h1</h1>–d) 多重樣式
如果某些屬性在不同的樣式表中被同樣地選擇器定義，則屬性值將從更具體的樣式表中繼承過來。
2) CSS語法
–a) CSS基礎語法
CSS規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {
property: value
}選擇器通常是人們需要改變樣式的HTML元素；
每條聲明由一個屬性和一個值組成。
–b) 選擇器的分組
可以對選擇器進行分組，被分組的選擇器就可以分析相同的聲明。
h1, h2, h3, h4{
color: green;
}
–c) 繼承及其問題
根據CSS，子元素從父元素繼承屬性，但是他不總如此。
3) 選擇器
–a) 派生選擇器
通過文檔上下文關係確定某個標籤樣式。
h2 strong {
color: blue;
}–b) id選擇器
id選擇器可以爲特定id的HTML元素指定特定的樣式。
#id1 {
color = red;
}在現代佈局中，id選擇器常用於建立派生選擇器。
–c) CSS類選擇器
.center {
text-align: center;
}class也可被用作派生選擇器
–d）CSS屬性選擇器
屬性選擇器
[title] {
color: red;
}屬性和值選擇器
[title = W3School]{
border: 5px solid blue;
}屬性和值選擇器-多個值
設置表單的樣式
屬性選擇器在未不帶有class或id的表單設置樣式是特別有用
CSS樣式
1) CSS背景
–a)背景色
bockground-color可以爲所有元素設置背景色。默認值爲：transparent，即透明。
p {
background-color: gray; /*背景色*/
padding: 20px; /*背景色從文本向外延伸
}–b)背景圖片
background-image吧圖形放入背景，默認值爲none。
body {
background-image: url(i/eg.gif);
}–c)背景重複
background-repeat屬性，可以對背景圖像進行平鋪。
屬性值：
repeat-x:水平方向上平鋪
repeat-y:豎直方向上平鋪
no-repetat:不進行平鋪
–d) 背景定位
background-position屬性改變圖像在背景中的位置。
屬性值：
關鍵字top、bottom、left、right、center
百分數值 50% 50%
長度值 元素內邊距區左上角的偏移100px
–e) 背景關聯
如果文檔比較長，那麼當文檔向下滾動式，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。通過background-attachment屬性可防止這種滾動。
屬性值：
fixed 固定
scroll 滾動，默認
2) CSS文本
–a)縮進文本 text-indent
–b)水平對齊 ext-align
–c) justify
–d)字間距 word-spacing
修改單詞/字間距
–e) 字母間隔 letter-spacing
修改字符/字母間距
–f) 字符轉換 text-transform
處理文本的大小寫
屬性值：
none
uppercase
lowercase
capitalize
–g) 文本裝飾 text-decoration
屬性值：
none
underline
overline
line-through
blink
–h) 文本方向 direction
屬性值：
ltr
rtr
3) CSS字體
–a) CSS字體系列
font-family
在CSS中，有兩種不同類型的字體系列名稱，特定字體系列，通用字體系列。
–b) 字體風格
font-style
屬性值：
normal 正常顯示
italic 文本斜體顯示
oblique 文本傾斜顯示
–c) 字體變形
font-variant
可十二隻小型大寫字母
–d) 字體加粗
font-weight
設置文本的粗細。
屬性值：
內置級別：bold，normal…
關鍵字：100~900
–e) 字體大小 font-size
4) CSS鏈接
鏈接的4種狀態：
a:link a對象未被訪問前的樣式表屬性
a:visited a對象已被訪問時的樣式表屬性
a:hover 設置對象在鼠標懸停時的樣式屬性
a:active a對象在被用戶激活是的樣式表屬性
在順序上：
a:hover必須位於a:link和a:visited之後
a:active必須位於a:hover之後
5) CSS列表
–a) 列表類型
list-style-type改變標誌類型
–b) 列表項圖項
list-style-image對各標誌使用一個圖像
–c) 列表標誌位置
list-style-position確定標誌出現在列表項內容之外還是內容內部
–d)簡寫列表樣式
list-style
以上三個屬性的合併，無順序要求
6) CSS表格
7) CSS輪廓