为什么html文字显示错误,总结新手学CSS容易出现错误的内容

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

互联网   发布时间：2008-10-17 19:26:44   作者：佚名   我要评论

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

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

有时候写好了css，但是反复调试总发现效果差强人意，有那么一块空白，挥之不去。其实这就是对于标签定义的不严谨造成的。因为在xhtml的部分标签里，有一些的默认属性值不一定是为空或零的。例如fo

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

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，一样可以设置它的属性。

例子：

这种情况我们也可以这样写： #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，不要这样写：

这样是不对的

正确写法：

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

5.链接的正确写法:

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

否则有可能会出现错误。

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

相关文章

这篇文章主要介绍了关于CSS浮动与取消浮动的问题，通过设置元素脱离正常的文档流让元素靠左或向右靠近，通过设置文字包周围图片来解决浮动问题，具体解决方法跟随小编一起2021-06-28

本文介绍了什么是 ::marker 以及它的一些实用场景，可以看出虽然 ::before 、::after 也能实现类似的功能，但 CSS 还是提供了更具有语义化的标签 ::marker，也表明了大家需2021-06-25

很多前端的初学者,在使用margin的之后或许会遇到一些问题，本文主要介绍了margin塌陷和margin合并，需要的朋友们下面随着小编来一起学习学习吧2021-06-24

当我们想写一个类似掘金的文章或者自己的博客的时候，是否有想过该怎么实现给自己文章的章节添加章节号，本文就来介绍一下使用CSS实现章节添加自增序号的方法，感兴趣的可2021-06-23

本文主要介绍了CSS变量实现主题切换的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-06-23

本文就将介绍一些使用单标签绘图的技巧，并且使用这些技巧，借用单个标签去实现一些复杂图形，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2021-06-16

这篇文章主要介绍了CSS几步实现赛博朋克2077风格视觉效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-15

今天来带大家做一个可爱的滑动导航栏效果，这个demo很基础，但是使用场景非常广泛，感兴趣的小伙伴们可以参考一下2021-06-15

大家都知道Calc方法有个很大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度，本文通过一个例子给大家详细介绍，需要的朋友参考下吧2021-06-03

本文将给大家介绍使用 CSS prefers-* 规范提升网站的可访问性与健壮性的相关知识，在css媒体查询中新增的几个特征功能,本文也给大家详细介绍，需要的朋友可以参考下2021-05-25

最新评论