CSSスタイルの優先度の確認

カスケーディングスタイルシート（CSS） つまり、他のWeb関連の言語と比べて最も単純な言語なので、Webサイトの作成方法を学び始めたばかりの多くの人がこの言語とHTMLを最初に学ぶことになるのは当然のことです。.

この記事では、CSSの基本に戻ります。 CSSスタイルが最初にどのように適用されるのか、どのスタイルが適用されるのか、いくつかのスタイル宣言が互いに上書きするのに対し、他のスタイル宣言はどのように上書きされるのかを見ていきます。.

そのため、この記事は、最初のスタイルシートをコンパイルするときに間違いや間違いを犯している可能性がある、問題にぶつかり始めたばかりの初心者を対象としています。それでは始めましょう.

デフォルトのブラウザスタイル

Firefox、Chrome、Safari、Opera、およびInternet Explorerは現在、市場で上位5つのデスクトップブラウザです。これらのブラウザおよび他のすべてのブラウザは標準の規則に従って、HTML要素をレンダリングするための組み込みのデフォルトスタイルを含めます。.

そのため、スタイルを追加せずにランダムなHTML要素をいくつか配置すると、ブラウザにはまだ正しくレンダリングされていることがわかります。.

しかし、これらの要素を注意深く調べると、それぞれのブラウザの値は（わずかに）異なります。 “デフォルト” 特にIE6、7、Firefox 3.0などの古いブラウザでは、ブラウザ間で矛盾が発生する宣言.

たとえば、上のスクリーンショットからわかるように、最新のFirefoxでは、 ブロッククォート デフォルトでは 余白：16px 40px 16px 40px, 反対側に Internet Explorer 7 レンダリングされます ブロッククォート と マージン：0px 40px.

上記の矛盾を克服するために、多くのWebデザイナーや開発者はこれらのスタイルをすべて上書きすることを好みます。 CSSのリセット. このCSSファイルには通常、ほとんどすべてのHTMLが含まれています。 タイプ セレクタ、等しいルールでそれらを定義する.

利用可能な多くのCSSリセットがありますが、ここに私のトップ3のお気に入りがあります：

Normalize.css
CSSのリセット
HTML5スタイルシートのリセット

セレクター

あなたはおそらくあなたが訪れたWebデザイン/開発ブログでこの用語をよく読むでしょう。 セレクター.

CSSのセレクタは、スタイルを適用するHTMLドキュメント上の任意の部分を対象とするために使用される構文です。ここで説明する基本セレクタは3つあります。おそらく最初のWebサイトで使用される一般的なセレクタになるでしょう。今後の記事で他の人をカバーします.

タイプセレクター

先ほど述べたように、タイプセレクタはドキュメント上の指定されたHTML要素をターゲットにします。例えば：

 p / **宣言** /

すべてに一致します p または段落要素とそれを使用することはブラウザから与えられたデフォルトスタイルを結局上書きするでしょう.

クラスセレクタ

1つのクラスに1つ以上のクラスを追加した場合は、それらのクラスをターゲットにすることもできます。の クラスセレクタ で始まります ドット パラメータ.

 .ボックス/ **宣言** /

上記のスニペットは、ボックスクラスを持つすべての要素に一致します。または、より具体的に選択することもできます。.

 p.box / **宣言** /

それだけをターゲットにします p を持つ要素 ボックス クラス.

使用しているとき クラス セレクタ、両方からのすべて同じスタイル宣言 タイプ セレクターと デフォルトブラウザ 上書きされます.

IDセレクタ

の ID 非常に制限的な属性です。 id 要素上で、それは同様にユニークでなければなりません.

 コンテンツ

私達が持っている場合 id 要素の中では、 IDセレクタ その要素をターゲットにする。 IDセレクタはハッシュで定義されます ＃ パラメータ.

 #uniqueID / **宣言** /

以来 ID ユニークである、それはセレクターのタイプの最強の優先順位レベルを持っています。それで、スタイルを次のように宣言すると ID セレクタそれは最終的にからのすべての同じ宣言を上書きします クラス, タイプ セレクタと デフォルトブラウザ スタイル.

スタイルを埋め込む

基本的なすべての基本セレクターについて説明しました。次に、これらのスタイルがHTML文書にどのように埋め込まれているかを調べます。.

外部スタイル

外部スタイルは別のファイルに追加されるスタイルで、通常は .CSS このファイルはHTMLドキュメントにリンクされています。それらのスタイルを適用するためのタグ.

そして、ファイルで宣言されたすべてのスタイルは、私たちがで述べたもののように振る舞います。 セレクター 上記のセクション、すなわちそれは主に上書きされます デフォルトのブラウザ スタイルを選択し、セレクタの優先度に応じて別のスタイル宣言に上書きします。.

この方法は、スタイルを添付するための最も推奨される方法です。特に、添付するページが多数あるCSSコードが何千行もある場合は特にそうです。.

そうすることで、スタイルも簡単に管理できるようになります。たとえば、CSSファイルをその特定の役割に応じていくつかのファイルに分割して、typography.cssなど、Typography関連のすべてのスタイルを制御できます。.

内部スタイル

内部スタイルはHTMLドキュメントに直接埋め込まれているスタイルです。一般にタグ.

しかし、HTMLページが長すぎてスタイルが埋め込まれている場所にのみ影響するため、何百行ものスタイルがある場合、この方法はお勧めできません。 10ページと言わせると、それらのスタイルをコピーしてすべてのページに埋め込む必要があります。スタイルを変更する必要がある場合は、10ページに変更する必要があります。.

優先順位に基づいて、内部スタイルはより高いので、外部スタイルを上書きします。.

インラインスタイル

インラインスタイルは、HTML要素に直接埋め込まれているスタイルです。.

これは段落です

上記のこの例は追加します 5px 段落要素に余白を設定すると、その要素に対して内部スタイルと外部スタイルの両方で宣言されている余白も上書きされます。.

しかし、これは避けてください。マークアップはこれらすべてのスタイル宣言で雑然とするためです。たくさんのスタイルが埋め込まれている場合は、すべてのHTMLとスタイルを表示して管理することも悪夢になるでしょう。.

参考文献：CSSを挿入する3つの方法 - W3CSchools.

！重要なルール

要素に特定のスタイルを適用しなければならない場合もありますが、その要素の同じスタイルがスタイルシートまたはドキュメントの他の場所でも宣言されている場合があります。例えば：

次の埋め込みスタイルのアンカータグがあります。

 これはリンクです

また、スタイルシートには、そのアンカータグ用の別のスタイルもあります。.

 ｛ボーダー：１ピクセルソリッド＃３３３。背景色：＃555。

その例では、 !重要 ブラウザが要素内のスタイルの代わりにスタイルシート内のスタイルを使用するように強制する規則.

 border：1px solid＃333！重要です。背景色：＃555！重要です。

の !重要 ルールはこのスタイルが最も優れていることを示します重要要素に直接埋め込まれている場合でも、他のスタイルに適用する必要があります。 （インラインスタイル）.

参考文献：！！重要なCSS宣言：それらを使用する方法と時期 - Smashing Magazine.

結論

この記事では、すべての内容について説明しました。各セレクタとスタイルの埋め込み方法は、ブラウザのメカニズムにおいて異なる優先順位を持っていることがわかります。前述したように、これらのテーマは初心者レベルを対象としているため、経験豊富なWebデザイナーにとっては間違いなく新しいものではありません。.

しかし、私は一般的なすべてのWebデザイナーが、基本についての知識を復習することが私たちの主題に関する基本的な知識を再検討するのに必要であることに同意すると思います。実際、私たちはこのような素晴らしい（そしてクレイジーな）ものにもっと感心する傾向があるので、私たちはしばしば基本的なもののいくつかを見逃しています。.

最後に、この記事で説明した内容を詳しく調べるためのデモとソースファイルを提供しました。.

デモ
ソースをダウンロード

私はあなたがこの記事を楽しんでくれることを願っています、そしてあなたがそれにいくつかの不正確さを見つけたか、または私がいくつかの重要なポイントを逃したなら、下のコメント欄で私に知らせてください.