文本 · JavaWeb教案2019

## 文本 ### 文本的顏色顏色屬性被用來設置文字的顏色。顏色是通過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屬性一般用于刪除鏈接的下劃線。 ```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> ``` ### 5.文本縮進 text-indent屬性控制**首行文本**的縮進。屬性值可以是固定值（包括負數），也可是百分比。 > 注意em單位一般代表網頁中一個字符的大小。 ```html <style> p { text-indent:2em; } </style> <p> 南通青鳥教育集團成立于2006年2月，學校秉承“學習改變命運、實訓提升實力”的理念，以就業為導向，強勢發展校企合作、定向培養，借助南通和長三角地區軟件和服務外包興旺發達的產業優勢，累計為南通、上海、南京等城市培養和輸送專業人才6000余人。 </p> ``` ### 6.字符間距和字間距 * letter-spacing屬性控制字符的間距。屬性值可以是正負數。 * word-spacing屬性控制字間距。我們在這里設置CODING COFFEE的產品頁和首頁。 ```css p{ word-spacing: 5px; letter-spacing: 5px; } ``` ### 7.行間距 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> ``` ### 8.元素的垂直對齊方式 vertical-align屬性控制元素垂直對齊方式。 **vertical-align被用于垂直對齊inline元素，也就是display值為inline和inline-block的元素。** > 也就是垂直居中是運用在行內元素的。