CSS テキスト
CSSのテキスト属性はテキストの外観を定義できます。
テキスト属性を使用すると、テキストの色、文字間隔、テキストのアライメント、テキストの装飾、テキストのインデントなどを変更できます。
テキストのインデント
Webページ上の段落の第一行をインデントすることで、最も一般的なテキストフォーマット効果の1つです。
CSSは以下を提供しています text-indent 属性この属性を使うことで、テキストのインデントを簡単に実現できます。
text-indent 属性を使用することで、すべての要素の第一行が指定された長さでインデントできます。その長さは負の値でもできます。
この属性は最も一般的な用途は段落の首行を縮進することですが、以下のルールによりすべての段落の首行が 5 em 縮進します：
p {text-indent: 5em;}
注意：一般的に、すべてのブロック要素に text-indent を適用できますが、行内要素や画像などの置換要素には適用できません。ただし、ブロック要素（例えば段落）の首行に画像がある場合、それはその行の残りのテキストとともに動きます。
ヒント：行内要素の最初の行を「縮進」したい場合は、左インセットや外インセットを作成してこの効果を作り出すことができます。
負の値を使用
text-indent は負の値も設定できます。この技術を利用して、多くの面白い効果を実現できます。例えば、「懸垂縮進」、つまり第一行が要素の残りの部分の左側に吊るされます：
p {text-indent: -5em;}
ただし、text-indent に負の値を設定する際には注意してください。段落に負の値を設定すると、首行の一部のテキストがブラウザの左端に外れることがあります。このような表示問題を避けるために、負縮進に対してマージンやインセットを設定することをお勧めします：
p {text-indent: -5em; padding-left: 5em;}
百分比值を使用
text-indent はすべての長さ単位を使用できます。百分比值も含まれます。
百分数は縮進要素の親要素の幅に対して相対的です。言い換えれば、縮進値を 20% に設定すると、影響を受ける要素の最初の行は親要素の幅の 20% に縮進します。
在下例中，缩进值是父元素的 20%，即 100 个像素：
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>これはパラグラフです。</p>
</div>
継承
text-indent 属性可以继承，请考虑如下标记：
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>これはパラグラフです。</p>
</div>
</div>
以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
水平揃え
text-align は基本的な属性であり、要素内のテキスト行対齐方式の相互関係。最初の 3 つの値は比較的簡単ですが、4番目と5番目の値は少し複雑です。
値 left、right、center はそれぞれ左揃え、右揃え、中央揃えを意味します。
西洋の言語は左から右に読みますので、すべての text-align のデフォルト値は left です。テキストは左端に揃えられ、右端は鋸歯状になります（「左から右」テキストと呼ばれます）。ヘブライ語やアラビア語などの言語では、text-align のデフォルト値は right です。これらの言語は右から左に読むためです。予想通り、center は各テキスト行を要素内に中央に配置します。
ヒント：ブロック要素やテーブル要素を中央に配置するには、これらの要素に適切に左右外縁マージンを設定する必要があります。
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>
注释：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>
文字変換
text-transform 属性テキストの大小写を処理します。この属性には 4 つの値があります：
- none
- uppercase
- lowercase
- capitalize
デフォルト値 none はテキストに何も変更しません。元のドキュメントの元の大小写を使用します。その名の通り、uppercase と lowercase はテキストを全大文字と全小文字に変換します。最後に、capitalize は各単語の最初の文字を大文字にします。
属性として、text-transform は重要ではありませんが、突然すべての h1 要素を大文字に変更することを決めた場合、この属性は非常に有用です。すべての h1 要素の内容を個別に変更する必要はなく、text-transform を使用してこの変更を行うだけで済みます：
h1 {text-transform: uppercase}
text-transform を使用する利点は二つあります。まず、この変更を行うために単純なルールを書くだけで、h1 要素自体を変更する必要はありません。次に、将来すべての大小写を元の大小写に戻すことを決めた場合、変更を簡単に行うことができます。
テキスト装飾
次に、私たちは討論します text-decoration 属性これは非常に興味深い属性で、非常に面白い動作を提供しています。
text-decorationには5つの値があります：
- none
- underline
- overline
- line-through
- blink
予想通り、underlineは要素に下線を付けることができ、HTMLのU要素と同様です。overlineは逆に、テキストの上に上線を描きます。値line-throughはテキストの中央に線を通して装饰し、HTMLのSやstrike要素と等価です。blinkはテキストを点滅させるためのもので、Netscapeがサポートしていた非難されるblinkタグに似ています。
noneの値は、要素に適用されているすべての装饰をオフにします。通常、装飾のないテキストはデフォルトの外観ですが、これは必ずしもそうではありません。例えば、リンクはデフォルトで下線があります。リンクの下線を取り除きたい場合は、以下のCSSを使用します：
a {text-decoration: none;}
注意：このようなルールでリンクの下線を明示的に取り除いた場合、アンカーと通常のテキストの視覚的な唯一の違いは色だけです（少なくともデフォルトではそうですが、色が確実に区別されることを保証することはできません）。
ルールの1つで複数の装饰を組み合わせることもできます。すべてのリンクに下線と上線を持たせたい場合、以下のルールを使用します：
a:link a:visited {text-decoration: underline overline;}
ただし、異なる装饰が同一要素にマッチする場合、優先順位の高い値がもう一方の値を完全に置き換えます。以下のルールを考えてみてください：
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
指定されたルールに対して、classがstrickenのすべてのh2要素は、下線や上線はなく、単に線を通して装饰されていますが、 text-decorationの値は積み重なってはならず、置き換えることがあります。。
空白文字の処理
white-space属性ユーザーエージェントがソースドキュメント内の空白文字、改行、タブ文字の処理に影響を与えます。
この属性を使用することで、ブラウザが文字間およびテキスト行間の空白文字を処理する方法に影響を与えることができます。ある程度では、デフォルトのXHTMLの処理は空白文字の処理が完了しています：すべての空白文字を一つのスペースにまとめています。したがって以下のマークアップがWebブラウザで表示された場合、各文字間に一つのスペースのみが表示され、要素内の改行は無視されます：
<p>This paragraph has many
spaces in it.</p>
このデフォルトの行動を明示的に設定するには以下のように宣言できます：
p {white-space: normal;}
上記のルールは、ブラウザが通常の方法で処理することを示しています：余分なスペースを削除します。この値が指定された場合、改行シーケンス（エンターキー）はスペースに変換され、一行中の複数のスペースシーケンスは一つのスペースに変換されます。
値 pre
ただし、white-space を pre に設定すると、この属性に影響を受ける要素内の空白シーケンスの処理は異なります。その行動は XHTML の pre 要素のように；空白シーケンスは無視されません。
white-space 属性の値が pre である場合、ブラウザは追加のスペースに注意を払います。さらに、この点だけでなく、どんな要素も pre 要素と同じです。
注意：テストによると、IE 7 以前のブラウザではこの値がサポートされていないため、上記の例を確認するには非 IE ブラウザを使用してください。
値 nowrap
これに対する値は nowrap で、要素内のテキストの改行を防ぎます。br 要素を使用しない限りです。CSS では nowrap は、HTML 4 で <td nowrap> を使用してテーブルセルを改行不可に設定するのと非常に似ていますが、white-space 値はどの要素にも適用できます。
値 pre-wrap と pre-line
CSS2.1 では、pre-wrap と pre-line という値が導入されました。これらの値の役割は、作成者が空白シーケンスの処理をよりよく制御できるようにすることです。
要素の white-space が pre-wrap に設定されている場合、その要素内のテキストは空白シーケンスを保持しますが、テキストの行は通常のように改行します。この値が設定されている場合、ソーステキストの行区切りおよび生成された行区切りも保持されます。pre-line は pre-wrap の逆で、通常のテキストのように空白シーケンスを統合しますが、改行シーケンスは保持されます。
注意：我们在 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 文本实例：
- 设置文本颜色
- 本例演示如何设置文本的颜色。
- 设置文本的背景颜色
- 本例颜色如何设置部分文本的背景颜色。
- 规定字符间距
- 本例演示如何增加或减少字符间距。
- 使用百分比设置行间距
- 本例演示如何使用百分比值来设置段落中的行间距。
- 使用像素值设置行间距
- 本例演示如何使用像素值来设置段落中的行间距。
- 使用数值来设置行间距
- 本例演示如何使用一个数值来设置段落中的行间距。
- 对齐文本
- 本例演示如何对齐文本。
- 修饰文本
- 本例演示如何向文本添加修饰。
- テキストのインデント
- 本例演示如何缩进文本首行。
- 控制文本中的字母
- 本例演示如何控制文本中的字母。
- 在元素中禁止文本折行
- 本例演示如何禁止在元素中的文本折行。
- 增加单词间距
- 本例演示如何增加段落中单词间的距离。
CSS 文本属性
| 属性 | 描述 |
|---|---|
| 颜色 | 设置文本颜色 |
| 方向 | テキストの方向を設定します。 |
| 行高 | 行高を設定します。 |
| letter-spacing | 文字間隔を設定します。 |
| text-align | 要素内のテキストをアライメントします。 |
| text-decoration | テキストに装飾を追加します。 |
| text-indent | 要素内のテキストの先頭行にインデントを追加します。 |
| text-shadow | テキストの影を設定します。CSS2ではこの属性が含まれていますが、CSS2.1ではこの属性が削除されました。 |
| text-transform | 要素内の文字を制御します。 |
| unicode-bidi | テキストの方向を設定します。 |
| white-space | 要素内の空白の処理方法を設定します。 |
| word-spacing | 字間を設定します。 |
