CSS スタイルを HTML に追加する方法-htmlチュートリアル-php.cn

CSS スタイルを HTML に追加する方法

藏色散人

リリース： 2022-12-30 11:12:14

オリジナル

12563 人が閲覧しました

CSS スタイルを HTML に追加する方法: 1. CSS スタイルをインラインで追加する; 2. CSS コードをインラインで特定のページの先頭部分に配置する; 3. 外部リンクを使用する. タグ、外部リンクを使用するだけcssファイルをHTMLに変換します。

CSS スタイルを HTML に追加する方法

#このチュートリアルの動作環境: Windows 10 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。

推奨: 「

HTML ビデオチュートリアル」

フロントエンドを学習するときは、CSS がさまざまなスタイルを HTML タグに追加してブラウザーに伝えることを知っておく必要があります。これらのタグ内のコンテンツを表示します。 CSSはHTMLにさまざまなスタイルを追加するために使用されますが、HTMLにCSSスタイルを追加するにはどうすればよいですか?

htmlCSS スタイルを追加するには、インライン (style 属性を使用し、特定の HTML タグ内で使用) とインライン (style タグによって特定のページの先頭部分に CSS コードが配置される) の 3 つの方法があります。 , 外部リンク（外部CSSファイルをHTMLにリンクするにはlinkタグを使用します）。

1. インラインスタイル

style 属性を使用して、特定の HTML タグ内に CSS スタイルを設定します。

インライン CSS のみを使用すると、Web サイトの管理が非常に困難になる可能性があるため、各 HTML タグを個別にスタイル設定する必要があるため、インライン CSS は使用しないことをお勧めします。ただし、特定の状況では役立つ場合があります。たとえば、CSS ファイルにアクセスできない場合や、単一の要素にのみスタイルを適用する必要がある場合などです。インライン CSS を含む HTML ページの例は次のとおりです。

<!DOCTYPE html>
<html>
  <body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
   </body>
</html>

ログイン後にコピー

2. インライン

インライン CSS スタイルは、< 内の特定のページに CSS コードを配置します。 ;head> セクション。インライン CSS は、タグの間に配置する必要があります。

クラスと ID は CSS コードを参照するために使用できますが、それらはその特定のページでのみアクティブになります。この方法で埋め込まれた CSS スタイルは、ページが読み込まれるたびにダウンロードされるため、読み込み速度が向上します。インラインスタイルシートを使用すると、ページテンプレートを誰かに送信する場合など、状況によっては便利です。すべてが 1 ページ内にあるため、プレビューを確認するのがはるかに簡単になります。

内部スタイルシートの例:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

ログイン後にコピー

3. 外部リンク

外部リンクは、リンクタグ要素を使用して外部 CSS ファイル (.css) を参照することです。ファイル) へ HTML ページでは、参照をページのセクションに配置する必要があります。

これは、HTML ページに CSS を追加する最も便利な方法です。こうすることで、外部 CSS ファイルに加えた変更が Web サイトに反映されます。

外部スタイルシートの例:

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

ログイン後にコピー

style.css にはすべてのスタイルルールが含まれています。例:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

ログイン後にコピー

現在、ほとんどの Web サイトでは外部スタイルシートが使用されています。外部スタイルシートは、別のドキュメントに記述され、さまざまな Web ドキュメントに添付されるスタイルです。外部スタイルシートは、接続されているすべてのファイルに影響します。つまり、20 ページの Web サイトがあり、すべてのページが同じスタイルシートを使用している場合、変更が必要な場合は、スタイルシートを編集するだけでそれらのページを完成させることができます。タームサイト管理が容易になります。

以上がCSS スタイルを HTML に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。