ホームページ  >  記事  >  ウェブフロントエンド  >  よく使用される CSS 略語の構文概要_CSS/HTML

よく使用される CSS 略語の構文概要_CSS/HTML

WBOY
WBOYオリジナル
2016-05-16 12:12:181323ブラウズ

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS の略語の主なルールは次のとおりです:

カラー

16 進数のカラー値は、各 2 桁の値が同じ場合、たとえば次のように半分に短縮できます。
#000000 は #000 に短縮でき、#336699 は #369 に短縮できます。

ボックスサイズ

通常、次の 4 つの書き方があります:

  • property:value1; すべてのエッジの値が value1 であることを意味します。
  • property:value1 value2; 上下の値が value1、左右の値が value2 であることを意味します。
  • property:value1 value2 value3; 上の値が value1、右と左の値が value2、下の値が value3 であることを意味します
  • property:value1 value2 value3 value4; 4 つの値は順に上、右、下、左を表します

時計回り、右上、左下と覚えておくと便利です。マージンとパディングの具体的な適用例は次のとおりです。
margin:1em 0 2em 0.5em;

ボーダー(枠線)

境界線のプロパティは次のとおりです:

    ボーダー幅:1px;
  • ボーダースタイル:ソリッド;
  • ボーダーカラー:#000;
は次の 1 つの文に短縮できます: border:1px Solid #000;

構文は

border:width style color;

です。 背景

背景のプロパティは次のとおりです:

背景色:#f00;
    背景画像:url(background.gif);
  • 背景リピート:リピートなし;
  • 背景添付:修正済み;
  • 背景位置:0 0
  • は、次の 1 つの文に短縮できます。background:#f00 url(background.gif) no-repeat fixed 0 0;
構文は

background:color imagerepeatattachmentposition;

です。 1 つ以上の属性値を省略できます。省略した場合、属性値にはブラウザのデフォルト値が使用されます。

色: 透明

画像: なし
    リピート: リピート
  • 添付ファイル: スクロール
  • 順位: 0% 0%
  • フォント
フォントの属性は次のとおりです:

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

font-variant:small-caps;
    フォントの太さ:太字;
  • フォントサイズ:1em;
  • 行の高さ:140%;
  • フォントファミリー:"Lucida Grande"、サンセリフ
  • は 1 つの文に省略できます: font:italic small-caps ball 1em/140% "Lucida Grande",sans-serif;
フォント定義を省略する場合は、少なくとも 2 つの値 (font-size と font-family) を定義する必要があることに注意してください。

リスト

デフォルトのドットとシリアル番号をキャンセルするには、list-style:none;,

と記述します。

リストの属性は次のとおりです:

リストスタイルタイプ: 正方形;

リストスタイル位置:内側;
    リストスタイルイメージ:url(image.gif);
  • は、list-style:square inside url(image.gif);
  • という 1 つの文に短縮できます。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。