JS學習筆記-CSS篇（二）
阿新 • • 發佈：2019-01-25
5.CSS Fonts（字型）
CSS字型屬性定義字型，加粗，大小，文字樣式。
所有字型屬性：
（1）font-family（字體系列）
定義：
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
font-family 屬性設定文字的字體系列。
定義：
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
定義：
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
6.CSS連結（link）
8.CSS table 表格
表格定義：
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
執行結果：
說明：用table定義一個表格；<tr>定義一行資料；<th>定義表頭名稱；<td>定義列表資料；
（1）表格邊框
指定CSS表格邊框，使用border屬性
定義：
<style>
table,th,td
{
border:1px solid black;//表格的Th和TD元素的黑色邊框
}
</style>
執行結果：
(2)摺疊邊框（border-collapse）
border-collapse 屬性設定表格的邊框是否被摺疊成一個單一的邊框或隔開；
定義：
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
執行結果：
（3）表格的寬度和高度
定義：
table
{
width:100%;
}
th
{
height:50px;
}
td
{
height:30px;
}
執行結果：
（4）表格文字對齊
（5）表格填充
如果在表的內容中控制空格之間的邊框，應使用td和th元素的填充屬性：
定義：
td
{
padding:15px;
}
（6）表格顏色
指定邊框的顏色，和th元素的文字和背景顏色
定義：
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
執行結果：
serif和sans-serif字型之間的區別
| Serif |
Times New Roman Georgia |
Serif字型中字元在行的末端擁有額外的裝飾 |
| Sans-serif |
Arial Verdana |
"Sans"是指無 - 這些字型在末端沒有額外的裝飾 |
| Monospace |
Courier New Lucida Console |
所有的等寬字元具有相同的寬度 |
font-family 屬性應該設定幾個字型名稱作為一種"後備"機制，如果瀏覽器不支援第一種字型，他將嘗試下一種字型。
注意: 如果字體系列的名稱超過一個字，它必須用引號，如Font Family："宋體"。 多個字體系列是用一個逗號分隔指明： （2）font-style （字型樣式）：| 值 | 描述 |
|---|---|
| normal | 預設值。瀏覽器顯示一個標準的字型樣式。 |
| italic | 瀏覽器會顯示一個斜體的字型樣式。 |
| oblique | 瀏覽器會顯示一個傾斜的字型樣式。 |
| inherit | 規定應該從父元素繼承字型樣式。 |
主要是用於指定斜體文字的字型樣式屬性。
這個屬性有三個值及定義：
- 正常 - 正常顯示文字 ： p.normal {font-style:normal;}
- 斜體 - 以斜體字顯示的文字 p.italic {font-style:italic;}
- 傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支援）p.oblique {font-style:oblique;}
| normal | 預設值。瀏覽器會顯示一個標準的字型。 |
| small-caps | 瀏覽器會顯示小型大寫字母的字型。 |
| inherit | 規定應該從父元素繼承 font-variant 屬性的值。 |
| normal | 預設值。定義標準的字元。 |
| bold | 定義粗體字元。 |
| bolder | 定義更粗的字元。 |
| lighter | 定義更細的字元。 |
|
定義由粗到細的字元。400 等同於 normal，而 700 等同於 bold。 |
| inherit | 規定應該從父元素繼承字型的粗細。 |
連結的樣式，可以用任何CSS屬性（如顏色，字型，背景等）。
特別的連結，可以有不同的樣式，這取決於他們是什麼狀態。
這四個連結狀態是：
- a:link - 正常，未訪問過的連結
- a:visited - 使用者已訪問過的連結
- a:hover - 當用戶滑鼠放在連結上時
- a:active - 連結被點選的那一刻
- a:hover 必須跟在 a:link 和 a:visited後面
- a:active 必須跟在 a:hover後面
- 設定不同的列表項標記為有序列表
- 設定不同的列表項標記為無序列表
- 設定列表項標記為影象
- 在HTML中，有兩種型別的列表：
-
- 無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等） ul表示
- <ul class="b">
- <li>Coffee</li>
- <li>Tea</li>
- <li>Coca Cola</li>
- </ul>
- 有序列表 - 列表項的標記有數字或字母 ol表示
| none | 無標記。 |
| disc | 預設。標記是實心圓。 |
| circle | 標記是空心圓。 |
| square | 標記是實心方塊。 |
| decimal | 標記是數字。 |
| decimal-leading-zero | 0開頭的數字標記。(01, 02, 03, 等。) |
| lower-roman | 小寫羅馬數字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大寫羅馬數字(I, II, III, IV, V, 等。) |
| lower-alpha | 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小寫希臘字母(alpha, beta, gamma, 等。) |
| lower-latin | 小寫拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大寫拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 傳統的希伯來編號方式 |
| armenian | 傳統的亞美尼亞編號方式 |
| georgian | 傳統的喬治亞編號方式(an, ban, gan, 等。) |
| cjk-ideographic | 簡單的表意數字 |
| hiragana | 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名） |
| katakana | 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名） |
| hiragana-iroha | 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） |
| katakana-iroha | 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
表格中的文字對齊和垂直對齊屬性。
text-align屬性設定水平對齊方式，像左，右，或中心： 定義： td { text-align:right; } 或 td { height:50px; vertical-align:bottom; } 執行結果：| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |