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

一般に 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 要素のフォントの色を変更しています。

コード:

<h1 id="I-am-a-Blue-H-heading">I am a Blue H1 heading</h1>
<h1 id="I-am-a-Blue-H-heading">I am a Blue H6 heading</h1>
<p style="color:blue;">I am a Blue Paragraph</p>

出力:

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

2.内部CSS

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

次に、同じ例を内部 CSS で実装して試してみましょう。

コード:

.bluecolor {
color : blue ;
}


<h1 id="I-am-a-Blue-H-heading"> I am a Blue H1 heading </h1>
<h1 id="I-am-a-Blue-H-heading"> I am a Blue H6 heading </h1>
<p class=" bluecolor "> I am a Blue Paragraph </p>

出力:

上記の例で見られるように、スタイル情報を 1 回宣言し、それを複数回使用する必要があります。内部 CSS はスタイルの再利用性を大幅に高めますが、ある HTML ファイルで定義された CSS を別のファイルで利用することはできません。また、CSS と HTML を同じファイルで宣言すると、ファイル サイズが大幅に増加し、ファイルの読み込み中に遅延が発生する可能性があります。

3.外部CSS

名前が示すように、外部 CSS は、拡張子 .css で保存され、 でインポートできる外部 CSS ファイルにすべての CSS 情報を定義することで Web ページに適用できます。スタイルを適用する必要がある HTML ファイル内のタグ。外部 CSS メカニズムは、内部 CSS とインライン CSS の欠点を克服するために構築されました。外部 CSS では、すべてのスタイル情報を保持する .css ファイルが必要です。その後、このファイルを HTML ファイルにリンクできます。HTML 要素は、リンクされた CSS ファイルで定義された ID またはクラスを参照します。

HTML リンク タグを使用してリンクを実現します。これを例で理解してみましょう。 mystyles という名前と .css の拡張子を持つ CSS ファイルを作成します。このファイルは次のデータに接続します:

コード:

.bluecolor{
color:blue;
}

Now we will add the below content in the HTML file:

<link rel="stylesheet" href="mystyles.css">


<h1 id="I-am-a-Blue-H-heading"> I am a Blue H1 heading </h1>
<h1 id="I-am-a-Blue-H-heading"> I am a Blue H6 heading </h1>
<p class=" bluecolor "> I am a Blue Paragraph </p>

The above code will produce the following output in the browser:

Output:

Conclusion

With the above examples, we can conclude that External CSS would be the most efficient way of implementing CSS in the website due to the highest degree of code reusability that it provides limited time consumption. Web designers use External CSS for building all professionally developed and popular themes available because it greatly enhances manageability and efficiency in web designing.

以上がHTMLにCSSを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。