为什么要初始化css代码

秋瑶吖_2252

秋瑶吖_2252

2020-12-15

4405人浏览

原创

原因:1、不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异;2、初始化CSS可以节约网页代码,节约网页下载时间;还会使得我们开发网页内容时更加方便简洁。

本教程操作环境:windows7系统、CSS3版、Dell G3电脑。

(推荐教程:CSS视频教程)

初始化CSS的原因

1、浏览器差异

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

2、提高编码质量

初始化CSS可以节约网页代码,节约网页下载时间;还会使得我们开发网页内容时更加方便简洁,不用考虑很多。

如果不初始化,整个页面做完会很糟糕,重复的css样式很多。

我们在开发比较复杂的网页时候就不会知道自己是否已经设置了此处的CSS属性,是否和前面的CSS属性相同,是否统一整个网页的风格和样式。

弊端

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。

下载

初始化样式会对seo有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

总结:CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间。

怎么初始化CSS?

最简单的初始化方法就是: 

* {padding: 0; margin: 0;}

有很多人也是这样写的。这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。

淘宝样式初始化:

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, 
form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

腾讯QQ官网 样式初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}

新浪官网 样式初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} 
 
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

更多编程相关知识,请访问:编程视频!!

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

css

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
css3教程
css3教程

php中文网为大家提供css3教程合集,CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。php中文网还为大家带来css3的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2060

10

有哪些css3渐变属性
有哪些css3渐变属性

css3中渐变属性有linear-gradient、radial-gradient、conic-gradient、repeating-linear-gradient、repeating-radial-gradient等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.01

3226

5

seo页面描述
seo页面描述

一个好的SEO页面描述应该包含关键词、简明扼要地概括网页的主题和内容、具有吸引力、与网页内容相符,并且是独特的。它不仅可以帮助搜索引擎了解网页的内容,还可以吸引用户点击进入网页。因此,编写一个优秀的SEO页面描述对于网页的排名和点击率都非常重要。

2023.08.31

4781

5

wordpress seo
wordpress seo

WordPress网站SEO优化方法有:1、选择一个SEO友好的主题,具有清晰的代码结构,快速的加载速度和响应式设计;2、使用SEO插件,优化你的标题标签,元描述,关键字,XML站点地图等;3、优化你的内容,内容是SEO优化的核心;4、优化你的网站速度;5、创建友好的URL;6、使用内部链接;7、优化图像;8、使用社交媒体;9、定期更新你的网站;10、监控和分析你的网站等等。

2023.09.18

6235

6

SEO诊断方法有哪些
SEO诊断方法有哪些

SEO诊断是一个综合性的工作,需要从网站结构、关键词优化、内容质量、外部链接、网站速度、移动友好性等多个方面进行评估和优化。通过进行SEO诊断,可以帮助网站提高在搜索引擎中的排名,从而增加流量和曝光度 。

2023.10.09

8549

7

SEO关键词排名工具有哪些
SEO关键词排名工具有哪些

SEO关键词排名工具有Google关键词规划工具、百度关键词工具、SEMrush、Ahrefs、Moz Keyword Explorer、KWFinder、Ubersuggest、Keyword Surfer、AnswerThePublic和Google Trends。更多关于SEO关键词排名工具的文章,详情请继续阅读该专题下面的文章。php中文网欢迎大家前来学习。

2023.10.30

6415

8

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

60

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

40

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

140

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 6.1万人学习

CSS教程
CSS教程

共754课时 | 99.4万人学习