CSS3でよく使われるスタイルの詳しい解説[基本的なテキストとフォントのスタイル]

概要: Web ページをより美しく見せるために、ここでは CSS3 でよく使用されるスタイルをいくつか紹介します。初心者に最適です!ある日、巨大なロックが風に乗って上昇し、90,000マイルまで舞い上がります。一緒に学び、一緒に進歩しましょう！

1. フォントサイズの単位

px (ピクセル): これは絶対単位です。

em : 1em は現在の親要素の大文字 M の幅に相当します。

rem : 効果は em に似ています。1rem は HTML 内の親要素ではなくルート要素のフォント サイズに等しくなります。新しいバージョンのブラウザをサポートしています。古いバージョン (IE8 以下) を使用する場合は、最初の 2 つを使用することをお勧めします。

2. フォントスタイル

font-style : normal (通常のテキスト)/italic (斜体);

font-weight : nominal（通常のフォント）/bold（太字）;

text-transform : 変換のフォントを設定できます。

• なし（いかなる変換も防止）
• 大文字（すべてのテキストを大文字に変換）
• 小文字（すべてのテキストを小文字に変換）
• 大文字にする（すべての単語の最初の文字を大文字にする）
• 全角（すべてのグリフを全角に変換）

text-decoration : フォントのテキスト装飾を設定/解除します

• なし（既存のテキスト装飾をすべてキャンセルします）
• 下線
• 上線
• 線引き

注意：線、スタイル、色には複数の値を設定できます。

3. テキストシャドウ

text-shdow : 4px 4px 5px 赤;

• プロパティ 1: 元のテキストからの影の水平オフセット。
• プロパティ 2: 元のテキストからの影の垂直オフセット。
• 属性 3: ぼかし半径。値が高いほど影が広くなります。
• 属性 4: 影の基本色。

注: 正のオフセットは右に移動し、負のオフセットは左に移動します。

さまざまな色合いを試してみてください

テキストシャドウ:-1px -px 1px #aaa,
  0px 4px 1px RGBA(0,0,0,0.5)、
  4ピクセル 4ピクセル 5ピクセル RGBA(0,0,0,0.7)、
  0px 0px 7px rgba(0,0,0,0.4);

効果図は以下のとおりです。

4. テキストレイアウト

text-align : テキストをボックスとどのように揃えるかを制御します

• left: 左揃え;
• right: 右揃え;
• center: 中央揃えのテキスト。
• justify: すべてのテキスト行が同じ幅になるようにテキストを拡張します。この属性は注意して使用する必要があります。

line-height : テキストの各行間の高さを設定します。単位のない値を設定できます。line line-height: 1.5;は、テキスト行の高さがフォントの高さの 1.5 倍に設定されることを意味します。

letter-spacing : 文字間の間隔を設定します。

word-spacing : 単語間の間隔を設定します。

p::最初の行{
    文字間隔: 2px;
    単語間隔: 4px;
}

下の図に示すように、最初の文にはスタイルが設定されていますが、最後の文にはスタイルが設定されていません。

5. さらに重要な属性を見てみましょう

フォントスタイル

font-variant : 小文字大文字と通常のテキストを切り替えます。

font-kerning : 間隔オプションをオン/オフにします。

font-feature-settings : さまざまな OpenType フォント機能を有効/無効にします。

font-variant-alternates：指定されたカスタムフォントの代替グリフの使用を制御します。

font-variant-caps : 大文字の代替グリフの使用を制御します。

...

テキストレイアウトスタイル

text-indent : テキストコンテンツの最初の行の前にどれだけのスペースを残すかを指定します。

text-overflow : 非表示のオーバーフロー コンテンツがあることをユーザーに示す方法を定義します。

white-space : 要素内の空白と改行の処理方法を定義します。

word-break : 単語内で改行するかどうかを指定します。

...

6. フォントの省略

次の順序です: font-style 、 font-variant 、 font-weight 、 font-stretch 、 font-size 、 line-height 、 font-family 。

これらのうち、 font-styleとfont-familyを指定する必要があり、 font-sizeとline-heightの間にはスラッシュを配置する必要があります。

完全な例は次のとおりです。

フォント: イタリック、通常、太字、通常、3em/1.5、Helvetica、Arial、san-serif;

上記はすべて、最も権威のある MDN Web Docs を参照してまとめた重要な知識ポイントです。皆さんが私と共有していただければ幸いです。不適切なコメントがありましたら、お気軽にコメントしてください！

CSS3でよく使われるスタイル[基本的なテキストとフォントのスタイル]の詳しい説明は以上です。CSS3でよく使われるスタイルについて詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。