10

CSS3バックグラウンドの速記におけるセレクターの正しい順序について、HTML5 microsoft 認定に質問があります...しかし、私は検索しました...しかし、その速記における実際の順序の優先順位についての有効な参照がどこかに見つかりませんでした (もしあれば) )...

この問題に関する W3C の推奨事項は、この件に関してあまり明確ではありません (少なくとも、その情報を見つけることは明らかではありません)。

古代の CSS2 は "see, I rap" ( CIRAP) の頭字語は多かれ少なかれキャッチーでしたが、それでも W3C は命令を明確に除外していませんでした?!...

誰も標準を知らない場合、認証におけるこの種の質問の意味は何ですか? 最後に、CSS3 の正しい順序は何ですか?

彼らの例は紛らわしいです...例によって、以下は順序がCIRAPCOS

別の例は、同等性を示しています。

div { background: padding-box url(paper.jpg) white center }
div {
    background-color: white;
    background-image: url(paper.jpg);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center;
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto }

次に、仕様には次のように記載されています。

有効な宣言が与えられると、各レイヤーに対して、短縮形は最初に「background- image」、「background- position」、「background- size」、「background -repeat」、「background- origin」、「background」のそれぞれに対応するレイヤーを設定します。 - clip ' および 'background- attachment ' をそのプロパティの初期値に適用し、宣言でこのレイヤーに指定された明示的な値を割り当てます。最後に、'background- color ' は、指定された色があればその色に設定され、そうでなければ初期値に設定されます。

だから、これが私たちが得る方法ですIPSROClACo

4

4 に答える 4

13

明示的に書かれています：

価値：

[ <bg-layer> , ]* <final-bg-layer>

どこ：

<bg-layer> = 
       <bg-image> 
    || <position> [ / <bg-size> ]? 
    || <repeat-style> 
    || <attachment> 
    || <box>{1,2} 
<final-bg-layer> = 
       <bg-image> 
    || <position> [ / <bg-size> ]? 
    || <repeat-style> 
    || <attachment> 
    || <box>{1,2} 
    || <'background-color'>

IPSRABCを与える例:

background: 
    url("content.jpg") 
    left top / 200px 70px
    no-repeat
    scroll
    content-box content-box
    white;
/* or */
background-image: url("content.jpg") ;
background-position: left top;
background-size: 200px 70px;
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: content-box;
background-origin: content-box;
background-color: white;

ニーモニックが必要な場合は、ここに 1 つを示します (そして、私はより良い文を完全に開いています!):

私はおしっこをします、アビー！見る ？(IPSRABC)

注: をbackground-repeat前に置くと、 IRPSABCbackground-position / background-sizeが得られます。

于 2013-10-29T16:58:54.263 に答える
5

Q：正しい順番は？セレクターCSS3 バックグラウンド ショートハンドの値?

A:任意の順序

バックグラウンド状態に関するMSDN ドキュメント...

次のスペースで区切られた値のうち最大 5 つまで、順不同:

  • color - background-color プロパティで使用できる色値の範囲のいずれか。
  • image - background-image プロパティで使用可能な画像値の範囲のいずれか。
  • repeat - background-repeat プロパティで使用可能な繰り返し値の範囲のいずれか。
  • attachment - background-attachment プロパティで使用可能な添付値の範囲のいずれか。
  • position - background-position プロパティで使用可能な位置値の範囲のいずれか。

MSDN のドキュメントには更新された CSS3 短縮形のプロパティがありませんが、答えは残っています...任意の順序で

さらに掘り下げると、バックグラウンド用のMDN ドキュメント(CSS3 構文を含む) でさえ、次のように述べています...

次の 1 つ以上 (順不同) :

<'background-attachment'> 「background-attachment」を参照

<'background-clip'> 「background-clip」を参照

<'background-color'> 「背景色」を参照

<'background-image'> 「背景画像」を参照

<'background-origin'> 「background-origin」を参照

<'background-position'> 「背景位置」を参照

<'background-repeat'> 「background-repeat」を参照

<'background-size'> 背景サイズを参照してください。このプロパティは、background-position の後に「/」文字で区切って指定する必要があります。

この基本的な例: jsfiddle の例

.box1 {
    background-image: url(//placehold.it/100/f00);
    background-position: center center;
    background-color: red;
}
.box2 {
    background: 
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */
        red /* background-color */;
}
.box3 {
    background: 
        center center /* background-position */
        url(//placehold.it/100/f00) /* background-image */
        red /* background-color */;
}
.box4 {
    background: 
        red /* background-color */
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */;
}
于 2013-10-29T18:29:26.887 に答える