7

CSS 宣言のプロパティの順序は、HTML のレンダリングに影響しますか?

4

5 に答える 5

11

これは、私が最初に考えたよりも本当にトリッキーな質問です。私の最初の反応は：

CSSルール(「ルール セット」とも呼ばれます) 内では、宣言の順序(フォーム プロパティ: 値) は重要ではありません。Sofoo { color: red; background: white; }は と同等foo { background: white; color: red; }です。仕様にはこれに関する個別の声明はありません（私は推測します）。これは、順序を重要にするステートメントがないことに起因します。

よく考えてみると、

* { font: 100% Calibri; font-weight: bold; }

順番を入れ替えるとどうなる？ブラウザでは、効果があります。これが CSS 仕様の観点からどのように解釈されるべきかはわかりませんが、ブラウザーは明らかに、当然のことながら、宣言を順番に処理します。というわけで、ルールはテキストを太字にしますが、順番を変えると、

* { font-weight: bold; font: 100% Calibri; }

それから物事は変わります。font短縮形は初期値 に設定さfont-weightれるnormalため、テキストは太字ではありません。

よく考えてみると、順序に基づいた多くの方法とトリックがあります。そうです、宣言の順序は重要です。

ルールの順序の影響は、まったく別の問題です。

于 2012-10-25T18:14:50.760 に答える
5

明らかに、順序は結果に直接影響を与えません。件名はここで言及されています: http://css-tricks.com/new-poll-how-order-css-properties/

ここによると影響があります：http://css-tricks.com/ordering-css3-properties/

そして、ここに別のトレンドがあります: http://perishablepress.com/obsessive-css-code-formatting-patterns-and-trends/

最終的な判断: あなたが最善と判断する方法をアレンジしてください。

于 2012-10-26T03:14:32.177 に答える
0

通常、CSS 宣言でプロパティを順序付ける必要はなく、規則もありません。デザインとブラウザのレスポンスの要件のような順序で書きましたが、firebug ツールでは sinアルファベット順に並べます。

一番お得な注文方法は 

 1. box model = width ->height->float
 2. font related = font-size -> text-decoration, font-family
 3. background images = width, height, border, image

次に、私の経験では、ブラウザーのみが各要素のスペースをより速く割り当てます。

以下のようなタイプを注文する人もいます。

ランダム

アルファベット順

タイプ別にグループ化

プロパティ別 長さ

于 2012-10-26T02:54:47.593 に答える
0

いくつかのガイドラインがあります。しかし、最終的にはブラウザの実装に行き着きます。常に機能する特定の順序に依存しないようにしてください。宣言内では、ステートメントが前のステートメントをオーバーライドする傾向があります。

于 2012-10-26T03:16:39.260 に答える