溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

CSS如何定義文本的外觀(guān)

發(fā)布時(shí)間：2022-02-22 10:38:08 來(lái)源：億速云 閱讀：165 作者：小新 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹了CSS如何定義文本的外觀(guān)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

CSS 文本
CSS 文本屬性可定義文本的外觀(guān)。
通過(guò)文本屬性，您可以改變文本的顏色、字符間距，對(duì)文本進(jìn)行對(duì)齊、裝飾、縮進(jìn)，等等。

縮進(jìn)文本
把 Web 頁(yè)面上的段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。
CSS 提供了 text-indent 屬性，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。
通過(guò)使用 text-indent 屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度（可以是負(fù)值）。
這個(gè)屬性最常見(jiàn)的用途是將段落的首行縮進(jìn)，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em：

p {text-indent: 5em;}

注意：一般來(lái)說(shuō)，可以為所有塊級(jí)元素應(yīng)用 text-indent，但無(wú)法將該屬性應(yīng)用于行內(nèi)元素。
提示：如果想把一個(gè)行內(nèi)元素的第一行“縮進(jìn)”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果。
使用負(fù)值
text-indent 還可以設(shè)置為負(fù)值。

p {text-indent: -5em; padding-left: 5em;}

注釋?zhuān)簽榱吮苊馕谋境鰹g覽器窗口的左邊界，針對(duì)負(fù)縮進(jìn)再設(shè)置一個(gè)外邊距或一些內(nèi)邊距。
使用百分比值
text-indent 可以使用所有長(zhǎng)度單位，包括百分比值。

<style>
    div {width: 500px;}
    p {text-indent: 20%;}
</style>
<div>
    <p>this is a paragragh</p>
</div>

注釋?zhuān)喊俜謹(jǐn)?shù)是相對(duì)于父元素的寬度，本實(shí)例中，縮進(jìn)值是父元素的 20%，即 100 個(gè)像素。
繼承
text-indent 屬性可以繼承，請(qǐng)考慮如下標(biāo)記：

<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>

注釋?zhuān)罕緦?shí)例中段落也會(huì)縮進(jìn) 50 像素，因?yàn)檫@個(gè)段落繼承了 id 為 inner 的 div 元素的縮進(jìn)值。

水平對(duì)齊
text-align 是一個(gè)基本的屬性，它會(huì)影響一個(gè)元素中的文本行互相之間的對(duì)齊方式。
值 left、right 和 center 會(huì)導(dǎo)致元素中的文本分別左對(duì)齊、右對(duì)齊和居中。
    西方語(yǔ)言都是從左向右讀，所有 text-align 的默認(rèn)值是 left。
    而希伯來(lái)語(yǔ)和阿拉伯語(yǔ)之類(lèi)的的語(yǔ)言，text-align 則默認(rèn)為 right，因?yàn)檫@些語(yǔ)言從右向左讀。
    不出所料，center 會(huì)使每個(gè)文本行在元素中居中。
提示：將塊級(jí)元素或表元素居中，要通過(guò)在這些元素上適當(dāng)?shù)卦O(shè)置左、右外邊距來(lái)實(shí)現(xiàn)。
text-align:center 與 <CENTER>
您可能會(huì)認(rèn)為 text-align:center 與 <CENTER> 元素的作用一樣，但實(shí)際上二者大不相同。
    <CENTER> 不僅影響文本，還會(huì)把整個(gè)元素居中。
    text-align 不會(huì)控制元素的對(duì)齊，而只影響內(nèi)部?jī)?nèi)容。元素本身不受影響，只影響其中的文本。
兩端對(duì)齊文本 justify
水平對(duì)齊屬性 justify，是兩端對(duì)齊文本，文本行的左右兩端都放在父元素的內(nèi)邊界上。
兩端對(duì)齊文本在打印領(lǐng)域很常見(jiàn)，調(diào)整單詞和字母間的間隔，使各行的長(zhǎng)度恰好相等。

字間隔
word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。
    其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。
    word-spacing 屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。
如果提供一個(gè)正長(zhǎng)度值，那么字之間的間隔就會(huì)增加。設(shè)置一個(gè)負(fù)值，會(huì)把它拉近：

<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 的區(qū)別是，字母間隔修改的是字符或字母之間的間隔。
與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長(zhǎng)度。
默認(rèn)關(guān)鍵字是 normal（等同 letter-spacing: 0）。輸入的長(zhǎng)度值會(huì)使字母之間的間隔增加或減少：

<style>
    h2 {letter-spacing: -0.5em}
    h5 {letter-spacing: 20px}
</style>
<h2>This is header 1</h2>
<h5>This is header 4</h5>


字符轉(zhuǎn)換
text-transform 屬性處理文本的大小寫(xiě)。這個(gè)屬性有 4 個(gè)值：
    none：默認(rèn)值，對(duì)文本不做任何改動(dòng)，使用源文檔中的原有大小寫(xiě)。
    uppercase：將文本轉(zhuǎn)換為全大寫(xiě)字符。
    lowercase：將文本轉(zhuǎn)換為全小寫(xiě)字符。
    capitalize：只對(duì)每個(gè)單詞的首字母大寫(xiě)。
實(shí)例：控制文本中字母的大小寫(xiě)

<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 有兩方面的好處。
    首先，只需寫(xiě)一個(gè)簡(jiǎn)單的規(guī)則來(lái)完成這個(gè)修改，而無(wú)需修改 h2 元素本身。
    其次，如果您以后決定將所有大小寫(xiě)再切換為原來(lái)的大小寫(xiě)，可以更容易地完成修改。

文本裝飾
text-decoration 屬性提供了很多非常有趣的行為。text-decoration 有 5 個(gè)值：
    none：none 值會(huì)關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾。
    underline：underline 會(huì)對(duì)元素加下劃線(xiàn)，就像 HTML 中的 U 元素一樣。
    overline：overline 的作用與 underline 恰好相反，會(huì)在文本的頂端畫(huà)一個(gè)上劃線(xiàn)。
    line-through：在文本中間畫(huà)一個(gè)貫穿線(xiàn)，等價(jià)于 HTML 中的 S 和 strike 元素。
    blink：blink 會(huì)讓文本閃爍，類(lèi)似于 Netscape 支持的頗招非議的 blink 標(biāo)記。
例如，鏈接默認(rèn)地會(huì)有下劃線(xiàn)。如果您希望去掉超鏈接的下劃線(xiàn)，可以使用以下 CSS 代碼：

a {text-decoration: none;}

可以在一個(gè)規(guī)則中結(jié)合多種裝飾。如希望所有超鏈接既有下劃線(xiàn)，又有上劃線(xiàn)，則有：

a:link,a:visited {text-decoration: underline overline;}

注意，如果兩個(gè)不同的裝飾都與同一元素匹配，勝出規(guī)則的值會(huì)完全取代另一個(gè)值：

h3.stricken {text-decoration: line-through;}
h3 {text-decoration: underline overline;}

注釋?zhuān)核?class 為 stricken 的 h3 元素都只有一個(gè)貫穿線(xiàn)裝飾，而沒(méi)有下劃線(xiàn)和上劃線(xiàn)。

處理空白符
white-space 屬性會(huì)影響到用戶(hù)代理對(duì)源文檔中的空格、換行和 tab 字符的處理。
通過(guò)使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。
值 normal
默認(rèn)的 XHTML 處理已經(jīng)完成了空白符處理：它會(huì)把所有空白符合并為一個(gè)空格。
所以在 Web 瀏覽器中顯示時(shí)，各個(gè)字之間只會(huì)顯示一個(gè)空格，同時(shí)忽略元素中的換行。
可以用以下聲明顯式地設(shè)置這種默認(rèn)行為：

p {white-space: normal;}

注釋?zhuān)荷厦娴囊?guī)則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符。
提示：換行字符（回車(chē)）會(huì)轉(zhuǎn)換為空格，一行中多個(gè)空格的序列也會(huì)轉(zhuǎn)換為一個(gè)空格。
值 pre
如果將 white-space 設(shè)置為 pre，其行為就像 XHTML 的 pre 元素一樣：
受這個(gè)屬性影響的元素中，空白符不會(huì)被忽略，瀏覽器將會(huì)注意額外的空格，甚至回車(chē)。
值 nowrap
值 nowrap 會(huì)防止元素中的文本換行（換行字符會(huì)轉(zhuǎn)換為空格），除非使用了一個(gè) br 元素。
在 CSS 中使用 nowrap 類(lèi)似于 HTML 4 中用 <td nowrap> 將一個(gè)表單元格設(shè)置為不能換行。
不過(guò) white-space 值可以應(yīng)用到任何元素。
值 pre-wrap 和 pre-line
屬性值設(shè)置為 pre-wrap 時(shí)，瀏覽器不僅會(huì)保留空白符并保留換行符，還允許自動(dòng)換行。
屬性值設(shè)置為 pre-line 時(shí)，瀏覽器會(huì)保留換行符，并允許自動(dòng)換行，但是會(huì)合并空白符。
總結(jié) white-space 屬性的行為：

值        空白符    換行符    自動(dòng)換行
normal    合并      忽略      允許
nowrap    合并      忽略      不允許
pre       保留      保留      不允許
pre-wrap  保留      保留      允許
pre-line  合并      保留      允許


文本方向
    如果您閱讀的是英文書(shū)籍，就會(huì)從左到右、從上到下地閱讀，這就是英文的流方向。不過(guò)，我們古漢語(yǔ)是從右到左來(lái)閱讀的，當(dāng)然還包括希伯來(lái)語(yǔ)和阿拉伯語(yǔ)等等。
    direction 屬性（默認(rèn)值是 ltr）影響塊級(jí)元素中文本的書(shū)寫(xiě)方向、表中列布局的方向、內(nèi)容水平填充其元素框的方向、以及兩端對(duì)齊元素中最后一行的位置。
    direction 屬性有兩個(gè)值：ltr 和 rtl。大多數(shù)情況下，默認(rèn)值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應(yīng)使用值 rtl。
    注釋?zhuān)簩?duì)于行內(nèi)元素，只有當(dāng) unicode-bidi 屬性設(shè)置為 embed 或 bidi-override 時(shí)才會(huì)應(yīng)用 direction 屬性。
實(shí)例

<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 屬性設(shè)置行間的距離（行高），line-height 屬性不允許使用負(fù)值。
normal：默認(rèn)。設(shè)置合理的行間距。
number：設(shè)置數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來(lái)設(shè)置行間距。
length：設(shè)置固定的行間距。
%：基于當(dāng)前字體尺寸的百分比行間距。
inherit：規(guī)定應(yīng)該從父元素繼承 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：設(shè)置文本顏色
direction：設(shè)置文本方向。
line-height：設(shè)置行高。
letter-spacing：設(shè)置字符間距。
text-align：對(duì)齊元素中的文本。
text-decoration：向文本添加修飾。
text-indent：縮進(jìn)元素中文本的首行。
text-shadow：設(shè)置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒(méi)有保留該屬性。
text-transform：控制元素中的字母。
unicode-bidi：設(shè)置文本方向。
white-space：設(shè)置元素中空白的處理方式。
word-spacing：設(shè)置字間距。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS如何定義文本的外觀(guān)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手