彭家二少

2022年4月29日星期五悦读/

CSS初始化样式应该怎么写？

每次我在制作网页模板的时候，都会对网页的css进行必要的初始化。

初始化的字面意思就是给变量赋为默认值，CSS样式表的初始化是对浏览器自带样式的重设，(也称为CSS Reset），如果不写，文档就会默认使用浏览器的样式表来显示页面。

为什么要对样式初始化？

下图是chrome浏览器和IE浏览器打开页面看到的效果对比图：

CSS初始化样式应该怎么写？
  1. <div>  
  2.   <h2><a href="/">《古朗月行》</a></h2>  
  3.   <p>李白 〔唐代〕</p>  
  4.   <ul>  
  5.     <li>小时不识月，呼作白玉盘。</li>  
  6.     <li>又疑瑶台镜，飞在青云端。</li>  
  7.   </ul>  
  8.   <a href="/"><img src="libai.jpg" width="200"></a>  
  9. </div>  

正如我们看到的一样，两个不同的浏览器之间，访问页面，在视觉上有很大的差异，并且也很明显。例如诗句的标题h2标签字体粗细不一致，再加上a标签后，链接的颜色也不一致。还有两句诗句用的是ul列表，li列表项前面的实心小黑点大小也不一致。这只是我例举的一小部分，在写CSS样式表的时候，我们还会遇到更多。

所以不同的浏览器默认的样式是不一样的，因此我在写css样式表时，第一件事就是CSS样式初始化，将它们统一起来。目的就是为了让网页在各个浏览器外观保持一致，统一网页的风格和样式。如果没有对CSS初始化，页面上除了有一些差异外，代码量还会增加，网页下载的时间也会长一些。

哪些标签需要初始化呢？

一般需要初始化有img图片标签、列表标签、超链接样式、H1-H6标签、table、等等的样式，本文我总结了平时我在写模板的过程中，常写的初始化后CSS文件或叫CSS模板供大家参考使用，可根据自己实际使用情况进行增减。

CSS初始化样式

  1. * { margin: 0; padding: 0 }  
  2. body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; color: #000; background:#d4ebf1 }  
  3. h1{ font-size:26px}  
  4. h2{ font-size:24px}  
  5. h3{ font-size:22px}  
  6. h4{ font-size:20px}  
  7. h5{ font-size:18px}  
  8. h6{ font-size:16px}  
  9. img{border:0; display: block}  
  10. li { list-style: none; }  
  11. a { text-decoration: none; color: #333; }  
  12. a:hover { color: #f00; text-decoration:underline}  
  1. * { margin: 0; padding: 0; }  

用通配符*将所有元素的外边距和内边距都清除掉。

CSS初始化样式应该怎么写？

网上有说这种方式耗资源。耗不耗资源我体会不到，但是简单那是肯定的，比起挨个写标签，我更愿意用这句“简单粗暴”的方式来替代。

  1. body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; color: #000; background:#d4ebf1 }  

设置字体大小为15像素，字体为雅黑，字体颜色为黑色，文档背景颜色为天蓝色

CSS初始化样式应该怎么写？

看上图字体大小虽然都设置了15px，但是h标签写的字体并没有改变大小，所以h标签字体大小要再单独定义。

  1. h1{ font-size:26px}  
  2. h2{ font-size:24px}  
  3. h3{ font-size:22px}  
  4. h4{ font-size:20px}  
  5. h5{ font-size:18px}  
  6. h6{ font-size:16px}  

h1~h6依次设置字体大小，也不用都设置，根据实际需要来设置，比如文档就只有h1~h4，那就只设置这4个标签就可以了。

  1. img { border: 0; display: block }  

默认img标签，有一个1px的边框。border: 0去除1像素的边框，再将img块级化。也就是单独占一行。

  1. li { list-style: none; }  

去除li列表项默认的样式

  1. a { text-decoration: none; color: #333; }  
  2. a:hover { color: #f00; text-decoration:underline}  

a标签中有四个伪类，分别是：

link：设置a对象在未被访问前的样式表属性

visited：设置a对象在其链接地址已被访问过时的样式表属性

hover：设置对象在其鼠标悬停时的样式表属性

active：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性

这里只设置了a标签去掉默认的下划线和一个鼠标悬停的伪类:hover，定义其当鼠标悬停的时候颜色为红色并且有下划线。

以上就是我在做模板的过程中对全站的CSS进行的一次初始化来统一整站样式。最后要说的就是，关于CSS初始化样式这没有什么标准答案，在写的时候一定要根据实际情况来使用和定义。

The End