css学习笔记: 重置默认样式 css reset(2)

作者:好好 来源:好好blog 时间:2009-07-19 14:30:00 

《超越css》一书中建议我们做网站开始重置所有默认样式:

/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}

/* Removes list-style from lists */
ol,ul { list-style:none }

/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }

/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }

/* Removes border from fieldset and img */
fieldset,img { border:0 }

/* Left-aligns text in caption and th */
caption,th { text-align:left }

/* Removes quotation marks from q */
q:before,q:after { content:''}

那我们实际写代码的时候该怎么来css reset呢?
我个人推荐使用(Eric MeyerYUI)的 css reset

Eric Meyer's Reset:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
/* remember to define focus styles! */
:focus {
 outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

YUI:

 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {    
     margin:0;   
     padding:0;   
 } 
 table {  
     border-collapse:collapse;   
     border-spacing:0;   
 } 
 fieldset,img {    
     border:0;   
 } 
 address,caption,cite,code,dfn,em,strong,th,var {  
     font-style:normal;   
     font-weight:normal;   
 } 
 ol,ul {  
     list-style:none;   
 } 
 caption,th {  
     text-align:left;   
 } 
 h1,h2,h3,h4,h5,h6 {  
     font-size:100%;   
     font-weight:normal;   
 } 
 q:before,q:after {  
     content:'';   
 } 
 abbr,acronym { border:0;   
 } 

 

结合他们的css reset写法,再根据自己的实际情况,一定能写出符合自己网站的完美的css reset。

标签:css,reset,重置,样式
0
投稿

猜你喜欢

  • golang图片处理库image基本操作

    2024-04-26 17:32:04
  • Java使用正则表达式验证用户名和密码的方法

    2023-06-13 18:05:56
  • sql server 2012 数据库所有表里查找某字符串的方法

    2024-01-14 16:16:03
  • Python实现发送邮件到自己邮箱

    2023-10-18 17:08:11
  • Python基于正则表达式实现文件内容替换的方法

    2023-08-23 00:14:09
  • Python数据类型之Tuple元组实例详解

    2023-02-17 05:24:01
  • 趣味Python实战练习之自动更换桌面壁纸脚本附源码

    2021-11-03 09:12:33
  • 使用Python进行稳定可靠的文件操作详解

    2022-02-17 04:26:21
  • PHP函数原理理解详谈

    2023-06-04 01:56:59
  • YOLOv5目标检测之anchor设定

    2022-04-23 16:22:10
  • 如何使用Typora+MinIO+Python代码打造舒适协作环境

    2023-11-12 15:12:10
  • Golang实现http文件上传小功能的案例

    2023-07-19 00:55:37
  • 理解生产者消费者模型及在Python编程中的运用实例

    2021-04-07 01:01:59
  • Vue.js中轻松解决v-for执行出错的三个方案

    2024-05-10 14:19:08
  • 用python实现英文字母和相应序数转换的方法

    2023-11-20 13:30:10
  • Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】

    2024-01-18 07:02:59
  • SQL点滴24 监测表的变化

    2011-09-30 11:38:41
  • 解密Python中的描述符(descriptor)

    2023-12-05 08:28:48
  • Golang正整数指定规则排序算法问题分析

    2023-07-12 09:12:03
  • 配置高可用性的MySQL服务器负载均衡群集

    2009-01-04 12:43:00
  • asp之家 网络编程 m.aspxhome.com