2 つの呼び出し方法: 1. 呼び出しにはリンク タグを使用します。構文は " です。 "; 2 、呼び出しには "@import" キーワードを使用します。構文は "" です。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
CSS 外部スタイル シート
CSS スタイルが Web ドキュメントの外部のファイルに配置されている場合、それは外部スタイル シートと呼ばれます。 CSS スタイルシートドキュメントは外部スタイルシートを表します。
実際、外部スタイル シートは拡張子 .css を持つテキスト ファイルです。 CSS スタイル コードをテキスト ファイルにコピーし、.css ファイルとして保存すると、それは外部スタイル シートになります。
HTML ページで外部スタイル シートを呼び出す 2 つの方法
外部スタイル シートは、使用する前に Web ページ ドキュメントにインポートする必要があります。ブラウザによる識別と解析。外部スタイル シート ファイルは、2 つの方法で HTML ドキュメントにインポートできます。
1. タグを使用して (リンク スタイル) を呼び出します。
タグを使用して、外部スタイル シート ファイルを呼び出します:
<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />
各属性の説明:
#href 属性は、外部スタイル シート ファイルのアドレスを設定します。これは、相対アドレスまたは絶対アドレスにすることができます。
rel 属性は、関連するドキュメントを定義します。ここでは、関連するドキュメントがスタイル シートであることを示します。
type 属性はインポートされるファイルのタイプを定義します。style 要素と同様に、text/css は CSS テキスト ファイルを示します。
通常、 タグを定義する場合、3 つの基本属性を定義する必要があり、そのうちの href は必ず設定する属性です。
HTML の タグを使用して外部スタイル シート ファイルを HTML ドキュメントにリンクすることは、インターネット上の Web サイトで最も一般的に使用される方法であり、最も実用的な方法でもあります。この方法により、HTML ドキュメントと CSS ファイルが完全に分離され、構造層とプレゼンテーション層の完全な分離が実現され、Web ページ構造の拡張性と CSS スタイルの保守性が向上します。
例: リンク スタイルを使用して HTML コードにスタイルを適用すると、記述と変更が簡単になります。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>我是被 lianjie-2.css 文件控制的，楼下的你呢？？</p>
<h3>楼上的，<span>lianjie.css</span> 文件给我穿的花衣服。</h3>
</body>
</html>上記の例では、2 つの CSS ファイルがリンクによってリンクされており、どちらも有効であるため、Web サイト作成者は公開部分を 1 つの CSS ファイルにまとめ、現在のページのスタイル 新しいスタイル ファイルを書き込みます。
lianjie.css ファイル コード:
h3{
font-weight: normal; /*取消标题默认加粗效果*/
background-color: #66CC99; /* 设置背景色 */
height: 50px; /*设置标签的高度*/
line-height:50px; /* 设置标签的行高 */
}
span{
color: #FFOOOO; /* 字体颜色 */
font-weight:bold; /* 字体加粗 */
}lianjie-2.css ファイル コード:
p{
color: #FF3333; /*字体颜色设置*/
font-weight: bold; /* 字体加粗 */
border-bottom: 3px dashed #009933; /* 设置下边框线 */
line-height: 30px; /* 设置行高 */
}リンク スタイルは CSS コードと HTML コードを完全に分離して、構造とスタイルを実現します。これにより、HTML コードでページ構造を具体的に構築できるようになり、美化作業は CSS によって完了します。
CSS スタイルのリンクベースのインポートの利点:
CSS ファイルをさまざまな HTML ファイルに配置して、Web サイトのすべてのページをスタイルで統一できます。
さらに、CSS コードを CSS ファイルに入れると、管理が容易になり、コードとメンテナンスの時間が短縮されます。
CSS ファイルが変更されると、すべてのアプリケーションがこの CSS ファイルを適用する HTML ファイルはすべて、サーバーからすべてのページを取得して変更後にアップロードすることなく更新されます。
2. @import キーワードを使用して呼び出し (インポート)
@import ディレクティブは CSS 言語の一部です。このディレクティブを使用しますHTML の