標籤：html css 樣式
通過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>：
CSS：文本樣式（縮排/對齊/字元間隔/文本裝飾/空白欄框處理）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
