对比总结YUI-reset.css和Alice-reset.css

  每每有新项目,第一步就是应当使用一个reset.css来重置样式。滥用不如不用,直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css,并且要明白每一条reset都是用来做什么的。

  1 /* 1.默认色彩 */
  2 /* YUI2 */
  3 html {
  4     /* 不要在reset中设置背景色和字体颜色 */
  5     color: #000;
  6     background: #FFF;
  7 }
  8 
  9 /* 2.边距 */
 10 /* YUI2 */
 11 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
 12     margin: 0;
 13     padding: 0;
 14 }
 15 /* Alice */
 16 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td,
 17 hr, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {     /* HTML5 */
 18     margin: 0;
 19     padding: 0;
 20 }
 21 
 22 /* 3.边框 */
 23 /* YUI2 and Alice */
 24 fieldset, img {    /* 去除默认边框 */
 25     border: 0;
 26 }
 27 abbr, acronym {    /* 去掉 Firefox/Safari下此元素的边框  */
 28     border: 0;
 29     font-variant: normal;
 30 }
 31 
 32 /* 4.外边框(outline) */
 33 /* update - 务必重新定义获取焦点后的样式! */
 34 /* remember to define focus styles! */
 35 :focus {
 36     outline: 0;
 37 }
 38 
 39 /* 5.字体 */
 40 /* 5.1语义 */
 41 /* YUI2 */
 42 address, caption, cite, code, dfn, em, strong, th, var, optgroup {
 43     font-style: inherit;
 44     font-weight: inherit;
 45 }
 46 /* Alice */
 47 address, caption, cite, code, dfn, em, th, var {
 48     font-style: normal;    /* 可自定义之 */
 49     font-weight: 500;    /* 可自定义之 */
 50 }
 51 
 52 /* 5.2字体 - 标题 */
 53 /* YUI2 */
 54 h1, h2, h3, h4, h5, h6 {
 55     font-size: 100%;
 56     font-weight: normal;
 57 }
 58 /* Alice - 来自yahoo, 让标题都自定义, 适应多个系统应用 */
 59 h1,h2,h3,h4,h5,h6 {
 60     font-size:100%;
 61     font-weight:500;    /* 可自定义之 */
 62 }
 63 
 64 /* 5.3字体 - 表单 */
 65 /* YUI2 */
 66 input, button, textarea, select, optgroup, option {    /* 解决表单元素不继承父级 font的问题,但对IE6/7不起作用 */
 67     font-family: inherit;
 68     font-size: inherit;
 69     font-style: inherit;
 70     font-weight: inherit;
 71 }
 72 input, button, textarea, select {
 73     *font-size: 100%;
 74 }
 75 
 76 /* Alice */
 77 body, button, input, select, textarea {/* 解决表单元素不继承父级 font的问题,直接自定义表单字体以解决兼容性问题 */
 78     font: 12px/1.5 tahoma, arial, \5b8b\4f53;
 79 }
 80 button, input, select, textarea {
 81     font-size: 100%;
 82 }
 83 
 84 /* 6.行高(line-height) */
 85 /* Alice */
 86 body, button, input, select, textarea {     /* 行高默认所有元素都会继承的 */
 87     /* IE6下,行高为1时,中文字顶部会被削掉几像素,字体加粗时尤为明显。切记不要置为1 */
 88     font: 12px/1.5 tahoma, arial, \5b8b\4f53;    
 89 }
 90 
 91 /* 7.列表 */
 92 /* YUI2 */
 93 li {
 94     list-style: none;
 95 }
 96 /* Alice */
 97 /* 去掉列表前的标识, li 会继承 */
 98 ol,ul {
 99     list-style:none;
100 }
101 
102 /* 8.表格 */
103 /* YUI2 and Alice */
104 /* 去掉各Table/cell的边距并让其边重合 */
105 table {
106     border-collapse: collapse;
107     border-spacing: 0;
108 }
109 /* 对齐是排版最重要的因素, 别让什么都居中 */
110 caption, th {
111     text-align: left;
112 }
113 
114 /* 9.上下标 */
115 /* YUI2 */
116 sup, sub {
117     vertical-align: baseline;    /* 建议加上font-size: 100%;让重置更加 */
118 }
119 /* Alice - 统一上标和下标 */
120 sub, sup {     /* 可自定义 */
121     font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
122 }
123 sup {top: -0.5em;}
124 sub {bottom: -0.25em;}
125 
126 /* 10.插入和删除 */
127 /* YUI2 */
128 del, ins { /* 直接清除了ins的下划线和del的删除线 */
129     text-decoration: none;
130 }
131 /* Alice */
132 /* 默认不显示下划线,保持页面简洁 */
133 ins, a {
134     text-decoration:none;
135 }
136 /* 一致的 del 样式 */
137 del {
138     text-decoration:line-through;
139 }
140 
141 /* 11.引用元素的引号 */
142 /* YUI2 and Alice */
143 q:before, q:after {
144     content: '';
145 }
146 /* Eric - 建议 */
147 blockquote, q {
148     quotes: none;
149 }
150 blockquote:before, blockquote:after,
151 q:before, q:after {
152     content: '';
153     content: none;
154 }
155 
156 /* 12.链接 */
157 /* YUI2与Alice都没有设定 */
158 a {     /* 建议去掉下划线,这种方式过于粗糙 */
159     text-decoration: none;
160 }
161 /* 建议使用这种方式去除链接下划线 */
162 :link, :visited {
163     text-decoration: none;
164 }
165 
166 /* 13.其它 */
167 /* Alice */
168 /* ie6 7 8(q) bug 显示为行内表现 */
169 iframe{
170     display:block;
171 }

 

posted @ 2013-01-04 18:24  金广国  阅读(692)  评论(0编辑  收藏  举报