iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
2
Modern Web

三十哩路,我的前端學習路程系列 第 16

Day16::我所知道的 CSS重構 第四章之二

錨點標籤

錨點標籤(anchor tags)提供可連到其他HTML文件或同一份HTML文件中段落的連結
能搭配常用來顯示狀態:link、:visited、:focus、:hover、:active虛擬類別,再定義其基底樣式時瞭解這些虛擬類別是很重要的。

:link:套用在具有效href屬性的元素上。

:visited:套用在具有效href屬性的元素上,且該連結的位置已列在瀏覽器的瀏覽歷史紀錄中。

:focus:套用在使用中的連結元素上。當元素被點選、觸碰或透過跳位鍵(Tab key)選到該元素時樣式也會被套用。

:hover:樣式會套用在滑鼠指標下的連結。觸控裝置上因為不具有hover狀態,樣式通常會套用在被觸碰的元素上。

:active:樣式會套用在"被啟用(activated)"的元素上。在使用滑鼠的狀況下點選連結但滑鼠鍵還未放開時就是處於這種狀態,在觸控裝置上點選元素但手指尚未移開螢幕時元素也會處於這個狀態。

要注意,先定義:link和:visited,這兩個虛擬類別(偽類)擁有相同的特定度。
若某一連結已被造訪過,且:visited定義在:hover、:focus、:active之後,任何為:visited所定義的重疊樣式(overlapping styles)會優先顯示。

另外一件要注意的事情是,這些虛擬類別是由一個類型選擇器與一個虛擬類別選擇器所組成,他們都會讓連結具有較高的特定度。

為錨點標籤與虛擬類別定義基底樣式時,應考慮定義下列常用屬性:
background-color
border
color
font-weight
text-decoration

文本語意

文本語意(text semantics)用來賦予文本更多意義或結構的元素,這些元素通常是行內型。
包括<addr>、<b>、<cite>、<code>、<data>、<dfn>、<em>、<i>、<kbd>、<s>、<strong>、<sub>、<sup>、<time>、<u>等標籤。
因為這些元素通常用來調整文本,為其定義基底樣式時,應該考慮設定下列屬性:
color
font-family
font-size
font-weight

列表

列表(List)元素包含<ol>有序列表(ordered list)、<ul>無序列表(unorder list)與<dl>定義列表(definition list)
有序與無序列表只能內含<li>列表項目(list item)元素
定義列表只能內含<dt>定義項(definition term)與<dd>定義說明(definition description)元素。

列表的用途廣泛不容易為其設定適當的基底樣式。

為有序與無序列表定義基底樣式,應該考慮設定下列屬性:
font-family
font-size
list-style-type 或 list-style0image
list-style-position
line-height
margin-bottom
margin-top
padding-left

群組元素

群組元素(grouping elements)包括,<div>、<main>、<span>
雖然<span>標籤的語義就技術上而言是文本層級的,它主要用來群組文本或行內元素。
<div><main>標籤是典型的區塊層級元素,而<span>則是行內層級,因為這元素直接被用來群組其他元素,通常不會帶有任何基本的樣式;它們的樣式會依照每次使用的情況而用類別來設定。
<main>被視為視覺元素容器,其margin與padding樣式有設定值的話會比較方便。

表格

表格會用表格是的結構來呈現資料,用來呈現表格資料的元素包括<table>、<caption>、<colgroup>、<col><tbody>表格主體(table body)、<thead>表格標頭(table header)、<tfoot>表格頁尾(table footer)、<tr>表格列(table row)、<td>表格方格(table cell)、<th>表格標頭方格(table header cell)等元素。
在1990年代晚期與2000年代初期,常用表格來構成整張頁面的版面但現今CSS與瀏覽器已經變成只用表格來呈現表格的資料,而不用其他具樣式的元素來處理。

表單

表單用來搜集使用者所輸入的資料,相關元素包含<form><label><input><button><select><datalist><optgroup><option><textarea><output><progress><meter><fieldset><legend>
表單基底樣式應該考慮設定下列屬性:
font-family
font-size
line-height
margin
padding

樣式可以設定在<form>元素上再由子元素繼承,較複雜的設計則需設定更多的樣式。


上一篇
Day15::我所知道的 CSS重構 第四章為不同類型的樣式分類
下一篇
Day17::我所知道的 CSS重構 第四章之三
系列文
三十哩路,我的前端學習路程30

尚未有邦友留言

立即登入留言