**-----CSS2-----**
1.CSS特點簡介
（1）CSS 指層疊樣式表 (Cascading Style Sheets)
（2）樣式定義如何顯示 HTML 元素
（3）樣式通常存儲在樣式表中
（4）把樣式添加到 HTML中是爲了解決內容與表現分離的問題
（5）外部樣式表可以極大提高工作效率
（6）外部樣式表通常存儲在 CSS 文件中
（7）多個樣式定義可層疊爲一
2.CSS規則
選擇器+一條或多條聲明。
（1）每條聲明由一個屬性和一個值組成。
（2）每個屬性有一個值,屬性和值被冒號分開。
例：
selector{
property: value
}
注：Selector選擇器
property: value=========屬性值
提示：如果值爲若干單詞則要給值加引號或以' - '連接
3.如何創建 CSS
插入樣式表的方法有三種常用：
（1）外部樣式:
<link href="css路徑名/文件名" rel="stylesheet">
（2）內部樣式:
<style type="text/css">
（3）標籤名內部嵌入式：
<p style="屬性:屬性值;">
4.選擇器
（1）標籤名選擇器
以每個標籤名爲樣式名將要賦予的屬性寫在其樣式表中。
例
<style type="text/css">
p{
text-align:center;
color:yellow;
}
</style>
<p>This is example</p>
（2）類選擇器class選擇器
CSS中class選擇器以"."來定義。
例
元素屬性 id="para1":
<style type="text/css">
.para1{
text-align:center;
color:red;
}
</style>
<div class="para1">這是一個盒子</div>
注類名的第一個字符不能使用數字
（3）id選擇器
CSS 中 id 選擇器以 "#" 來定義。
例
元素屬性 id="para1":
<style type=“text/css”>
#para1{
text-align:center;
color:red;
}
</style>
<div id="para1">這是一個盒子</div>
5.id選擇器與class選擇器的區別
（1）id你只能用來定義單一元素定義二個以後。頁面不會出現什麼問題但是W3C檢測的時候認爲你頁面不符合標準
（2）class是類同一個class可以定義多個元素。
注id也不能結合使用因爲id屬性不允許有以空格分隔的詞列表 就頁面效果而言兩個東西的視覺效果幾乎無差別。
6.CSS 僞類(Pseudo-classes)
CSS僞類是用來添加一些選擇器的特殊效果。
僞類的語法
selector:pseudo-class{
property:value;
}
例鏈接
<style type="text/css">
a:link{ /* 未訪問的鏈接 */
Color:#F00
}
a:visited { /* 已訪問的鏈接 */
Color:#0F0;
}
a:hover{ /* 鼠標劃過鏈接 */
Color:#00F;
{
a:active{ /* 已選中的鏈接 */
Color:#F0F;
}
</style>
<a href=" ">這是一個鏈接</a>
***--注：僞類可以與 CSS 類配合使用
a.red:visited {
color:#FF0000;
}
<a class="red" href="css.html">CSS</a>
7.Float(浮動)
（1）元素可以圍繞其他元素向左或向右被推動
（2）往往是用於圖像但它在佈局時一樣非常有用
例：
img{
float:right;
}
8.Display(顯示)與 Visibility可見性
（1）Display - 塊和內聯元素
塊元素是一個元素佔用了全部寬度在前後都是換行符。
（2）隱藏元素 - display:none或visibility:hidden
注：display屬性設置一個元素應如何顯示visibility屬性指定一個元素應可見還是隱藏。
注：塊元素是一個元素佔用了全部寬度在前後都是換行符。
9.建立一個橫向導航欄
ul{
text-decoration:none;
margin:0;
padding:0;
}
li{
display:inline;/**把列表項顯示爲內聯元素*/
}
注：內聯元素只需要必要的寬度不強制換行。
10.CSS 圖像透明/不透明
Opacity屬性:透明度;
例
img{
opacity:0.4;
}
<img src=" 1.jpg" />
11.CSS--- Positioning(定位)
（1）static 定位
HTML元素的默認值即沒有定位元素出現在正常的流中。
靜態定位的元素不會受到top, bottom, left, right影響。
（2）fixed 定位
元素的位置相對於瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動。
（3）relative 定位
相對定位元素的定位是相對其正常位置。相對定位會按照元素的原始位置對該元素進行移動。
可以移動的相對定位元素的內容和相互重疊的元素它原本所佔的空間不會改變。
相對定位元素經常被用來作爲絕對定位元素的容器塊。
（4）absolute 定位
用絕對定位,一個元素可以放在頁面上的任何位置。
絕對定位的元素的位置相對於最近的已定位父元素如果元素沒有已定位的父元素那麼它的位置相對於<html>。
注 absolutely定位使元素的位置與文檔流無關因此不佔據空間。
absolutely定位的元素和其他元素重疊。
12.CSS2常用屬性(總結)
（1）文本Text文本排列屬性是用來設置文本的水平對齊方式
text-align:center;文字居中
text-align:right;文字靠右
text-align:left;文字靠左
text-align:justify;每一行被展開爲寬度相等左右外邊距是對齊如雜誌和報紙。
=================================================
text-decoration刪除鏈接的下劃線
text-decoration:overline;加上劃線
text-decoration:line-through;加中部刪除線
text-decoration:underline;加下劃線
=================================================
text-transform:capitalize;首字母大寫
text-transform:lowercase;全部變爲小寫
text-transform:uppercase;全部變爲大寫
=================================================
text-indent:50px;文本縮進
=================================================
text-shadow:8px 12px red;文字陰影右下左上
=================================================
=================================================
（2）字體fonts
font-family 屬性設置文本的字體系列類型。
font-style:normal;字體正常
font-style:italic;斜體字顯示類型
font-style:oblique;傾斜的字體與斜體相似不推薦
font-weight:指定文字粗細
normal默認值。定義標準的字符。
bold定義粗體字符。
bolder定義更粗的字符。
lighter定義更細的字符。
===============================================================
（3）背景background
background-attachmentscroll/fixed(背景圖像是否固定或者隨着頁面的其 餘部分滾動。)
background-color設置元素的背景顏色。
background-image把圖像設置爲背景。
background-position設置背景圖像的起始位置。
background-repeatno-repeat/repeat-x/repeat-y/inherit(設置背景圖像是否及如何重複。)
=================================================================
（4）選擇器
id選擇器
class選擇器
僞類選擇器
================================================================
（5）導航欄
*:設置不同的列表項標記爲有序列表- 列表項的標記有數字或字母
**:設置不同的列表項標記爲無序列表- 列表項標記用特殊圖形如小黑點、小方框等
***:設置列表項標記爲圖像--可用圖像作列表項標記。
<ul>
<li></li>
</ul>
形狀可如下none不使用項目符號
disc實心圓默認值
circle空心圓
square實心方塊
decimal阿拉伯數字
lower-roman小寫羅馬數字
upper-roman大寫羅馬數字
lower-alpha小寫英文字母
upper-alpha大寫英文字母
=========================================================================
（6）float(使元素向左或向右移動其周圍的元素也會重新排 列。)
img
{
float:right;
}
（7）border(邊框屬性)
border-style:none;------默認無邊框
border-style:dotted;--------定義一個點線框
border-style:dashed;-------定義一個虛線框
border-style:solid;------定義實線邊界
border-style:double;----定義兩個邊界。 兩個邊界的寬度和border-width的值相 同
==================================================================
（8）外邊距margin(margin沒有背景顏色是完全透明的)
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
=====================================================================
（9）僞類選擇器添加外部表現效果如link
a:link{}
a:visited{}
a:hover{}
a:active{}
=====================================================================
（10）圖像透明度(opacity)
img{
opacity:0.4;
}
==========================================================
（11）輪廓(outline)是繪製於元素周圍的一條線
outline-color:輪廓顏色
outline-style:外邊框的樣式
none dotted dashed solid double groove ridge inset outset inherit
outline-width:外邊框的寬度
thin medium thick inherit
====================================================