css那些事儿（1）css简写

1.颜色缩写

css4中颜色表现方式：

• 十六进制 #RRGGBB 如#FF00FF
• RGB函数值的形式 RGB(x,x,x) 其中x可以为0-255之间的整数，如RGB(123,0,23)，也可以是0%-100%之间，但必须是整数，如RGB(%1,20%,0%)
• 颜色名称 如red
• 用户系统色盘值 如background、windowtext等

只有十六进制才可以进行缩写，还必须是#FF00EE这种每个颜色是两个相同数字组成的颜色值才可以缩写成#F0E的形式

2.单位值省略

数值为0时，什么形式的单位都可以省略 如width:0px;可以写成width:0;

3.内外补丁的简写

内补丁（padding），外补丁（margin）。

内外补丁有四个属性：padding-top,padding-right, padding-left, padding-bottom 以及 margin-top……

可以把四个属性简写成一个padding或margin即可。

根据上右下左的顺时针方向可罗列以下四种简写方式

• property:value1; 所有边都是一个值value1
• property:value1 value2; top和bottom值是value1，right和left值是value2
• property:value1 value2 value3; top值是value1，right和left值是value2，bottom值是value3
• property:value1 value2 value3 value4; top值是value1，right值是value2，bottom值是value3，left值是value4

总的来说，根据上右下左的顺时针方向来对应值，没有的则跟对边的值一样，对边也没有的，则所有的都是一个值

4.边框的缩写

边框属性（boder）包括边框大小（boder-width），边框样式（boder-style），边框颜色（boder-color）三个属性组成。

边框有四个方向的属性，即boder-top，boder-right，boder-bottom，boder-left，可以在boder-width、boder-style、boder-color中体现

div{
    border-width:1px;/*定义边框4个方向的大小都为1px*/
    border-style:solid dashed double;/*定义上边框为实线，左右边框为虚线，下边框为双线边框*/
    border-color: #F00 #000;/*定义上下边框为红色，左右边框为黑色*/
}

 

四个方向的属性跟上面内外补丁的规则一致。

5.背景的缩写

body{
    background-color:red;/*定义背景图片*/
    background-image:url(background.gif);/*定义背景图片*/
    background-repeat:no-repeat;/*背景图片无平铺*/
    background-attachment:fixed;/*将背景图片固定，不随页面滚动而滚动*/
    background-position:0,0;/*定义背景图片的位置，必须先定义背景图片才生效*/
}

缩写

background:background-color||background-image||background-repeat||background-attachmetn||background-position

不给值时，背景相关属性的默认值：

    background-color:transparent;
    background-image:none;
    background-repeat:repeat;
    background-attachment:scroll;
    background-position:0%,0%;

6.字体的简写

body{
    font-style:italic;/*定义字体为斜体，默认值（normal）*/
    font-variant:small-caps;/*定义字体为小型的大写字母，针对英文，默认值（normal）*/
    font-weight:bold;/*将文字加粗，默认值（normal）*/
    font-size:12px;/*定义字体大小为12px，默认值（medium）*/
    line-height:140%;/*定义文字行高为140%，默认值（normal）*/
    font-family:"Lucida Grande",sans-serif;/*定义字体名称，默认值（Times New Roman）*/
}

缩写

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

跟背景属性简写不同的是文字大小及行高之间并不是以空格隔开，而以斜杠隔开。另外font-size和font-family是必不可少的。

7.表的缩写

有序表（ol），无序表（ul）。通常必不可少的是list-style复合属性。

li{
    list-style-type:square;/*将列表的预设标记定义为实心方块，默认值（disc）*/
    list-style-position: inside;/*列表项目标记放置在文本以内，且环绕文本根据标记对齐，默认值（outside）*/
    list-style-image:url(image.gif);/*覆盖预设标记用image.gif图片替代，默认值（none）*/
}