CSSで外部スタイルシートをリンクする

CSSを使用すると、外部スタイルシートをファイルにリンクできます。これにより、CSSを個別に変更し、ページの読み込み時間を改善できます。外部ファイルは、ドキュメントの内のタグで指定されます。

構文

外部CSSを含めるための構文は次のとおりです。

<link rel="stylesheet" href="#location">

例

次の例は、CSSファイルがどのように埋め込まれるかを示しています＆miuns;

HTMLファイル

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Demo Text</h2>
<div>
<ul>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
</ul>
</div>
</body>
</html>

CSSファイル

h2 {
   color: red;
}
div {
   background-color: lightcyan;
}

出力

これにより、次の出力が得られます-

CSSで外部スタイルシートをリンクする

例

HTMLファイル

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html>

CSSファイル

p {
   background: url("https://www.tutorialspoint.com/images/QAicon.png");
   background-origin: content-box;
   background-size: cover;
   box-shadow: 0 0 3px black;
   padding: 20px;
   background-origin: border-box;
}

出力

これにより、次の出力が得られます-

CSSで外部スタイルシートをリンクする

疑似クラスとCSSクラス

CSSの埋め込みまたは内部スタイルシート

CSSでの外部スタイルシートのインポート
別のCSS宣言内に追加のCSSファイルをインポートできます。 @importルールは、ドキュメント内のスタイルシートをリンクするため、この目的で使用されます。これは通常、あるスタイルシートが別のスタイルシートに依存している場合に使用されます。内の@charset宣言の後にドキュメントの上部で指定されます。構文 @importルールの構文は次のとおりです @import /*url or list-of-media-queries*/ メディアクエリは、さまざまなメディアでのドキュメントの動作を指定する可能性のある複合ステートメントにすることができます。例次の例では、@import
CSSを使用したメディア依存のスタイルシートの作成
メディア依存のスタイルシートは基本的なスタイルシートのみですが、メディアタイプがドキュメントが表示されているデバイスタイプと一致する場合にのみHTMLドキュメントに適用されます。次の方法でメディア依存のスタイルシートを作成できます- @mediaAt-rulesの使用 @importAt-rulesの使用メディア属性でHTMLの要素を使用する例メディアに依存するスタイルシートを作成する例を見てみましょう- HTMLドキュメント <!DOCTYPE html> <html> <head> <link rel="styleshee