テキスト整形
このテキストは、テキストの書式プロパティの一部でスタイリングされています。 見出しが使用されますtext-align, text-transform 、およびcolorプロパティを。 段落が整列、インデントされ、また、文字間にスペースが指定されています。 下線は、この着色されたから削除され、「自分にそれを試してみてください」リンクをクリックします。
テキストの色
colorプロパティは、テキストの色を設定するために使用されます。
CSSで、色は、ほとんどの場合で指定します。
- 以下のような-カラー名"red"
- HEX値-のような"#ff0000"
- RGB値-のような"rgb(255,0,0)"
見CSSカラー値の可能な色の値の完全なリストについて。
ページのデフォルトのテキストの色は、本体セレクタで定義されています。
 | 注：については、W3C準拠のCSS：あなたが定義した場合colorプロパティを、あなたも定義する必要がありbackground-colorプロパティを。 |
|---|
テキストアラインメント
text-alignプロパティは、テキストの水平方向の配置を設定するために使用されます。
テキストは左または右に整列、センタリング、または正当化することができます。
次の例では、中央に整列し、整列左右のテキストを（テキストの方向が左から右の場合左の位置合わせがデフォルトであり、テキストの方向が右から左の場合は右揃えがデフォルトです）を示しています。
ときtext-alignプロパティがに設定されている"justify" 、それぞれの行は1行ごとに等しい幅を有しており、左右の余白が（雑誌や新聞のように）まっすぐになるように延伸されます。
テキストの装飾
text-decorationプロパティは、テキストからの装飾を設定または削除するために使用されます。
値text-decoration: none;多くの場合、リンクから下線を削除するために使用されます。
他のtext-decoration値は、テキストを飾るために使用されます。
例
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} »それを自分で試してみてください | 注：これは、多くの場合、読者を混乱させるとしてリンクではないテキストに下線をすることは推奨されません。 |
|---|
テキスト変換
text-transformプロパティは、テキスト内の大文字と小文字を指定するために使用されます。
大文字または小文字にすべてを回す、または各単語の最初の文字を大文字に使用することができます。
例
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} »それを自分で試してみてください テキストインデント
text-indentプロパティは、テキストの最初の行のインデントを指定するために使用されます。
文字間隔
letter-spacingプロパティは、テキストの文字の間にスペースを指定するために使用されます。
次の例では、文字間のスペースを増減する方法を示しています。
行の高さ
line-heightプロパティは、行間隔を指定するために使用されます。
テキストの方向
directionプロパティは、要素のテキストの方向を変更するために使用されます。
単語の間隔
word-spacingプロパティは、テキスト中の単語の間にスペースを指定するために使用されます。
次の例では、単語の間のスペースを増減する方法を示しています。
その他の例
要素内のテキストの折り返しを無効にします
この例では、要素内のテキストの折り返しを無効にする方法を示しています。
画像の垂直方向の配置
この例では、テキストに画像の垂直整列を設定する方法を示します。
テキストに影を追加します。
この例では、テキストに影を追加する方法を示します。
練習で自分自身をテスト！
すべてのCSSテキストのプロパティ
| プロパティ | 説明 |
|---|---|
| color | テキストの色を設定します。 |
| direction | テキストの方向/書き込み方向を指定します。 |
| letter-spacing | 増加またはテキスト内の文字の間にスペースを減少させます |
| line-height | 行の高さを設定します。 |
| text-align | テキストの水平方向の配置を指定します。 |
| text-decoration | 装飾は、テキストに追加指定します |
| text-indent | テキストブロック内の最初の行のインデントを指定します。 |
| text-shadow | テキストに追加された影の効果を指定します。 |
| text-transform | テキストの大文字と小文字を制御します |
| unicode-bidi | 一緒に使用される方向のテキストは、同じドキュメント内の複数の言語をサポートするためにオーバーライドする必要があるかどうかを設定または返すようにプロパティ |
| vertical-align | エレメントの垂直方向の配置を設定します。 |
| white-space | 要素内の空白の処理方法を指定します |
| word-spacing | 増加またはテキスト内の単語の間にスペースを減少させます |