文本樣式

?

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：默認處理方式?？瞻讜粸g覽器忽略
• 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 valuebolderlighter

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。

?

特別聲明：本人也是小白，想讓與我一樣的初學者一起學習，寫的不好的地方請見諒

轉載于:https://www.cnblogs.com/hchui/p/9816083.html

總結

以上是生活随笔為你收集整理的html和css入门 （三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。