CSSのスタイルルールとは何ですか？-フロントエンドQ&A-php.cn

CSSのスタイルルールとは何ですか？

醉折花枝作酒筹

リリース： 2023-01-06 11:13:20

オリジナル

9487 人が閲覧しました

CSS スタイルルールは、セレクターと宣言ブロックという 2 つの基本部分で構成されます。セレクターはスタイルを適用する要素を決定します。宣言ブロックは対応するスタイルを定義します。スタイルは中括弧のペアで囲まれ、1 つ以上の宣言で構成され、各宣言は属性と値で構成され、コロンが開いています。

CSSのスタイルルールとは何ですか？

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS

Cascading Style Sheet の略称は CSS で、英語の Cascading Style Sheets の略です。これは、W3C によって定義および維持されている標準であり、構造化ドキュメント (HTML ドキュメントや XML アプリケーションなど) にスタイル (フォント、間隔、色など) を追加するために使用されるコンピュータ言語です。

概要

Web ページの読者と作成者の両方が CSS を使用して、ファイルの色、フォント、レイアウト、その他の表示特性を決定できます。 CSS の主な目的は、ファイルの構造 (HTML またはその他の関連言語で記述されたもの) をファイルの表示 (CSS) から分離することです。この分離には多くの利点があります。

ファイルの可読性が向上します
#ファイルの構造がより柔軟になります
作成者と読者がファイルの表示を自分で決定できます
ファイルの構造が簡素化されます

CSSまた、音声 (ブラウザに読み上げ機能がある場合) や視覚障害者向けの感覚装置など、他の表示方法を使用することもできます。さらに、CSS は XHTML、XML、またはその他の構造化ファイルとともに使用できます。唯一の条件は、そのようなファイルを表示するブラウザーが CSS を受け入れる機能を備えていることです。

HTML ファイル内の各クラスまたは ID は独自の表示特性を持つことができ、ID 特性を持たない各 HTML 構造も独自の表示特性を持つことができます。これらの構造の中には HTML 自体に必要なものもあれば、CSS 用に特別に設定されたものもあります。

CSS を使用する利点は次のとおりです。

Web サイト全体または Web ページの一部の表示情報が 1 か所に集中します。便利です
リーダーによってスタイルも異なります。たとえば、一部のリーダーはより大きなフォントを必要とします。
HTML ファイル自体の範囲が小さくなり、構造が単純になり、表示情報を含める必要がなくなりました。

スタイルルール

CSS の構文は非常にシンプルで、一連の英単語を使用してさまざまなスタイルや特性を表現します。

スタイルシートは一連のルールで構成されます。各ルールは「セレクター」と定義部分で構成されます。各定義セクションには、セミコロン (;) で区切られた一連の定義が含まれます。この一連の定義は、一対の中括弧 ({ }) の間に配置されます。各定義は、属性、コロン (:)、および値で構成されます。

セレクター

通常、HTML 内の、

、 およびその他のタグなどのファイル内の要素ですが、複数のセレクターはカンマ ( 、）。

プロパティ
CSS1、CSS2、および CSS3 は、セレクターのスタイルを制御する目的で多くのプロパティを指定します。
値
は、属性によって受け入れられる設定値を指し、さまざまなキーワードで構成できます。複数のキーワードは通常、スペースで区切られます。
タグ定義のない範囲にスタイルを設定する場合は、
タグとタグを使用できます。

CSS スタイルのルールに関しては、次の 3 つの点に注意する必要があります。
近接原則

優先関係、From高から低: インラインスタイル > 内部スタイル > 外部スタイル。

継承の原則

継承では、パディング、マージン、背景など、ボーダークラスのほとんどのプロパティは継承できません。

テーブルは親クラスのスタイルを継承できません。

#オーバーライドの原則

継承によるスタイルの競合は、最も近い祖先要素によって評価されます;
継承されたスタイルが直接指定されたスタイルと競合する場合、直接指定されたスタイルが値を取得します;
直接指定されたスタイルが競合する場合、より高いスタイルの重みを持つ要素が値を取得します;スタイルの重みが同じ場合、後者の値が取得されます;
!重要なスタイル属性はオーバーライドできません。
推奨学習:
css ビデオチュートリアル
以上がCSSのスタイルルールとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。