三、CSS樣式——文本
阿新 • • 發佈：2019-03-15
ima 裝飾 color tran 結果 capital link css樣式 rm2
CSS文本
概念：CSS文本屬性可定義文本外觀
通過文本屬性，可以改變文本的顏色、字符間距、對齊文本、裝飾文本、對文本縮進
| 屬性 | 描述 |
| color | 文本顏色 |
| direction | 文本方向 |
| line-height | 行高 |
| letter-spacing | 字符間距 |
| text-align | 對齊元素中的文本 |
| text-decoration | 向文本添加修飾 |
| text-indent | 縮進元素中文本的首行 |
| text-transform | 元素中的字母 |
| unicode-bidi | 設置文本方向 |
| white-space | 元素中空白的處理方式 |
| word-spacing | 字間距 |
<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" rel="stylesheet" type="text/css"> </head><body> <p id="p_hello">hello CSS</p> <div> <h3>靜夜思</h3> <p>窗前明月光，</p> <p>窗前明月光。</p> <p>窗前明月光，</p> <p>窗前明月光。</p> </div> <div> <p id="p_transform1">This Is A Test</p> <p id="p_transform2">this is a test</p> <p id="p_transform3">this is a test</p> </div> <div> <h1>test shadow!</h1> <p id="wrap">test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!</p> </div> </body> </html>
/*style.css*/ #p_hello{ color: brown; text-align: center; } h3{ text-indent: 0.5em; } #p_transform1{ text-transform:lowercase ; /*全部小寫*/ } #p_transform2{ text-transform: uppercase; /*全部大寫*/ } #p_transform3{ text-transform: capitalize; /*首字母大寫*/ } h1{ text-shadow: 5px 5px 5px #ff0000; } #wrap{ width: 100px; text-wrap:normal ; } /* h-shadow 必需。水平陰影的位置。允許負值。 v-shadow 必需。垂直陰影的位置。允許負值。 blur 可選。模糊的距離。 color 可選。陰影的顏色。 */
運行結果：
三、CSS樣式——文本