频道直达 - 学院 - 下载 - 交易 - 特效 - 字库 - 手册 -排名-工具- 繁體
网页教学网站开发 设为首页
加入收藏
联系我们
建站搜索: 常用广告代码   用户注册 | 用户登陆
您当前的位置:中国建站之家 -> 网站开发设计技术教程 -> HTML/CSS/DIV+CSS教程 -> 总结新手学CSS容易出现错误的内容

总结新手学CSS容易出现错误的内容

作者:未知  来源:www.jz123.cn  发布时间:2007-11-5 6:53:34  发布人:圈圈

减小字体 增大字体

一些新手容易忽略或者出现错漏的地方。

1.首先是对于布局标签的定义。

有时候写好了css,但是反复调试总发现效果差强人意,有那么一块空白,挥之不去。其实这就是对于标签定义的不严谨造成的。因为在xhtml的部分标签里,有一些的默认属性值不一定是为空或零的。例如form,p,他们的margin默认值并不是0,所以在定义时定要多加注意。我们可以这样写来更加严谨的定义:* { margin:0;padding:0 } /*注释:定义所有的标签的margin和padding为0*/

2.缩写和大小写问题

css对于class和id是区分大小写的,所以当样式不生效的时候建议先检查一下大小写问题。我建议所有名称统一小写,当然你有自己的编码风格也可以用。例如第二单词大写,oneTwo在css里有很多缩写的习惯,推荐使用缩写格式。基本的缩写有 属性缩写和颜色缩写等

属性缩写的例子:

 


margin-top:1px;margin-left:1px;margin-right:1px;margin-bottom:1px;

可以简单的写成 marign:1px;代表了以上四个属性。节约了很多字节。 网页教学

顺便提一下,margin的缩写比较特殊,给不会的朋友看看。


margin x;代表四个方向都为x
margin x y;代表上下为x,左右为y;
margin x y z a;x代表上,y代表右,z代表下,a代表左 网页教学网网络收集整理

其他的这种表示上下左右的属性同marign.

另一种缩写就是颜色缩写:比如 #aabbcc;可以简写为 #abc

3.少用限定,多用继承

(1).少用限定:比如定义了一个类a,该类被用于一个id为b的div中,有人为了严谨,这样定义:#b.a {}

这样定义就违备了class的初衷-灵活性.所以一般定义class尽量不要限定他们的应用范围,除非有特殊需要。

 


子选择是一种不错的方法,比如一个li,我们可以不必为其定义id或class,一样可以设置它的属性。 专业的网页教学站点

例子:


<div id="header">
<ul><li></li></ul>
</div>

这种情况我们也可以这样写: #header ul li { 这里就是li的属性 }

(2).多用继承:

有人刚开始写css写的很死,例如这样写:

#a { font-size:12px;font-weight:bold;color:#abc; }
#b { font-size:12px;font-weight:bold;color:#123; }

其实在两个样式有许多雷同的时候,我们完全可发挥css的继承特性,例如把上面的例子改成这样

#a,#b { font-size:12px;font-weight:bold;color:#abc; }
#b { color:#123; }

一组标签也同样适用此方法:h1,h2,h3 {....} 

效果是完全一样的,是不是又节约了很多字节呢..

专业的站点

4.多重class及就近优先原则

 

如果一个标签相同时应用两个class,不要这样写:<div class="a" class="b">这样是不对的 连接到webjx.com

正确写法:<div class="a b">

网网络收集整理

如果同时定了两个p margin属性,后面的将覆盖前面的。还有定义了一个span的color属性,又定义了一个class,名为a的color属性,当<span class="a">时候,a的属性就会覆盖原span的属性。这就是就近优先原则。。。。

5.链接的正确写法:

 


顺序是很重要的,一定要正确::link :visited :hover :active

专业的站点

否则有可能会出现错误。

学好css最需要的就是多动多实践,那样才能学的快。

 

 


将本文收藏到QQ书签与更多好友分享
[打 印]
[] [返回上一页] [收 藏]
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论...]
精彩推荐
热门文章
· 注册码大全二
· 注册码大全四
· 注册码大全一
· 要10G免费网络硬盘的请进..
· 通过google 赶快来赚美金..
· 注册码大全十
· 头像-qq头像(qq新头像)4..
· 让你轻松架设FTP服务器1..
· 注册码大全三
· 梦幻背景图片7
· 卡通动物图片6
· 网页制作素材-按钮素材2..
· 让你轻松架设FTP服务器5..
· 风景图片8
· 注册码大全九
· 让你轻松架设FTP服务器2..
关注此文读者还看过
· IE7得不到微软重视 没创..
· 深入讲解 ASP+ 验证
· 门户评论:腾讯是否已成..
· Flash MX 2004 ActionSc..
· 假日销售亚马逊最红火 每..
· ASP+中文教程(一)--as..
· 马与云的结合 [3]
· Google Adsense常见问题..
· 本地门户营运的3个重点注..
· DUDU的无组件上传例程
· ASP常用数据库连接方法和..
· 堵住黑客入口
· [国外]250MB 德国 super..
· 服务器被访问的速度由哪..
· DW MX 设计留言本实战(4..
· 接收信息页面inform.asp..
相关文章
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 人才招聘
网站合作、内容监督、商务咨询:QQ: 9576619
Copyright ? 2005--2008 中国建站之家版权所有
粤ICP备05092265号