外部CSS定義と1つにリンクする方法
WebブラウザがWebページを読み込むと、表示される方法はカスケードスタイルシートからの情報によって決定されます。 HTMLファイルでスタイルシートを使用するには、外部、内部、およびインラインの3つの方法があります。
内部およびインラインスタイルシートは、HTMLファイル自体に格納されます。 現時点では簡単に操作できますが、中央の場所に格納されていないため、ウェブサイト全体のスタイリングを簡単に変更することは不可能です。 各エントリに戻って手動で変更する必要があります。
ただし、外部スタイルシートを使用すると、ページをレンダリングする手順が1つのファイルに保存されるため、Webサイト全体または複数の要素にわたって簡単にスタイルを編集することができます。 ファイルは.CSSファイル拡張子を使用し、そのファイルの場所へのリンクがHTMLドキュメントに含まれているため、Webブラウザはスタイリングの指示の場所を知ることができます。
1つまたは複数のドキュメントを同じCSSファイルにリンクすることができ、Webサイトには異なるページ、表、イメージなどをスタイリングするための多くのユニークなCSSファイルが存在することがあります。
外部スタイルシートにリンクする方法
特定の外部スタイルシートを使用するすべてのWebページは、 セクション内のCSSファイルにリンクする必要があります。
head>この例では、独自のドキュメントに適用するために変更する必要があるのはstyles.cssのテキストだけです。 これはCSSファイルの場所です。
ファイルが実際にstyles.cssと呼ばれ、リンク先のドキュメントとまったく同じフォルダにある場合は、上記のとおりにそのまま残ります。 しかし、あなたのCSSファイルは別のものになっている可能性があります。その場合は、名前を「スタイル」から自分のものに変更できます。
CSSファイルがこのフォルダのルートになく、代わりにサブフォルダにある場合は、代わりに次のように表示されます。
head>外部CSSファイルの詳細
外部スタイルシートの最大の利点は、特定のページに結び付けられていないことです。 スタイリングが内部的にまたはインラインで行われる場合、ウェブサイトの他のページはそれらのスタイリングの設定を指し示すことができない。
しかし、外部のスタイリングでは、同じCSSファイルを文字通りウェブサイト上のすべてのページに使用することができます。そのため、すべてが一様な外観になり、ウェブサイトのCSSコンテンツ全体を簡単に編集できます。
あなたはそれが下でどのように動作するか見ることができます...
内部スタイルは、 タグと区別する必要があるため、 タグを使用する必要があります。
体{背景色:緑; } h1 {色:青; margin-left:15px; } style> head>しかし、外部スタイルシートは独自のファイルに含まれているので、次のように作成することができます。
ボディ{背景色:緑; } h1 {色:青; margin-left:15px; }これらの例では、インラインスタイリングはその特定のページにのみ適用され、そのHTMLページのヘッダーの詳細に含まれていることが明らかです。 2番目の例では、CSS情報は、上記の外部スタイルシートへのリンク方法のセクションのコードを使用してページにリンクできるCSSファイルに含まれています。