溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS如何定義文本的外觀，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
CSS 文本
CSS 文本屬性可定義文本的外觀。
通過文本屬性，您可以改變文本的顏色、字符間距，對文本進行對齊、裝飾、縮進，等等。
縮進文本
把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。
CSS 提供了 text-indent 屬性，該屬性可以方便地實現文本縮進。
通過使用 text-indent 屬性，所有元素的第一行都可以縮進一個給定的長度（可以是負值）。
這個屬性最常見的用途是將段落的首行縮進，下面的規則會使所有段落的首行縮進 5 em：
p {text-indent: 5em;}注意：一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用于行內元素。
提示：如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。
使用負值
text-indent 還可以設置為負值。
p {text-indent: -5em; padding-left: 5em;}注釋：為了避免文本超出瀏覽器窗口的左邊界，針對負縮進再設置一個外邊距或一些內邊距。
使用百分比值
text-indent 可以使用所有長度單位，包括百分比值。
<style>
div {width: 500px;}
p {text-indent: 20%;}
</style>
<div>
<p>this is a paragragh</p>
</div>注釋：百分數是相對于父元素的寬度，本實例中，縮進值是父元素的 20%，即 100 個像素。
繼承
text-indent 屬性可以繼承，請考慮如下標記：
<style>
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
</style>
<div id="outer">
<div id="inner">
some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>注釋：本實例中段落也會縮進 50 像素，因為這個段落繼承了 id 為 inner 的 div 元素的縮進值。
水平對齊
text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。
值 left、right 和 center 會導致元素中的文本分別左對齊、右對齊和居中。
西方語言都是從左向右讀，所有 text-align 的默認值是 left。
而希伯來語和阿拉伯語之類的的語言，text-align 則默認為 right，因為這些語言從右向左讀。
不出所料，center 會使每個文本行在元素中居中。
提示：將塊級元素或表元素居中，要通過在這些元素上適當地設置左、右外邊距來實現。
text-align:center 與 <CENTER>
您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣，但實際上二者大不相同。
<CENTER> 不僅影響文本，還會把整個元素居中。
text-align 不會控制元素的對齊，而只影響內部內容。元素本身不受影響，只影響其中的文本。
兩端對齊文本 justify
水平對齊屬性 justify，是兩端對齊文本，文本行的左右兩端都放在父元素的內邊界上。
兩端對齊文本在打印領域很常見，調整單詞和字母間的間隔，使各行的長度恰好相等。
字間隔
word-spacing 屬性可以改變字（單詞）之間的標準間隔。
其默認值 normal 與設置值為 0 是一樣的。
word-spacing 屬性接受一個正長度值或負長度值。
如果提供一個正長度值，那么字之間的間隔就會增加。設置一個負值，會把它拉近：
<style>
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
</style>
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
字母間隔
letter-spacing 屬性與 word-spacing 的區別是，字母間隔修改的是字符或字母之間的間隔。
與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長度。
默認關鍵字是 normal（等同 letter-spacing: 0）。輸入的長度值會使字母之間的間隔增加或減少：
<style>
h2 {letter-spacing: -0.5em}
h5 {letter-spacing: 20px}
</style>
<h2>This is header 1</h2>
<h5>This is header 4</h5>
字符轉換
text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：
none：默認值，對文本不做任何改動，使用源文檔中的原有大小寫。
uppercase：將文本轉換為全大寫字符。
lowercase：將文本轉換為全小寫字符。
capitalize：只對每個單詞的首字母大寫。
實例：控制文本中字母的大小寫
<html>
<head>
<style type="text/css">
h2 {text-transform: uppercase}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<h2>This Is An H1 Element</h2>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body>
</html>提示：使用 text-transform 有兩方面的好處。
首先，只需寫一個簡單的規則來完成這個修改，而無需修改 h2 元素本身。
其次，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。
文本裝飾
text-decoration 屬性提供了很多非常有趣的行為。text-decoration 有 5 個值：
none：none 值會關閉原本應用到一個元素上的所有裝飾。
underline：underline 會對元素加下劃線，就像 HTML 中的 U 元素一樣。
overline：overline 的作用與 underline 恰好相反，會在文本的頂端畫一個上劃線。
line-through：在文本中間畫一個貫穿線，等價于 HTML 中的 S 和 strike 元素。
blink：blink 會讓文本閃爍，類似于 Netscape 支持的頗招非議的 blink 標記。
例如，鏈接默認地會有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 代碼：
a {text-decoration: none;}可以在一個規則中結合多種裝飾。如希望所有超鏈接既有下劃線，又有上劃線，則有：
a:link,a:visited {text-decoration: underline overline;}注意，如果兩個不同的裝飾都與同一元素匹配，勝出規則的值會完全取代另一個值：
h3.stricken {text-decoration: line-through;}
h3 {text-decoration: underline overline;}注釋：所有 class 為 stricken 的 h3 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線。
處理空白符
white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。
通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。
值 normal
默認的 XHTML 處理已經完成了空白符處理：它會把所有空白符合并為一個空格。
所以在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行。
可以用以下聲明顯式地設置這種默認行為：
p {white-space: normal;}注釋：上面的規則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符。
提示：換行字符（回車）會轉換為空格，一行中多個空格的序列也會轉換為一個空格。
值 pre
如果將 white-space 設置為 pre，其行為就像 XHTML 的 pre 元素一樣：
受這個屬性影響的元素中，空白符不會被忽略，瀏覽器將會注意額外的空格，甚至回車。
值 nowrap
值 nowrap 會防止元素中的文本換行（換行字符會轉換為空格），除非使用了一個 br 元素。
在 CSS 中使用 nowrap 類似于 HTML 4 中用 <td nowrap> 將一個表單元格設置為不能換行。
不過 white-space 值可以應用到任何元素。
值 pre-wrap 和 pre-line
屬性值設置為 pre-wrap 時，瀏覽器不僅會保留空白符并保留換行符，還允許自動換行。
屬性值設置為 pre-line 時，瀏覽器會保留換行符，并允許自動換行，但是會合并空白符。
總結 white-space 屬性的行為：
值 空白符 換行符 自動換行 normal 合并 忽略 允許 nowrap 合并 忽略 不允許 pre 保留 保留 不允許 pre-wrap 保留 保留 允許 pre-line 合并 保留 允許
文本方向
如果您閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的流方向。不過，我們古漢語是從右到左來閱讀的，當然還包括希伯來語和阿拉伯語等等。
direction 屬性（默認值是 ltr）影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最后一行的位置。
direction 屬性有兩個值：ltr 和 rtl。大多數情況下，默認值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應使用值 rtl。
注釋：對于行內元素，只有當 unicode-bidi 屬性設置為 embed 或 bidi-override 時才會應用 direction 屬性。
實例
<html>
<head>
<style type="text/css">
div.one {direction: rtl}
div.two {direction: ltr}
</style>
</head>
<body>
<div class="one">Some text. Right-to-left direction.</div>
<div class="two">Some text. Left-to-right direction.</div>
</body>
</html>
行間距
line-height 屬性設置行間的距離（行高），line-height 屬性不允許使用負值。
normal：默認。設置合理的行間距。
number：設置數字，此數字會與當前的字體尺寸相乘來設置行間距。
length：設置固定的行間距。
%：基于當前字體尺寸的百分比行間距。
inherit：規定應該從父元素繼承 line-height 屬性的值。
p.small {line-height: 90%}
p.big {line-height: 30px}
p.small1 {line-height: 0.5}
p.big1 {line-height: 2}
CSS 文本 屬性及描述
color：設置文本顏色
direction：設置文本方向。
line-height：設置行高。
letter-spacing：設置字符間距。
text-align：對齊元素中的文本。
text-decoration：向文本添加修飾。
text-indent：縮進元素中文本的首行。
text-shadow：設置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。
text-transform：控制元素中的字母。
unicode-bidi：設置文本方向。
white-space：設置元素中空白的處理方式。
word-spacing：設置字間距。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS如何定義文本的外觀”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
