详谈css样式初始化

这次给大家带来详谈css样式初始化 ,css的样式初始化注意事项有哪些,下面就是实战案例,一起来看一下。     

在网站编写的时候,由于许多的标签会有默认存在的样式,比如P标签的外边距,a标签的下划线等等,通常我们会把这些默认样式去除,以免在后面的编写中造成诸多的不变。

1、拥有默认内外边距的标签

      有些人会图省事,清除内外边距直接用*{margin:0;padding:0;},这样子写,在项目很小的时候,你会感觉没什么,一旦项目大了以后,再这么写将会及其消耗网站的加性能,降低网站加载速度。

      所以我们要了解哪些标签默认会拥有内外边距,再根据使用情况进行样式初始化:

————————————————————————————————–常用的标签—————————————————————————————————————————–

body标签:默认margin:8px;

dl标签,p标签:默认margin-top:1em;注意事项:1em;

dd标签:默认margin-left:40px;

ul、ol标签:默认margin-top:1em;margin-bottom:1em;padding-left:40px;

h1标签~h6标签:默认margin-top:0.67em;margin-bottom:0.67em;

form标签:默认margin-top:0em;

fieldset标签:默认margin-left:2px;margin-right:2px;padding:0.35em 0.75em 0.625em;

legend标签:默认padding-left:2px;注意事项:2px;

input标签:默认padding:1px 0px; 

textarea标签:默认padding:2px;

button标签:默认padding:1px 6px;

hr标签:默认margin-top:0.5em;margin-bottom:0.5em;

pre标签:默认margin:1em 0px 1em;

body,dl,dd,ul,ol,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{    margin:0;    padding:0;}

登录后复制

2、网站的字体样式

     一般我们会在body标签内书写网站的整体字体样式,然后局部位置文字样式需要修改的在单独进行修改

body,button,input,textarea,select{    font:12px/1.5 'Microsoft YaHei','arial','tahoma';    color:#666;}

登录后复制

3、去掉table标签边距,让其合并在一起

table {    border-collapse:collapse;    border-spacing:0;}

登录后复制

4、消除字体风格

i,em{  font-style:normal;  }b,strong{  font-weight:normal;  }

登录后复制

5、消除列表标签前的标识物

ul,ol{  list-style:none;  }

登录后复制

6、消除a标签的下划线、统一字体样式

a{  text-decoration:none;  color:inherit;    }

登录后复制

7、清除Img标签的边框和垂直对齐方式

img{  border:none;  verticla-align:middle;    }

登录后复制

说明:以上这些都是最常用到的,其他标签的样式初始化视情况再继续添加。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

注意事项

注意事项

注意事项

以上就是详谈css样式初始化 的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2899631.html

(0)
上一篇 2025年3月10日 23:48:22
下一篇 2025年3月3日 03:49:23

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 三种CSS截图的方法

    本文主要为大家分享三种CSS截图的方法 ,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 CSS截图图片的几种方式 原图: DIV   使用background-position:Xpx Ypx (图片左…

    2025年3月10日 编程技术
    200
  • css实现图片未加载完成时占位显示实例分享

    通过css控制,可以实现加载网络图片时,未加载完成的时候显示本地一张占位图,加载完成后显示网络图片; 原理:通过在img标签的after伪元素上添加一张占位图,并且img都设置为position:relative;after设置positi…

    2025年3月10日
    200
  • 用CSS实现Tab页切换效果的示例代码_CSS教程_CSS_网页制作

    最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯css的选择器来实现切换效果。搜了一下大致有下面三种写法。 1、利用 :hover 选择器 缺点:只有鼠标在元素上面的时候才有效果,无法实现选中和默认显示某一个的…

    2025年3月10日
    200
  • 清除css浮动的方法

    这次给大家带来清除css浮动的方法,清除css浮动的css浮动有哪些,下面就是实战案例,一起来看一下。 一,我们为什么要浮动 为什么浮动,为什么要css浮动,以及清除浮动的方法。在网页布局的时候有时需要元素并排显示,如果不选择浮动,那么那些…

    2025年3月10日 编程技术
    200
  • 使用CSS做出3D翻页效果

    这次给大家带来使用CSS做出3D翻页效果,使用CSS做出3D翻页效果的注意事项有哪些,下面就是实战案例,一起来看一下。 今天开始~小编将与大家分享一系列的web前端特效荟萃,喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ,希望大家喜欢呦~ 第…

    2025年3月10日
    200
  • css3如何做出小于一像素的细线

    这次给大家带来css3如何做出小于一像素的细线,css3做出小于一像素的细线的注意事项有哪些,下面就是实战案例,一起来看一下。 Webapp中的CSS3实现 0.5px的细线 感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所以又…

    2025年3月10日 编程技术
    200
  • css判断子元素个数

    这次给大家带来css判断子元素个数,css判断子元素个数的注意事项有哪些,下面就是实战案例,一起来看一下。 工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点…

    2025年3月10日 编程技术
    200
  • CSS的定位属性详解

    这次给大家带来CSS的定位属性详解,使用CSS定位属性的注意事项有哪些,下面就是实战案例,一起来看一下。 CSS的定位属性有三种,分别是注意事项、相对定位、固定定位。 position: absolute; position: relati…

    2025年3月10日 编程技术
    200
  • CSS实现波浪移动

    这次给大家带来CSS实现波浪移动,CSS实现波浪移动的注意事项有哪些,下面就是实战案例,一起来看一下。 在某些页面上常常看到波浪的效果,虽然只有装饰的作用,但是却让页面看上去更生动了,同时某些情况下也能起到注意事项的作用,而波浪的形式却比普…

    2025年3月10日
    200
  • CSS3的calc() 方法怎么使用

    这次给大家带来CSS3的calc() 方法怎么使用,CSS3的calc()方法使用的有哪些,下面就是实战案例,一起来看一下。 下面一段代码给大家介绍css3中的calc()方法,具体内容如下所示: 登录后复制 [Ctrl+A 全部选择 提示…

    编程技术 2025年3月10日
    200

发表回复

登录后才能评论