Text ng CSS

Maaaring idedefinir ng CSS ang hitsura ng teksto.

Sa pamamagitan ng mga attribute ng teksto, madali mong baguhin ang kulay ng teksto, ang paghahabla ng karakter, ang pag-aayos ng teksto, ang pag-aayos ng dekoration ng teksto, ang pag-sukin ng teksto, at iba pa.

Text Indentation

Pag-sukin ng unang linya ng pahina sa Web page, ito ay isang pinakamadalang epekto ng format ng teksto na ginagamit.

Nagbibigay ang CSS ng Attribute ng text-indentAng attribute na ito ay madali na gamitin para sa pag-iimplentasyon ng pag-sukin ng teksto.

Ginagamit ang attribute ng text-indent upang ang unang linya ng lahat ng elemento ay masusukin ng isang binigay na haba, kahit na ang haba ay maaaring maging negatibo.

这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

Note:一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

Mga tagubilin:Kung gusto mong gumawa ng unang linya ng isang inline na elemento na nasa buhat, magamit ang kaliwang panloob na margay o labas na margay upang gumawa ng epekto na iyon.

Gamitin ang negatibong halaga

Ang text-indent ay maaaring naitakda ng negatibong halaga. Ginagamit ang teknolohiya na ito upang magkaroon ng maraming kagandahang epekto, tulad ng "suspended indentation", kung saan ang unang linya ay nasa kalye ng kanyang katabi sa kahabaan ng elemento:

p {text-indent: -5em;}

Gayunman, mag-ingat sa pagtatakda ng negatibong halaga sa text-indent, kung ang isang paraliparis ay naitakda ng negatibong halaga, ang ilang teksto ng unang linya ay maaaring lumabas sa kalye ng kanyang katabi sa window ng browser. Upang maiwasan ang ganitong problema sa pagpapakita, itinuturo na magtakda ng labas na margay o ilang pang insidenteng margay para sa negatibong buhat:

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

Gamitin ang porsyento na halaga

Ang text-indent ay maaaring gamitin ang lahat ng mga yunit ng sukat, kasama ang porsyento na halaga.

Ang porsyento ay dapat sa kinaugalian ng lapad ng magulang na elemento ng buhat. Sinasabi nito, kung ang halaga ng buhat ay naitakda na 20%, ang unang linya ng naapektuhan na elemento ay bububuhat ng 20% ng lapad ng magulang na elemento.

Sa halimbawa na ito, ang halaga ng buhat ay 20% ng magulang na elemento, o 100 pixel:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>ito ay isang paragrapo</p>
</div>

minamana

Ang text-indent ay maaaring minamana, mag-ingat sa mga markang ito:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">mga teksto. mga teksto. mga teksto.</div>
<p>ito ay isang paragrapo.</p>
</div>
</div>

Ang mga paraliparis na nasa markang ito ay mabubuhat ng 50 pixel, dahil ang paraliparis na ito ay minamana ng halaga ng buhat ng div na may id na inner.

horizontal alignment

text-align Ito ay isang pangunahing attribute, na apektuhin angText lineMga pagkakasunod-sunod na alignment. Ang unang tatlong halaga ay ganap na direktang mapanood, ngunit ang pangapat at panglimang halaga ay halos kumplikado.

Ang halaga na left, right at center ay magiging magkakalat, magkakaliwa at gitnang teksto sa elemento.

Ang mga Western language ay nabasa mula sa kaliwa hanggang kanan, kaya ang default na halaga ng text-align ay left. Ang teksto ay nakakalat sa kaliwa at may bakal sa kanan (tinatawag na 'text from left to right'). Para sa mga wika tulad ng Hebreo at Arabic, ang text-align ay default na right, dahil ang mga wika na ito ay nabasa mula sa kanan hanggang kaliwa. Hindi nakakagulat, ang center ay magiging gitnang gitnang teksto sa elemento.

Mga tagubilin:Para sa pagkakalat ng bloke o table elemento, dapat na gawin sa pamamagitan ng pagtatakda ng angkop na walang bayad na pagkakalat sa kabilang dulo ng mga elemento.

text-align:center at <CENTER>

Maaaring maniniwala ka na ang text-align:center ay katulad ng pagkilos ng <CENTER> elemento, ngunit sa katunayan sila ay magkakaiba.

<CENTER> ay hindi lamang apektuhin ang teksto, kundi pati na rin ang buong elemento. Ang text-align ay hindi makokontrol ang alignment ng elemento, kundi lamang ang kahalagahan ng loob ng elemento. Ang elemento mismo ay hindi magiging muling ilipat mula sa isang bahagi hanggang sa ibang bahagi, ngunit ang teksto lamang ang apektuhin.

justify

Ang huling horizontal alignment attribute ay justify.

Sa text-align sa parehong dulo, ang magkakasunod na linya ng teksto sa parehong dulo ay ilagay sa pangloob na hangganan ng kahon ng magulang. Pagkatapos, ayusin ang puwang sa pagitan ng mga salita at mga titik, upang ang haba ng bawat linya ay magiging magkapareho. Baka nating napansin, ang text-align sa parehong dulo ay pangkaraniwang ginagamit sa pagkakapinta.

Kailangan mong paniwalaan na ang user agent (hindi ang CSS) ang magiging responsable sa kung paano magpapatagal ang text-align sa parehong dulo ng text sa kahon ng magulang, upang pumuno ng puwang sa pagitan ng dulo ng kahon ng magulang. Para sa detalye, mangyaring basahin: CSS text-align attribute reference page.

Pagsasagupa ng salita

Ang attribute na word-spacingMaaaring baguhin ang standard na puwang sa pagitan ng mga salita. Ang default na halaga na normal ay katulad ng pagtatakda ng 0.

Ang attribute na word-spacing ay tumatanggap ng isang positibong haba o nagpapababa na haba. Kung isinasagawa ang isang positibong haba, ang puwang sa pagitan ng mga salita ay magiging mas malaki. Para sa word-spacing, ang pagtatakda ng isang negatibong halaga ay magiging mas malapit ito:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Ito ay isang paragrapo. Ang pagkakaiba ng puwang sa pagitan ng mga salita ay magiging mas malaki.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

实例 TIY ：增加或减少单词间距（字间隔）

Note:如需深入理解 CSS 对“字”（word）的定义，请访问 CSS word-spacing 属性参考页.

字母间隔

letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

实例 TIY ：规定字符间距（字母间隔）

字符转换

text-transform 属性处理文本的大小写。这个属性有 4 个值：

  • none
  • uppercase
  • lowercase
  • capitalize

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：

h1 {text-transform: uppercase}

使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。

实例 TIY ：控制文本中字母的大小写

文本装饰

接下来，我们讨论 text-decoration 属性Ito ay isang malaking katangian na nagbibigay ng maraming kagila-gilalas na pag-uugali.

Ang text-decoration ay may 5 na halaga:

  • none
  • underline
  • overline
  • line-through
  • blink

Bilang inaasahan, ang underline ay magdaragdag ng underline sa elemento, katulad ng U elemento sa HTML. Ang overline ay magiging kabaligtaran, magpipinta ng overline sa itaas ng teksto. Ang halaga ng line-through ay magpipinta ng tulay sa gitna ng teksto, katulad ng S at strike elemento sa HTML. Ang blink ay magpapabagabag sa teksto, katulad ng controversial blink mark na sinusuportahan ng Netscape.

Ang halaga ng none ay mag-iwan ng lahat ng mga dekorasyon na naaangkop sa isang elemento. Karaniwang, ang teksto na walang dekorasyon ay ang default na anyo, ngunit hindi palaging ganito. Halimbawa, ang link ay may default underline. Kung gusto mong alisin ang underline ng hyperlink, magamit ang sumusunod na CSS para gawin ito:

a {text-decoration: none;}

Note:Kung maliwanag na naalis ng tulad na patakaran ang underline ng link, ang tanging visual na pagkakaiba ng anchor at normal na teksto ay ang kulay (kung sakaling ito ay default, walang kasiguruhan na ang kulay ay may pagkakaiba, pero walang kasiguruhan din na ang kulay ay may pagkakaiba).

Maaari rin ang pagkakasama ng iba't ibang dekorasyon sa isang patakaran. Kung gusto mong magkaroon ng lahat ng hyperlink na may underline at overline, ang patakaran ay tulad nito:

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

Gayunpaman, dapat mangyaring pagsiyahan na kung ang dalawang magkakaibang dekorasyon ay tumutugma sa parehong elemento, ang halaga ng nagtagumpay na patakaran ay papalitan ng buong halaga ng iba.

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

Para sa binigay na patakaran, ang lahat ng h2 elemento na may klase na stricken ay may isang lamang na tulay na dekorasyon, walang underline at underline, dahil Ang halaga ng text-decoration ay papalitan sa halip na pinagsama-samang na.

Paghawak ng bakanteng ito

white-space katangianNakakaapekto sa paghawak ng user agent sa mga espasyo, paglipas ng linya at tab na mga titik sa orihinal na dokumento.

Ginagamit ang katangian na ito upang makapag-impak sa paraan ng paghawak ng browser ng mga bakanteng pagitan ng mga titik at pagitan ng mga linya ng teksto. Sa ilang kaparaanan, ang default na paghawak ng XHTML ay nakumpleto na ang paghawak ng bakanteng ito: ito ay magkakasama sa lahat ng bakanteng ito sa isang espasyo. Kaya, sa ibabaw ng mga sumusunod na marka, kapag ito ay ipinapakita sa Web browser, ang bawat titik ay magpakita lamang ng isang espasyo, at maiiwan ang mga paglipas ng linya sa loob ng elemento:

<p>This     paragraph has    many
    spaces           in it.</p>

Maaaring maipapanggapang deklarasyon ang ganitong karaniwang pag-uugali:

p {white-space: normal;}

Ang mga patakaran sa itaas ay nagsasabi sa brauser na gumawa ng karaniwang paghawak: itapon ang dagdag na puti. Kung ibinigay ang halaga na ito, ang mga character ng pagpalit ng linya (enter) ay magiging espasyo, at ang mga sekvensya ng maraming espasyo sa isang linya ay magiging isang espasyo.

Mga halimbawa ng TIY: white-space: normal

Halaga ng pre

Gayunman, kung ang white-space ay naitakda bilang pre, ang paghawak sa puti ng elemento na apektado ng katangian na ito ay magiging magiging magiging katulad ng pre elemento ng XHTML; ang mga puti ay hindi mapapahiwatig.

Kung ang halaga ng attribute ng white-space ay pre, ang brauser ay magiging mas mabuti sa pagpansin sa dagdag na puti, kahit na ang enter. Sa ganitong aspekto, at lamang sa ganitong aspekto, ang anumang elemento ay magiging katulad ng pre elemento.

Mga halimbawa ng TIY: white-space: pre

Note:Pinatunayan na hindi suportado ng IE 7 at mas maagang bersyon ng mga brauser ang halaga na ito, kaya gamitin ang mga hindi IE na brauser upang tingnan ang mga halimbawa sa itaas.

Halaga ng nowrap

Ang kabaligtaran na halaga ay nowrap, na magpapatigil sa pagpalit ng linya ng teksto sa loob ng elemento, maliban sa paggamit ng br elemento. Ang paggamit ng nowrap sa CSS ay katulad ng paggamit ng <td nowrap> sa HTML 4 para sa pagtatakda ng isang table cell na hindi puwedeng magpalit ng linya, ngunit ang halaga ng white-space ay puwedeng gamitin sa anumang elemento.

Mga halimbawa ng TIY: white-space: nowrap

Halaga ng pre-wrap at pre-line

Nailunsad ng CSS2.1 ang halaga ng pre-wrap at pre-line, na wala sa mga naunang bersyon ng CSS. Ang ginagawa ng mga halaga na ito ay upang makontrol ng mas mahusay ng mga naglikha ang paghawak sa puti.

Kung ang white-space ng elemento ay naitakda bilang pre-wrap, ang teksto sa loob ng elemento ay magpapanatili ng sekvensya ng puti, ngunit ang mga linya ng teksto ay magiging normal na maging maliwanag. Kung ito ay naitakda, ang mga separator ng linya ng teksto sa pinagmulan at ang mga hinaharap na separator ng linya ay magiging magpapanatili din. Ang pre-line ay kabaligtaran ng pre-wrap, na magiging katulad ng normal na teksto na magkakasamang ang sekvensya ng puti, ngunit magpapanatili ng mga separator ng linya.

Example TIY: white-space: pre-wrap

Example TIY: white-space: pre-line

Note:We tested the two examples above in IE7 and FireFox2.0 browsers, but the result is that the values pre-wrap and pre-line are not well supported.

Summary

The following table summarizes the behavior of the white-space property:

Value Space character Line feed Automatic line break
pre-line Merge Retain Allow
normal Merge Ignore Allow
nowrap Merge Ignore Disallow
pre Retain Retain Disallow
pre-wrap Retain Retain Allow

Text direction

If you are reading an English book, you will read from left to right and from top to bottom, which is the flow direction of English. However, not all languages are like this. We know that ancient Chinese is read from right to left, of course, including Hebrew and Arabic, etc. CSS2 introduced a property to describe its directionality.

direction propertyAffects the writing direction of block-level elements, the direction of table column layout, the direction of horizontal filling of its element box, and the position of the last line in two-aligned elements.

Note:For inline elements, only when unicode-bidi propertyThe direction property will only take effect when set to embed or bidi-override.

The direction property has two values: ltr and rtl. Most of the time, the default value is ltr, which displays text from left to right. If you want to display text from right to left, you should use the value rtl.

CSS text example:

set text color
This example demonstrates how to set the color of the text.
Set text background color
This example demonstrates how to set the background color of part of the text.
Specify character spacing
This example demonstrates how to increase or decrease the character spacing.
Set line spacing using percentage
This example demonstrates how to set the line spacing in a paragraph using a percentage value.
Set line spacing using pixel value
This example demonstrates how to set the line spacing in a paragraph using a pixel value.
Set line spacing using a number
This example demonstrates how to set the line spacing in a paragraph using a numerical value.
Align text
This example demonstrates how to align text.
Decorate text
This example demonstrates how to add decorations to text.
Text Indentation
This example demonstrates how to indent the first line of text.
Control letters in text
This example demonstrates how to control the letters in the text.
Prevent text wrapping in element
This example demonstrates how to prevent text wrapping within an element.
Increase word spacing
This example demonstrates how to increase the spacing between words in a paragraph.

CSS text properties

property description
color set text color
direction Set the text direction.
line-height Set the line height.
letter-spacing Set the character spacing.
text-align Align the text in the element.
text-decoration Add decorations to the text.
text-indent Indent the first line of text in the element.
text-shadow Set the text shadow. The property is included in CSS2, but it is not retained in CSS2.1.
text-transform Control the letters in the element.
unicode-bidi Set the text direction.
white-space Set the way of handling blank spaces in elements.
word-spacing Set the word spacing.