CSS スタイルを HTML 外部スタイルシートにインポートする方法

リンクインスタイルとは、すべてのスタイルを 1 つ以上の外部スタイルシートファイルに配置することです。このファイルの拡張子は css です。リンクタグを通じて、外部スタイルシート (css という名前の外部スタイルファイル) が HTML ドキュメントにリンクされます。このようにして、構造とスタイルを 2 つのファイルに分割できるため、スタイルや構造を編集しやすくなります。

基本的な構文は次のとおりです。

<link rel="スタイルシート" href="text.css" />

ヒント: ショートカットキーはlink+tabです

具体的な手順

① HTMLファイルとCSSファイルを別々に作成し、ファイル名の末尾をそれぞれ.htmlと.cssにします。

HTML では、スタイルの変更が必要な構造とコンテンツのみが記述されます。
CSS ファイルにはスタイルのみが記述されます。

例えば：

HTMLファイルの書き込み:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<ヘッド>
	<meta http-equiv="コンテンツタイプ" content="text/html;charset=UTF-8">
	<title>ドキュメント</title>
</head>
<本文>
	<div class="demo">Zhang Wangwang と一緒に外部スタイルシートを学ぶ</div>
	<div>Zhang Wangwang と一緒に外部スタイルシートを学ぶ</div>
	<div>Zhang Wangwang と一緒に外部スタイルシートを学ぶ</div>
	<div>Zhang Wangwang と一緒に外部スタイルシートを学ぶ</div>
</本文>
</html>

cssファイルの書き込み:

。デモ{
	色: 青; 
}

この時点で、ブラウザには次のように表示されます。

ここに画像の説明を挿入

上記のコードからわかるように、最初の行「Learn external style sheets with Zhang Wangwang」の色を青に設定していますが、.html ファイルと .css ファイルの間に接続がないため、ブラウザーのテキストの最初の行には編集した色が表示されません。

②HTMLの<head>内に挿入

<link rel="stylesheet" href="css ファイルパス" />

その後、Ctrl + S を押してブラウザを更新すると、次のように表示されます。

テキストの最初の行が青色に変わっているのがわかりますね〜

知らせ

練習するときは、.css ファイルと .html ファイルを同じディレクトリフォルダーに配置し、スタイルや構造を記述した後、Ctrl + S を押して最初に保存することを忘れないでください。そうすることで、結果がより良く、より速く表示されます。
リンクタグの機能は、現在の HTML ページに外部 CSS スタイルを導入することであり、HTML ファイルと CSS ファイル間の橋渡しとなります。

CSS スタイルを HTML 外部スタイルシートに導入する方法についての記事はこれで終わりです。CSS スタイルを HTML に導入する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML テーブルの行間および列間の操作 (rowspan、colspan)

>>: CSS3はリストの無限スクロール/カルーセル効果を実現します