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