このCSS短期コースで事実を知る
カスケードスタイルシートには多くの利点があります。 彼らはウェブサイト全体で同じスタイルシートを使うことができます。 これを行うには2つの方法があります：
- LINK要素とのリンク
- @importコマンドでインポートする
- <スタイル>
- @import url（ 'http://www.yoursite.com/styles.css'）;
外部スタイルシートのメリットとデメリット
カスケーディングスタイルシートに関する最良の事柄の1つは、スタイルシートを使用してサイトの一貫性を維持できることです。 これを行う最も簡単な方法は、外部スタイルシートをリンクまたはインポートすることです。 サイトのすべてのページに同じ外部スタイルシートを使用すると、すべてのページが同じスタイルになることができます。
外部スタイルシートを使用する利点のいくつかは、一度にいくつかのドキュメントのルックアンドフィールを制御できることを含みます。 これは、人々のチームと協力してウェブサイトを作成する場合に特に便利です。 多くのスタイルルールは覚えがたく、印刷されたスタイルガイドを持っているかもしれませんが、サンプルテキストを12ポイントのArialフォントまたは14ポイントの宅配便で書くかどうかを判断するのは面倒です。
多くの異なるHTML要素で使用できるスタイルのクラスを作成できます。 ページ上のさまざまなものに重点を置くために特別なWingdingsフォントを使用することが多い場合は、スタイルシートで設定したWingdingsクラスを使用して、強調の各インスタンスごとに特定のスタイルを定義するのではなく、
より効率的にスタイルを簡単にグループ化できます。 CSSで使用できるすべてのグループ化方法は、外部スタイルシートで使用できます。これにより、ページの柔軟性と柔軟性が向上します。
つまり、外部スタイルシートを使用しないようにする理由もあります。 1つは、多くのユーザーにリンクすると、ダウンロード時間を増やすことができます。
新しいCSSファイルを作成してリンクするか、ドキュメントに読み込むたびに、WebブラウザでWebサーバーを呼び出してファイルを取得する必要があります。 サーバーコールはページの読み込み時間を遅くします。
スタイルの数が少ない場合は、ページの複雑さが増します。
スタイルはHTMLの右側に表示されないため、ページを見ている人は、何が起こっているのかを把握するために別のドキュメント（CSSファイル）を取得する必要があります。
外部スタイルシートを作成する方法
外部スタイルシートは、埋め込みスタイルシートとインラインスタイルシートと同じ方法で記述されます。 しかし、あなたが書く必要があるのはスタイルセレクタと宣言だけです。 ドキュメントにはSTYLE要素や属性は必要ありません。
他のすべてのCSSと同様に、ルールの構文は次のとおりです。
セレクタ{プロパティ：値; }
これらのルールは、拡張子が.cssのテキストファイルに書き込まれます。 たとえば、スタイルシートstyles.cssに名前を付けることができます。
スタイルシート文書を作成したら、それをWebページにリンクする必要があります。 上記のとおり、これは2つの方法で行われます。
CSSドキュメントのリンク
スタイルシートをリンクするには、LINK要素を使用します。 これにはrelとhrefという属性があります。 rel属性はリンクしているもの（この場合はスタイルシート）をブラウザに伝え、href属性はCSSファイルへのパスを保持します。
リンクされたドキュメントのMIMEタイプを定義するために使用できるオプションの属性タイプもあります。 HTML5では必須ではありませんが、HTML 4文書で使用する必要があります。
styles.cssというCSSスタイルシートをリンクするコードを以下に示します。
また、HTML 4文書では次のように記述します。
type = "text / css" >
CSSスタイルシートの読み込み
インポートされたスタイルシートは、STYLE要素内に配置されます。 必要に応じて埋め込みスタイルを使用することもできます。 インポートしたスタイルをリンクされたスタイルシートに含めることもできます。 STYLEまたはCSSドキュメントの中には、次のように記述します。
@import url（ 'http://www.yoursite.com/styles.css'）;