CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 /* 开始, 以 */ 结束, 实例如下:
/*这是个注释*/p{ text-align:center;
/*这是另一个注释*/ color:black;
font-family:arial;}
id 和 class 选择器
<div id="para1" class="center">12345</div>
#para1{ text-align:center;color:red;}.center {text-align:center;}
tips:类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
css创建
插入样式表的方法有三种:
外部样式表(External style sheet)
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
内部样式表(Internal style sheet)
<style>
hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style>
内联样式(Inline style)
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式优先级
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
背景background
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
background-color:color(指定颜色)/transparent（指定背景颜色应该是透明的。这是默认）/inherit（指定背景颜色，应该从父元素继承）
background-position:left top/left center/left bottom/right top/right center/right bottom/center top/center center/center bottom/x% y%(第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％)/xpos ypos(第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 )/inherit
background-position属性设置背景图像的起始位置。注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）".
background-size:length|percentage(将计算相对于背景定位区域的百分比)|cover(此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最大大小)|contain(此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最小大小);
background-repeat：repeat|repeat-x（只有水平位置会重复背景图像）|repeat-y（只有垂直位置会重复背景图像）|no-repeat|inherit
background-origin: padding-box|border-box|content-box;
版本css3，IE9以上，background-Origin属性指定background-position属性应该是相对位置。
注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。
background-clip: border-box|padding-box|content-box;
background-clip属性指定背景绘制区域，版本css3
background-attachment：scroll|fixed（背景图片不会随着页面的滚动而滚动）|local|initial|inherit
background-image:url('URL')|linear-gradient()| radial-gradient()|
linear-gradient()用于创建一个表示两种或多种颜色线性渐变的图片，css3，ie10
#grad { background-image: linear-gradient(red, yellow, blue);}
/* 渐变轴为45度，从蓝色渐变到红色 */linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */linear-gradient(0deg, blue, green 40%, red);
radial-gradient(shape size at position, start-color, ..., last-color);
