做好CSS全局定义能够有效的避免不同浏览器下对默认样式表达不同导致的布局差异,减少开发者的返工时间,本文整理了常用的全局定义CSS样式。
说到CSS全局定义,前端老鸟们肯定烂记于心,但是对于很多初入门的同学,大多时候写样式表就直接写选择器样式了。而忽略CSS全局定义的后果就是各种灵异事件的发生,特别是在IE6 IE7下,它们不如chrome、Firefox这类现代浏览器那么智能,结果就是各种换行、各种奇形怪状。
所谓CSS全局定义就是对CSS一些基础的标签进行定义,比如body、div、ul、li等等,首先对其边距、颜色、边框等样式做一个全面的定义,让其听从你的指挥。因为不同浏览器对这些标签默认的样式有不同的表达,所以如果不做全局定义,就会很容易出现奇葩现象。
有一个很典型的现象就是<a></a>标签内<img></img>标签的宽度在IE下要比你想要的要宽,如果不做定义,那么你在做排序布局的时候就很容易乱掉。
一般全局定义代码直接丢在CSS最前面,笔者整理了比较实用的全局定义样式,以飨读者。
- /*
- 常见实用的全局定义CSS样式
- 雅兮网整理,本文地址:https://www.yaxi.net/2016-06-01/1007.html
- */
- /* 全局CSS定义 */
- body { font-family:"Microsoft Yahei"; margin:0 auto; padding:0; font-size:12px; color:#333; }
- div, form, ul, ol, li, span, p, dl, dt, dd { margin:0; padding:0; border:0; }
- img, a img { border:0; margin:0; padding:0; }
- h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-size:12px; }
- ul, ol, li { list-style:none }
- table, td, input { font-size:12px; padding:0; font-family:inherit; }
- img{ vertical-align: top;}
- .clear{clear:both;}
- .nomagin{margin:0;}
- /* 默认链接颜色 */
- a { outline-style:none; color:#333; text-decoration:none }
- a:hover { color:#c00; text-decoration:underline; }
现在代码越来越精简了
看见CSS就头疼
博客主题真漂亮
必须要有一个全局的定义,否则整个网页代码会很乱,而且不利于控制。
@夏日博客: 夏日兄应该是深有体会,建站老鸟
学习了,CSS添加特效,的确很不错的说!
这个好像一般的博客网站都有这个全局CSS,不过有些CSS代码不兼容,这个是最头疼的
@boke112导航: 大多数主题肯定都是会写全局的,但写页面的可不只有WordPress啊,很多时候都是从零开始写的