CSSリストの林おばさんの知識(a)のスタイルを追加します

学習スタイルにアクセスするには、より多くの方法は、CSSセレクタを想起します。

、セレクタ

  1.種

    ①タイプセレクタ:直接HTMLタグに名前を付け、例えば:  ボディ、P、DIV  など。

    ②子孫セレクタ:スペース、例えば:  divのpが  でdiv要素を選択し、すべての将来の世代のp要素。

    ③IDセレクタ:例えば、「#ID」のような形が  #introduction  ます(要素の導入のためのIDを選択:人々は理論的にはidが一意に定義する必要がありますが、ブラウザがHTMLコードを記述するための後方互換性のために良いではない、だろうすべての要素がパターンにこのID)で添加されます。

    ④クラスセレクター:フォーム「の.class」、例えば  .latest  選択し、すべての最新の要素のクラスを、

    ⑤子セレクタ:「>」で、例えば  DIV> P  DIVで選択された最初の p要素に直接子孫。

    ⑥隣接兄弟セレクタ:フォーム「+」、例えば  + P H2を  選択H2の後ろ、H2および第で同じ親要素 P元素;

    ⑦一般兄弟セレクター:フォーム「〜」、例えば  H2〜P  選択h2の後ろに、H2のと同じ親要素のすべて持っている p要素を、

    ⑧ユニバーサルセレクタ:「*」、選択を示すすべての要素(例えば、類似の他のワイルドカードのSQL言語)。

    ⑨属性セレクタ:フォーム「入力[タイプ=」メール「 ]」は、 例えば、  略称[タイトル]は  []内の属性値は、同様の正規表現に一致する構文を充填することができる:すべての略称要素がtitle属性を持つ(注選択します例えば:  [^ HREF =「HTTP:」]  はすべてHREF HTTPを始める選択する:の要素)。

    ⑩擬似要素:ダブルコロン「::」のセレクタ、例えば  P ::最初の文字は  、彼らが意味を持ついくつかの実質的な相互作用を挿入した場合ので、慎重に擬似要素を使って最初の文字(、中p要素を選択してくださいコンテンツは、CSSが正しくロードされていない場合は、トラブルの多くを持つことになりますが、スクリーンリーダーのない均一な方法が存在しない場合)、それを解釈します。

    ⑩①擬似クラス:シングルコロン「:」セレクタ、例えば  DIV:ホバー  また、キーパッドので、移動端末が実際にホバー好きではないかもしれない(マウスは、DIVに移動したときにアプリケーションにdivのスタイルを表します感覚に追加する相当なインタラクティブコンテンツを置かないでください:要素)でホバリング。

 

第二に、積み重ねられたと継承

  1.「スタック」スタイルシート

    そのため、積層特性のCSS(カスケーディング・スタイル・シート)はCSSと呼ばれる理由は、。これはナンセンスのようですが、CSSのカスケード規則はコードが何度も再利用するとき、それが適切に実行されることを保証します。いわゆるラミネート、実際に文脈シーケンシャルコードおよび優先順位の要因は、最終的に適用され、上書きされたパターンを決定します。

  2.継承

    一部の属性は、そのようなので、上のテキストの色、フォントサイズ、およびなど、その要素を継承する子孫を適用されます。継承は、CSSコードが多重化され、それを保証することを可能にする通常表示多重状態で所望のパターンで積層体。

  3.優先順位

    簡単に言えば、優先順位はいくつかのレベルに分かれて、同じ優先度のセレクタは、より高い優先順位を作るために接続されているが、内部CSS、優先度の低いセレクタの実現にいかに一緒に多く、最終組成セレクタは、高優先度セレクタの優先順位よりも高くないであろう

    ①最も高い優先度:インラインスタイル。

    ②は、第二ランクIDセレクタ。

    ③第三Rank:クラスセレクタ、擬似クラスセレクタ(3に等しい)セレクタ属性。

    第④:タイプセレクタ、擬似要素セレクタ(いずれも等しいです)。

    ⑤第五:取得した親要素のスタイルを継承します。

 

第三に、パフォーマンスを向上させるためにスタイルを適用

  スタイルを適用するための方法:①に  < スタイル> </ スタイル>  定義;②使用  < リンクのhref =「xxx.css」 />  タグは、外部から導入され、③  @import「xxx.css」  外部から導入されます。

  2.パフォーマンスを向上させます

    ファイルサイズを小さく第二の騒ぎである「画面上の速度、」ページネットワークから最適化されたものを、減少させるために、第三のページ自体から順をロードする方法を見つけることです。したがって:

    ①HTTPリクエストを減らします

      私たちは、すべての要求は、ブラウザをダウンロードして、ページのレンダリングに時間がかかり、ファイルの別々のHTTPリクエストに送信されますことを知っています。したがって、我々は、使用最小化すべき  @importを  、1つまたは2つのCSSファイルの数を最小限に抑えます。

    ②圧縮ファイル

      書かれたCSSは、多くの属性とCSSの値を知っている圧縮後のCSSファイルのサイズの80%に70%削減されるだろう、高い圧縮率となるよう、反復されます。これは明らかに、帯域幅の使用を減らすことができ、多くのWebサーバーは、ブラウザのサポートに自動圧縮のオンラインリソースを有効にします。同時に、サーバはあなたが長い時間のCSSファイルキャッシュを設定するのに役立ちましょう。圧縮ファイルとキャッシュされたコンテンツは、二つの最も重要なサイトのパフォーマンスを向上することが妥当です。

    ③当たり前、JavaScriptのスクリプトブロックするページのレンダリングをロードしません

      初心者は、多くの場合、ネットワークコードの全員を参照してください、  < スクリプト>  タグは、HTMLのbody要素の最後に配置されますが、多くの人々が、これはページの読み込み速度は、なぜ明確ではありませんでした高めることができると言います。JavaScriptの実装プロセスは比較的遅く、ブラウザはスクリプトがの最初の部分に位置して追加すること、その過程でHTMLを解釈ダウンロード  < ヘッド>  タグ、それは黒と白の状態では、以下の最初のレンダリングの身体の部分を無視しますユーザーエクスペリエンスが悪いので、最初のダウンロードには、JavaScriptを実行します。したがって、古典的なアプローチは、にある  < スクリプト>  タグバックスイング。HTML5では  < スクリプト>  の2つの属性がタグ付け:非同期および延期、その役割は完全閉塞のHTMLのパースとは非同期にロードされたスクリプト2にスクリプトを実行したときにロードされたHTML一度実行、非同期でロードされているスクリプトを作るために1にありますスクリプト。しかし、これらの2つの属性がHTML5がIE10を意味し、属性およびそれ以前のサポートしませんです。

 

概要:私たちは別のセレクタ間の優先順位関係をコーミングしながら、通常のCSSセレクタと簡単な操作のためのいくつかの新しいセレクタを知って、そして最後にロードされたWebページの速度を改善する方法について説明します。

 

おすすめ

転載: www.cnblogs.com/BlogOfMotherLyn/p/11421101.html