文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:重置还是不重置-这是个CSS问题

宣传部部长

宣传部部长

2024-04-23 23:18

关注

  层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

  摘要:你使用CSS重置吗?是最近养成或者丢掉的习惯吗?真的有用吗?请看本篇文章,为您解析。

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

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

  EricMeyer的CSS重置方案是第一个也是被大家广泛使用的。HTML5doctor的HTML5ResetStylesheet也可以帮助设置一些新的元素。CSSReset.com还提供一些别的不错的方案和文档。

  应该使用CSS重置吗?

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

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

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

  浏览器的兼容性问题可以降到最小

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

  *{padding:0;margin:0;}

  这样的写法会影响到所有的标签,有的开发者会告诉你这会让CSS的渲染效率变低。但是我还没遇到过这样的问题。

  我对CSS重置的主要疑问在于:

  增加页面的大小

  大多数CSS重置文件都在2kb左右(未压缩)。听着不大,但是如果我的CSS总共才10kb,那么这就不是个小数字了。

  额外的影响

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

  不同的浏览器渲染页面也不同

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

  个人以为,我不在乎Firefox下面的比IE下面的大2px,或者Opera的bold属性比Chrome的更加好看,实际上,CSS重置也解决不了这个问题。

  不否认对浏览器的测试

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

  跟我的工作习惯不同

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

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

  并不节省时间

  CSS重置真的节省了你的开发时间?

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

  做一个测试,从你的网站里面去掉CSS重置的样式,看看是否真的有显著的不同?

  你使用CSS重置吗?是最近养成或者丢掉的习惯吗?真的有用吗?

  CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯