CSS の概要


CSS は Cascading Style Sheets を指し、HTML 要素の表示方法を定義するために使用されます。 CSS スタイルは通常、スタイル シートに保存されます。これにより、コンテンツとプレゼンテーションの分離の問題を解決でき、作業効率が大幅に向上します。

知っておく必要がある知識

学習を続ける前に、次の知識について基本的に理解しておく必要があります:

  • HTML / 関連チュートリアル。

CSSとは何ですか?

CSSとは、Cascading Style Sheets (
C

ascading

S
    tyle
  • S

    heets)のことですスタイル定義 HTML要素の表示方法

  • スタイル通常、スタイル シートにスタイルが HTML 4.0 に追加され、

    コンテンツとプレゼンテーションの分離の問題を解決します

  • 外部スタイル シート
    • は作業効率を大幅に向上させることができます

  • 外部スタイル テーブルは通常、

    CSS ファイルに保存

  • 複数のスタイル定義を 1 つに

    カスケード
    • することができます

  • スタイルはよくある問題を解決します
  • HTML タグは元々ドキュメントのコンテンツを定義するために設計されました。 <h1>、<p>、<table> などのタグを使用することで、HTML の本来の目的は、「これはタイトルです」、「これは段落です」、「これは表です」などの情報を表現することでした。 。同時に、ドキュメントのレイアウトは、書式設定タグを使用せずにブラウザーによって完成されます。

    2 つの主要なブラウザ (Netscape と Internet Explorer) が HTML 仕様に新しい HTML タグと属性 (フォント タグやカラー属性など) を追加し続けているため、ドキュメント コンテンツがドキュメント プレゼンテーション層から明確に独立しているサイトを作成する必要があります。ますます難しくなります。

    この問題を解決するために、非営利の標準化同盟である World Wide Web Consortium (W3C) は HTML を標準化するという使命を担い、HTML 4.0 以外のスタイルを作成しました。
すべての主要な最新ブラウザは、カスケード スタイル シート (CSS) をサポートしています。

CSS スタイル シートで作業効率が大幅に向上

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

CSS は、複数のページのスタイルやレイアウトを同時に制御できるため、WEB デザインの分野における画期的な技術と言えます。 Web サイト開発者は、各 HTML 要素のスタイルを定義し、必要な数のページに適用できます。グローバル更新を行うには、スタイルを変更するだけで、サイト内のすべての要素が自動的に更新されます。

複数のスタイルが 1 つにカスケードされます

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

カスケード順序

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

一般に、すべてのスタイルは、次のルールに従って新しい仮想スタイル シートにカスケードされ、番号 4 が最も高い優先順位を持ちます。

ブラウザのデフォルト

  1. 外部スタイルシート

  2. 内部スタイルシート（<head>タグ内）

  3. インラインスタイル（HTML要素内）

したがって、インラインスタイル(HTML 要素内) の優先順位が最も高くなります。つまり、<head> タグ内のスタイル宣言、外部スタイル シート内のスタイル宣言、またはブラウザー ステートメント内のスタイルよりも優先されます。