CSS についてどれくらい知っていますか (3) -- スタイル ソースとカスケード ルール_html/css_WEB-ITnose

前回の「CSS についてどれくらい知っていますか (2) CSS を学ぶためのアイデア」では、数名の方から「アイデアがとても良い、これからも楽しみにしています」というメッセージをいただき、9 件の「いいね！」をいただきました。とても満足しています。まだ見ていない人は、先に前章を見てから見ることをお勧めします。

このセクションでは、前のセクションのアイデアを実践していきます。

1. 「カスケード」の概念

CSS カスケード スタイル シート、「カスケード」とは何を意味しますか?カスケードは、ブラウザが複数のスタイル ソースをスタックし、最終的に結果を決定するプロセスです。簡単な例を見てみましょう:

上の図には 2 つのスタイル ソースがあります。1 つ目は参照されている css1.css で、2 つ目は私が style で記述したスタイルです。 「積層」は重ね合わせのプロセスであり、次の図で表すことができます。

上では簡単な例を使用してカスケードプロセスを説明しています。実際にそれを体験してみましょう。叠层

は、最も経済的な方法で最も簡単な CSS を作成できることを理解していますが、ユーザーが変更できる余地も残します。フォントサイズの調整など、ドキュメントの表示を調整します。 ??『CSSデザインガイド』より抜粋 2.スタイルソース

前述の通り、CSSに「カスケード」という概念があるのは、スタイルソースが複数存在するためです。実際、CSS スタイルのソースは 5 つあり、開発者がアクセスできるのは最後の 3 つだけです。 BROWSERに表示されるh1

ブラウザにはデフォルトのスタイルが付属しているため、HTML 内のタグにスタイルが設定されていない場合、ブラウザは独自のスタイルに従って表示します。ただし、ブラウザのデフォルト スタイルは最下位レベルです。ラベル スタイルが別の場所に設定されると、ブラウザのデフォルト スタイルは消去されます。

ブラウザごとにデフォルトのスタイルが異なる場合があることに注意してください。たとえば、CSS を記述するときは、最初に * {margin:0; padding:0;} を設定します。これはなぜでしょうか。ブラウザの互換性の問題が原因です。単純に、これらをすべて 0 に設定すると、すべてのブラウザが統一されます。まずはデフォルトスタイルのコードですが、次のセクションでデフォルトスタイルについて具体的に説明していきます。ブラウザのデフォルト スタイル

は 2 番目です。ユーザー スタイル テーブル

一部のニュース Web サイトでは、フォント サイズを設定できる高速メニューがよく見られます。たとえば、下の図は捜狐ニュースの設定です。

いずれにせよ、私は視覚障害のある人のためのものです。私も視覚障害を持っていますが、近視メガネを通してそれを解決しています。

実はブラウザにもそのような設定があり、例えばChromeブラウザではフォントサイズやフォントを設定することができます。

ユーザーがここでフォントとフォント サイズを設定すると、ブラウザのデフォルト スタイルがオーバーライドされます。 、 三

3 つ目は、CSS ファイルの & lt; リンク & gt;

で引用された CSS ファイルです。 、四

4 つ目、& lt; スタイル & gt; スタイル コード

& lt; スタイル & gt; もよく知られています。 、五5番目、＆lt;

这 この 3 つのタイプは、プログラム開発でよく使用されます。詳しくは説明しません。知らない人は、基本的な知識を補う必要があります。

3．カスケード ルール

スタイルはさまざまなソースから取得されるため、ブラウザーがスタイルを読み込むときに、正しいインターフェイス効果を表示できるように、最終的なスタイル値を計算する必要があります。ブラウザーはオーバーレイと上書きによって最終的なスタイルを生成します。スタイルの値。

以下は例です:

上に示したように、異なるソースからの 2 つのスタイルがあり、最初のスタイルにはフォントの太さが設定されていますが、ブラウザはこれらを重ね合わせます。つまり、ブラウザは分散した部分を全体に統合します。最初のスタイルは color:red で、2 番目のスタイルは color:blue です。ブラウザは後者で前者をオーバーライドしますが、最終的な結果は依然として color:blue です。

上書きのデフォルトのルールは、後者が前者をオーバーライドすることですが、別の特別なケースがあります??!重要です。

上の写真のように。 color:blue は後発ですが、前者の color:red が ! important に続いているため、先頭には立っておりません。それは、最も実行力の高い上方の剣を手に入れるようなものです。他の人は道を譲ります。そうでなければ、仏陀がそれを阻止した場合、仏陀が殺されます。

4.まとめ

この記事では主にCSSの5つのソースと、ブラウザのオーバーレイスタイルのプロセスと方法について説明します。これはCSSを学ぶための最も基礎的な知識です。次のセクションでは、デフォルトのブラウザ スタイルがどのようなものであるかを全員に見てもらい、そこから何を学べるでしょうか?興味深い内容がたくさんありますので、ぜひご注目ください！

---------------------------------------------- --- --------------------------------------------------- --- -------------

私のチュートリアルへようこそ: 「デザインからパターンまで」「 JavaScript プロトタイプとクロージャ シリーズの深い理解」「Microsoft Petshop 4.0 ソース」コード解釈ビデオ" json2.js ソース コード解釈ビデオ》

オープンソース プロジェクトのフォローも歓迎します??wangEditor、シンプルで使いやすい Web リッチ テキスト エディターです

-------- ---------------------------------------------------- ---------------------------------------------------- -