CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したテキストのフォーマット

CSSでテキストをフォーマットするには、テキストの色、テキストの装飾、行の高さ、テキストの方向、テキストの配置などを変更できます。

いくつかの例を見てみましょう-

テキストの配置

CSSを使用してテキストの配置を設定するには、text-alignプロパティを使用します。可能なプロパティ値は次のとおりです-

text-align: left|right|center|justify|initial|inherit;

例

テキストの配置を設定する例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   -webkit-columns: auto auto; /* Chrome, Safari, Opera */
   -moz-columns: auto auto; /* Firefox */
   columns: auto auto;
   text-align: justify;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>

出力

CSSを使用したテキストのフォーマット

線の高さ

行の高さを設定するには、line-heightプロパティを使用します。以下はプロパティ値です-

line-height: normal|number|length|initial|inherit;

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   line-height: 1.9;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>

出力

CSSを使用したテキストのフォーマット

テキストデコレーション

CSSでのテキスト装飾の場合、text-decorationプロパティを次のプロパティの省略形プロパティとして使用します-

text-decoration-line
text-decoration-color
text-decoration-style

例

CSSでのテキスト装飾の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力

CSSを使用したテキストのフォーマット


  1. CSSを使用して要素をZ-Indexとオーバーラップさせる

    CSS Z-Indexプロパティの開発者は、要素を相互にスタックできます。 Z-Indexには、正の値または負の値を指定できます。 注 −重複する要素にz-indexが指定されていない場合、その要素はドキュメントの最後に記載されている要素として表示されます。 例 z-indexプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0;    position: absolute;    to

  2. CSSを使用したテキスト装飾

    CSS text-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用されます。値として、ラインスルー、オーバーライン、アンダーラインなどを追加できます。これは、text-decoration-line、text-decoration-color、およびtext-decoration-styleの省略形です。 構文 text-decorationプロパティの構文は次のとおりです- Selector {    text-decoration: /*value*/ } 例 次の例は、CSSのテキスト装飾プロパティ-を示しています。 <!D