CSS Links & Tables

Link

Links can be styled differently depending on what state they are in.

CSS超鏈接除了可以設定基本的性質,如:顏色、背景色,還可以根據他們所處的狀態來樣式化。

四種鏈接狀態分別是:

  • a:link - a normal, unvisited link 還沒有訪問
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it 鼠標劃過
  • a:active - a link the moment it is clicked 鼠標點擊

order rules: 需遵守的順序規則

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover
Tips:個性化link簡單做法,當鼠標劃過link時, 改變字體大小 font-size、字體系統 font-family、背景顏色 background-color

Table

Table Border

Note: Both the <table> and the <th> / <td> elements have separate borders.

給表格設置邊框的時候,注意表格和單元格都有獨立的邊框。

The border-collapse property sets whether the table borders are collapsed into a single border or separated.

該性質指定是否合併表格和單元格的邊框。合併,如下例:

table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}

Table Text Alignment

The text-align property sets the horizontal alignment, like leftright, or center

該性質設定表格中文本的水平對齊方式。

By default, the text in <th> elements are center-aligned and the text in <td> elements are left-aligned.

默認地,表頭元素是中心對齊,單元格里的元素爲左對齊


The vertical-align property sets the vertical alignment, like top, bottom, or middle

該性質設定表格中文本的垂直對齊方式。

By default, the vertical alignment of text in a table is middle (for both <th> and <td> elements).

默認地,表格中文本是垂直居中對齊

Table Padding

使用padding在 和 元素上設定單元格里內邊距。

Caption Side

Specify the placement of a table caption,指定表格標題的位置。

取值:

  • top 默認值,在表格上方,水平居中
  • bottom

Note:IE8 supports the caption-side property only if a !DOCTYPE is specified.


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章