html和css入門 （三）
阿新 • • 發佈：2018-11-10
文字樣式
color
文字顏色
| 屬性名 | color |
|---|---|
| 屬性值 | 預定義的顏色名 | 十六進位制值的顏色值 | RGB顏色值 |
| 預設值 | 依賴使用者代理 |
| 描述 | 設定文字的顏色 |
direction
文字方向（
| 屬性名 | direction |
|---|---|
| 屬性值 | ltr | rtl |
| 預設值 | ltr |
| 描述 | 設定文字的方向 |
line-height
文字行高
| 屬性名 | line-height |
|---|---|
| 屬性值 | normal |數字 | 長度 | 百分百 |
| 預設值 | normal |
| 描述 | 設定文字的行高 |
letter-spacing
字元間距
| 屬性名 | letter-spacing |
|---|---|
| 屬性值 | normal | 長度 |
| 預設值 | normal |
| 描述 | 增加或減少字元間的空白（字元間距） |
- normal：預設間隔
- length：用長度值指定間隔。可以為負值。
text-align
| 屬性名 | text-align |
|---|---|
| 屬性值 | left | right | center | justify |
| 預設值 | 如果文字方向為ltr，則預設值為left；如果文字方向為rtl，則預設值為right |
| 描述 | 設定文字在水平方向上的對齊方式 |
- left：內容左對齊。
- center：內容居中對齊。
- right：內容右對齊。
- justify：內容兩端對齊，但對於強制打斷的行（被打斷的這一行）及最後一行（包括僅有一行文字的情況，因為它既是第一行也是最後一行）不做處理。
text-indent
文字縮排
| 屬性名 | text-indent |
|---|---|
| 屬性值 | | |
| 預設值 | 0 |
| 描述 | 設定首行文字的縮排 |
length：用長度值指定文字的縮排。可以為負值。 percentage：用百分比指定文字的縮排。百分比是相對於包含塊的寬度。可以為負值。
text-decoration
文字修飾
| 屬性名 | text-decoration |
|---|---|
| 屬性值 | none | [ underline || overline || line-through || blink ] |
| 預設值 | none |
| 描述 | 對文字進行修飾 |
- none：指定文字無裝飾
- underline：指定文字的裝飾是下劃線
- overline：指定文字的裝飾是上劃線
- line-through：指定文字的裝飾是貫穿線
text-transform
文字的大小寫
| 屬性名 | text-transform |
|---|---|
| 屬性值 | capitalize | uppercase | lowercase | none |
| 預設值 | none |
| 描述 | 控制文字的大小寫 |
- none：無轉換
- capitalize：將每個單詞的第一個字母轉換成大寫
- uppercase：將每個單詞轉換成大寫
- lowercase：將每個單詞轉換成小寫
white-space
如何處理元素內的空白
| 屬性名 | white-space |
|---|---|
| 屬性值 | normal | pre | nowrap | pre-wrap | pre-line |
| 預設值 | normal |
| 描述 | 設定如何處理元素內的空白 |
- normal：預設處理方式。空白會被瀏覽器忽略
- pre：用等寬字型顯示預先格式化的文字，不合並文字間的空白距離，當文字超出邊界時不換行。
- nowrap：強制在同一行內顯示所有文字，合併文字間的多餘空白，直到文字結束或者遭遇br物件。
- pre-wrap：用等寬字型顯示預先格式化的文字，不合並文字間的空白距離，當文字碰到邊界時發生換行。
- pre-line：保持文字的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。
word-spacing
單詞間距
| 屬性名 | word-spacing |
|---|---|
| 屬性值 | normal | |
| 預設值 | normal |
| 描述 | 增加或減少單詞間的空白(即字間隔) |
- normal：預設間隔
- length：用長度值指定間隔。可以為負值。
字型樣式
font-size，設定字型的大小，最常用的值是長度(14px)font-family：設定使用哪種字型，可以設定某個具體的字型，還可以設定某個字體系列的名字。font-style：設定字型風格，預設值為normal，italic是用來指定使用斜體版本，oblique強制將字型傾斜。font-variant：設定小號的大寫字母，只對英文有效，作為了解內容。font-weight：設定字型的粗細。normal bold bolder lighter 100~900。font：字型屬性的簡寫。
bolder 和 lighter 的粗細是相對於上級父元素的繼承值而言的。具體情況參考下圖：
| Inherited value | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
列表
無序列表
<ul>：定義無序列表，並且只能包含<li>子元素。 <li>：定義列表項，可以包含與<div>完全類似的內容，所以可以包含較多型別的子元素。
<ul>
<li>無序列表項</li>
<li>無序列表項</li>
<li>無序列表項</li>
</ul>
有序列表
<ol>：定義有序列表。 <li>：定義列表項，可以包含與<div>完全類似的內容，所以可以包含較多型別的子元素。
<ol>
<li>有序列表項</li>
<li>有序列表項</li>
<li>有序列表項</li>
</ol>
定義列表
<dl>：定義列表 <dt>：定義術語 <dd>：定義描述
<dl>
<dt>質數</dt>
<dd>質數又稱素數。一個大於1的自然數，除了1和它自身外，不能被其他自然數整除的數叫做質數。</dd>
</dl>
列表樣式
list-style-type：設定列表項之前的標識。list-style-image：設定圖片為列表的標識。list-style-position：設定列表項標識是否屬於列表項的內容，outside、inside。list-style：列表樣式的簡寫。
表格
表格
| 元素 | 描述 |
|---|---|
<table> |
定義表格 |
<caption> |
定義表格標題。 |
<thead> |
定義表格的頁首。 |
<tbody> |
定義表格的主體。 |
<tfoot> |
定義表格的頁尾。 |
<th> |
定義表格的表頭。 |
<tr> |
定義表格的行。 |
<td> |
定義表格單元格。 |
<table>
<caption>表頭</caption>
<thead>
<tr>
<th>表頭</th>
<th>表頭</th>
<th>表頭</th>
<th>表頭</th>
<th>表頭</th>
<th>表頭</th>
</tr>
</thead>
<tbody>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
</tr>
</tfoot>
</table>
表格樣式
border-collapse：合併單元格之間的空隙，預設值是separate,collapse。border-spacing：控制單元格之間的空隙，只有在border-collapse: separate;有作用。empty-cells：是否顯示空的單元格，預設值是show，hide。caption-side：設定表格標題的位置，預設值是top，bottom。