ホームページ  >  記事  >  ウェブフロントエンド  >  CSSの内部リンク、外部リンク、埋め込みCSSの違いは何ですか?

CSSの内部リンク、外部リンク、埋め込みCSSの違いは何ですか?

青灯夜游
青灯夜游オリジナル
2020-11-17 14:53:158225ブラウズ

違い: 内部リンクは、style 属性を使用して HTML タグに CSS スタイルを記述することを指します。外部リンクは、リンク タグ参照を使用して、CSS スタイルを拡張子「.css」のファイルに個別に記述することを指します。埋め込みで使用します。 styleタグのリファレンスは、cssのスタイルを「」内に別途記述します。

CSSの内部リンク、外部リンク、埋め込みCSSの違いは何ですか?

[推奨チュートリアル: CSS ビデオ チュートリアル]

HTML で CSS を参照するには 3 つの方法があります: 内部リンクスタイル、外部リンク スタイル、埋め込みスタイル。

機能的に言​​えば、これら 3 つによって実装される機能は同じであり、いずれもコンテンツの組版と変更を実現できます。ただし、使い方としては使用方法が異なりますので、一つずつ区別していきましょう:

(1) 内部リンク型の紹介

内部リンク型 cssスタイルシートは既存のHTMLタグ内に直接CSSコードを記述するもので、具体的な使用方法は以下の通りです:

<div style="color:red;">设置文字的颜色为红色</div>

ここで注意: スタイルの内容は要素の開始タグに記述され、 css スタイル コードはダブルクォーテーションで囲んで記述します。複数の css スタイル コード設定がある場合は、セミコロンで区切ってまとめて記述できます。複数の CSS スタイルを一緒に記述すると、次のような効果が得られます。

<div style="color:red;font-size:14px;">>设置字体颜色为红色,并且字体大小为14px</div>

(2) 埋め込みの導入

埋め込みスタイルシートと内部リンクの違いは、非常に便利です。複数の同一要素のスタイル属性を同時に変更するには、たとえば、特定のタグ内のコンテンツのフォントを赤に調整し、太字にし、フォント サイズを 14px に調整したいとします。 #内部リンク方式を使用するには、各タグにスタイルを追加する必要があります。コードは次のとおりです:

CSSの内部リンク、外部リンク、埋め込みCSSの違いは何ですか?上記からわかるように、内部リンク式では冗長なコードが大量に生成されますが、埋め込みコードを使用するのは比較的簡単です。コードは次の図に示すとおりです。上の図、埋め込み spam タグのみを変更する必要がある場合は、span タグ内のすべてのコンテンツのスタイルがそれに応じて変更されます。

(3) 外部導入

CSSの内部リンク、外部リンク、埋め込みCSSの違いは何ですか?

外部CSSスタイルとは、CSSコードを別の外部ファイルに記述するもので、このCSSスタイルファイルは「.css」で始まります。拡張子は通常、(

以上がCSSの内部リンク、外部リンク、埋め込みCSSの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。