文本 · Web前端(打印用)

## 文本 ### 文本的顏色顏色屬性被用來設置文字的顏色。顏色是通過CSS最經常的指定： * 十六進制值 - 如:＃FF0000。 * 一個RGB值-如:RGB\(255,0,0\)。 * 顏色的名稱 - 如:red。 ```css body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} ``` ### 文本的水平對齊方式文本排列屬性是用來設置文本的水平對齊方式。文本可居中或對齊到左或右,兩端對齊. 當`text-align`設置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報紙）。 ![](https://box.kancloud.cn/18b4a26c64e806a684fe2064a178debf_711x270.png) ```html <style> p { text-align: justify; } </style> <body> <p>Be careful to perform the actions in the correct sequence.</p> </body> ``` ### 文本修飾 `text-decoration`屬性一般用于刪除鏈接的下劃線。 |值| 描述| |---|---| |none |默認。定義標準的文本。| |underline |定義文本下的一條線。| |overline |定義文本上的一條線。| |line-through |定義穿過文本下的一條線。| |blink |定義閃爍的文本。| |inherit |規定應該從父元素繼承 text-decoration 屬性的值。| ```html <style> a { text-decoration:none; } </style> <body> <a href="#">百度</a> </body> ``` ### 文本轉換文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。可用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。 ```html <style> .uppercase { text-transform:uppercase; } .lowercase { text-transform:lowercase; } /* 首字母大寫 */ .capitalize { text-transform:capitalize; } </style> <body> <p class="uppercase">Hello,World!</p> <p class="lowercase">Hello,World!</p> <p class="capitalize">hello,world!</p> </body> ``` ### 文本縮進 `text-indent`屬性控制**首行文本**的縮進。屬性值可以是固定值（包括負數），也可是百分比。 > 注意em單位一般代表網頁中一個字符的大小。 ```html <style> p { text-indent:2em; } </style> <p> 南通青鳥教育集團成立于2006年2月，學校秉承“學習改變命運、實訓提升實力”的理念，以就業為導向，強勢發展校企合作、定向培養，借助南通和長三角地區軟件和服務外包興旺發達的產業優勢，累計為南通、上海、南京等城市培養和輸送專業人才6000余人。 </p> ``` ### 字符間距和字間距 * letter-spacing屬性控制字符的間距。屬性值可以是正負數。 * word-spacing屬性控制字間距。我們在這里設置CODING COFFEE的產品頁和首頁。 ```css p{ word-spacing: 5px; letter-spacing: 5px; } ``` ### 行間距 `line-height`屬性控制行間距（簡稱行高）。 ```html <style> p{ word-spacing: 5px; letter-spacing: 5px; line-height: 20px; } </style> <p>A smooth, mild blend of coffees from Mexico A smooth, mild blend of coffees from MexicoA smooth, mild blend of coffees from MexicoA smooth, mild blend of coffees from Mexico</p> ``` ### 元素的垂直對齊方式 `vertical-align`屬性控制元素垂直對齊方式。 **vertical-align被用于垂直對齊inline元素，也就是display值為inline和inline-block的元素。** > 也就是垂直居中是運用在行內元素的。 |值|描述| |---|---| |baseline| 默認。元素放置在父元素的基線上。| |sub |垂直對齊文本的下標。| |super |垂直對齊文本的上標。| |top |把元素的頂端與行中最高元素的頂端對齊| |text-top |把元素的頂端與父元素字體的頂端對齊| |middle| 把此元素放置在父元素的中部。| |bottom |把元素的頂端與行中最低的元素的頂端對齊。| |text-bottom| 把元素的底端與父元素字體的底端對齊。| |inherit |規定應該從父元素繼承 vertical-align 屬性的值。 |