马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > css教程 > 我们真的需要CSS重置来清除默认样式吗?

我们真的需要CSS重置来清除默认样式吗?

时间:2014-06-25   文章来源:马海祥博客   访问次数:

每个浏览器都有他自己的一个默认样式,用来保证HTML在没有自定义样式的情况下也能被有据可循的渲染,比如:未访问的链接是蓝色、访问过的是紫色、strong标签加粗显示、H1的字号大一些。然而,各厂商就是喜欢让我们的生活丰富多彩一点,然后每个浏览器的默认样式都不相同。所以,你怎么能保证你的自定义样式不会被浏览器的默认样式影响呢?

我们真的需要CSS重置来清除默认样式吗?-马海祥博客

1、CSS重置

css reset即css重置,也就是重置默认样式。在不同浏览器,HTML中标签的默认样式有一个默认属性值,渲染出来的效果不尽相同,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式,以方便统一,从而提高开发效率,提高样式代码的重用,减少重复代码,减少维护成本。

通常我们用CSS重置来清除浏览器内置的默认样式,所有的字体和line-height都设置为100%,margin、padding设置为0px,去掉border,列表也无样式。

Eric Meyer的CSS重置方案是第一个也是被大家广泛使用的,HTML5 doctor的HTML5 Reset Stylesheet也可以帮助设置一些新的元素(具体可查看马海祥博客的《百家乐》相关介绍)。

2、应该使用CSS重置吗?

我随便看了30个网站,其中大多数都使用了CSS重置。他的优点很明显:

(1)、可以提供完全空白的画布,然后你就可以自己定义相应的样式了。

(2)、开发更加有逻辑性:你只是添加样式而不是移除和修改。

(3)、浏览器的兼容性问题可以降到最小。

尽管有这些优点,但是我还是不使用CSS重置。实际上,也不完全正确,我会使用margin和padding的重置,因为默认的实在是没用,如下所示:

* { padding: 0; margin: 0; }

有的人会觉得这样的写法会影响到所有的标签,有的开发者会告诉你这会让CSS的渲染效率变低,但目前为止马海祥还没遇到过这样的问题。

3、我对CSS重置的6个疑问

当您静下心来,审视你这几年对CSS的使用,您再去思考CSS重置,从它的历史,从它繁盛的原因,去思考CSS重置的本质,标签的意义,您就会发现,CSS重置这个概念本不应该流行与繁盛,虽然它有道理,但是实际上是个可有可无的东西。对此,马海祥可以从以下几个方面阐述我的观点:

(1)、增加页面的大小

大多数CSS重置文件都在2kb左右(未压缩),听着不大,但是如果我的CSS总共才10kb,那么这就不是个小数字了(具体可查看马海祥博客的《CSS常用代码使用技巧大全》相关介绍)。

(2)、额外的影响

CSS重置需要你去重置所有的元素,增加文件大小,有些时候,浏览器默认还是不错的,字体大小,行间距,链接边框以及列表样式都还是不错的,如果不行,马海祥建议你可以再单独去改。

(3)、不同的浏览器渲染页面也不同

没有哪两个浏览器渲染出来的页面是完全相同,一像素不差的,CSS重置给人的感觉就好像要完成这个目标,其实不行。

一般情况下,大多数人并不在乎Firefox下面的标题比IE下面的大2px,或者Opera的bold属性比Chrome的更加好看,实际上,CSS重置也解决不了这个问题(具体可查看马海祥博客的《资深Web前端开发工程师教你如何优化CSS框架》相关介绍)。

(4)、不否认对浏览器的测试

马海祥不是太认可CSS重置在各浏览器下面的一致性,你必须在很多的设备和浏览器下面测试你的网站或者程序,才能定位到错误到底是你的代码还是浏览器的问题。

(5)、工作习惯的不同

我不太使用CSS框架,我很少能遇到可以在正在建设的网站中通用的CSS方案,我可能会从其他地方copy一些代码过来,但是一般我还是喜欢从空文件开始写。他完全是我的代码,我能很快知道问题在哪。

虽然不是那么复杂,但是CSS框架中的重置代码经常导致一些问题。

(6)、并不节省时间

首先,在做CSS重置之前,我们要先问下自己:CSS重置真的节省了你的开发时间吗?

在我被CSS重置的支持者攻击之前,我先声明,并不是永远都不用。可能对你来说有用,但是对那些新的WEB开发人员是否同样有用呢?当你要添加一个CSS重置代码的时候,是真的有用呢?还是只是一个习惯而已?

对此,马海祥建议你可以做一个测试,从你的网站里面去掉CSS重置的样式,看看是否真的有显著的不同?相信你就有了自己的答案了。

马海祥博客点评:

我认为,CSS重置是个非常尴尬的概念,这是与性能,优化的概念是相悖的,但是,实际上,有时候它的存在似乎有一定的道理的,比如设置默认的a标签的属性,所以,至于用不用?怎么用?还是要看程序员个人的喜好来定了。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://bjl.nsb884.com/css/644.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: css   css重置   清除默认样式  

上一篇:如何通过CSS3实现背景图片色彩的梯度渐变
下一篇:看看那些能提高效率却容易被人忽略的CSS细节

您可能还会对以下这些文章感兴趣!

  • CSS样式表文件的优化方法及技巧

    今天,整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS,使得代码过于臃肿。CSS代码优化的最大好处就是能够显着减少CSS文件的大小,其实还有很多其他益处,臃肿而杂乱的CSS样式表会使你遇到问题是难以调试……【查看全文

    阅读:405关键词: css   css优化   日期:2016-10-27
  • 常见的一些CSS基础知识题

    CSS指层叠样式表(Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中,外部样式表通常存储在 CSS 文件……【查看全文

    阅读:241关键词: css知识   css   日期:2018-12-27
  • CSS常用代码使用技巧大全

    这几天,一直忙于帮公司做新的网站,在设计和修改新模板页面的过程中,需要不停的调试CSS样式,有的部分还需要重新来写。为了便于以后再次使用,我特意将在网页制作过程中常使用的CSS代码的使用技巧整理成文章的形式,在马海祥博客上跟大家分享一下,一是便于以后自己在……【查看全文

    阅读:1784关键词: CSS常用代码   CSS代码   CSS代码大全   CSS使用技巧   日期:2013-10-19
  • 清除CSS浮动的方法原理及优缺点评定

    今天看到有个博友问如何清除网站页面的CSS浮动?因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及width height属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。 其实解决浮动引起的问题有多种方法,……【查看全文

    阅读:5766关键词: 清除CSS浮动   CSS浮动方法   CSS浮动原理   CSS优缺点   日期:2014-03-16
  • background-position的使用方法及详细介绍

    background属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-color、background-image、background-repeat、background-position、background-size……【查看全文

    阅读:162关键词: css   使用方法   日期:2017-03-26
  • 如何命名CSS文件及样式规范更利于SEO优化

    一名专业的SEO(搜索引擎优化)有很多工作要做,其中对代码的优化是一个很关键的步骤,为了更加符合SEO优化的规范,我们就需要按照CSS+DIV的命名规则来建设我们的网站,当然这些CSS文件不用一次性全部新建出来,只需要制作到那个页面的时候再建立即可,但是在初步规划的……【查看全文

    阅读:3655关键词: css文件   css样式   seo优化   css   日期:2014-11-10
  • 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢?有些朋友会发现,如果一行内容中有图片有文字……【查看全文

    阅读:29791关键词: css代码   图片   css   日期:2015-05-05
  • 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体、颜色、背景、图片等的控制,使网页能够完全依照设计者的想法来显示。CSS可以控制网页的显示,HTML标签中的属性也可以控制其显示,为什么还要有CSS呢?其中一个原因就是:……【查看全文

    阅读:2360关键词: 制作网页   网页制作   css   日期:2015-05-13
  • CSS无图片技术的实现方法有哪些?

    什么是CSS无图片技术?CSS无图片技术就是在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术。如果我们尽可能的使用无图片技术来实现,明显可以提高页面的加载速度……【查看全文

    阅读:1441关键词: CSS技术   无图片技术   CSS方法   日期:2014-02-14
  • 网站CSS代码优化的7个原则

    整理和优化代码不仅是为了你的CSS文件大小,还包括了维护性和可读性,以上的原理并不只是针对CSS,它们还能应用到HTML,Javascript以及其他编程语言,CSS文件不只是为了呈现给你网站的最终用户,上面的原理可以帮助用户体验以及开发者经验,运用这些原则到你未来的项目……【查看全文

    阅读:2598关键词: 网站代码   css代码   css优化   日期:2014-10-10
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

百度搜索用户建议专区上线公告 企业网站SEO推广能给企业带来哪些好处?
网站地图 澳门银河赌场 777老虎机游戏 太阳城申博开户 菲律宾申博开户
申博游戏网站登入 申博太阳城 申博太阳成会员登录 申博游戏注册登入
申博游戏平台 太阳城亚洲 申博太阳城直营网 太阳城集团
申博娱乐网 老虎机游戏 百家乐娱乐登入 百家乐登入网址
申博娱乐手机登入 申博游戏平台 申博游戏手机下载 申博登录不了