文字色はcolorで設定できます。色の値が必要です。
p {
color: red;
}値には色の名前や16進数のカラーコードを指定できます。
書き方向を設定する
directionプロパティを使用すると、要素の書き方向を強制できます。特に、右から左に書かれる言語と関連して逆の書き方向が興味深いです。
また、大きなコンテンツがどの側面でオーバーフローして切り取られるかを決定することもできます。
・ltr−左から右へ
・rtl−右から左へ
以下の例は、プロパティの使用方法を示しています。
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
ここでは2つのクラスが定義されています。
<p class="normal">左から右に書かれるテキスト。 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">右から左に書かれるテキスト。 1 2 3 4 5 6 7 8 9 0</p>
ブラウザでの結果は次のようになります：
テキストの水平配置
text-alignプロパティを使用すると、段落やブロック要素に含まれるフローテキストやインライン要素の水平配置を設定できます。デフォルトは左揃えです。
・left−左揃え
・right−右揃え
・center−中央揃え
・justify−両端揃え
例：
<p style="text-align:right;">
Herzlich willkommen
</p>
結果は次のようになります：
垂直配置
vertical-alignプロパティを使用すると、行内のテキストの高さに対して垂直方向のテキスト配置を指定できます。指定は常に親要素に対して行われ、インライン要素である必要があります。テーブル内のテキストの配置も可能です。
以下の値が利用できます：
・sub−下付き
・super−上付き
・baseline−基準線に揃える
・top−親要素の上部に揃える
・bottom−親要素の下部に揃える
・middle−親要素の上下の中央に揃える
・text-top−テキストの上端に揃える
・text-bottom −テキストの下端に揃える
・長さ指定−正または負の値は要素を基準線の上または下に移動します。
・パーセント指定−正または負の値は要素を基準線の上または下に移動します。
例：
.baseline {
vertical-align: baseline;
}vertical-alignの値はブラウザごとに異なる解釈があるため、必ずページをオンラインに公開する前に結果をテストする必要があります。
テキストの装飾を定義する
text-decorationは、テキストやハイパーリンクに追加のプロパティを割り当てるために使用されます。
・none−テキストに装飾なし
・underline−下線
・overline−上線
・line-through−取り消し線
・blink−点滅
こちらも例：
a:link {
text-decoration: none;
}
これにより、ページのハイパーリンクに下線が表示されなくなります。
単語間の余白を明示的に設定することもできます。
<span style="word-spacing:0.5em">PSD-Tutorials.deへようこそ！</span><br /> <span style="word-spacing:1em">PSD-Tutorials.deへようこそ！</span>
数字値が必要です。パーセント指定はできません。word-spacingと似たプロパティはletter-spacingです。しかし、letter-spacingを使用すると、テキストの各文字間のスペースを指定します。こちらも数字値は使用できますが、パーセント指定はできません。
<span style="letter-spacing:0.1em">文字間隔0.1emの例文</span><br> <span style="letter-spacing:0.3em">文字間隔0.3emの例文</span><br>
text-transformプロパティを使用すると、実際の表記方法にかかわらず、テキストの大文字小文字を制御することができます。さらに、スモールキャップスを適用することも可能です。
・lowercase−小文字
・uppercase−大文字
・capitalize−単語の先頭を大文字に
・none−テキスト変換なし
例：
.klein {
text-transform: lowercase;
}ブラウザでの結果は次のようになります：
空白と改行
white-spaceプロパティは、ソースコード内の空白と改行をブラウザでどのように表示するかを設定します。
• normal – 自動的に改行が挿入されます。さらに、複数の空白が結合されます。
• pre – 改行はソースコードに記述された通りに表示されます。
• nowrap – 自動的な改行は行われません。
• pre-line – 複数の空白が結合されます。表示ボックスが大きくない場合は改行が行われます。
• pre-wrap – 表示ボックスが大きくない場合は改行が行われます。
以下に例を示します。
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
<p>Absatz 4</p>
</div>
</body>
</html></pre>ブラウザでの結果は次のようになります：
影を実装する
text-shadowプロパティを使用すると、テキストに影を付けることができます。このプロパティは比較的新しいブラウザでのみサポートされていることに注意してください。text-shadowを解釈できないブラウザは、影のないテキストを表示します。text-shadowは以下のように使用されます：
text-shadow: hV vV blur #xxxxxx;
そして、これらの値の意味：
• hV – 水平方向のシフト
• vV – 垂直方向のシフト
• blur – ぼかし
• #xxxxxx – 影の色
次の例は、text-shadowの典型的な使用方法を示しています。
.schatten {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
ここでは、一次見出しに定義されたクラスが適用されます。
<h1 class="schatten">PSD-Tutorials.de</h1>
そして、結果を見てみましょう：
すでに述べたように、ブラウザがtext-shadowを解釈できなくても、それによる悪影響はありません。テキストは単に影のないまま表示されます。
