CSSの導入方法にはどのようなものがあるのでしょうか？-CSSチュートリアル-php.cn

CSSの導入方法にはどのようなものがあるのでしょうか？

青灯夜游

リリース： 2023-01-05 16:12:27

オリジナル

19758 人が閲覧しました

CSS の導入方法は、 1. HTML タグの style 属性を使用して導入する; 2. HTML タグの「」タグペアにスタイルコードを記述するページ; 3. リンクタグを使用して外部 CSS ファイルを導入します; 4. 「@import」ルールを使用して外部 CSS ファイルを導入します。

CSSの導入方法にはどのようなものがあるのでしょうか？

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

1. HTML タグの style 属性を使用する (インライン)

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

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

<div style="color:red"></div>

ログイン後にコピー

2. style タグを使用します (埋め込み)

ページにスタイルコードを記述します<style>...</style> タグ間

セクションに記述されます。この CSS 導入方法の特徴は、各ページの CSS コードを統一して計画的に作成できることで、ページ内での再利用やメンテナンスが容易ですが、複数のページ間での CSS コードの再利用はまだ不十分です。

<style>
 bdoy{font-size:14px;}
</style>

ログイン後にコピー

3. link タグを使用して外部 CSS ファイルを導入します (リンク済み)

CSS コードを別のファイルに記述し、link タグを使用して直接導入しますファイルをページに追加します。ページでは LINK タグを複数回使用して、複数の外部 CSS ファイルを導入できます。これらの CSS コードの相互影響に注意してください。通常、後で導入された CSS ファイルは、以前に導入された CSS ファイルの同じ効果を上書きします。現在このCSS導入方法が最も主流であり、WebサイトごとにCSSコードを計画して再利用やメンテナンスを容易にすることができますが、コードの集中化が進み、コード量が多くなりすぎて作業が容易になる場合があります。適切に維持されないと問題が発生する可能性があります。

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

ログイン後にコピー

4. @import を使用して CSS ファイルを導入する (インポートタイプ)

@import を使用して CSS ファイルを導入するには 2 つの方法があり、1 つは次の場所に配置できます。ページ、使用法は次のとおりです:

@import url(index2.css);

ログイン後にコピー

CSS ファイルでも使用できます。使用法は次のとおりです:

@import "sub.css";

ログイン後にコピー

@import を使用して CSS を導入できます。外部ファイルから CSS コードを導入すると、メンテナンスや計画が容易になり、非常に便利です。ただし、追加の CSS ファイルを導入するたびにサーバーへの接続要求が追加されるため、アクセス数が多い場合は保守性とパフォーマンスのトレードオフが必要になります。 (学習ビデオ共有: css ビデオチュートリアル )

リンクタイプとインポートタイプの違い

1、XHTML に属します

2、ページへの CSS ファイルの読み込みを優先します

@import

1、CSS2.1 に属します

2. 最初に HTML 構造をロードし、次に CSS ファイルをロードします。

CSS での優先順位

1. スタイルの優先順位

インラインスタイル > 内部スタイル > 外部スタイル (最後の 2 つは後者です)近接性の原理)

例:

インラインスタイルと内部スタイルの優先順位の比較:

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行内样式和内部样式表的优先级</title>
    <!--内部部样式表-->
  <style type="text/css">
    p{
      color: blue;
    }
  </style>
</head>
<body>
     <!--行内样式-->
     <p style="color: red;">我是p段落</p>
</html>

ログイン後にコピー

ブラウザ実行効果:

#結論: インラインスタイルは内部スタイルシートよりも優先されます。

内部スタイルシートと外部スタイルシートの比較の優先順位:

a. 内部スタイルシートが外部スタイルシートよりも優先

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表和外部样式表的优先级</title>
    <!--内部部样式表-->
  <style type="text/css">
    p{
      color: blue;
    }
  </style>
  <!--外部样式表-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head>
<body>
     <p>我是p段落</p>
     <p>我是p</p>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

ログイン後にコピー

ブラウザ実行効果:

b. 外部スタイルシートは内部スタイルシートの上にあります

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表和外部样式表的优先级</title>
    <!--外部样式表-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    <!--内部部样式表-->
  <style type="text/css">
    p{
      color: blue;
    }
  </style>
</head>
<body>
     <p>我是p段落</p>
     <p>我是p</p>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

ログイン後にコピー

ブラウザ実行時の効果:

結論: 内部スタイルシートと外部スタイルシートでは、近接性の原則が使用されます。つまり、下に書いた人が優先されます。

注: インポートおよびリンクの優先順位にも近接性の原則が使用されます。

2. セレクターの優先度

優先度: ID セレクター>クラスセレクター>タグセレクター

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>选择器的优先级</title>
  <style type="text/css">
    #a{
      color: green;
    }
    .b{
      color: yellow;
    }
    h2{
      color: red;
    }
  </style>
</head>
<body>
     <h2>111</h2> <!--红色-->
     <h2 id="a" class="b">222</h2> <!--绿色-->
     <h2 class="b">333</h2><!--黄色-->
</html>

ログイン後にコピー

ブラウザ実行効果:

プログラミング関連の知識について詳しくは、