ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSの外部スタイルシートとは何ですか?

CSSの外部スタイルシートとは何ですか?

青灯夜游
リリース: 2020-11-13 16:37:28
オリジナル
6850 人が閲覧しました

CSS では、CSS スタイルが Web ページ ドキュメントの外部のファイルに配置されている場合、それは外部スタイル シートと呼ばれます。CSS スタイル シート ドキュメントは外部スタイル シートを表し、CSS 外部スタイル シート ファイルは " .CSS」拡張子が付けられており、このファイルの場所へのリンクが HTML ドキュメントに含まれているため、Web ブラウザーはスタイルの場所を認識できます。

CSSの外部スタイルシートとは何ですか?

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

Web ブラウザーが Web ページを読み込むとき、どのように表示されるかカスケード スタイル シートからの情報に応じて、HTML ファイルではスタイル シートを外部、内部、インラインの 3 つの方法で使用できます。

内部スタイル シートと埋め込みスタイル シートは、HTML ファイル自体に保存されます。現時点では簡単に操作できますが、中央の場所に保存されていないため、サイト全体のスタイルを同時に簡単に変更することはできず、各エントリに戻って手動で変更する必要があります。

CSS スタイルが Web ページ ドキュメントの外部のファイルに配置されている場合、それは外部スタイル シートと呼ばれます。CSS スタイル シート ドキュメントは外部スタイル シートを表します。

実際、外部スタイル シートは拡張子 .css を持つテキスト ファイルです。 CSS スタイル コードをテキスト ファイルにコピーし、.css ファイルとして保存すると、それは外部スタイル シートになります。

以下に示すのは、オンラインの外部スタイル シート (http://c.biancheng.net/templets/new/style/common.css) です。

CSSの外部スタイルシートとは何ですか?

css 外部スタイル シート ファイルは .CSS ファイル拡張子を使用し、ファイルの場所へのリンクが HTML ドキュメントに含まれるため、Web ブラウザーはスタイル指示の場所を知ることができます。

1 つ以上のドキュメントを同じ CSS ファイルにリンクでき、Web サイトには、さまざまなページ、表、画像などのスタイルを設定するために使用される固有の CSS ファイルが多数存在する場合があります。

CSS 外部スタイル シートにリンクするにはどうすればよいですか?

特定の外部スタイル シートを使用するすべての Web ページは、次のように

セクションの CSS ファイルにリンクする必要があります:
<head>
<link rel =“stylesheet”type =“text / css”href =“styles.css”>
</head>
ログイン後にコピー

この例では、独自のドキュメントで機能させるために変更する必要があるのは、CSS ファイルの場所であるstyles.cssテキストだけです。

ファイルが実際にstyles.cssという名前で、そのファイルにリンクされているドキュメントとまったく同じフォルダーにある場合は、上記の内容のままでかまいません。ただし、CSS ファイルのタイトルが別の名前になっている可能性があります。その場合は、名前を「styles」から自分の名前に変更するだけです。

CSS ファイルがこのフォルダーのルートではなくサブフォルダーにある場合は、次のように表示される場合があります:

<head>
<link rel =“stylesheet”type =“text / css”href =“styles \ menus \ black.css”>
</ head>
ログイン後にコピー

外部 CSS ファイルについての詳細情報

外部スタイル シートの最大の利点は、スタイル シートが特定のページに関連付けられていないことです。スタイルが内部またはインラインで実行される場合、サイト上の他のページはこれらのスタイル設定をポイントできません。

ただし、外部スタイルを使用すると、Web サイト上のすべてのページに同じ CSS ファイルを使用できるため、すべてのページの外観が統一され、Web サイト全体の CSS コンテンツの編集が非常に簡単かつ一元化されます。

それがどのように機能するかを以下で確認できます...

内部スタイルは タグと区別する必要があるため、