CSSスタイルをHTMLに追加するにはどうすればよいですか?インライン、組み込み、外部のメリットとデメリット-CSSチュートリアル-php.cn

CSSスタイルをHTMLに追加するにはどうすればよいですか?インライン、組み込み、外部のメリットとデメリット

青灯夜游

リリース： 2018-11-02 14:32:31

オリジナル

16073 人が閲覧しました

htmlCSS スタイルを追加するにはどうすればよいですか?この記事では、HTML に CSS スタイルを追加する 3 つの方法、つまりインラインスタイル、埋め込みスタイル、外部スタイルの長所と短所を紹介します。困っている友人は参考にしていただければ幸いです。

まず、HTML に CSS スタイルを追加する 3 つの方法とは何なのかを理解する必要があります。

1. インライン CSS を使用して特定の要素にルールを適用します。つまり、内部 CSS を使用し、

ドキュメントセクションに次の内容が含まれます。 CSS ルール、つまり inline

3. すべての CSS ルールを含む外部ファイル (.css ファイル) へのリンク、つまり external

以下で詳しく説明します。インライン、埋め込み、外部メソッドの実装と利点と欠点。

1. インライン CSS インライン CSS は、特定の HTML タグ内で使用する必要があります。タグの間に配置する必要があります。内部スタイルシートの例:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

ログイン後にコピー

埋め込み CSS の利点:

1. スタイルシートは 1 つのページにのみ影響します。

2. 内部スタイルシートではクラスと ID を使用できます。

3. 複数のファイルをアップロードする必要はありません。 HTML と CSS は同じファイル内に含めることができます。

埋め込み CSS の欠点:

1. ページの読み込み時間が長くなります。

2. これは 1 ページにのみ影響します。複数のドキュメントで同じ CSS を使用する場合は役に立ちません。

3. 外部リンクおそらく CSS を HTML ページに追加する最も便利な方法は、CSS を外部ファイル (. cssファイル）。こうすることで、外部 CSS ファイルに加えた変更が Web サイトに反映されます。外部 CSS ファイルへの参照は、ページのセクションに配置する必要があります。例:

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

ログイン後にコピー

と style.css にはすべてのスタイルルールが含まれています。例:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

ログイン後にコピー

外部 CSS の利点:

1. HTML ページのサイズが小さくなり、構造が明確になります。

2. 読み込み速度が速くなります。

3. 同じ .css ファイルを複数のページで使用できます。

外部 CSS の欠点:

1. 外部 CSS が読み込まれる前にページが正しく表示されない可能性があります。

結論上記はこの記事の内容全体であり、HTML ページに CSS を追加するさまざまな方法を紹介しています。また、インラインスタイルシート、外部スタイルシート、内部スタイルシートの違いを理解します。さまざまな方法を使用して CSS スタイルを追加できます。学習に役立つことを願っています。 [推奨されるビデオ学習:

css チュートリアル

]

以上がCSSスタイルをHTMLに追加するにはどうすればよいですか?インライン、組み込み、外部のメリットとデメリットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。