HTML内でCSSを参照する方法

藏色散人
リリース: 2023-01-05 16:12:16
オリジナル
16838 人が閲覧しました

HTML で CSS を参照する方法: 1. インライン スタイル、「」などのコードを通じて CSS を参照します。 2. 内部スタイル シート、次のようなコードを通じて CSS を参照します。 as " "; 3. 外部スタイル シートを介して CSS を参照します。

HTML内でCSSを参照する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。

HTML で CSS を参照する 3 つの方法

CSS は HTML 4 で初めて使用され、HTML 要素をより適切に表示するために導入されました。

CSS の導入1-インライン、2-内部スタイル シート、3-外部スタイル シートの 3 つの方法で HTML に変換します。

  • インライン スタイル:

    <body style="background-color: gray">
ログイン後にコピー

タグ内 style=" "

  • 内部スタイル テーブル:

    <style type="text/css"> 
    p {color:red;} <!--内部样式表-->
    </style>
ログイン後にコピー

style タグを使用し、CSS で制御する属性をタグ内に配置します。

  • 外部スタイル シート:

<link rel="stylesheet" type="text/css" href="mystyle.css">
ログイン後にコピー

head タグ内で、link タグを使用して読み込む CSS ファイルを導入します

これら 3 つの表現方法を使用して背景を制御すると、偶然発見しました。 color 属性を同時に指定した場合、インライン スタイルのタグ内のプロパティのみが有効になります。

インライン タグは背景色をグレーに設定し、内部スタイル シートは赤に設定し、外部スタイル シートは設定しません。 htmlの背景色は灰色です。

インラインタグの背景色はグレー、外部スタイルシートは黄色、内部スタイルシートは設定されていません。 htmlの背景色は灰色です。

内部スタイルシートは赤色、外部スタイルシートは黄色に設定されています。 htmlの背景色は黄色です。

結論: インライン>外部スタイルシート>内部スタイルシート

ラベルに近い属性が最初に反映されることがわかります。

HTML/CSS の詳細については、HTML ビデオ チュートリアル 列をご覧ください。

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート