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

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-stylefont-variantfont-weightfont-stretchfont-sizeline-heightfont-family

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

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

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

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

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

<<:  MySQLデータベースでサポートされているストレージエンジンの比較

>>:  タグのターゲットリンクを iframe に向ける方法

推薦する

効率を向上できる Linux コマンドエイリアス 10 個のまとめ

序文Linux 環境で作業するエンジニアは、これらの面倒な命令とパラメータのコマンドラインにきっと驚...

nginx で Vue プロジェクトをデプロイする方法

今日は nginx サーバーを使用するのですが、vue プロジェクトをサーバーにデプロイする必要もあ...

CentOS に MySQL 5.5 をインストールするための完全な手順

目次1. インストール前の準備、インストールパッケージのダウンロード1 インストールの準備2 インス...

React における ref の一般的な使用法の概要

目次Refsとは何か1. 文字列型参照2. コールバック参照React.createRef() 4....

Vue 学習 - VueRouter ルーティングの基礎

目次1. Vueルーター1. 説明2. 選択したルートのレンダリング: 3. 基本的な動作原理2. ...

Linux QT Kit が見つからない、バージョンが空の問題の解決策

現在このような問題が発生しています 私の状況は、QT が動かなくなってしまったため、仮想マシンを再起...

Pengyou.com モバイル クライアントのダウンロード ページのデザイン共有 (画像とテキスト)

まずは簡単なデータを見てみましょう。 Googleが発表したレポートによると、 ①中国の都市の97%...

少なくともn日間連続してログインしているユーザーに対するSQLクエリ

MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...

ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加...

Vueはechartsを使用して組織図を描画します

昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...

システムメンテナンスページにリダイレクトするように nginx を設定する

先週末、兄弟プロジェクトはより良いサービスを提供するためにサーバーを拡張する準備をしていました。兄弟...

redhat7 に yum 経由で mysql5.7.17 をインストールするチュートリアル

RHEL/CentOS シリーズの Linux オペレーティング システムには MySQL ソース自...

JS ES 新機能テンプレート文字列

目次1. テンプレート文字列とは何ですか? 2. 複数行のテンプレート文字列2.1 式付きテンプレー...