Learn HTML & CSS(補充)

HTML

Table

網頁中也可以顯示表格
<table>代表表格
<tr>為 row 是橫列的意思。
<th>代表表格的標題,會有粗體font-weight:bold的效果
<td>為 data 是直行的意思,多少個<td>就有多少行。
框線則可以透過 CSS 中的 border 進行修飾,例子用上了border: 1px solid #000;

如果要像一般表格不要有間隔,則在 CSS 對 table 加入以下兩個參數:
border-collapse:collapse,這會讓彼此之間框線可以合併。
border-spacing:0;讓距離變成 0px。

html code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table>
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Category</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Post One</td>
<td>Web Development</td>
<td>Jan 28 2019</td>
</tr>
<tr>
<td>2</td>
<td>Post Two</td>
<td>Tech Gadgets</td>
<td>Jan 28 2019</td>
</tr>
</tbody>
</table>

Label 與 Input 搭配

在點擊 label 後可以讓游標跳到後面則欄位上直接輸入,提升使用者體驗
label for="mail"for 中為 mail。
input 元素的 id 就取名相同的名稱為 mail,input id="mail"即可以達到該效果。

html code:

1
2
<label for="mail">Email: </label>
<input type="text" id="mail" placeholder="Your mail" />

CSS

Pseudo Class & Element 偽類別與偽元素

偽類(pseudo class):在選擇已經存在的東西,如 a:hover 是選擇<a>的某種狀態
偽元素(pseudo elemnet):創造一個新的假元素,沒有被任何 tag 包住的內容
單冒號 (:) 是用在偽類
雙冒號 (::) 則是用在偽元素

pseudo-class 的
在某些狀態被選取的話,會被加進 selector 中,如:hover是滑鼠停在某個元素時就會套用指定選擇器的效果,a:hoverdefault 的效果就是有下底線。

pseudo-element
::first-line:div::first-line {color:red;}選取第一行,在沒有任何 tag 包住的情況下創造新的假元素
下面例子就會產生第一行為紅色的結果

1
2
3
<div>
Hello Everyone!! My Name is Candy
</div>

參考資料

Background-image

透過 CSS 直接插入背景圖片,設定好寬度與高度後,系統預設是 x,y 方向都會 repeat。

1
2
3
4
5
.box {
background: url("../img/large-3-11.jpg");
height: 1800px;
width: 2700px;
}

透過在 background 後加上no-repeat, repeat-x, repeat-y可以自己控制背景圖。
repeat-x

repeat-y

no-repeat,加上center即可置中

如果加上center/cover,置中並延伸到所設定的寬度與高度充滿整個容器。
當背景圖片通常都會加上center/cover

Em & Rem 相對數值單位

em 是相對的單位,文字大小是相對於上一層的父元素(parent element)。
rem 是相對的單位,文字大小是相對於最外圍的根元素(root element),也就是<html>標籤。

em 因為是相對上一層父元素的倍數,如果包很多層會被影響。
ex.外層的文字是 1.4em,內層的 1em 文字大小等於外層 1.4em,隨後的逐漸放大。
如果再加入一層在內部,文字就會是上一層的大小再乘上設定的 em 再放大。

rem 只要不改到網站 root 層的文字大小,就可以清楚的計算需要大小多少的文字,是 root 的倍數。
ex.網站文字大小 16px,1rem = 16px;最上跟最下面用 em 來比較

參考資料:

Vh & Vw 螢幕可視範圍的百分比

Vh 是螢幕可視範圍高度的百分比,Vw 是螢幕可視範圍寬度的百分比。
會隨著視窗大小來變動,適合用在landing page跟RWD的網頁。

一般設定

1
2
3
4
5
6
header {
background: #000;
color: #fff;
height: 100%;
width: 100%;
}

Vh & Vw
將height改為height:100vhwidth:50vh

相容性確認

有些語法是在新的CSS3中才有,可以透過這個網站來確認語法在哪些瀏覽器可以使用。
Can I Use