css最適化_html/css_WEB-ITnose

いつもは最適化の方法について話していますが、今日は CSS の最適化の方法について詳しく書きます、ふふ。

まず、CSS の最適化作業は主に 2 つの側面に焦点を当てています

ネットワーク パフォーマンス: CSS を最小限のバイト数で記述し、ダウンロード速度を高速化すると、自然にページのレンダリングが速くなります

構文パフォーマンス: 確か効果も実現できますが、すべてのメソッドで同じ効果があるわけではありません。JavaScript に関する構文最適化の知識は、実際に CSS の中にいくつかあります。 -Written 別々に記述しないでください。いくつかの例は次のとおりです

background 属性

.test{ background: #000 url(image.jpg) left top no-repeat

}

background-image : url(image.jpg );

背景位置: 左上;

背景繰り返し: 繰り返しなし;

フォント スタイル: 斜め;

font-weight:bold;

font-size: 16px;

font-family: Helvetical ,Arial; ボーダー:5ピクセルの赤一色

border-width border-style

border-color

@import

を使用しないでください

タグと比較して、 @import コマンドははるかに遅く、速度が増加するだけではありません追加のリクエストの数も増加しますが、予測できない問題も発生します。代替案は次のとおりです: 複数の 要素を使用し、http リクエストの数を減らすために CSS をマージして圧縮し、属性の悪用を防ぐために、さまざまな状況でどの属性が優先されるかをまとめることをお勧めします。

継承によりスタイルの競合が発生した場合、最も近い祖先が優先されます。

継承されたスタイルが直接指定されたスタイルと競合する場合、直接指定されたスタイルが優先されます。

直接指定されたスタイルが競合する場合、スタイルの重みが大きい方が優先されます。

CSS セレクターの重み

タグ セレクター 1

クラス セレクター 10

ID セレクター 100

インライン スタイル 1000

疑似要素 (:first-child など) 1

疑似クラス (:link など) 10

!重要なスタイル属性はオーバーライドされません。 !重要を乱用しないでください。

アウトライン スタイル (外部スタイル シートに属する)アウトラインスタイル CSS ファイルは本体が読み込まれる前に読み込まれるため、表示される Web ページは最初からスタイル効果を適用します

2. 後の CSS ファイルは前の CSS ファイルを上書きします

埋め込みスタイル (内部スタイルシートに属します)

< style type="text/css"> .main{ width:1002px; margin:0 auto;}

インポートでは、Web ページ全体が読み込まれた後に CSS ファイルが読み込まれます

ジョイントスタイル (内部スタイルシートに属します)

style="font-size:10px;font-color:#ff0000"