Div+CSS 规则整理 以及注意问题

• 一、 善用css缩写规则

   
  /*注意上、右、下、左的书写顺序*/
   
  1. 关于边距（4边）：
   
  1px 2px 3px 4px (上、右、下、左)
   
  1px 2px 3px （省略的左等于右）
   
  1px 2px (省略的上等于下)
   
  1px （四边都相同）
   
  2. 简化所有：
   
  */ body{margin:0}------------表示网页内所有元素的margin为0
   
  #menu{ margin:0}------------表示menu盒子下的所有元素的margin为0
   
  二、伪类和选择符的配合使用
   
  将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：
   
  a.red:link {color: #FF0000}
   
  a.red:visited {color: #0000FF}
   
  a.blue:link {color: #00FF00}
   
  a.blue:visited {color: #FF00FF}
   
  三、书写正确的链接样式
   
  当用css定义链接的各种状态时，要注意书写的顺序即：:link :visited :hover :active利用首字母：L V H A，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。
   
  :link --------链接的颜色
   
  :visited -----鼠标点击后的颜色
   
  :hover -------鼠标放上去未点的颜色（悬停）
   
  :active-------鼠标点击瞬间的颜色
   
  四、:hover的灵活运用
   
  IE6不支持除a标签以外的:hover属性，我们了解:hover属性是鼠标悬停效果。在IE7和FF中，对几乎任意元素都可以设置:hover属性效果。这对我们做不同的访问效果很好。
   
  如：
   
  p { width : 360px; height : 80px; padding : 20px; margin : 50px auto 0 auto;border : 1px solid #ccc; line-height : 25px; background : #fff;}
   
  p:hover { border : 1px solid #000;background : #ddd;}----------------此效果针对IE7和FF
   
  p a {color : #00f;text-decoration : none;font-size : 13px;}
   
  p a:hover {color : #036;text-decoration : underline;}-----------------此效果针对IE6
   
  五、定义A标签要注意的小问题
   
  当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。只定义了一个a:link时，一定要记得把其它三种状态定义出来！
   
  六、区别relative和absolute
   
  position:absolute; 
   
  绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
   
  position:relative; 
   
  绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
   
  七、区别块级元素block和内联元素inline
   
  块级---可定义宽高，另起独占一行 （如：div ul）
   
  内联---不可定义宽高，如文本元素 （如a span）
   
  八、区别display和visibility
   
  display:none和visibility:hidden都可以隐藏一个元素,但visibility:hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。而display:none则相当把元素从页面中去除，其占用位置也将被删除。
   
  九、背景background的一些语法
   
  background-image:url(背景图案.jpg,gif,bmp);
   
  background-color:#FFFFFF; （背景颜色）
   
  background-color : transparent; <--设定背景为透明色 –>
   
  background-repeat 改变背景图片的重复并排的设定
   
  说明
   
  repeat 背景图片并排 
   
  repeat-x 背景图片以X方向 并排 
   
  repeat-y 背景图片以Y方向 并排 
   
  no-repeat 背景图片不 以并排的方式处理 
   
  background-attachment是否固定图片位置
   
  说明
   
  scroll 拉动卷轴时，背景图片会跟着移动（缺省值） 
   
  fixed 拉动卷轴时，背景图片不会跟着移动 
   
  以长度定位background-position: x y
   
  使用百分比定位 background-position: x% y%
   
  说明
   
  x% 往右移 
   
  y% 往下移
   
  backgroud-position: 0% 0%; 左边上方
   
  backgroud-position: 0% 50%; 左边中间
   
  backgroud-position: 50% 0%; 中间上方
   
  backgroud-position: 50% 50%; 正中间
   
  backgroud-position:100% 0%; 右边上方
   
  backgroud-position: 0% 100%; 左边下方
   
  backgroud-position: 100% 50%; 右边中间
   
  backgroud-position: 50% 100%; 中间下方
   
  backgroud-position: 100% 100%; 右边下方
   
  以关键字定位
   
  关键字 说明
   
  top 上 ( y = 0 ) 
   
  center 中 ( x = 50, y = 50 ) 
   
  bottom 下 ( y = 100 ) 
   
  left 左 ( x= 0 )
   
  Exp:
   
  background-position:center;
   
  图片在指定背景中央X=50% Y=50%位置
   
  background-position: 200px 30px
   
  十、class的命名
   
  (1)颜色:使用颜色的名称或者16进制代码,如
   
  .red { color: red; }
   
  .f60 { color: #f60; }
   
  .ff8600 { color: #ff8600; }
   
  (2)字体大小,直接使用"font+字体大小"作为名称,如
   
  .font12px { font-size: 12px; } 
   
  .font9pt {font-size: 9pt; }
   
  (3)对齐样式,使用对齐目标的英文名称,如
   
  .left { float:left; 
   
  .bottom { float:bottom; }
   
  (4)标题栏样式,使用"类别+功能"的方式命名,如
   
  .barnews { }
   
  .barproduct { }
   
  注意事项:
   
  一律小写;尽量用英文;不加中杠和下划线;2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（eg:mainContent）；尽量不缩写，除非一看就明白的单词.