css属性の略語 collection_html/css_WEB-ITnose

フロントエンドの攻城ライオンとして、CSS は間違いなく基礎ですが、基礎がしっかりと把握されていない場合があります。今日は間違えて書きやすいCSS属性の略語をまとめてみましょう。

1基本的な構文：none | url（url）位置 || POSITION

LENGTH: パーセント | 浮動小数点数と単位識別文字の値。長さの単位を参照してください

上記は、誰もが使用する頻繁に使用される背景属性です。

の略語は次のとおりです。添付ファイル || 背景位置

ただし、CSS の開発に伴い、CSS3 には次の 4 つの属性が導入されました。 -box | no-clip : 境界領域の外側に背景をトリミングします。 Padding-BOX の場合: Padding 領域から背景を切り取ります。 Ten Content-BOX: コンテンツ領域から背景を切り抜きます。 L NO-CLIP: 境界領域の背景を切り取ります。

背景表示領域：background-origin 基本構文：background-origin：border content

背景画像のサイズを設定します：background-size：[ auto ]{1,2} |

複数の背景を含む: [背景-クリップ] |位置]

例: 背景: url(img/multiple-backgrounds.png) 左上 繰り返しなし、url(img/multiple-backgrounds.png) -320px 下 繰り返しなし、url(img/multiple-backgrounds. png) -640px トップリピート-y;

ついに完成！非常に多くの属性をどのように省略するのでしょうか?

多くの情報をチェックした後、ついに良いものを見つけました:

略語は: background:background-color||background-image||background-repeat||background-attachment ||background -position / background-size||background-origin||background-clip;

中のバックスラッシュに注意してください。これは、font と border-radius の略語で使用されるバックスラッシュに似ています。

例: 背景: red url("images/1.jpg") no-repeat スクロール センター center / 50% content-box content-box;

2、font

フォント スタイル: font-style Basic文法 ：font-style:normal | oblique

テキストがスモールキャップかどうかを設定します: font-variant 基本構文: font-variant: small-caps

フォントの太さを設定します: font-weight :フォントの太さ | 太字 | 300 | 600 | 900 | フォント サイズ: xx-small | | ミディアム | セリフ

略語は

: フォントスタイル || フォントサイズ / フォントファミリー

例: font:italic -caps ボールド 12px/ 1.5em arial、verdana;

3, マージン & パディング

マージンを例に挙げます。パディングは同じです

省略形は : margin:margin-top margin-right margin-bottom margin -left;

例: margin:1px 1px 1px 1px;

4、borderborder-weight: border-weight

border-style: none | 点線 | double | リッジ インセット | アウトセット

ボーダーカラー: ボーダーカラー

例: border:1px Solid #000 ;

5、outline

outline は border に似ていますが、違いは、border はボックス モデルに影響しますが、outline は影響しないことです。

略語は

: アウトライン: アウトライン幅 || アウトラインスタイル || アウトラインカラー

例: 6,

border-radius

右上隅の半径: border -top-right-radius , 右下隅の半径: border-bottom-right-radius ,

左下隅の半径: border-bottom-left-radius ,

左上隅の半径: border- top-left-radius

各フィレットの半径が同じ場合、省略形は次のようになります:

border-radius: border-top-right-radius border-bottom-right-radius border-bottom-left-radius border- top-left-radius;

例：border-radius:0 6px 6px 6px; 一般的な略称は border-radius:0 6px 6px; です 各フィレットの半径が異なる場合、略称は border となります。 -radius: none | {1, 4} [ / {1,4} ]?

例: border-radius:0px 5px 10px 15px/20px 15px 10px 5px;上、下、左の規則に従って、各コーナーを順番に

7 と

color

の半径の略語については、単純すぎるので言及しません

要約が良いかどうかはわかりません違います、間違いがあればご指摘ください、ありがとうございます！