ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLにCSSを追加するにはどうすればよいですか?

HTMLにCSSを追加するにはどうすればよいですか?

王林オリジナル: 2024-09-04 16:52:24941ブラウズ

一般に CSS として知られるカスケードスタイルシートは、Web 開発者が好みに応じて Web ページのスタイルを設定する手段を提供します。 CSS でスタイル形式が定義されていない単純な HTML ページは、エンドユーザーにとって非常に醜くて退屈に見えます。したがって、CSS は、現代の Web サイトに美しく、魅力的で魅力的な外観を与えるための重要なコンポーネントです。従来、CSS は Web サイトの外観を制御することのみを担当していました。それでも、継続的なアップグレードと新しい CSS により、Web 開発者やデザイナーは Web ページの応答性を制御して、ラップトップ、タブレット、モバイル画面向けに優れた UI を実現できます。

CSS はあらゆる Web サイトに必要であるため、デザイナーの要件に合わせて柔軟かつ簡単に定義できる必要があります。また、CSS 定義は非常に細かくできるため、同じスタイル形式を複数のコンポーネントに一緒に適用するには再利用可能である必要があります。幸いなことに、CSS の機能はこれらの要件を満たしています。

HTML に CSS を追加する方法

次のオプションの 1 つまたはすべてを使用して、CSS を Web ページに追加できます。ここで、これら 3 つの方法を詳しく見てみましょう。

1.インラインCSS

インライン CSS を使用すると、HTML デザイナーは「style」属性を使用して HTML 要素のタグ内にスタイル情報を定義できます。これにはいくつかの長所と短所がありますが、それについては後でいくつかの例を使って説明します。インライン CSS は、CSS を適用する最も基本的な方法です。このメソッドを使用すると、一度に 1 つの HTML 要素だけをスタイル設定できます。スタイリングの再利用性は提供されません。スタイル情報は HTML 要素の開始タグで定義され、「style」属性の値として指定されます。

以下の例では、インライン CSS を使用して h1、h6、p 要素のフォントの色を変更しています。

コード:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">I am a Blue H1 heading</h1>
<h1 style="color:blue;">I am a Blue H6 heading</h1>
<p style="color:blue;">I am a Blue Paragraph</p>
</body>
</html>

出力:

HTMLにCSSを追加するにはどうすればよいですか?

上記の例では、H1、H6、および P タグのフォントの色を青に変更するだけでした。同じスタイル情報を適用したいにもかかわらず、それを再利用することができず、要素ごとに個別に 3 回定義する必要がありました。インライン CSS は再利用性に欠け、時間がかかるため、Web デザイナーは複数のページがある Web サイトのスタイルを設定するときにインライン CSS を使用することを好みません。また、インラインスタイル定義では、モバイル対応の Web サイトを作成することはほとんど不可能です。

2.内部CSS

内部 CSS では、HTML デザイナーは