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

CSSでのテキストのフォーマット

CSSを使用すると、テキストをフォーマットして視覚的に魅力的なコンテンツを作成できます。次のプロパティは、CSSを使用してテキストのスタイルを設定するために使用されます。

色

このプロパティは、テキストの色を変更するのに役立ちます。

文字間隔

このプロパティは、文字間の間隔を設定するために使用されます。

行の高さ

線の高さは、このプロパティを使用して指定されます。

text-align

テキストの水平方向の配置は、text-alignプロパティによって制御されます。

テキスト装飾

下線、取り消し線、または上線を引いてスタイルを設定するには、テキスト装飾を使用します。

テキストインデント

要素の最初の行のインデントは、text-identプロパティによって設定されます。

テキストシャドウ

テキストの周囲に影を表示するには、text-shadowプロパティを使用します。

テキスト変換

テキストの大文字と小文字は、text-transformプロパティで設定できます。

単語間隔

このプロパティを使用して、単語間のスペースを設定できます。

構文

font-variantプロパティの構文は次のとおりです-

Selector {
   font-variant: /*value*/
}

例

次の例は、CSSでのテキストの書式設定を示しています。

<!DOCTYPE html>
<html>
<head>
<style>
h2::before {
   content: "DEMO ";
   text-align: center;
   text-decoration: line-through;
   color: orange;
}
article {
   width: 600px;
   text-align: justify;
   text-shadow: -10px -5px lightgreen;
}
</style>
</head>
<body>
<h2>Example Heading</h2>
<article>This is demo text. Here, we are displaying different ways to format text.</article>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSでのテキストのフォーマット

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 10px;
   display: flex;
   float: left;
   word-spacing: 30px;
   box-shadow: inset 0 0 6px violet;
}
div::after {
   content: " ";
   border: 8px solid green;
}
div + div{
   background-color: indianred;
   width: 200px;
   color: white;
   text-align: justify;
}
</style>
</head>
<body>
<div>SAS stands for Statistical Analysis Software. It was created in the year 1960 by the SAS Institute.</div>
<div>SAS is a leader in business analytics. Through innovative analytics it caters to business intelligence and data management software and services.</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSでのテキストのフォーマット


  1. CSSのtext-justifyプロパティ

    CSSのtext-justifyプロパティは、text-alignプロパティがjustify値に設定されている場合に、テキストの位置揃え方法を設定するために使用されます。プロパティ値は次のとおりです- text-justify: auto|inter-word|inter-character|none|initial|inherit; 例 ここで、CSSでtext-justifyプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-a

  2. CSSの権利プロパティ

    rightプロパティは、要素の水平位置を設定するために使用されます。 −として設定されます right: auto|length|initial|inherit; 例 CSSで適切なプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: white;    backgr