2023學年完整公開課版CSS文本樣式

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