CSS的常用样式分为几大类:

1. 字体样式（font，color, text-decoration ,text-shadow）
2. 元素样式（width，height，margin，padding，opacity,盒子模型）
3. 边框样式（border ， border-radius ， box-shadow）
4. 段落样式( line-height , text-align , text-indent , letter-spacing )
5. 背景样式( background , background-size )
6. 列表样式（ list-style）
7. 变形样式 （transform）
8. 过渡动画 （transition）
9. 自定义动画（animate）

　　字体样式：

• 字体名称——font-family

  设置文字名称，可以使用多个名称，或者使用逗号
  分隔，浏览器则按照先后顺序依次使用可用字体。

  p { font-family:‘宋体'，'黑体', 'Arial’ }

• 字体大小——font-size

  p { font-size:14px;}    

• 字体加粗——font-weight

  p { font-weight:bold ||normal || bolder || lighter || length;}

• 字体斜体——font-style

  p { font-style: italic || oblique || normal; } 

• 字体缩写

  p{font-style:italic;font-weight:bold;font-size:14px;line-height:22px;font-family:宋体;
  }p { font:italic bold 14px/22px 宋体}

• 字体颜色——color

  p{color:#FF0000 || rgba(255,0,0,.5) || red || rgb(255,0,0);}

• 文本装饰线条——text-decoration

  p{text-decoration : none || underline || blink || overline || line-  through
  }

• 文字阴影——text-shadow

  h-shadow	必需。水平阴影的位置。允许负值。
  v-shadow	必需。垂直阴影的位置。允许负值。
  blur	可选。模糊的距离。
  color	可选。阴影的颜色。

  h1{text-shadow: 2px 2px #ff0000;
  }

• 嵌入字体——@font-face

  @font-face { font-family : 自定义字体名称; src : url(字体文件在服务器上的相对或绝对路径)  format(字体类型);
  }

　　元素样式：

• 宽度和高度——width,height

  p {width:300px;height:200px;
  }

• 外边距——margin

  margin-top	设置上边的外边距
  margin-bottom	设置下边的外边距
  margin-left	设置左边的外边距
  margin-right	设置右边的外边距

  div {      margin:0 auto;　　 margin:2px 2px 2px 2px;     magin:2px 5px 3px;    magin:2px;}

• 内边距——padding
  

  padding-top	设置上边的内边距
  padding-bottom	设置下边的内边距
  padding-left	设置左边的内边距
  padding-right	设置右边的内边距

  div { padding:0 auto;padding:2px 2px 2px 2px;padding:2px 5px 3px;padding:2px;
  }

• 透明度——opacity
  number值为 0.0-1.0 之间的小数

  div{ opacity:.5; }                           

• 盒子模型
  盒子模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。
  元素最终所占的宽度=左边框宽 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽
  元素最终所占的高度=上边框宽 + 上内边距 + 内容高度 + 下内边距 + 下边框宽
  

　　边框样式：

• 边框线——border-style

  div
  {　　border-style : none | hidden | dotted | dashed | solid | double   | groove | ridge | inset  | outset
  }

• 边框宽度——border-width

  div{order-width : medium | thin | thick | length
  }

• 边框颜色——border-color

  div{border-color:red;
  }

• 缩写

  div { width:300px; height:100px; border-style:solid; border-width:1px; border-color:#FF0000;
  }
  div {width:300px; height:100px; border:1px solid #FF0000;
  }

• 圆角效果——border-radius

  div{ border-radius:50% border-radius:10px;border-radius: 5px 4px 3px 2px;
  }

• 边框图片——border-image

  div {border: 10px solid gray;border-image: url(test.png) 10px;
  }