css_01|CSS-CSS基礎とセレクタ初認識

     PC    ~

      “    |       ”   ，    ，    ！

css_01

1. CSS        ？
2. @import      ？    ？
3. CSS          ？
4. id      class              ？
5. @charset      ？
6.    src   href    ？
7.      ，   link   @import      ？
8.   index.css   common.css       ，html     index.css                     ，     ？（   ）
    /*index.css*/
    @import "common.css"
    body {
        font-size：12px
    }
    /*common.css*/
    body {
        color: red;
    }
  ✅ common.css          ，              。
  ✅ @import "url";        。
  ✅ index.css   body         :     ：。
  ❌ font-size:12px        。

前言:前の3つのシリーズの文章を通じて私达はHTMLに対して1つの比较的に详しく理解して、それでは次のいくつかの列の文章、私达は一歩一歩详しくCSSを认识します.その時、私たちが見た任意の静的ページを簡単に、規範的に書くことができると信じています.

1 CSS関連定義

CSS(Cascading Style Sheets積層スタイルシート):HTMLの表現を制御します.CSSはページがきれいかどうかを決めて、アニメーションの効果はクールでクールではありません.
HTML+CSSは静的ページの基本構成です.まるで女の子が基本的な体の五感(HTML)を持ってから、自分に化粧をしたり、髪型をしたり、きれいな服を着たり(CSS).

2 CSS動作原理

再度文章を復習します:《ありふれたURLからページに入力して背後で起こったことを示します》

まず、ブラウザにURLを入力して車に戻った後、ブラウザがサーバに要求すると、サーバは対応するデータであるHTMLをブラウザに返します.

その後、ブラウザはこのデータを手に入れた後、このページをロードし、このHTMLを解析します.どのように解析しますか:ブラウザの得た文字列、それはそれに対していくつかの符号化などの分析をして、文字列を“木状”の構造に解析して、DOMを作成して、DOMの木と言います(彼は1つのドキュメントの構造で、“木”のこのような効果のようです).

その後、HTMLを解析する過程で、ブラウザは対応するCSSをロードします.たとえば、次のボックスで選択したコードを解析する場合:

ブラウザは再びサーバに要求し、このstyleを取得します.cssファイル.

その後、同期したこのCSSファイルがダウンロードされ、ダウンロードされた後、ブラウザは同時にこのCSSファイルを解析し、彼を「CSSツリー」に変えた.それからブラウザは更に1つの計算をして、“DOMの木”と“CSSの木”を対応して、最終的に1つの新しい“木”を得ます.

この「木」には2つのノードがあり、1つはその要素が何なのか.もう1つは、この要素の具体的なパラメータです.幅、高さ、位置、サイズ、枠線などです.

ブラウザでこの「ツリー」を入手した後、「レンダリング」に行きます.

すなわち、ページ上の各要素の位置、各要素間の関係、親子、隣人などを示す豊富なデータを得ることに相当します.この時、私は画板を持って描くことができます.

最後に、色豊かなページが私たちの前に現れました.

3 CSSのHTMLへの導入方式

3.1外部スタイルシート：「チェーンイン」CSS（前例）