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中体现

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

 

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

5.背景的缩写

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

缩写

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

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

1     background-color:transparent;
2     background-image:none;
3     background-repeat:repeat;
4     background-attachment:scroll;
5     background-position:0%,0%;

View Code

6.字体的简写

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

缩写

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

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

7.表的缩写

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

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