ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS カラー枠の背景とその他のスタイル_html/css_WEB-ITnose

DIV+CSS カラー枠の背景とその他のスタイル_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:19:281046ブラウズ

1. CSS の略語を使用する

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主な規則については、「一般的な CSS 省略形構文の概要」を参照してください。 CSS 省略形の主な規則は次のとおりです。

Color

16 進数の色の値。各 2 桁の値が同じ場合、例:
# 000000 は #000 と短縮できます; #336699 は #369 と短縮できます

注: 同じ CSS 設定セクションでは、フルテキストと短縮カラーを使用しないでください。システム リソースが極度に低い場合、レンダラーのブラウジングが失敗する可能性があります。

ボックスサイズ

通常は以下の4つの書き方があります:

  • property: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;

    border (border)

    ボーダーのプロパティは次のとおりです:

    border-width:1px;
  • border-style:solid;
  • border-color:#000;
  • は次の 1 つの文に省略できます: border:1px Solid #000;

    構文は

    border:width style color;

    Backgrounds

    背景の属性は次のとおりです。

  • background-image:url(background.gif);
  • background-repeat:no-repeat;
  • background-attachment:fixed;
  • background-position:0 0;
  • は 1 つの文に省略できます:background:# f00 url(background.gif) no-repeat fixed 0 0;

    構文は

    background:color imagerepeatattachmentposition;

    以下の 1 つ以上を省略できます。属性値を省略した場合、属性値が参照されます。デバイスのデフォルト値は次のとおりです:

    color: 透明
  • image: none
  • repeat:repeat
  • attachment:scroll
  • position: 0% 0%
  • http://roucheng.cnblogs.com/

    フォント (フォント)

    フォントの属性は次のとおりです:

    font-style:italic;
  • font-variant:small-caps;
  • font-weight :bold;
  • font-size:1em;
  • line-height :140%;
  • font-family:"Lucida Grande",sans-serif;
  • は 1 つの文に短縮できます: font:italic small-capsボールド 1em/140% "Lucida Grande",sans-serif;

    注: フォント定義を省略する場合は、少なくとも 2 つの値 (font-size と font-family) を定義してください。

    リスト

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

    list 属性は次のとおりです:

    list-style-type:square;
  • list-style-position: inside;
  • list-style-image:url(image.gif);
  • は 1 つの文に省略できます: list-style:square inside url(image.gif);

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。