CSS：文字樣式（縮排/對齊/字元間隔/文字裝飾/空白格處理）
阿新 • • 發佈：2019-02-11
通過CSS樣式，可以設定文字的縮排，對齊，字元間隔等屬性。
程式碼整理自w3school：http://www.w3school.com.cn
效果圖：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <head> <!-- (1)設定首行縮排：text-indent (2)水平對齊：text-align (3)字間隔(設定字,單詞 之間的標準間隔)：word-spacing (4)字元間隔（設定字元或字母之間的間隔）：letter-spacing (5)字元轉換（大小寫）：text-transform (6)文字裝飾：text-decoration (7)處理空白符：white-space --> <style> body {background-color:#e9e9e9} span.redStyle {color:red} p#indentStyle {text-indent:5em} p#indentStyleNega {text-indent:-5em; padding-left: 5em;} p#indentStylePercent {text-indent:20%} div.divFixedWidth {width:500px;background-color:#bfb;} div#outer {width: 500px;background-color:#bfb} div#inner {text-indent: 10%;} p#pFixedWidth {width: 200px;} p.alignLeftStyle{text-align:left} p.alignRightStyle{text-align:right} p.alignCenterStyle{text-align:center} p.bigWordSpace{word-spacing:0.5em} p.smallWordSpace{word-spacing:-0.2em} p.bigLetterSpace{letter-spacing:0.2em} p.smallLetterSpace{letter-spacing:-0.2em} p.upperCase span {text-transform:uppercase} p.lowerCase span {text-transform:lowercase} p.capitalize span {text-transform:capitalize} p.underlineStyle {text-decoration:underline} p.overlineStyle {text-decoration:overline} p.whiteSpaceNormal {white-space:normal} p.whiteSpacePre {white-space:pre} p.whiteSpacePreWrap {white-space:pre-wrap} p.whiteSpacePreLine {white-space:pre-line} p.whiteSpaceNoWrap {white-space:nowrap} </style> </head> <title>CSS 文字</title> <!--CSS文字屬性可定義文字的外觀，可以改變文字的顏色、字元間距，對齊文字，裝飾文字，對文字進行縮排等--> <body> <h3>(一)首行數字縮排</h3> <p id="indentStyle"><span class="redStyle">首行縮排5em的段落。</span>這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容</p> <h3>(二)首行數字縮排為負值</h3> <p id="indentStyleNega"><span class="redStyle">首行縮排-5em,padding-left=5em的段落(懸掛縮排的效果)。</span>這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容</p> <h3>(三)首行相對父元素百分比縮排</h3> <div class="divFixedWidth"> <p id="indentStylePercent"><span class="redStyle">首行相對父元素縮排20%。由於父元素是500px,因此本段落首行就縮排100px。</span>這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容這是段落內容</p> </div> <hr/> <!--text-indent屬性可以繼承--> <div id="outer"> <div id="inner"> some text. some text. some text. <p id="pFixedWidth">this is a paragragh.</p> </div> </div> <h3>(四)文字對齊方式</h3> <!--text-align 是一個基本的屬性，它會影響一個元素中的文字行互相之間的對齊方式。(將塊級元素或表元素居中，要通過在這些元素上適當地設定左、右外邊距來實現。)--> <div class="divFixedWidth"> <p class="alignLeftStyle">這是一個居左的段落</p> <p class="alignCenterStyle">這是一個居中的段落</p> <p class="alignRightStyle">這是一個居右的段落</p> </div> <hr/> <!--字間隔--> <h3>(五)字間隔：設定字,單詞 之間的間隔</h3> <p>This is a normal paragraph. 這是普通段落，這是普通段落。</p> <p class="bigWordSpace">The spaces between words will be increased. 單詞之間的間距被擴大了，單詞之間的間距被擴大了。</p> <p class="smallWordSpace">The spaces between words will be decreased. 單詞之間的間距被縮小了，單詞之間的間距被縮小了。</p> <p>注：word-spacing屬性對中文無效。</p> <hr/> <!--字元間隔--> <h3>(六)字元間隔：設定字元或字母之間的間隔</h3> <p>This is a normal paragraph. 這是普通段落，這是普通段落。</p> <p class="bigLetterSpace">The spaces between letters will be increased. 字元之間的間距被擴大了，字元之間的間距被擴大了。</p> <p class="smallLetterSpace">The spaces between letters will be decreased. 字元之間的間距被縮小了，字元之間的間距被縮小了。</p> <hr/> <!--字元轉換--> <h3>(七)字元轉換：改變字母的大小寫</h3> <p class="upperCase">Hello world轉為大寫：<span>Hello world<span></p> <p class="lowerCase">Hello world轉為大寫：<span>Hello world<span></p> <p class="capitalize">Hello world轉為每個單詞首字母大寫：<span>Hello world<span></p> <hr/> <!--字元裝飾--> <h3>(八)字元裝飾：下劃線/貫穿線 等</h3> <p class="underlineStyle">下劃線</p> <p class="overlineStyle">上劃線</p> <hr/> <!--空格處理--> <h3>(九)空格處理</h3> <p class="whiteSpaceNormal">(1)normal:這個 段落裡面有 很多 的空格 以及很多 的換行符，測試 不同的 空格處理方式</p> <p class="whiteSpacePre">(2)pre:這個 段落裡面有 很多 的空格 以及很多 的換行符，測試 不同的 空格處理方式</p> <p class="whiteSpacePreWrap">(3)pre-wrap:這個 段落裡面有 很多 的空格 以及很多 的換行符，測試 不同的 空格處理方式</p> <p class="whiteSpacePreLine">(4)pre-line:這個 段落裡面有 很多 的空格 以及很多 的換行符，測試 不同的 空格處理方式</p> <p class="whiteSpaceNoWrap">(5)nowrap:這個 段落裡面有 很多 的空格 以及很多 的換行符，測試 不同的 空格處理方式</p> </body> </html>
