ホームページ > 記事 > ウェブフロントエンド > CSSの外部スタイルシートとは何ですか?
CSSの外部スタイルシートとは何ですか?
- 青灯夜游オリジナル
- 2020-11-13 16:37:286830ブラウズ
CSS では、CSS スタイルが Web ページ ドキュメントの外部のファイルに配置されている場合、それは外部スタイル シートと呼ばれます。CSS スタイル シート ドキュメントは外部スタイル シートを表し、CSS 外部スタイル シート ファイルは " .CSS」拡張子が付けられており、このファイルの場所へのリンクが HTML ドキュメントに含まれているため、Web ブラウザーはスタイルの場所を認識できます。
[推奨チュートリアル: CSS ビデオ チュートリアル]
Web ブラウザーが Web ページを読み込むとき、どのように表示されるかカスケード スタイル シートからの情報に応じて、HTML ファイルではスタイル シートを外部、内部、インラインの 3 つの方法で使用できます。
内部スタイル シートと埋め込みスタイル シートは、HTML ファイル自体に保存されます。現時点では簡単に操作できますが、中央の場所に保存されていないため、サイト全体のスタイルを同時に簡単に変更することはできず、各エントリに戻って手動で変更する必要があります。
CSS スタイルが Web ページ ドキュメントの外部のファイルに配置されている場合、それは外部スタイル シートと呼ばれます。CSS スタイル シート ドキュメントは外部スタイル シートを表します。
実際、外部スタイル シートは拡張子 .css を持つテキスト ファイルです。 CSS スタイル コードをテキスト ファイルにコピーし、.css ファイルとして保存すると、それは外部スタイル シートになります。
以下に示すのは、オンラインの外部スタイル シート (http://c.biancheng.net/templets/new/style/common.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 コンテンツの編集が非常に簡単かつ一元化されます。
それがどのように機能するかを以下で確認できます...
内部スタイルは タグと区別する必要があるため、
<head>
<style>
body {
background-color: green;
}
h1 {
color: blue;
margin-left: 15px;
}
</style>
</head>ただし、外部スタイルシートは独自のファイルに含まれているため、次のように作成できます。これは、上記の例とまったく同じことを意味します。
body {
background-color: green;
}
h1 {
color: blue;
margin-left: 15px;
}これらの例では、スタイルはインラインにのみ適用されます。明らかに、その HTML ページのヘッダーの詳細に含まれているためです。 2 番目の例では、CSS 情報は CSS ファイル内に自己完結型であり、上記の「外部スタイル シートにリンクする方法」セクションのコードを使用して任意のページから CSS 情報にリンクできます。
プログラミング関連の知識について詳しくは、プログラミング学習 Web サイト をご覧ください。 ！
以上がCSSの外部スタイルシートとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。