CSS 入門

必要な基礎知識

学習を続ける前に、以下の基本的な知識が必要です:

  • HTML
  • XHTML

これらのプロジェクトをまず学びたい場合は、 ホームページ 関連するチュートリアルにアクセスしてください。

CSS概要

  • CSSは層を重ねたスタイルシート(Cascading Style Sシート
  • スタイル定義どのように表示されるか HTML要素
  • スタイルは通常、スタイルシート
  • HTML 4.0にスタイルを追加することは、内容と表示の分離問題を解決します。
  • 外部スタイルシート非常に効率を向上させることができます。
  • 外部スタイルシートは通常、 CSSファイル
  • スタイル定義が可能です。

スタイルは一般的な問題を解決しました。

HTMLタグは元々、文書内容を定義するために設計されました。例えば<h1>、<p>、<table>などのタグを使用して、「これはタイトルです」、「これは段落です」、「これはテーブルです」といった情報を表現するHTMLの本意は、ブラウザがフォーマットタグを使用せずに文書レイアウトを完了することでした。

主要なブラウザ(NetscapeとInternet Explorer)がHTML規範に新しいHTMLタグや属性(例えばフォントタグや色属性)を絶えず追加するため、文書内容が文書の表示レイヤーから独立して明確に表現されるサイトの作成が難しくなっています。

この問題を解決するために、非営利の標準化団体である万国ウェブ連盟(W3C)がHTML標準化の使命を担い、HTML 4.0の他にスタイル(Style)を創出しました。

主要なブラウザすべてがカラーズシートをサポートしています。

スタイルシートは作業効率を大幅に向上させます。

スタイルシートはHTML要素の表示方法を定義します。これにより、HTML 3.2のフォントタグや色属性と同様の役割を果たします。スタイルは通常、外部の.cssファイルに保存されます。簡単なCSSドキュメントの編集だけで、外部スタイルシートを使って、サイト内のすべてのページのレイアウトや外観を同時に変更することができます。

多重ページのスタイルとレイアウトを同時に制御できるため、CSSはWEBデザイン分野の一大進歩と称することができます。ウェブ開発者として、各HTML要素にスタイルを定義し、希望する任意のページに適用することができます。全体的な更新が必要な場合は、簡単にスタイルを変更するだけで、ウェブ上のすべての要素が自動的に更新されます。

多重スタイルは層を重ねて一つになります

スタイルシートは、スタイル情報を複数の方法で指定することができます。スタイルは、単一のHTML要素、HTMLページのヘッダー要素、または外部のCSSファイルで指定できます。また、同じHTMLドキュメント内で複数の外部スタイルシートを参照することもできます。

階層順序

同じHTML要素が複数のスタイルで定義されている場合、どのスタイルが使用されますか?

一般的に、すべてのスタイルは以下のルールに基づいて新しい仮想スタイルシートに階層化されます。その中で数字4が最高の優先順位を持ちます。

  1. ブラウザのデフォルト設定
  2. 外部スタイルシート
  3. 内部スタイルシート(<head>タグ内に位置)
  4. インラインスタイル(HTML要素内)

したがって、インラインスタイル(HTML要素内)は最高の優先順位を持ち、これは以下のスタイル宣言よりも優先されることを意味します:<head>タグ内のスタイル宣言、外部スタイルシートのスタイル宣言、またはブラウザのスタイル宣言(デフォルト値)。