外部CSSの書き方

Web デザインと開発テクノロジーの継続的な発展により、CSS (Cascading Style Sheets) は重要な Web デザイン言語になりました。 CSS を通じて、Web ページのスタイルを簡単に制御して、より優れた Web デザインを実現できます。実際の開発ではCSSファイルを外部に置くことが多いです。それでは、外部 CSS の記述方法について説明します。

1. CSS ファイルを作成する

まず、Web サイトのルート ディレクトリに CSS フォルダーを作成し、その中に CSS ファイルを作成する必要があります。自分や他の人が管理しやすいように、ファイル名には意味のある名前を使用することをお勧めします。

2. CSS ファイルを接続する

HTML ファイルでは、CSS ファイルを接続して CSS スタイルを参照する必要があります。外部リンク (link) またはインライン スタイル (style) を使用できます。

1. 外部リンク方法

<link rel="stylesheet" href="样式文件路径">

このうち、rel属性はスタイルシートとドキュメントの関係を指し、通常はスタイルを表すために「stylesheet」が使用されます。シート; href 属性はスタイル シートのアドレスを参照します。スタイル ファイルのパスは HTML ファイルに対する相対パスであり、絶対パスまたは相対パスを使用できます。

例:

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

2. 埋め込みスタイル メソッド

<style type="text/css">
    样式内容
</style>

type 属性は、スタイル ファイルのタイプ (通常は "text/css") を指します。スタイルのコンテンツは CSS コードの一部です。

例:

<style type="text/css">
    body {
        background-color: gray;
    }
</style>

3. CSS スタイルの記述

CSS ファイルに CSS スタイルを記述する方法は、スタイル タグを使用して CSS スタイルを記述する方法と似ています。 HTML ファイル。 CSS セレクターを使用して変更する必要がある部分を選択し、CSS プロパティと属性値を使用してスタイルを設定できます。

例:

body {
    background-color: gray;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

上記のコードでは、ページ全体の body 要素を選択し、その背景色、フォント サイズ、フォント スタイルを設定します。

4. 利点

外部 CSS ファイルを使用すると、次のような利点があります:

1. 構造とスタイルを分離。スタイル ルールを別のファイルに置くと、プログラマはコードの構造化とスタイルのフォーマットに集中できるようになります。
2. 差別化されたプレゼンテーション。異なる Web サイト/ページは、Web サイト上の統一された外観と操作性を維持するために、ある種のスタイル ファイルを共有できます。
3. 作業の重複を減らします。複数のページが同じスタイルを持つ場合、1 つの CSS ファイルで 1 回定義するだけで済みます。
4. ファイルの再利用性を向上させます。 CSS ファイルを複数の Web ページ間で共有できるため、CSS ファイルの再利用性が向上します。

5. まとめ

以上が外部CSSの書き方とメリットです。もちろん、実際の開発では、404 などのエラーを避けるために、ファイル パスとファイル名のスペルに注意する必要があります。さらに、CSS スタイルを記述するには、アダプティブ レイアウトの特性にも適応する必要があります。継続的な練習と学習を通じて、コードの品質を継続的に向上させ、ユーザー エクスペリエンスを最適化し、より良い Web デザインを実現できます。

以上が外部CSSの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。