css 的一些方法
1.盒模型代码简写
盒模型的外边距（margin）、内边距（padding）和边框（border）设置上下左右四个方向的边距是按照顺时针方向设置的；上右下左。具体应用在margin和padding的
例子如下
margin:10px 15px 12px 14px; //上设置10px右设置为15px、下设置为12px、左设置14px
通常有下面三种缩写方法
1.如果top、right、bottom、left的值相同，如下面代码：
margin:10px 10px 10px 10px ;
可缩写为：10px;
2.如果top和buttom值相同、left和right的值相同，如下面代码：
margin:10px 20px 10px 20px;
可缩写为：margin：10px 20px;
3.如果left和right的值相同，如下面的代码：
margin:10px 20px 30px 20px;
可缩写为：margin:10px 20px 30px；
注意：padding、border的缩写方法和margin是一致的
2.颜色值缩写
RGB格式
例子：
rgb（255，0，0）
十六进制格式
例子1
关于颜色的css样式也是缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
p{color:#00000;}
可以缩写为:
p{color:#000;}
p{color:#336699;}
可以缩写为：
p{color:#369;}
颜色名称
例子： red
3.css背景详细介绍
background 属性用于定义HTML元素的背景。定义元素北京效果的CSS属性有以下五种：
（1）background-color 背景颜色
该属性定义了元素的背景颜色。页面的背景颜色可以使用body元素选择器进行定义：
body{
background-color:gray;
}
（2）background-image 背景图像 //属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
body{
background-image:url('images/wallpaper.jpg');}
（3）background-repeat 背景图片设置水平或垂直平铺或不平铺
默认情况下，background-image 属性会在页面的水平或者垂直方向平铺。一些图象如果在水平方向与垂直方向平铺，这样看起来很不协调，如果图像只在水平方向平铺（repeat-x） ，页面背景会更好些：background-repeat：repeat-x，定义垂直方向平铺语法：background-repeat：repeat-y。
(4)background-position:背景图像设置定位
背景图像与文本显示在同一个位置，这样不利于文本的阅读，为了让页面排版更加合理，可以利用background-position属性改变图像在背景中的位置：
body{
background-image：url('images/wallpaper.jpg');
background-repeat:no-repeat;
background-position:right top;//图片显示在右上角
}
//注意：如果background-position可以使用关键字表示left|right|center 仅指定一个关键字，其他值将会是“center”
也可以使用百分比表示：x% y%，默认值为：0%0%，第一个值是水平位置，第二个是垂直位置。左上角是0%0%右下角100%100%。如果仅指定了一个值其他值将是50%
//还可以使用长度单位精度表示，单位可以是像素或任何其他CSS单位，通常使用像素。第一个是水平位置，第二个是垂直位置，左上角是0 0 ，两个数值之间用空格隔开，例如： background-position：12px 24px； 表示背景图片距离该元素左上角的水平方向位置是12px，垂直方向是24px。该属性就是图像左上角相对于元素左上角的位置偏移，如果取负值，则向上向左偏移。该方法在制作CSS雪碧图（即CSS Sprite，也叫做CSS精灵）时，将十分重要。
(5)background-attachment：背景图像设置固定或滚动
background-attachment 属性设置背景图像是否福鼎或者随着页面的其余部分滚动，默认值是scroll，背景图片随页面其余部分公董。如果需要设置图像不随着页面的其余部分滚动，那么属性值则使用fixed，定义背景图像是固定的，如下：
<head>
<style>
body{
height:2000px;
background-image:url('images/fix.gif');
background-repeat:no-repeat;
background-attachemet:fixed;
}
</style>
</head>
<body>
<p>我是一个段落,我是一个段落。</p>
<p>我是一个段落,我是一个段落。</p>
<p>我是一个段落,我是一个段落。</p>
<p>我是一个段落,我是一个段落。</p>
</body>
(6)背景属性简写
设置页面的背景效果时，通过很多的单个属性来进行定义，这样代码就显得很繁琐，为了简化这些属性代码，可以将这些属性合并在同一个属性合并在同一个属性中，如下：
body{
background:green url('images/fix.gif') no-repeat fixed 12x 24px;
}
background属于复合属性，也叫跨界属性，他可以简化代码，提高页面的运行效率，但是在使用JS时却不能使用复合属性来获取元素的央视，需要使用单个属性精确获取，如果一个元素定义了多个背景样式，那么使用符合属性获取，浏览器并不知道你到底需要那个样还i，就出错了。类似这样的符合属性还有：font、border、padding和margin等。
在使用背景图象时，默认会平铺重复显示，这样不仅不具有美感，还会影响文本的排版。如果不想图像平铺，并且直线式一次，那么就这么定义：
background-repeat：no-repeat；
例子
<head>
<style>
body{
background-image:url('images/wallpaper.jgp');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1 class="center col">class选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center col font">我是另一个段落。</p>
<h2 class="center">h2标题</h2>
</body>
4.一般写作属性顺序
background-color--->backgrouund-image-->background-repeat--->background-attachment-->background-position
以上属性无需全部使用，可以按照页面的实际徐uyaoshiyong，比如之定义背景颜色，就可以这样设置：background：#90C