zoukankan      html  css  js  c++  java
  • css简写用法说明

    简单的说,css简写就是在等效的前提下,把多句css代码简化成一句。在我看来,简写css的好处有三:一是写起来方便(就像键盘快捷键);二是简化代码;三是帮助你熟悉和深刻理解css。

    闲话少说,书归正传。能够简写的css属性主要有以下几个:

    font

    简写:

    font:italic small-caps bold 12px/1.5em arial,verdana;

    等效于:

    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:arial,verdana;

    顺序:font-style | font-variant | font-weight | font-size | line-height | font-family

    (注:简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。)

    background

    简写:

    background:#fff url(bg.gif) no-repeat fixed left top;

    等效于:

    background-color:#fff;
    background-image:url(bg.gif);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:left top;

    顺序:background-color | background-image | background-repeat | background-attachment | background-position

    margin & padding

    简写:

    margin:1px 0 2em -20px;

    等效于:

    margin-top:1px;
    margin-right:0;
    margin-bottom:2em;
    margin-left:-20px;

    顺序:margin-top | margin-right | margin-bottom | margin-left

    padding的简写和margin完全一样。

    border

    简写:

    border:1px solid #000;

    等效于:

    border-1px;
    border-style:solid;
    border-color:#000;

    顺序:border-width | border-style | border-color

    这三句也是简写,等于是把四边的样式合而为一了。(关于四边的问题,下文有详细说明)

    border-top / border-right / border-bottom / border-left

    简写:

    border-top:1px solid #000;

    等效于:

    border-top-1px;
    border-top-style:solid;
    border-top-color:#000;

    (和border一样)

    list-style

    简写:

    list-style:square outside url(bullet.gif);

    等效于:

    list-style-type:square;
    list-style-position:outside;
    list-style-image:url(bullet.gif);

    顺序:list-style-type | list-style-position | list-style-image

    关于四边

    有很多样式都涉及到了四边的问题,这里统一说明。

    四边的简写一般如下:

    padding:1px 2px 3px 4px;

    等效于:

    padding-top:1px;
    padding-right:2px;
    padding-bottom:3px;
    padding-left:4px;

    顺序:top | right | bottom | left

    不论是边框宽度,还是边框颜色、边距等,只要css样式涉及四边,顺序通通都是“上右下左”(顺时针方向)。

    如果四边的值省略一个,只写三个:

    padding:1px 2px 3px;

    则等效于:

    padding-top:1px;
    padding-right:2px;
    padding-bottom:3px;
    padding-left:2px;

    (省略的“左”值等于“右”)

    如果四边的值省略两个:

    padding:1px 2px;

    则等效于:

    padding-top:1px;
    padding-right:2px;
    padding-bottom:1px;
    padding-left:2px;

    (省略的“下”值等于“上”)

    如果只有一个值:

    padding:1px;

    则等效于:

    padding-top:1px;
    padding-right:1px;
    padding-bottom:1px;
    padding-left:1px;
  • 相关阅读:
    linux sysfs (2)
    微软——助您启动云的力量网络虚拟盛会
    Windows Azure入门教学系列 全面更新啦!
    与Advanced Telemetry创始人兼 CTO, Tom Naylor的访谈
    Windows Azure AppFabric概述
    Windows Azure Extra Small Instances Public Beta版本发布
    DataMarket 一月内容更新
    和Steve, Wade 一起学习如何使用Windows Azure Startup Tasks
    现实世界的Windows Azure:与eCraft的 Nicklas Andersson(CTO),Peter Löfgren(项目经理)以及Jörgen Westerling(CCO)的访谈
    正确使用Windows Azure 中的VM Role
  • 原文地址:https://www.cnblogs.com/top5/p/1674219.html
Copyright © 2011-2022 走看看