HTML实战一:初始化css代码,为什么以及怎样做?

  • 时间:2018-12-27 23:06 作者:恒创信息 来源:恒创信息 阅读:262
  • 扫一扫,手机访问
摘要:之前的文章我们详情了很多关于html以及css的基础内容,从本篇文章开始我们要进行实战训练,我们实战第一篇文章要详情的就是初始化我们的css代码;1)为什么要初始化css代码首先是由于浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,假如没对CSS初始化往往会出现浏览器之间的页面显示差异。其次
HTML实战一:初始化css代码,为什么以及怎样做?

之前的文章我们详情了很多关于html以及css的基础内容,从本篇文章开始我们要进行实战训练,我们实战第一篇文章要详情的就是初始化我们的css代码;

1)为什么要初始化css代码

首先是由于浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,假如没对CSS初始化往往会出现浏览器之间的页面显示差异。

其次初始化CSS样式可以提高编码质量,保持代码的统一性,假如不初始化整个页面做完很糟糕,重复的CSS样式很多。去掉标签的默认样式如:margin,padding,其余浏览器默认解析字体大小,字体设置。

我们这里写一个ul标签以及a标签,来看一下默认在网页中的显示效果;

HTML实战一:初始化css代码,为什么以及怎样做?

从上图我们可以看出a标签以及ul标签都有默认的样式效果,而且ul距离左侧有一段的空隙,假如我们不定义初始化效果的话每次都要进行单独的修改,这样会添加代码的重复度。

2)我们要怎样去做?

1、最简单的初始化css代码的方式是使用通配符(*),重置所有的初始样式。具体的css代码如下所示:

HTML实战一:初始化css代码,为什么以及怎样做?

但是我们不建议这么书写:由于 *(星号)代表通配符表示了所有的标签,编写代码的时候也非常快,但是这样写有一个弊端,就是在网站比较大时,CSS样式文件也很大,这样写时,它会把所有的标签都初始化一遍,这样会加大网站运行的负荷,会让网站加载的时候需要很长一段时间。

2、初始化代码尽管个人习惯各有差异,但是大同小异,我们可以借鉴大公司的代码来直接使用就可。下面给大家列举下腾讯和淘宝的初始化代码仅供参考,后期可以根据个人习惯进行删减就可。

淘宝的初始化代码如下所示:

HTML实战一:初始化css代码,为什么以及怎样做?

腾讯的初始化代码如下所示:

HTML实战一:初始化css代码,为什么以及怎样做?

好了,本篇文章就给大家说到这里,大家自己下来可以自己模拟一下,找到适合自己使用的初始化代码。

每日金句:你20岁时偷过的“懒”,就是你30岁时会掉进去的“坑”。喜欢我的文章的小伙伴记得关注一下哦,每天将为你升级最新知识。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
【系统环境|服务器应用】第10题- 你不知道的delete操作符(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部