您现在的位置是:首页 > 博客网站制作 > 心得笔记心得笔记

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

杨青青2012-05-25【心得笔记】人已围观

简介注意事项:一律小写;尽量用英文;不加中杠和下划线;2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写(eg:mainContent);尽量不缩写,除非一看就明白的单词.

一、 善用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);尽量不缩写,除非一看就明白的单词.

很赞哦! ()

文章评论

点击排行

站点信息

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~