CSS が提供するいくつかのプロパティを通じて、色、配置、間隔、装飾、変形などのさまざまなテキスト スタイルを非常に簡単かつ効果的に定義できます。
一般的に使用されるテキスト属性には、text-align、text-decoration、text-transform、text-indent、line-height、letter-spacing、word-spacing などが含まれます。 これらのプロパティを使用すると、文字、単語、スペースなどの外観を正確に制御できます。
これらのテキスト プロパティを要素に設定する方法を詳しく見てみましょう。
1.text-align テキストの配置
text-align 属性は、要素内のテキストの水平方向の配置を設定するために使用されます。属性のオプションの値は次のとおりです。
例：
<!DOCTYPEhtml><html><head><style>p{border:1pxsolidblack;/*テキストの配置をより直感的に反映するために、ここに p タグの境界線セットを示します*/}.text1{text- align: left;}.text2{text-align:right;}.text3{text-align:center;}</style></head><body><pclass=text1>左揃え</p><pclass= text2>右揃え</p><pclass=text3>中央揃え</p></body></html>表示される結果は次のとおりです。
2.文字装飾
text-decoration 属性は、テキスト装飾を設定または削除するために使用されます。最も一般的な方法は、text-decoration 属性を使用して <a> タグのデフォルトの下線を削除することです。もちろん、強調表示効果を実現するために必要な要素内のテキストに text-decoration 属性を使用して装飾を追加することもできます。
text-decoration 属性のオプションの値は次のとおりです。
例：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>text-decoration</title><style>h1.under{text-decoration:underline;}h1.over{text-decoration:overline ;}p.line{text-decoration:line-through;}p.blink{text-decoration:blink;}a.none{text-decoration:none;}p.underover{text-decoration:underlineoverline;}</ style></head><body><h1class=under>下線</h1><pclass=line>取り消し線</p><pclass=blink>点滅効果ですが、ブラウザでは表示されません</p><h1class =over>下線</h1><p>これは <aclass=nonehref=#>リンク</a>です。デフォルトでは、リンクに下線が付いています。 </p><pclass=underover>上線と下線</p></body></html>表示される結果は次のとおりです。
3.テキスト変換
text-transform 属性は、テキスト内の英語の大文字と小文字を制御するために使用され、元のテキストを変更せずに、テキスト内の英語の文字を小文字、大文字、または先頭文字の大文字に一律に変更できます。
4.テキストインデント
text-indent 属性は、要素内のテキストに最初の行のインデント効果を追加するために使用されます。属性のオプションの値は次のとおりです。
5.line-height 行の高さ
このプロパティは、ライン ボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。
計算された line-height と font-size (行間隔) の差は 2 つの半分に分割され、テキスト コンテンツの行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはライン ボックスです。
例：
<!DOCTYPEhtml><html><head><style>p.small{line-height:0.8;}p.big{line-height:200%;}</style></head><body><p>これはデフォルトの標準行の高さです<br>これはデフォルトの標準行の高さです<br>これはデフォルトの標準行の高さです<br></p><pclass=small>数値を使用してより小さい行の高さを定義します<br> >数値を使用して、より小さい行の高さを定義します<br>数値を使用して、より小さい行の高さを定義します<br></p><pclass=big>パーセントを使用して、より大きい行の高さを定義します<br>パーセントを使用します フォームを使用して定義しますより大きな行の高さ<br>パーセンテージ形式を使用して、より大きな行の高さを定義します<br></p></body></html>表示される結果は次のとおりです。
6.文字間隔
テキスト間の間隔は負の値にすることができます。デフォルト値はすべてのブラウザでサポートされています。
例：
<!DOCTYPEhtml><html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gbk2312/><title>CSS の文字間隔属性</title><style>*{margin:0; padding:0;}body{width:1000px;margin:200pxauto;}p{font-size:18px;}.p01{letter-spacing:2px;}.p02{letter-spacing:10px}</style></ head><body><pclass=p01>CSS テキスト間隔テスト テキスト! </p><pclass=p02>CSS テキスト間隔のテスト テキスト! </p></body></html>表示される結果は次のとおりです。
7.単語の間隔
word-spacing 属性は単語間の間隔を設定するために使用されますが、中国語では無効です。この属性のオプションの値は次のとおりです。
8.text-shadow テキストシャドウ
text-shadow はテキストに影を追加します。テキストと装飾に複数の影を追加できます。影の値はカンマで区切られます。各シャドウ値は、要素の X 方向と Y 方向のオフセット、ブラー半径、およびカラー値で構成されます。
9.垂直整列
vertical-align 属性は、要素の垂直方向の配置を設定します。
CSS のvertical-align 属性は、インライン要素とディスプレイス要素 (画像やフォーム入力ボックスなど) にのみ使用できます。この属性は継承されません。
まず、図を見てみましょう。テキストの上の線、中央の線、ベースラインは文字 x の下端です。
ベースライン、ボトムライン、トップライン、ミドルラインなどの概念が出てきますが、これは何を意味するのでしょうか？
(1) 上行: 漢字の上端。
(2) 中心線:英小文字 x の中央を通る線。
(3) ベースライン: 小文字 x の下端。
(4) 最後の行: 漢字の下端。
(5) コンテンツ領域: 最下行と最上行で囲まれた領域を指します。
(6) 行の高さ: コンテンツ領域と、コンテンツ領域に基づいて対称的に拡張された空白領域が含まれます。これを行の高さと呼び、隣接するテキスト行のベースライン間の距離と考えることもできます。
(7) 行間隔: 前のテキスト行の最下行と次のテキスト行の最上行の間の、隣接するテキスト行間の距離を指します。
(8) インラインボックス: ブラウザのレンダリングモデル上の概念であり、表示することはできませんが、存在しており、その高さは行の高さと同じです。
（９）ラインボックス：同ラインの内ボックスと同様の概念であり、このラインの仮想的な長方形のボックスを指し、ブラウザ描画モードにおける概念でもある。行ボックスの高さは、この行のすべての要素の中でのインライン ボックスの最大値と等しくなります (行の高さの値が最も大きいインライン ボックスがベンチマークとして使用され、他のインライン ボックスは独自の値を使用してベンチマークに揃えられます)位置合わせ方法、およびライン ボックスの高さが最終的に計算されます)。
10.white-space は空白文字を処理します
次の表は、空白属性の動作をまとめたものです。
11.direction テキストの方向