简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

CSSを導入する3つの方法とは何ですか?

青灯夜游
リリース： 2022-09-21 17:28:38
オリジナル
22284 人が閲覧しました

CSS を導入する 3 つの方法: 1. インライン導入。style 属性を使用して CSS コードを特定の HTML タグに挿入します。構文は ".."; 2. 埋め込み導入、ドキュメントの先頭部分のスタイルタグペアに CSS コードを配置します。構文は ""; 3. 外部導入、put外部 CSS ファイルの CSS コードを、リンク タグまたは「@import」ルールを使用して HTML ドキュメントに導入します。

CSSを導入する3つの方法とは何ですか?

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

CSS: カスケード スタイル シートは、HTML や XML などのドキュメント スタイルを表現するために使用されるコンピューター言語です。 CSS は Web ページを静的に変更するだけでなく、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットすることもできます。CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォントをサポートしますサイズとスタイル、および Web オブジェクトとモデルのスタイルを編集する機能があります。

CSS の基本構文:

CSS ルールは 2 つの主要な要素で構成されます。パーツ: セレクター, 1 つ以上のステートメントと同様に、セレクターは通常、スタイルを変更する必要がある HTML 要素であり、各ステートメントは属性と値で構成されます。

CSSを導入する3つの方法とは何ですか?

1. セレクター (セレクター)

セレクターは、HTML 要素の id、class 属性、または要素名そのもので構成されます。いくつかの特殊記号は、スタイルを定義する HTML 要素を指定するために使用されます。たとえば、セレクター p は、ページ内のすべての

タグのスタイルを定義することを意味します;

2。宣言

宣言は 1 つまたは無数に存在でき、これらの宣言は、セレクターで指定されたオブジェクトをレンダリングする方法をブラウザーに指示します。すべての宣言は、セレクターの直後の中括弧 { } 内に配置されます。

ステートメントには属性と属性値の 2 つの部分を含める必要があり、セミコロンを使用してステートメントの終わりをマークする必要があります。スタイルの最後のステートメントではセミコロンを省略できます。

  • 属性: HTML 要素に設定するスタイル名。CSS の色、境界線、フォントなどの一連のキーワードで構成されます。多くの属性が提供されます。これは W3C 公式 Web サイトから表示できます;

  • 値: 数値と単位またはキーワードで構成され、値などの特定の属性の表示効果を制御するために使用されます。 color 属性の値は、赤または #F1F1F1 などです。

コロン: 属性と値を区切るのに必要です。属性と値の各組み合わせはステートメントと見なされます。各ステートメントの最後にはセミコロンが必要です. ; 最後に、同じセレクターに属する宣言を中括弧 { } で囲む必要があります。

#CSS 導入の 3 つの形式

1. インライン スタイル シート (インライン導入)

style 属性を単一の HTML 要素タグに直接追加して、HTML タグの表示スタイルを制御します。

この CSS の導入方法は分散型で柔軟性があり便利ですが、整合性と計画性に欠けており、後の変更やメンテナンスには役立ちません。Web サイトのスタイルを変更する必要がある場合、同じ変更を行う必要がある場合があります。複数の場所に関係するため、維持費が高くつきます。 STYLE 属性を使用したスタイル効果は最も強力で、他の導入方法の同じスタイル効果を上書きします。 

<!DOCTYPE html>
<html>
    <head>
    </head>  
    <body>
        <h1 style="color: maroon; margin-left: 40px">PHP中文网</h1>
        <p style="color: blue;">https://www.php.cn/</p>
    </body>
</html>
ログイン後にコピー

CSSを導入する3つの方法とは何ですか?

インライン スタイル (インライン スタイル) は HTML タグに CSS スタイルを簡単に与えることができますが、欠点も非常に明らかなので、あまり使用することはお勧めできません。

  • インライン スタイルを定義するには、各 HTML タグで style 属性を定義する必要があり、非常に不便です;

  • インライン スタイルでは double を使用してください特に注意してください引用符または一重引用符を使用する場合、HTML タグの属性では通常、;

    • のように属性値を囲むために二重引用符が使用されるためです。 in インライン スタイルで定義されたスタイルは他の場所では再利用できません;

    • Web サイトは通常多くのページで構成されているため、インライン スタイルは後のメンテナンスで非常に不便です。

    • インライン スタイルを追加しすぎると、HTML ドキュメントのサイズが大きくなります。

2. 内部スタイル シート (埋め込み導入)

ページにスタイル コードを記述します