文本樣式

?

color

文本顏色

屬性名color

屬性值	預(yù)定義的顏色名 | 十六進(jìn)制值的顏色值 | RGB顏色值
默認(rèn)值	依賴用戶代理
描述	設(shè)置文本的顏色

?

direction

文本方向（

屬性名direction

屬性值	ltr | rtl
默認(rèn)值	ltr
描述	設(shè)置文本的方向

?

line-height

文本行高

屬性名line-height

屬性值	normal |數(shù)字 | 長(zhǎng)度 | 百分百
默認(rèn)值	normal
描述	設(shè)置文本的行高

letter-spacing

字符間距

屬性名letter-spacing

屬性值	normal | 長(zhǎng)度
默認(rèn)值	normal
描述	增加或減少字符間的空白（字符間距）

• normal：默認(rèn)間隔
• length：用長(zhǎng)度值指定間隔。可以為負(fù)值。

text-align

?

屬性名text-align

屬性值	left | right | center | justify
默認(rèn)值	如果文本方向?yàn)閘tr，則默認(rèn)值為left；如果文本方向?yàn)閞tl，則默認(rèn)值為right
描述	設(shè)置文本在水平方向上的對(duì)齊方式

?

• left：內(nèi)容左對(duì)齊。
• center：內(nèi)容居中對(duì)齊。
• right：內(nèi)容右對(duì)齊。
• justify：內(nèi)容兩端對(duì)齊，但對(duì)于強(qiáng)制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因?yàn)樗仁堑谝恍幸彩亲詈笠恍?#xff09;不做處理。

?

text-indent

文本縮進(jìn)

屬性名text-indent

屬性值	|
默認(rèn)值	0
描述	設(shè)置首行文本的縮進(jìn)

length：用長(zhǎng)度值指定文本的縮進(jìn)。可以為負(fù)值。?percentage：用百分比指定文本的縮進(jìn)。百分比是相對(duì)于包含塊的寬度。可以為負(fù)值。

text-decoration

文本修飾

屬性名text-decoration

屬性值	none | [ underline || overline || line-through || blink ]
默認(rèn)值	none
描述	對(duì)文本進(jìn)行修飾

• none：指定文字無(wú)裝飾
• underline：指定文字的裝飾是下劃線
• overline：指定文字的裝飾是上劃線
• line-through：指定文字的裝飾是貫穿線

text-transform

文本的大小寫

屬性名text-transform

屬性值	capitalize | uppercase | lowercase | none
默認(rèn)值	none
描述	控制文本的大小寫

• none：無(wú)轉(zhuǎn)換
• capitalize：將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫
• uppercase：將每個(gè)單詞轉(zhuǎn)換成大寫
• lowercase：將每個(gè)單詞轉(zhuǎn)換成小寫

white-space

如何處理元素內(nèi)的空白

屬性名white-space

屬性值	normal | pre | nowrap | pre-wrap | pre-line
默認(rèn)值	normal
描述	設(shè)置如何處理元素內(nèi)的空白

?

• normal：默認(rèn)處理方式。空白會(huì)被瀏覽器忽略
• pre：用等寬字體顯示預(yù)先格式化的文本，不合并文字間的空白距離，當(dāng)文字超出邊界時(shí)不換行。
• nowrap：強(qiáng)制在同一行內(nèi)顯示所有文本，合并文本間的多余空白，直到文本結(jié)束或者遭遇br對(duì)象。
• pre-wrap：用等寬字體顯示預(yù)先格式化的文本，不合并文字間的空白距離，當(dāng)文字碰到邊界時(shí)發(fā)生換行。
• pre-line：保持文本的換行，不保留文字間的空白距離，當(dāng)文字碰到邊界時(shí)發(fā)生換行。

?

word-spacing

單詞間距

屬性名word-spacing

屬性值	normal |
默認(rèn)值	normal
描述	增加或減少單詞間的空白(即字間隔)

• normal：默認(rèn)間隔
• length：用長(zhǎng)度值指定間隔。可以為負(fù)值。

字體樣式

• font-size，設(shè)置字體的大小，最常用的值是長(zhǎng)度(14px)
• font-family：設(shè)置使用哪種字體，可以設(shè)置某個(gè)具體的字體，還可以設(shè)置某個(gè)字體系列的名字。
• font-style：設(shè)置字體風(fēng)格，默認(rèn)值為normal，italic是用來(lái)指定使用斜體版本，oblique強(qiáng)制將字體傾斜。
• font-variant：設(shè)置小號(hào)的大寫字母，只對(duì)英文有效，作為了解內(nèi)容。
• font-weight：設(shè)置字體的粗細(xì)。normal bold bolder lighter 100~900。
• font：字體屬性的簡(jiǎn)寫。

?

bolder?和?lighter?的粗細(xì)是相對(duì)于上級(jí)父元素的繼承值而言的。具體情況參考下圖：

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

?

列表

?

無(wú)序列表

<ul>：定義無(wú)序列表，并且只能包含<li>子元素。?<li>：定義列表項(xiàng)，可以包含與<div>完全類似的內(nèi)容，所以可以包含較多類型的子元素。

? ?<ul> ? ? ? ?<li>無(wú)序列表項(xiàng)</li> ? ? ? ?<li>無(wú)序列表項(xiàng)</li> ? ? ? ?<li>無(wú)序列表項(xiàng)</li> ? ?</ul>

?

有序列表

<ol>：定義有序列表。?<li>：定義列表項(xiàng)，可以包含與<div>完全類似的內(nèi)容，所以可以包含較多類型的子元素。

? ?<ol> ? ? ? ?<li>有序列表項(xiàng)</li> ? ? ? ?<li>有序列表項(xiàng)</li> ? ? ? ?<li>有序列表項(xiàng)</li> ? ?</ol>

?

定義列表

<dl>：定義列表?<dt>：定義術(shù)語(yǔ)?<dd>：定義描述

<dl> ? ?<dt>質(zhì)數(shù)</dt> ? ?<dd>質(zhì)數(shù)又稱素?cái)?shù)。一個(gè)大于1的自然數(shù)，除了1和它自身外，不能被其他自然數(shù)整除的數(shù)叫做質(zhì)數(shù)。</dd> </dl>

?

列表樣式

• list-style-type：設(shè)置列表項(xiàng)之前的標(biāo)識(shí)。
• list-style-image：設(shè)置圖片為列表的標(biāo)識(shí)。
• list-style-position：設(shè)置列表項(xiàng)標(biāo)識(shí)是否屬于列表項(xiàng)的內(nèi)容，outside、inside。
• list-style：列表樣式的簡(jiǎn)寫。

?

表格

?

表格

元素描述

<table>

定義表格

<caption>

定義表格標(biāo)題。

<thead>

定義表格的頁(yè)眉。

<tbody>

定義表格的主體。

<tfoot>

定義表格的頁(yè)腳。

<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：合并單元格之間的空隙，默認(rèn)值是separate, collapse。
• border-spacing：控制單元格之間的空隙，只有在border-collapse: separate;有作用。
• empty-cells：是否顯示空的單元格，默認(rèn)值是show， hide。
• caption-side：設(shè)置表格標(biāo)題的位置，默認(rèn)值是top，bottom。

?

特別聲明：本人也是小白，想讓與我一樣的初學(xué)者一起學(xué)習(xí)，寫的不好的地方請(qǐng)見(jiàn)諒

轉(zhuǎn)載于:https://www.cnblogs.com/hchui/p/9816083.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。