首页 web前端 css教程 为什么要初始化css代码

为什么要初始化css代码

Dec 15, 2020 am 10:30 AM
css

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

为什么要初始化css代码

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

(推荐教程:CSS视频教程

初始化CSS的原因

1、浏览器差异

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

2、提高编码质量

初始化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;}

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

以上是为什么要初始化css代码的详细内容。更多信息请关注PHP中文网其他相关文章!

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

热AI工具

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Stock Market GPT

Stock Market GPT

人工智能驱动投资研究,做出更明智的决策

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

如何使用CSS设计文本方面 如何使用CSS设计文本方面 Sep 16, 2025 am 07:00 AM

首先设置宽度、高度、内边距、边框、字体和颜色等基本样式;2.通过:hover和:focus状态增强交互反馈;3.使用resize属性控制调整大小行为;4.利用::placeholder伪元素样式化占位符文本;5.采用响应式设计确保跨设备可用性;6.注意关联label标签、颜色对比度和焦点轮廓以保障可访问性,最终实现美观且功能完善的textarea样式。

如何使用纯CSS创建下拉菜单 如何使用纯CSS创建下拉菜单 Sep 20, 2025 am 02:19 AM

使用HTML和CSS可创建无需JavaScript的下拉菜单。2.通过:hover伪类触发子菜单显示。3.利用嵌套列表构建结构,CSS设置隐藏与悬浮显示效果。4.可添加过渡动画提升视觉体验。

如何使用CSS中的指针事件属性 如何使用CSS中的指针事件属性 Sep 17, 2025 am 07:30 AM

Thepointer-eventspropertyinCSScontrolswhetheranelementcanbethetargetofpointerevents.1.Usepointer-events:nonetodisableinteractionslikeclicksorhoverswhilekeepingtheelementvisuallyvisible.2.Applyittooverlaystoallowclick-throughbehaviortounderlyingelemen

如何防止图像拉伸或缩小CSS 如何防止图像拉伸或缩小CSS Sep 21, 2025 am 12:04 AM

useobject-fitormax-widthwithheight:自动置换式; object-fitControlshowimagesfillcontainersfillcontainerswhilepreservingaspectratios,andmax-width:100%;高度;高度:autoEsoensuresResresresResresRessersRessiveScalingScalingWithOutStertracterging。

如何使用CSS添加盒子阴影效果 如何使用CSS添加盒子阴影效果 Sep 20, 2025 am 12:23 AM

USETHEBOX-SHADOWPROPERTYTOADDDROPSHADOWS.DEFINEHORIZONTALANDVERTICALESTESETSETSETSETSETSETSETSETSETSETSETSETSETSETSETSETSETSETESTESTESTESTESTESTEMENG:MMULTIPLESHADOWSARECOMMA-SEPARAWS.MEULTIPLESHADOWSARECOMMA-SEPARATED.EXAMPL

如何在CSS中添加梯度背景 如何在CSS中添加梯度背景 Sep 16, 2025 am 05:30 AM

要添加CSS渐变背景,使用background或background-image属性配合linear-gradient()、radial-gradient()等函数即可;首先选择渐变类型,设置方向与颜色,并可通过颜色停靠点、形状、大小等参数精细控制,例如linear-gradient(toright,#ff7e5f,#feb47b)创建从左到右的线性渐变,radial-gradient(circle,#ff9a9e,#fecfef)创建圆形径向渐变,还可通过repeating-linear-gr

如何使CSS响应文字 如何使CSS响应文字 Sep 15, 2025 am 05:48 AM

tomaketExtresponsiveNincss,usereLativeUnitslikerem,vw,and clamp()withMediaqueries.1.ReplaceFlaceFixedPixedPixedPixEdedPixelSwithRemforConsistensCali ngbasedonrootfontsize.2.usevwforfluidscalingbutcombinewithcalc()orclamp()topreventextremes.3.applymediamediaqueriesatcommonbreakpo

如何在CSS中创建圆形图像? 如何在CSS中创建圆形图像? Sep 15, 2025 am 05:33 AM

使用border-radius:50%将等宽高的图像变为圆形,结合object-fit和aspect-ratio确保形状和裁剪,可添加边框、阴影等样式增强视觉效果。

See all articles