1.     CSS引用的基本形式：<linkrel="stylesheet" href="path/fileName.css" type="text/css"media="screen" />

2.     格式

a)      在html檔案中引用CSS採用<styletype="text/css">……</style>的形式；

b)      以“.”開頭可以應用到一般的元件中去，例如：.testCSS{…..} ，則在div標籤中可以直接用<div class=”testCSS”></div>的形式；在元件中引用多個CSS樣式，在class屬性中用空格隔開；

c)      以“#”開頭應用到id與CSS樣式同名的元件中，例如：#testCSS{…..} ，則在div標籤中可以直接用<div id=”testCSS”></div>的形式，和a)中的效果相同；

d)      a)和b)兩種方式相結合，例如：#testID .testCss{…..} ，則在div標籤中可以直接用<div id=”testID”><div class=”testCSS”></div></div>的形式，和a)、b)中的效果相同；若要把一個CSS樣式應用到某一個元件內部子元件中，可以應用#id ele{…..}的形式，以保證頁面中其它的元件不受影響；

e)      以元件的名稱開頭，可以直接將CSS樣式應用到頁面中相應的原件上。例如：p{…..}可以直接引用到元件<p></p>上；

3.     符號含義

圖1 字型選項設定

圖2背景設定

background-color:元件背景顏色

圖3 區塊設定

display:控制元件內容的顯示或隱藏

圖4 方框設定

height:設定元件的高度；

width:設定元件的寬度；

float:元件位置設定，與background-color一起使用可以根據元件內部元件的大小設定該元件的背景；在當前元件設定了浮動之後，該元件後面的元件也將浮動；

clear:清除當前元件的浮動；

padding:元件中的子元件與父元件之間的位置設定；

magin:兄弟元件之間的位置設定。

圖5 邊框設定

border:元件邊框樣式、寬度、顏色的設定。

圖6 列表設定

       list-style-type:設定ul、ol、li前面符號的形式；

       list-style-image:設定ul、ol、li前面符號的圖片；

       list-style-position:設定符號的位置。

圖7 定位設定

圖8 擴充套件設定