Div+CSS规则.docx

Div+CSS规则.docx

《Div+CSS规则.docx》由会员分享，可在线阅读，更多相关《Div+CSS规则.docx（57页珍藏版）》请在冰豆网上搜索。

Div+CSS规则

一、善用css缩写规则

/*注意上、右、下、左的书写顺序*/

1.关于边距（4边）：

1px2px3px4px（上、右、下、左）

1px2px3px（省略的左等于右）

1px2px（省略的上等于下）

1px（四边都相同）

2简化所有：

*/body{margin:

0}------------表示网页内所有元素的margin为0

#menu{margin:

0}------------表示menu盒子下的所有元素的margin为0

3.缩写（border）特定样式：

Border:

1pxsolid#ffffff;

Border-width:

01px2px3px;

4.关于文字的缩写规则：

Font-style:

italic;斜体形式

Font-variant:

small-caps/normal;变体样式：

小型大写字母/正常

Font-weight:

bold;

Font-size:

12px;

Line-height:

1.2em（120%）/1.5em（150%）;

Font-family:

arrial,sans-serif,verdana;

缩写成：

Font:

italicsmall-capsbold12px/1.5emarrial,sans-serif;

注意：

Font-size和Line-height用斜杠组合在一起不能分开写。

5.关于背景图片的：

Background:

#FFFurl（log.gif）no-repeatfixedtopleft;

6.关于列表：

List-style-type:

square/none;

List-style-position:

inside;

List-style-image:

url（filename.gif）;

缩写成：

List-style:

noneinsideurl（filename.gif）;

二、运用4种方法来引入CSS样式

1.link

rel关系

type数据类型,有多种

href路径

部分浏览器支持候选样式,关键字:

alternate:

2.内部样式块

3.@import

@importurl{a.css}

注意:

此指令必须放在中的设定

--外部引用css文件

（2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设的。

如上例中此处显示为黄色

八、书写正确的链接样式

当用css定义链接的各种状态时，要注意书写的顺序即：

:

link:

visited:

hover:

active利用首字母：

LVHA，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。

:

link--------链接的颜色

:

visited-----鼠标点击后的颜色

:

hover-------鼠标放上去未点的颜色（悬停）

:

active-------鼠标点击瞬间的颜色

九、:

hover的灵活运用

IE6不支持除a标签以外的:

hover属性，我们了解:

hover属性是鼠标悬停效果。

在IE7和FF中，对几乎任意元素都可以设置:

hover属性效果。

这对我们做不同的访问效果很好。

如：

p{

width:

360px;

height:

80px;

padding:

20px;

margin:

50pxauto0auto;

border:

1pxsolid#ccc;

line-height:

25px;

background:

#fff;

}

p:

hover{

border:

1pxsolid#000;

background:

#ddd;

}

----------------此效果针对IE7和FF

pa{

color:

#00f;

text-decoration:

none;

font-size:

13px;

}

pa:

hover{

color:

#036;

text-decoration:

underline;

}

-----------------此效果针对IE6

十、定义A标签要注意的小问题

当我们定义a{color:

red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:

hover就可以了，其它三种状态就是A中所定义的样式。

只定义了一个a:

link时，一定要记得把其它三种状态定义出来！

十一、禁止内容换行与强制内容换行

在表格或层中我们可能希望内容不换行或强制换行，我们可以通过一些css属性来达到这些要求。

禁止换行：

white-space:

nowrap

强制换行：

word-break:

break-all;white-space:

normal;

十二、区别relative和absolute

Absolute---CSS中的写法是：

position:

absolute;他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT（下面简称TRBL）进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。

如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

Relative---CSS中的写法是：

position:

relative;他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

十三、区别块级元素block和内联元素inline

块级---可定义宽高，另起独占一行（如：

divul）

内联---不可定义宽高，如文本元素（如aspan）

十四、区别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:

xy

使用百分比定位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:

200px30px

十六、注释的写法

在Html中：

<--footer-->

content

<--endfooter-->

在CSS中：

/*----------header-----------------*/

style

十七、CSS的命名规范

1.id的命名

（1）页面结构

容器:

container

页头：

header

内容：

content/container

页面主体：

main

页尾：

footer

导航：

nav

侧栏：

sidebar

栏目：

column

页面外围控制整体布局宽度：

wrapper

左右中：

leftrightcenter

（2）导航

导航：

nav

主导航：

mainnav

子导航：

subnav

顶导航：

topnav

边导航：

sidebar

左导航：

leftsidebar

右导航：

rightsidebar

菜单：

menu

子菜单：

submenu

标题:

title

摘要:

summary

（3）功能

标志：

logo

广告：

banner

登陆：

login

登录条：

loginbar

注册：

regsiter

搜索：

search

功能区：

shop

标题：

title

加入：

joinus

状态：

status

按钮：

btn

滚动：

scroll

标签页：

tab

文章列表：

list

提示信息：

msg

当前的:

current

小技巧：

tips

图标:

icon

注释：

note

指南：

guild

服务：

service

热点：

hot

新闻：

news

下载：

download

投票：

vote

合作伙伴：

partner

友情链接：

link

版权：

copyright

2.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{}

注意事项:

:

u一律小写;

u尽量用英文;

u不加中杠和下划线;

u2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（eg:

mainContent）；

u尽量不缩写，除非一看就明白的单词.

3.主要的站点css文件

主要的master.css

模块module.css

基本共用base.css（root.css）

布局，版面layout.css

主题themes.css

专栏columns.css

文字font.css

表单forms.css

补丁mend.css

打印print.css

十八、Padding影响宽度问题

如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding

十九、完美的单象素外框线表格

table{border-collapse:

collapse;}

td{border:

1pxsolid#000;}

二十、如果文字过长,则将过长的部分变成省略号显示

120px;height:

50px;overflow:

hidden;text-overflow:

ellipsis;white-space:

nowrap”>

二十一、并不是所有样式都要简写

当样式表前定义了如p{padding:

1px2px3px4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。

我们并不一定要写成p.style1{padding:

5px6px3px4px}。

可以写成p.style1{padding-top:

5px;padding-right:

6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！

如果以后前一个样式P变了话，你定义的p.style1的样式也要变。

（此种方法对后期修改样式很重要）

二十二、几个常用到的CSS细节处理上的样式

1）中文字两端对齐：

text-align:

justify;text-justify:

inter-ideograph;

2）固定宽度汉字截断：

overflow:

hidden;text-overflow:

ellipsis;white-space:

nowrap;（不让其换行，不过只能处理文字在一行上的截断，不能处理多行。

）（IE5以上）FF不能，它只隐藏。

***万能强制换行：

white-space:

normal;word-break:

break-all;

禁止换行：

white-space:

nowrap

强制换行：

word-wrap:

break-word;word-break:

normal;

.AutoNewline

{

/*word-break:

break-all;方法一必须*/

/*word-wrap:

break-word;overflow:

hidden;方法二*/

/*word-wrap:

break-word;word-break:

normal;方法三*/

word-wrap:

break-word;word-break:

break-all;

}

.NoNewline

{

/*word-break:

keep-all;方法一必须*/

white-space:

nowrap;

}

3）固定宽度汉字（词）折行：

table-layout:

fixed;word-break:

break-all;（IE5以上）FF不能。

4）

help;”>文字用鼠标放在前面的文字上看效果。

这个效果在国外的很多网站都可以看到，而国内的少又少。

5）图片设为半透明：

.halfalpha{background-color:

#000000;filter:

Alpha（Opacity=50）}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

6）FLASH透明：

选中swf,打开原代码窗口，在前输入以上是针对IE的代码。

针对FIREFOX给标签也增加类似参数wmode=”transparent”

7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：

.picturesimg{

filter:

alpha（opacity=45）;

}

.picturesa:

hoverimg{

filter:

alpha（opacity=90）;

}

8）层在浏览器中居中对齐问题

body{

text-align:

center

}

#content{text-align:

left;width:

700px;margin:

0auto}

9）单行内容在层中垂直对齐问题

#content{height:

19px;line-height:

19px;}缺点是要内容不要换行。

10）层在浏览器中垂直居中对齐问题

缺点是：

水平、垂直方向上不能出现滚动条，只能是在一屏的情况下

其实解决的思路是这样的：

首们需要position:

absolute;绝对定位。

而层的定位，使用外补丁margin负值的方法。

负值的大小为层自身宽度高度除以2。

如：

一个层宽度是400，高度是300。

使用绝对定位距离上部与左部都设置成50%。

而margin-top的值为－150。

ma