2023學(xué)年完整公開課版CSS文本樣式

——CSS文本樣式移動(dòng)商務(wù)系統(tǒng)前端設(shè)計(jì)CSS文本樣式CSS的文字樣式可以通過各種屬性的綜合使用實(shí)現(xiàn)各種樣式的文字排版。123由于Web是HTML文檔的集合體，有動(dòng)態(tài)的元素、靜態(tài)的元素、功能展示的元素，它們的呈現(xiàn)不能夠是雜亂無章的，這就需要對(duì)各種文字樣式進(jìn)行排版。排版是對(duì)文本樣式進(jìn)行各種操作（例如改變文本的顏色、字符間距、行高、文字對(duì)齊方式等，并需實(shí)現(xiàn)文本縮進(jìn)、字體裝飾等內(nèi)容）。CSS文本樣式CSS文本樣式color屬性規(guī)定文本的顏色。這個(gè)顏色還會(huì)應(yīng)用到元素的所有邊框，除非被border-color或另外某個(gè)邊框顏色屬性覆蓋?，F(xiàn)場(chǎng)演示：案例9-01：文本顏色CSS文本樣式CSS文本樣式text-indent屬性規(guī)定文本塊中首行文本的縮進(jìn)。該屬性值可以為像素值、百分比或相對(duì)值em，也可以為正值或負(fù)值，如果使用負(fù)值，那么首行會(huì)被縮進(jìn)到左邊?，F(xiàn)場(chǎng)演示：案例9-02：文本縮進(jìn)CSS文本樣式CSS文本樣式line-hight屬性用來設(shè)置行間的距離（行高）。line-height與font-size的計(jì)算值之差在CSS中成為“行間距”，將其值分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部，其中可以包含這些內(nèi)容的最小框就是行框。現(xiàn)場(chǎng)演示：案例9-03：行高CSS文本樣式CSS文本樣式letter-spacing屬性用來定義字符間的空白大?。ㄗ址g距）。該屬性定義了在文本字符框之間插入多少空間，由于字符字形通常比其字符框要窄，指定長(zhǎng)度值時(shí)，會(huì)調(diào)整字母之間通常的間隔，normal就相當(dāng)于值為0?，F(xiàn)場(chǎng)演示：案例9-04：字母間隔CSS文本樣式CSS文本樣式text-align屬性規(guī)定元素中文本的水平對(duì)齊方式。該屬性通過指定行框與某點(diǎn)對(duì)齊，來設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式。現(xiàn)場(chǎng)演示：案例9-05：水平對(duì)齊CSS文本樣式CSS文本樣式text-decoration屬性規(guī)定添加到文本的修飾，修飾的顏色由“color”屬性設(shè)置。現(xiàn)場(chǎng)演示：案例9-06：文本裝飾CSS文本樣式CSS文本樣式text-transform屬性用來對(duì)文本的大小寫進(jìn)行轉(zhuǎn)換處理。該屬性會(huì)改變?cè)刂械淖帜复笮懀还茉次谋镜拇笮?。如果值為capitalize，則要對(duì)某些字母大寫，但是并沒有明確定義如何確定哪些字母要大寫，這取決于瀏覽器如何識(shí)別出各個(gè)“詞”?，F(xiàn)場(chǎng)演示：案例9-07：字符轉(zhuǎn)換CSS文本樣式CSS文本樣式white-space屬性設(shè)置如何處理元素內(nèi)的空白。該屬性聲明建立布局過程中如何處理元素中的空白符，其中值pre-wrap和pre-line是CSS2.1中新增的。現(xiàn)場(chǎng)演示：案例9-08：元素空白處理CSS文本樣式CSS文本樣式word-spacing屬性用來增加或減少單詞（英文）間的空白（即字間隔）。針對(duì)這個(gè)屬性，“字”定義為由空白符包圍的一個(gè)字符串。如果指定為長(zhǎng)度值，會(huì)調(diào)整字之間的通常間隔，normal就等同于設(shè)置為0，允許指定負(fù)長(zhǎng)度值，這會(huì)讓字之間擠得更緊?，F(xiàn)場(chǎng)演示：案例9-09：文字間隔CSS文本樣式CSS文本樣式fi