CSS概念
Cascading Style Sheet
CSS版本:CSS1，CSS2，CSS2.1,CSS3.0
CSS功能
控制HTML頁面的顯示效果
CSS語法
選擇器 {
CSS屬性:值;
CSS屬性:值;
}
CSS引入頁面的方式
1.內聯樣式
通過HTML的元素的style屬性引入CSS
<h1 style="color:red;">Web主頁</h1>
無選擇器，只針對當前的元素。
2.內嵌樣式CSS
在HTML頁面中使用<style>引入。
一般放置在<head>內。
<style type="text/css">
h1{color:red;}
div {
}
</style>
3.外聯樣式
將CSS代碼存放在單獨的CSS文件中。
<link rel="stylesheet" type="text/css" href="../css/main.css">CSS選擇器(selectors)
選擇要作用的HTML元素
1.標記選擇器
標記名 { }
h1{color:red;}
div { }
body { color:blue;}
2.ID選擇器
#id {}
<div id="top">
#top {}
3.類選擇器
<div id="left" class="navline">
</div>
語法： .classname {}
案例：
.navline {}
4.所有元素選擇器
* { }
5.組合選擇器
選擇器選擇器 { }
div.navline {}
div#top {}
5.子元素選擇器
語法：選擇器 選擇器 選擇器 {}
案例
div ul li a {}
6.平行選擇器
語法：
選擇器,選擇器,選擇器{ }
滿足任何一個選擇器均可
案例：
div#top,div.navline {}
7.直接子元素選擇器
選擇器>選擇器>選擇器 {}
div>ul>li>a {}
8.屬性選擇器
語法: [屬性名] {}
[屬性名="值"] {}
[屬性名^="值"] {} 以值開頭的屬性
[屬性名$="值"] {} 以值結尾的屬性
[屬性名*="值"] {} 包含值的屬性
案例：
[class] {}
div[class] {}
input[type="radio"] {}
a[href^="http://"] {}
a[href*="#"] {}
9.常用的僞類選擇器
文字僞類：
:first-letter
:first-line
元素僞類：
:first-child
超鏈接僞類：
a:link
a:visited
a:hover
a:active:
表單元素僞類：
:focus
案例：input[type="text"]:focus {}CSS屬性分類
1.文字樣式屬性
2.塊（box）元素的樣式屬性
3.佈局樣式
4.位置樣式屬性
5.列表的樣式屬性
6.超鏈接的樣式屬性
文字樣式屬性
1.color 文本屬性
取值：單詞 red，blue等
#999 #999999 十六進制顏色編碼
rgb(100,100,200); 紅，綠，藍編碼，每個0-255.
如: h1 { color:red;}
h2 {color:#999;}
h3 {color:rgb(10,20,20);}
2.font-size 字體大小
取值：Small，medium，large…或直接指定字體大小
3. font-family 字體 如宋體，仿宋等
Arial，serif，宋體
4. text-align 文字的橫向位置
取值:left, right, center, justify
div#top {text-align:center;}
5.font-style 字體的樣式，如標準，斜體等
取值：normal, italic…
6.font-weight 字體的粗細
取值：normal, bold, lighter, 100, 200…
7. text-decoration 文本的修飾
取值:
none, blink, underline, overline, line-through
8. text-transform 文本的轉換
取值：none, capitalize, uppercase, lowercase
9. vertical-align 縱向位置
取值：baseline, super, sub, top, text-top, middle-bottom, text-bottom
10. word-spacing 單詞的間距大小
取值：度量， 如10px, 1.5em.
11. letter-spacing 字符的間距大小嗎，取值px點陣或比例em.
度量HTML元素的顯示模型（Box Mode）
1.HTML元素的顯示特性：
(1)塊元素：Block Element: 在新的一行顯示。
body, div，h1，h6，ul，li，p，table
(2)行元素：不在新的一行顯示
a, span, b ,i
2.塊元素按盒模型進行站位和顯示
(1) 外邊距（margin）：
(2)邊框（border）
(3)內邊距(padding)
(4) 內容的長度和高度
塊元素樣式屬性
1.控制外邊界的屬性
margin:10px;
margin-left:5px;
margin-right:1px;
margin-bottom:2px;
margin-top: 4px;
margin:1px 2px 3px 4px;
2. 控制內邊距：
padding:10px;
padding-left:5px;
padding-right:1px;
padding-bottom:2px;
padding-top: 4px;
padding:1px 2px 3px 4px;
3.控制邊框屬性
border:solid 20px red;
border-style: solid;
border-width:5px;
border-color:#aaa;
border-left-style:
border-right-style:
4.控制塊元素內容樣式屬性：
width 控制寬度，height:控制高度
width:60px; 50%,
height:200px
5.背景顏色
background-color:顏色;
6.背景圖片
(1)設置背景圖片：
background-image:url(images/tu1.jpg);
div#main {
}
(2)設置背景是否平鋪：
background-repeat:repeat;
取值：repeat, repeat-x, repeat-y, no-repeat
(3)設置背景圖片的位置
background-position:x y;
x取值：left,center,right,%, px
y取值：top,center,bottom,%,px列表樣式屬性
list-style-type: square
取值:circle,none.
list-style:none;佈局屬性
1.float: 塊元素浮動屬性
取值：left,right,none
案例：div#left {float:left;}
2.clear: 清除float
取值：left，right，both。
案例: div#footer { clear:both}
3.display: 塊元素和行元素的轉換屬性
取值:
inline: 塊元素按行元素顯示
block: 將行元素按塊元素顯示。