二、CSS語法
p{color：red;}
選擇器{屬性名：屬性值 ;}
選擇器後一定是大括號.屬性名後必須用冒號隔開.屬性值後用分號
屬性名和冒號之間最好不要有空格。
<style type="text/css"></style>
三、CSS和HTML的結合方式
CSS代碼理論上位置是任意的，但通常寫在style標籤裏
CSS和HTML的結合方式有3種：
a. 行級樣式表:採用style屬性,範圍只針對此標籤適用
<div style = "border:1px solid red ;">大家好</div>
b. 內嵌樣式表:採用<style>標籤完成。範圍針對此頁面
c. 外部樣式表: 採用建立樣式表文件。針對多個頁面.
引入樣式表文件的方式:
1):採用<link>標籤
eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2):採用import，必須寫在<style>標籤中，並且必須是第一句
eg: @import url(a.css) ;
兩種引入方式的區別：
外部樣式表中不能寫<link>標籤,但是可以寫import語句
四、CSS選擇器
選擇器分爲兩大類:
1.基本選擇器
a.標籤選擇器:指的就是選擇器的名字代表html頁面上的標籤
p{
color:red ;
border:1px dashed green;
}
b.類選擇器：規定用圓點.來定義
優點：靈活
eg:
.one{background-color:#ff0099; }
c. ID選擇器：規定用#來定義
eg:
#one{cursor:hand; }
區別：標籤選擇器針對的是頁面上的一類標籤.
類選擇器可以供多種標籤使用.
ID選擇器是值供特定的標籤(一個). ID是此標籤在此頁面上的唯一標識。
d:通用選擇器： 用*定義,代表頁面上的所有標籤。
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}
2.擴展選擇器
a. 組合選擇器:採用逗號隔開，表示採用多種標籤
eg:
p,h1,h2,.one,#two{color:red ; }
b. 關聯選擇器(後代選擇器): 採用空格隔開
eg: h4 span i{color:red ; }
表示h4標籤中的span標籤中的i標籤的樣式
h4和span和i標籤不一定是緊挨着的。
c. 僞類選擇器
1) :靜態僞類：規定是用:來定義.只有兩個.只能用於超鏈接.
:link表示超鏈接點擊之前的顏色
:visited表示鏈接點擊之後的顏色
eg:a:link{color:red ;}
a:visited{color:yellow;}
注意： a:link{}定義的樣式針對所有的寫了href屬性的超鏈接(不包括錨)
a{}定義的樣式針對所有的超鏈接(包括錨)
2) :動態僞類 : 針對所有的標籤都適用
:hover : 是移動到某個標籤上的時候
:focus : 是某個標籤獲得焦點的時候
:active : 點擊某個標籤沒有放鬆鼠標時，按下時的狀態。
eg: label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
p:active{
color:blue;
}
</head>
<input type="text">//引用了一個輸入框，當輸入時變成focus所定義的顏色
<lable>hover當鼠標停留時改變顏色</lable>
<p>active鼠標按住沒放出現藍色</p>
五、CSS各種選擇器的衝突(掌握)
CSS樣式的衝突:
1.ID選擇器 > 類選擇器 > 標籤選擇器
2.行級樣式表 > 內嵌樣式表 > 外部樣式表
外部樣式表的ID選擇器 > 內嵌樣式表的標籤選擇器
原則： 就近原則（指靠近使用代碼段的遠近）
比如同樣使用
.one和.two類選擇器
.one
{
color:green;
}
.two
{
color:blue;
}
</head>
<p class"one two">顯示爲藍色</p>
若順序相反
.two
{
color:blue;
}
.one
{
color:green;
}
<p class"one two">顯示爲綠色</p>
2016/1/18
一，link的rel屬性
1,stylesheet定義樣式表（默認）
2,alternate stylesheet候選樣式表
(IE-工具—查看—樣式)
<link rel="stylesheet" type="text/css"href="a.css" title="定義樣式表"><link>
<link rel="alternate stylesheet" type="text/css" href="b.css" title="候選樣式表"><link>
二,css單位
1，相對單位- px，em(印刷單位) ;
%（周圍文字中-比後面表示放大或者縮小倍率）
2，絕對單位- cm,mm,pt(英寸)，pc(派卡)
eg:
p
｛
font-size:0.5cm;
font-size:200%;
font-size:2px;
}
三，字體屬性
font-size(字體大小)
font-famile(字體樣式)：華文彩雲，幼圓，黑體；//當華文彩雲不支持時，切換爲幼圓。全都不支持，系統默認
font-style:italic ; /*斜體*/
font-weight:bold; /*粗體*/
font-variant:small-caps; /*小寫變大寫*/
四，文本屬性
*文本設置
p{
letter-spacing:0.5cm ; /*字母間距*/
word-spacing:1cm; /*單詞間距*/
text-align:center; /*在所包含容器的中間*/
text-decoration:overline; /*字體修飾 underline下劃線 line-through中劃線 overline上劃線*/
text-transform:lowercase; /*單詞字體大小寫*/
}
五，*背景設置
body{
background-color:#ff99ff ; /*背景顏色*/
background-image:url(images/2.gif) ; /*背景圖片*/
background-repeat: no-repeat; /*no-repeat不要平鋪，repeat-x,橫向平鋪，repeat-y 縱向平鋪*/
background-position:center right; /*背景位置*/
background-attachment: scroll ; /*背景的移動 ,fixed跟着滾動條一起移動，scroll 不動*/
六，列表屬性
*列表設置
ul li{
list-style:none; /*列表前樣式*/
list-style-image:url(images/2.gif) ; /*列表項前圖片*/
margin-left:80px;
}
七，*盒子模型
(border margin padding)
padding:是內容到邊的距離
border: 是邊的粗細
margin:是控件到控件的距離
右外邊距1px、上外邊距2px、左外邊距3px、下外邊距4px
取值
八，定位設置
- 1，絕對定位 position:absolute;//按照父容器選擇，可層疊（z-index）
使用 left ， right ， top ， bottom
- 2相對定位 position:relative;//按照原位置選擇，不可層疊
left ， right ， top ， bottom
#d
{
position: absolute或relative;
left:100px;//橫座標
top:100px;//縱座標
}
- float 浮動 注：
clear : none允許兩邊浮動 | left不允許左邊浮動 | right不允許右邊有浮動 | both不允許有浮動
- overflow 超過範圍解決方案
取值
visible : 默認值。不剪切內容也不添加滾動條。假如顯式聲明此默認值， 對象將以包含對象的 window 或 frame 的尺寸裁切。並且 clip 屬性設置將失效
auto : 在必需時對象內容纔會被裁切或顯示滾動條
hidden : 不顯示超過對象尺寸的內容
scroll : 總是顯示滾動條
- z-index x-y-z軸上的z軸，數值越小，在圖層的越下面,取值爲auto或者整數值（決定圖層展示在第幾層）
#d1
{
float:left；
clear:both;
overflow:auto;
z-index:1;
}
九，鼠標樣式設置
cursor:hand或者pointer;手勢
cursor:help;問號手勢
十,濾鏡
