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

CSSを使用してEmでフォントサイズを設定する

テキストのスケーラブルなサイズの場合、font-sizeはemで表されます。さようならデフォルトで1つのemは16pxまたは12ptに等しいです。その値は、親要素のフォントサイズを基準にしています。

構文

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

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

例

次の例は、CSSのfont-sizeプロパティをems-

で設定する方法を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 40%;
   border: 2px solid yellow;
   padding: 20px;
   font-size: 1em;
}
span {
   font-size: 2em;
   background-color: chartreuse;
}
</style>
</head>
<body>
<div>
<p>This is a demo paragraph<span> displaying font sizes</span> set with em in CSS.</p>
</div>
</body>
</html>

出力

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

CSSを使用してEmでフォントサイズを設定する

例

<!DOCTYPE html>
<html>
<head>
<style>
table {
   width: 40%;
   border: 2px ridge red;
   font-size: 0.8em;
}
span {
   font-size: 1.5em;
   background-color: silver;
}
</style>
</head>
<body>
<h2>Class Info</h2>
<table>
<tr>
<th>Number of Students</th>
</tr>
<tr>
<td>Class A</td>
<td><span>50 Students</span></td>
</tr>
<tr>
<td>Class B</td>
<td><span>40 Students</span></td>
</tr>
</table>
</body>
</html>

出力

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

CSSを使用してEmでフォントサイズを設定する


  1. CSSのフォントサイズ

    CSS font-sizeプロパティは、フォントのサイズを設定するために使用されます。値は、パーセンテージ、ピクセル、cm、ポイント、emなどの単位、および絶対キーワードで指定できます。相対値はアクセシビリティを最大化します。デフォルトのフォントサイズは16pxまたは12ptです。 構文 CSSfont-sizeプロパティの構文は次のとおりです- Selector {    font-size: /*value*/ } 次の例は、CSSのfont-sizeプロパティ-を示しています。 例 <!DOCTYPE html> <html> <he

  2. CSSを使用して放射状グラデーションのサイズを設定する

    放射状グラデーションのサイズを設定するには、radial-gradient（）関数を使用します。この関数は、放射状のグラデーションを背景画像として設定します。関数の2番目のパラメーターは、次の例のように、必要なサイズに設定します- background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128, 0, 32)); 可能な値は、最も遠い角（デフォルト）、最も近い側、最も近い角、および最も遠い側です。以下は、CSSを使用して放射状グラデーションのサイズを設定するためのコード