视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
详谈css样式初始化
2020-11-27 18:49:12 责编:小采
文档

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

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

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

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

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

--------------------------------------------------------------------------------------------------常用的标签-----------------------------------------------------------------------------------------------------------------------------

  1. body标签:默认margin:8px;

  2. dl标签,p标签:默认margin-top:1em;margin-bottom:1em;

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

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

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

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

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

  8. legend标签:默认padding-left:2px;padding-right:2px;

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

  10. textarea标签:默认padding:2px;

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

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

  13. 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;
}
<!--
 
 一般设置字体大小12px,字体行高为1.5倍行距,字体样式为‘微软雅黑’或者‘宋体’
 字体颜色由网站风格决定
-->

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

table {
 border-collapse:collapse;
 border-spacing:0;
}
<!--
 默认:border-collapse:separate;//设置单元格边框是否合并
 border-spacing:2px;//相邻单元格边框间的距离
-->

4、消除字体风格

i,em{
 font-style:normal; 
}
<!--
 默认是斜体(italic)
-->
b,strong{
 font-weight:normal; 
}
<!--
 默认是粗体(bold)
-->

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

ul,ol{
 list-style:none; 
}
<!--
 默认是:initial(默认值)
-->

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

a{
 text-decoration:none;
 color:inherit; 
}
<!--
 text-decoration:默认是underline(下划线)
 color:默认是-webkit-link;颜色值为#00e;
-->

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

img{
 border:none;
 verticla-align:middle; 
}
<!--
 border:ie默认有边框
 verticla-align:默认是baseline(基线)
-->

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

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

jest测试react native组件的步奏是什么

javascript的隐式调用详解

React组件refs该怎么使用

下载本文
显示全文
专题