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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

藏色散人

Jan 20, 2021 am 09:14 AM

csshtml

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 id="Hostinger-nbsp-Tutorials">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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。