1. 程式人生 > >css基礎樣式(二)

css基礎樣式(二)

1.css連結

  • css樣式連結的四種狀態
  • 1.a:link 普通的未被訪問的連結
  • 2.a:visvited已經被訪問的連結
  • 3.a:hover滑鼠指標位於連結的上方
  • 4.a:active連結被點選時
    這四個屬性都可以設定color,background,font—family等
    注意
    a:hover必須位於a:link或a:visited後
    a:active必須位於a:hover後

2.css列表
這裡的列表型別主要是無序列表(ul)

  • 列表型別,用list-style-type來控制標記標記型別(用圓形還是方形,還是羅馬數字,),具體屬性值↓

http://www.w3school.com.cn/cssref/pr_list-style-type.asp

  • 列表項圖片,用list-style-image屬性來控制列表項圖片,具體屬性值↓(把列表項替換成圖片)

http://www.w3school.com.cn/cssref/pr_list-style-image.asp

  • 放置列表項標記,list-style-position屬性控制何處放置列表項標記,具體屬性如↓

http://www.w3school.com.cn/cssref/pr_list-style-position.asp

簡寫列表樣式!

  • 把所有用於列表的屬性設置於一個宣告內,用list-style屬性,具體屬性↓
  • 一般是{list-style-type,list-style-position,list-style-image書寫格式}

http://www.w3school.com.cn/cssref/pr_list-style.asp

3.css表格
瞭解
border-collapse —設定是否把表格邊框合併為單一的邊框。

border-spacing —設定分隔單元格邊框的距離。

caption-side — 設定表格標題的位置。

empty-cells —設定是否顯示錶格中的空單元格。

table-layout —設定顯示單元、行和列的演算法等屬性。
然後嘗試border—collapse 讓整個列表邊框合併為單線,再使用width,height 來定製表格大小,之後用background-color 加上背景顏色,text-align 設定字元對齊方式,padding 設定內邊距。
border屬性值↓

http://www.w3school.com.cn/cssref/pr_border.asp

4.css輪廓(outline)
outline屬性值↓

http://www.w3school.com.cn/cssref/pr_outline.asp

注意事項
第三項表格多瞭解屬性瞭解padding,border等屬性