CSS文本/字體 · 學并思Web應用程序

[TOC] ## CSS 文本 >[info] CSS 文本屬性可定義文本的外觀。通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。 <table class="dataintable"> <tbody> <tr> <th> 屬性 </th> <th> 描述 </th> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_text_color.asp"> * color </a> </td> <td> 設置文本顏色 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_text_direction.asp" title="CSS direction 屬性"> direction </a> </td> <td> 設置文本方向。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_dim_line-height.asp"> * line-height </a> </td> <td> 設置行高。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_text_letter-spacing.asp" title="CSS letter-spacing 屬性"> letter-spacing </a> </td> <td> 設置字符間距。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_text_text-align.asp" title="CSS text-align 屬性"> * text-align </a> </td> <td> 對齊元素中的文本。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_text_text-decoration.asp"> * text-decoration </a> </td> <td> 向文本添加修飾。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_text_text-indent.asp" title="CSS text-indent 屬性"> text-indent </a> </td> <td> 縮進元素中文本的首行。 </td> </tr> <tr> <td> text-shadow </td> <td> 設置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_text_text-transform.asp"> text-transform </a> </td> <td> 控制元素中的字母。 </td> </tr> <tr> <td> unicode-bidi </td> <td> 設置文本方向。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_text_white-space.asp" title="CSS white-space 屬性"> white-space </a> </td> <td> 設置元素中空白的處理方式。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_text_word-spacing.asp" title="CSS word-spacing 屬性"> word-spacing </a> </td> <td> 設置字間距。 </td> </tr> </tbody> </table> >[danger]提醒：帶*號為常用屬性 ## CSS 字體 >[info] CCSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。 <table class="dataintable"> <tbody> <tr> <th> 屬性 </th> <th> 描述 </th> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_font_font.asp" title="CSS font 屬性"> font </a> </td> <td> 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_font_font-family.asp" title="CSS font-family 屬性"> * font-family </a> </td> <td> 設置字體系列。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_font_font-size.asp" title="CSS font-size 屬性"> * font-size </a> </td> <td> 設置字體的尺寸。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_font_font-size-adjust.asp" title="CSS font-size-adjust 屬性"> font-size-adjust </a> </td> <td> 當首選字體不可用時，對替換字體進行智能縮放。（CSS2.1 已刪除該屬性。） </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_font_font-stretch.asp" title="CSS font-stretch 屬性"> font-stretch </a> </td> <td> 對字體進行水平拉伸。（CSS2.1 已刪除該屬性。） </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_font_font-style.asp" title="CSS font-style 屬性"> font-style </a> </td> <td> 設置字體風格。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_font_font-variant.asp" title="CSS font-variant 屬性"> font-variant </a> </td> <td> 以小型大寫字體或者正常字體顯示文本。 </td> </tr> <tr> <td> <a href="http://www.w3school.com.cn/cssref/pr_font_weight.asp" title="CSS font-weight 屬性"> font-weight </a> </td> <td> 設置字體的粗細。 </td> </tr> </tbody> </table> >[danger]**作業：**練習常用的樣式，文本顏色，左右對齊，上下對齊，修飾，文體大小，系列，加粗。