在运用 CSS 进行界面样式设计的时候需要先将浏览器内置的默认 CSS 样式给清除一下, 那么如何清除默认 CSS 样式? 下面我们来看一下 CSS 清除默认样式的方法.
不同的浏览器默认的样式可能不尽相同, 所以开发时的第一件事可能就是如何把它们统一. 如果没清除默认的 CSS 样式往往会出现浏览器之间的页面差异.
每次新开发网站或新网页时候通过初始化 CSS 样式的属性, 为我们将用到的 CSS 或 html 标签更加方便准确, 使得我们开发网页内容时更加方便简洁, 同时减少 CSS 代码量, 节约网页下载时间.
通常有以下几句就够了:
- *{
- margin:0;padding:0
- }
- li{
- list-style:none
- }
- img{
- vertical-align:top;border:none
- }
如果你想写全也可以:
1, 清除内外边距
- body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
- dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
- pre, /* text formatting elements 文本格式元素 */
- fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
- th, td { /* table elements 表格元素 */
- margin: 0;
- padding: 0;
- }
2, 设置默认字体
- body,
- button, input, select, textarea { /* for IE */
- /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示, 使得在任何编码下都无问题 */
- }
- h1 {
- font-size: 18px; /* 18px / 12px = 1.5 */
- }
- h2 {
- font-size: 16px;
- }
- h3 {
- font-size: 14px;
- }
- h4, h5, h6 {
- font-size: 100%;
- }
- address, cite, dfn, em, var {
- font-style: normal;
- } /* 将斜体扶正 */
- code, kbd, pre, samp, tt {
- font-family: "Courier New", Courier, monospace;
- } /* 统一等宽字体 */
- small {
- font-size: 12px;
- } /* 小于 12px 的中文很难阅读, 让 small 正常化 */
3, 重置列表元素
ul, ol { list-style: none; }
4, 重置文本格式元素
- a {
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
- abbr[title], acronym[title] {
- /* 注: 1.ie6 不支持 abbr; 2. 这里用了属性选择符, ie6 下无效果 */
- border-bottom: 1px dotted;
- cursor: help;
- }
- q:before, q:after {
- content: '';
- }
5, 重置表单元素
- legend { color: #000; } /* for ie6 */
- fieldset, img { border: none; } /* img 搭车: 让链接里的 img 无边框 */
- /* 注: optgroup 无法扶正 */
- button, input, select, textarea {
- font-size: 100%; /* 使得表单元素在 IE 下能继承字体大小 */
- }
6, 重置表格元素
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
7, 重置 hr
- hr {
- border: none;
- height: 1px;
- }
来源: http://www.css88.com/qa/css3/12641.html