CSS Text

Οι ιδιότητες κειμένου του CSS μπορούν να καθορίσουν την εμφάνιση του κειμένου.

Με τις ιδιότητες κειμένου, μπορείτε να αλλάξετε τον χρωματισμό του κειμένου, το διάστημα μεταξύ των χαρακτήρων, την προσαρμογή του κειμένου, την διακόσμηση του κειμένου, τη συστολή του κειμένου, και άλλα.

Indented Text

Η συστελή της πρώτης γραμμής των παραγράφων σε μια ιστοσελίδα Web, είναι μια από τις πιο συχνές μορφοποιήσεις κειμένου.

Το CSS παρέχει Η ιδιότητα text-indentΗ ιδιότητα αυτή μπορεί να επιτύχει εύκολα τη συστολή κειμένου.

Με τη χρήση της ιδιότητας text-indent, η πρώτη γραμμή όλων των στοιχείων μπορεί να συστελλείται σε μια δοθείσα μήκος, ακόμη και αν αυτή η μήκος είναι αρνητική.

The most common use of this property is to indent the first line of a paragraph, the following rule will indent the first line of all paragraphs by 5 em:

p {text-indent: 5em;}

注意：Generally, text-indent can be applied to all block-level elements, but this property cannot be applied to inline elements, and the text-indent property cannot be applied to replacement elements such as images. However, if there is an image in the first line of a block-level element (such as a paragraph), it will move with the rest of the text in that line.

Συμβουλή:If you want to 'indent' the first line of an inline element, you can create this effect by using left padding or margin.

Using negative values

text-indent can also be set to a negative value. Using this technique, many interesting effects can be achieved, such as 'hanging indentation', where the first line hangs on the left side of the remaining part of the element:

p {text-indent: -5em;}

However, be careful when setting a negative value for text-indent, if a negative value is set for a paragraph, some text of the first line may exceed the left boundary of the browser window. To avoid this display problem, it is recommended to set an additional margin or some padding for negative indentation:

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

Using percentage values

The text-indent property can use all length units, including percentage values.

Percentage values must be relative to the width of the parent element of the indentation element. In other words, if the indentation value is set to 20%, the first line of the affected element will be indented by 20% of the width of the parent element.

In the following example, the indentation value is 20% of the parent element, that is, 100 pixels:

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

Inheritance

The text-indent property can be inherited, consider the following mark:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>

The paragraphs marked above will also be indented by 50 pixels, because this paragraph inherits the indentation value of the div element with id 'inner'.

οριζόντια σύνταξη

text-align Είναι μια βασική ιδιότητα που επηρεάζει τοΓραμμή κειμένουΗ σύνταξη μεταξύ τους. Οι πρώτες τρεις τιμές είναι αρκετά ευκολίες, αλλά οι τέταρτες και πέμπτες είναι λίγο πιο περίπλοκες.

Οι τιμές left, right και center προκαλούν την αριστερή, δεξιά και κεντρική σύνταξη του κειμένου μέσα στο στοιχείο.

Οι δυτικές γλώσσες διαβάζονται από αριστερά προς τα δεξιά, οπότε η προεπιλεγμένη τιμή του text-align είναι left. Το κείμενο εκτυπώνεται στην αριστερή κύρια γραμμή και η δεξιά άκρη είναι σαν δαγκάνα (ονομάζεται κείμενο από αριστερά προς τα δεξιά). Για γλώσσες όπως το εβραϊκό και το αραβικό, το text-align είναι προεπιλεγμένο ως right, επειδή αυτές οι γλώσσες διαβάζονται από δεξιά προς τα αριστερά. Το center κεντρώνει κάθε γραμμή κειμένου μέσα στο στοιχείο.

Συμβουλή:Για να κεντρώσετε στοιχεία μπλοκ ή πινάκων, πρέπει να ρυθμίσετε κατάλληλα τις εξωτερικές γειτονικές διαστάσεις (margin) αυτών των στοιχείων.

text-align:center και <CENTER>

Μπορείτε να πιστεύετε ότι το text-align:center έχει την ίδια λειτουργία με το στοιχείο <CENTER>, αλλά στην πραγματικότητα είναι πολύ διαφορετικά.

<CENTER> Όχι μόνο επηρεάζει το κείμενο, αλλά και το κεντρώνει τον ολόκληρο το στοιχείο. Το text-align δεν ελέγχει τη σύνταξη του στοιχείου, αλλά επηρεάζει μόνο το εσωτερικό περιεχόμενο. Το στοιχείο δεν μετακινείται από ένα τμήμα σε ένα άλλο, αλλά επηρεάζεται μόνο το κείμενο.

justify

Ο τελευταίος παράγοντας οριζόντιας σύνταξης είναι το justify.

Στο κείμενο με δύο άκρες, τα δεξιά και αριστερά άκρα των γραμμών κειμένου τοποθετούνται στα εσωτερικά όρια του γονικού στοιχείου. Στη συνέχεια, προσαρμόζεται η απόσταση μεταξύ των λέξεων και των γραμμάτων, ώστε η μήκος κάθε γραμμής να είναι ίση. Μπορείτε να έχετε παρατηρήσει ότι το κείμενο με δύο άκρες είναι συχνά χρησιμοποιούμενο στην εκτύπωση.

Δεδομένου ότι πρέπει να αποφασιστεί από τον χρήστη (και όχι από το CSS) πώς θα επεκταθεί το κείμενο με δύο άκρες για να γεμίσει το χώρο μεταξύ των δεξιών και αριστερών ορίων του γονικού στοιχείου, για περισσότερες πληροφορίες, παρακαλώ δείτε Σελίδα αναφοράς για το CSS text-align.

Απόσταση γραμμάτων

Η ιδιότητα word-spacingΜπορείτε να αλλάξετε την τυπική απόσταση μεταξύ των λέξεων (μορφών). Η προεπιλεγμένη τιμή normal είναι ίδια με τη ρύθμιση τιμής 0.

Η ιδιότητα word-spacing αποδέχεται μια θετική ή αρνητική μήκος τιμή. Αν παρέχεται μια θετική μήκος τιμή, η απόσταση μεταξύ των λέξεων θα αυξηθεί. Η ρύθμιση μιας αρνητικής τιμής για το word-spacing θα την συγχρονίσει:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Αυτό είναι ένα παράγραφος. Η απόσταση μεταξύ των λέξεων θα αυξηθεί.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

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

注释：如需深入理解 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 属性Αυτό είναι ένα πολύ ενδιαφέρον attribute, που παρέχει πολλά πολύ ενδιαφέροντα behavior.

Η ιδιότητα text-decoration έχει 5 τιμές:

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

Η τιμή underline προσθέτει υπογραμμίσεις στο στοιχείο, όπως το στοιχείο U στο HTML. Η overline λειτουργεί αντίθετα, θα ζωγραφίσει μια γραμμή στο κορυφαίο του κειμένου. Η τιμή line-through θα ζωγραφίσει μια διαγώνια γραμμή στο κέντρο του κειμένου, ίση με το στοιχείο S και strike στο HTML. Η blink θα κάνει το κείμενο να φλαινάζει, όπως το颇παθες blink στο Netscape.

Η τιμή none θα απενεργοποιήσει όλες τις διακοσμήσεις που εφαρμόζονται σε ένα στοιχείο. Τυπικά, το κείμενο χωρίς διακοσμήσεις είναι το προεπιλεγμένο αίθρινο, αλλά αυτό δεν είναι πάντα έτσι. Για παράδειγμα, οι σύνδεσμοι έχουν προεπιλεγμένα υπογραμμίσεις. Αν θέλετε να αφαιρέσετε την υπογραμμίωση από τους σύνδεσμους, μπορείτε να χρησιμοποιήσετε το παρακάτω CSS:

a {text-decoration: none;}

注意：Αν αφαιρέσετε ρητά την υπογραμμίωση από τους σύνδεσμους με αυτή τη ρουτίνα, η μοναδική οπτική διαφορά μεταξύ του κουπιά και του κανονικού κειμένου θα είναι το χρώμα (τουλάχιστον αυτό είναι το προεπιλεγμένο, αλλά δεν μπορούμε να διασφαλίσουμε ότι το χρώμα θα διαφέρει με βεβαιότητα).

Μπορείτε να συνδυάσετε πολλαπλές διακοσμήσεις σε μια ρουτίνα. Αν θέλετε να έχουν όλες οι σύνδεσμοι τόσο υπογραμμίσεις όσο και διαγραμμίσεις, η ρουτίνα θα είναι η εξής:

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

Ωστόσο, πρέπει να σημειωθεί ότι αν δύο διαφορετικές διακοσμήσεις ταιριάζουν στο ίδιο στοιχείο, η τιμή της νικητή θα αντικαθιστά πλήρως την άλλη τιμή. Ας δούμε τα παρακάτω rules:

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

Για συγκεκριμένες規γulations, όλα τα στοιχεία h2 με class stricken θα έχουν μόνο μια διαγώνια γραμμή διακόσμησης χωρίς υπογραμμίσεις και διαγραμμίσεις, επειδή Η τιμή text-decoration θα αντικαθιστά αντί να συναρμολογείται..

χειρίζεται τα κενά

Η ιδιότητα white-spaceΕπιδρά στο τρόπο που ο χρήστης του περιηγητή χειρίζεται τα κενά, τις αλλαγές γραμμής και τα χαρακτήρες tab στο αρχείο πηγής.

Με τη χρήση αυτής της ιδιότητας, μπορείτε να επηρεάσετε τον τρόπο που ο περιηγητής χειρίζεται τους κενά μεταξύ γραμμάτων και τις κενές γραμμών του κειμένου. Σε ορισμένο βαθμό, η προεπιλεγμένη επεξεργασία του XHTML για τα κενά έχει ήδη ολοκληρωθεί: θα συνδυάζει όλα τα κενά σε ένα κενό. Επομένως, με την παρακάτω σηματοδότηση, όταν εμφανίζεται στον περιηγητή του Διαδικτύου, τα γράμματα θα εμφανίζονται με ένα κενό μεταξύ τους και θα αγνοείται η αλλαγή γραμμής μέσα στο στοιχείο:

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

Μπορείτε να καθορίσετε αυτή τη προεπιλεγμένη συμπεριφορά με την ακόλουθη δήλωση:

p {white-space: normal;}

Οι παραπάνω κανόνες λέει στον περιηγητή να χειρίζεται τα κενά όπως συνήθως: να απορρίπτει τα περιττά κενά. Αν δοθεί αυτή η τιμή, οι χαρακτήρες εισαγωγής γραμμής (χαρακτήρες εισαγωγής γραμμής) θα μετατραπούν σε κενά, και οι σειρές πολλαπλών κενών σε μια σειρά.

Παράδειγμα TIY: white-space: normal

Η τιμή pre

Ωστόσο, αν ορίσετε το white-space ως pre, η διαχείριση των κενών στο στοιχείο που επηρεάζεται από αυτό το ατρίβουτο θα είναι διαφορετική, και θα συμπεριφέρεται όπως το στοιχείο pre του XHTML; τα κενά δεν θα αγνοούνται.

Αν η τιμή του ατрибούτου white-space είναι pre, ο περιηγητής θα προσέξει τα επιπλέον κενά, ακόμη και τα χαρακτήρες εισαγωγής γραμμής. Σε αυτήν την πλευρά και μόνο σε αυτήν, οποιοδήποτε στοιχείο μπορεί να είναι ίσο με ένα στοιχείο pre.

Παράδειγμα TIY: white-space: pre

注意：Με βάση τις δοκιμές, ο IE 7 και οι προηγούμενες εκδόσεις του περιηγητή δεν υποστηρίζουν αυτήν την τιμή, οπότε παρακαλούμε να χρησιμοποιήσετε περιηγητές που δεν είναι IE για να δείτε το παραπάνω παράδειγμα.

Η τιμή nowrap

Η αντίθετη τιμή είναι nowrap, η οποία αποτρέπει τη γραμμή του κειμένου στο στοιχείο, εκτός αν χρησιμοποιηθεί το στοιχείο br. Η χρήση του nowrap στο CSS είναι πολύ παρόμοια με τη χρήση του <td nowrap> στο HTML 4 για να καθορίσει μια κελίτα τραπέζης που δεν μπορεί να γραμμωθεί, αλλά η τιμή white-space μπορεί να εφαρμοστεί σε οποιοδήποτε στοιχείο.

Παράδειγμα TIY: white-space: nowrap

Οι τιμές pre-wrap και pre-line

Το CSS2.1 εισήγαγε τις τιμές pre-wrap και pre-line, που δεν υπήρχαν στις προηγούμενες εκδόσεις του CSS. Η λειτουργία τους είναι να επιτρέπουν στους δημιουργούς να ελέγχουν καλύτερα τη διαχείριση των κενών.

Εάν ο συντελεστής white-space οριστεί ως pre-wrap, τότε ο κείμενος του στοιχείου θα διατηρήσει τη σειρά των κενών, αλλά οι γραμμές κειμένου θα εναλλάσσονται κανονικά. Αν οριστεί ως αυτή η τιμή, οι διαχωριστές γραμμής του αρχικού κειμένου και οι δημιουργημένοι διαχωριστές γραμμής θα διατηρηθούν. Το pre-line είναι το αντίθετο του pre-wrap, θα συγχωνεύσει τη σειρά των κενών όπως στο κανονικό κείμενο, αλλά θα διατηρήσει τις γραμμές κειμένου.

实例 TIY ：white-space: pre-wrap

实例 TIY ：white-space: pre-line

注意：我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例，但是结果是，值 pre-wrap 和 pre-line 都没有得到很好的支持。

总结

下面的表格总结了 white-space 属性的行为：

值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许

文本方向

如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

CSS 文本实例：

设置文本颜色
本例演示如何设置文本的颜色。
设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。
规定字符间距
本例演示如何增加或减少字符间距。
使用百分比设置行间距
本例演示如何使用百分比值来设置段落中的行间距。
使用像素值设置行间距
本例演示如何使用像素值来设置段落中的行间距。
使用数值来设置行间距
本例演示如何使用一个数值来设置段落中的行间距。
对齐文本
本例演示如何对齐文本。
修饰文本
本例演示如何向文本添加修饰。
Indented Text
本例演示如何缩进文本首行。
控制文本中的字母
本例演示如何控制文本中的字母。
在元素中禁止文本折行
本例演示如何禁止在元素中的文本折行。
增加单词间距
本例演示如何增加段落中单词间的距离。

CSS 文本属性

属性 描述
color 设置文本颜色
direction Set the text direction.
line-height Set line height.
letter-spacing Set character spacing.
text-align Align text within elements.
text-decoration Add decorations to text.
text-indent Indent the first line of text within an element.
text-shadow Set text shadow. CSS2 includes this attribute, but it is not retained in CSS2.1.
text-transform Control the letters within elements.
unicode-bidi Set the text direction.
white-space Set the handling of white space within elements.
word-spacing Set word spacing.