ホームページ > ウェブフロントエンド > フロントエンドQ&A > HTMLでフォントの色を設定する方法(3つの方法)

HTMLでフォントの色を設定する方法(3つの方法)

PHPz
リリース: 2023-04-13 14:31:39
オリジナル
65703 人が閲覧しました

HTML は一般的な Web ページ マークアップ言語であり、その基本要素にはテキスト、画像、オーディオ、その他の形式が含まれます。その中でも、テキストはページ上で情報を伝えるための基本要素の 1 つであり、フォントや色が異なると、訪問者に異なる視覚体験を提供し、ページの美しさと読みやすさを向上させることができます。

HTML フォントの色の設定は、CSS スタイル シートを通じて実現できます。 CSS スタイル シートは HTML コードとは別に配置できるため、ページ レイアウトの柔軟性と保守性が向上します。フォントの色を設定する方法は次のとおりです:

1. インライン スタイルでフォントの色を設定します

style 属性を HTML タグに直接追加し、次に color 属性を style 属性に追加します。例:

<p style="color:red;">这是一段红色的文字</p>
ログイン後にコピー

このうち、カラー属性値には、カラー名、16 進カラー値、RGB カラー値、HSL カラー値を指定できます。一般的に使用される色の名前には、赤、緑、青、黒、白などが含まれます。一般的に使用されるカラー テーブルを見てみましょう:

#青#0000FF ##2. 内部スタイルシートでフォントカラーを設定します
カラー名 カラー値
ブラック #000000
ホワイト #FFFFFF
シルバー #C0C0C0
グレー #808080
レッド ##FF0000
#008000
##HTML文書のhead部分にstyleタグを追加し、設定が必要な要素とcolor属性値を定義しますスタイルタグ内。例:

<head>
  <style>
    p{
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一段蓝色的文字</p>
</body>
ログイン後にコピー
このようにして、本文で定義されたすべての p 要素は、スタイル シート p{} の color 属性を自動的に適用し、青に設定します。このようにして、複数の要素の色をバッチで設定できます。

3. フォントの色を設定する外部スタイルシート

独立したスタイルシートファイルを作成し、色を付ける必要がある要素をクラス名として定義し、HTML内でスタイルシートファイルをリンクします。書類。例:

スタイル シート ファイル style.css でクラス名を定義します:

.title{
  color: red;
}
ログイン後にコピー
このスタイル シートを HTML ドキュメントに導入します:

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1 class="title">这是一段红色的标题</h1>
</body>
ログイン後にコピー
このように、 HTML ドキュメントのタイトル class="title" を h1 要素に追加すると、スタイル シートの color 属性が自動的に適用され、赤に設定されます。

要約すると、HTML フォントの色を設定するにはさまざまな方法があり、使用する具体的な方法はページのニーズや個人の好みによって異なります。ただし、どの方法を使用する場合でも、合理的なマッチングと明確な分業を実現するために、ページ全体の美しさと読みやすさを考慮する必要があります。この記事が読者のお役に立てば幸いです。

以上がHTMLでフォントの色を設定する方法(3つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート