html(6)css2

標籤：文本樣式   val   瀏覽器   符號   top   顏色   firefox   釋放   link   

 1.會使用CSS設定字型樣式

font-family:字型類型
font-size:字型大小
font-weight:字型粗細（bold）
font-style:字型傾斜(italic)
font:傾斜 粗細 大小 類型

若需要同時設定英文字型和中文字型時，必須把英文字型設定在中文字型前，否則英文字型設定將不起作用

2.會使用CSS設定文本樣式

1) 文本顏色：color

2)水平對齊：text-align:  left \center \right \ justify左右對齊

（圖片的對齊）使用ID選取器或類別選取器

3)垂直對齊：vertical-align:   top\middle\bottom;

（圖片的對齊）p img { vertical-align:  top\middle\bottom }

4)段落標記中，用於縮排：text-indent:  數字em;

 1em，代表一個漢字的寬度

5)文本的行高：line-height：數字px；

6)文本裝飾（上劃線、刪除線、底線）：

　　text-decoration:  overline 上劃線 underline底線 line-through

　　none預設值，定義的標準文本

　　blink設定文本閃爍，只在Firefox瀏覽器中有用，在IE中無效。

3.會使用CSS設定圖片對齊

垂直對齊：vertical-align:top\middle\bottom;

      會使用CSS設定超連結樣式

<a href=”連結的頁面或地址”>超連結的文字</a>

標籤選取器

偽類樣式：

設定偽類樣式的順序：link> visited> hover active

偽類名稱	含義	樣本
a:link	未單擊訪問時超連結樣式	a:link{color:#9EF5F9}
a:visited	單擊訪問後超連結樣式	a:visited{ color:#333}
a:hover	滑鼠懸浮其上的超連結樣式	a:hover{ color:#FF7300}
a:active	按一下滑鼠未釋放的超連結樣式	a:active{ color:#999}

 

 

 

     

 

 

 

4.會使用CSS設定滑鼠外觀——cursor

值	說明	圖例
default	預設游標
pointer	超連結的指標
wait	指示程式正在忙
help	指示可用的協助
text	指示文本
crosshair	滑鼠呈十字狀

5.Div標籤

1、 作用:  目前流行的網頁布局的方式：div+css

2、          <div>放文字、圖片、超連結等等</div>

3、          讓div顯示出來，設定哪些css樣式屬性？

a.　　寬——width             高——height

b.     設定邊框border：邊框粗細 邊框樣式 邊框顏色

c.     實線細邊框——solid              虛線邊框——dashed

6.會使用CSS設定背景樣式

背景顏色：background -color

背景圖片：background -image

背景重複方式：background -repeat

背景圖片定位：background –position

7.會使用CSS設定列表樣式

修改列表的符號：list-style-type

自訂欄表的圖片：list-style-image

清單項目標記的位置：list-style-position：inside(文本內且環繞文本根據標記對齊)，

outside(預設值，位於文本左側，放在文本以外，且環繞文本不根據標記對齊)

 

html(6)css2