2012-05-25Div+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);尽量不缩写,除非一看就明白的单词.

关键字词:div,css,规则