简洁的css reset
作者:neesoo 日期:2009-11-17
之前一直是用*{margin:0;padding:0;},很多网友都说这样写不好,虽说页面最终呈现还是不错的,也没发现什么问题,不过还是要考虑标准,任何事情,一些常规的还是会被认为是宗师级的,一些抛开常规的也是对的,但不一定权威。
之前有看到一网友自己修改的CSS Reset。感觉挺不错的。以下是那位网友的CSS Reset:
------------------------------------------------------------------------------------------------------------------
yui的css reset很好用,不过对于我来说显得过于臃肿,许多标签都是不常用的,加以修改就可以生成一个精简的属于自己的css reset。
先看yui的css reset
/*归零*/
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,图片边框归零*/
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对齐方式为左对齐*/
caption, th { text-align:left; }
/*统一H标签文字大小,取消加粗效果*/
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
/*取消q标签前后的引号*/
q:before, q:after { content:''; }
/*取消缩写标签的虚线下划线*/
abbr, acronym { border:0; }
既然我们要拥有自己的reset,那么应该根据自己的需求来定义。
首先我们不需要用到blockquote标签,这个标签是引用的作用,默认是会加一个margin属性,达到缩进效果,这个标签我用不到,所以去掉了。
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, th, td { margin:0; padding:0; }
table的reset很好用,必加。
table { border-collapse:collapse; border-spacing:0; }
fieldset的边框是他的特色,我觉得不需要归零,所以去掉了。
img { border:0; }
strong,th默认都是粗体,em是斜体,我觉得没必要统一设置,去掉一些不常用的标签。
caption, cite, code, { font-style:normal; font-weight:normal; }
取消列表样式,必加。
ol, ul { list-style:none; }
关于caption,th的对齐方式,我觉得没必要统一,居中挺好的。
统一h标签为100%,相当于16px,我觉得没必要,取消加粗,也没必要,我觉得H就应该加粗,特殊情况可以后面设置。
q标签表示的是引用,前后会有个引号,不常用的标签。
abbr和acronym标签的语意是缩写,在FF下会有个虚线下划线,html5不支持acronym,留个abbr就够了。
abbr{ border:0; }
这样就生成了自己的css reset
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
img,abbr { border:0; }
caption, cite, code, { font-style:normal; font-weight:normal; }
ol, ul { list-style:none; }
-----------------------------------------------------------------------------------------------------------------
根据这些书写,我觉得还是根据自己的情况,根据自己的设计图来归划好能用到的标签就可以了。这样就不会死板的记下特定的CSS Reset了。
赛通网在今天上午刚改了CSS Reset.去掉了*{margin:0;padding:0;}的写法。改成:
/* CSS Reset */
body,dl,dt,dd,ul,ol,li,strong,p,em,h1,h2,h3,h4,h5,h6,form,input,select,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
body{font:13px Arial,"宋体";color:#000;text-align:center;}
select,input{font-size:12px;}
img{vertical-align:middle;border:0;}
ol,ul{list-style:none;}
a{color:#444;font-size:12px;text-decoration:none;}
a:hover{color:#f80;font-size:12px;text-decoration:underline;}
其实我不想帮你找... (日志真乱 -_-#.. )
免责说明:
本站提供的文件均通过卡巴斯基最新版扫描无毒,请放心使用
本站所发表内容或来自互联网,或本人原创,只为学习交流之用,不存在任何商业用途
遵循创作共同协议,您可自由复制等方式传播本作品。
如果本站内容不慎侵犯了您的版权,请及时联系我们,我们将尽快处理。
遵循创作共同协议,您可自由复制,发行,广播或通过信息网络传播本作品。
但须遵守下列条件:
◎ 署名. 您必须按照作者或者许可人指定的方对作品进行署名。
◎ 非商业性使用. 您不得将该作品用于商业目的。
◎ 禁止演绎. 您不得修改、转换或者以本作品为基础进行创作。
任何再使用或者发行,您都必须向他人清楚地展示本作品使用的许可协议条款。
如果得到著作权人的许可,您可以不受任何这些条件的限制。
本站提供的文件均通过卡巴斯基最新版扫描无毒,请放心使用
本站所发表内容或来自互联网,或本人原创,只为学习交流之用,不存在任何商业用途
遵循创作共同协议,您可自由复制等方式传播本作品。
如果本站内容不慎侵犯了您的版权,请及时联系我们,我们将尽快处理。
遵循创作共同协议,您可自由复制,发行,广播或通过信息网络传播本作品。
但须遵守下列条件:
◎ 署名. 您必须按照作者或者许可人指定的方对作品进行署名。
◎ 非商业性使用. 您不得将该作品用于商业目的。
◎ 禁止演绎. 您不得修改、转换或者以本作品为基础进行创作。
任何再使用或者发行,您都必须向他人清楚地展示本作品使用的许可协议条款。
如果得到著作权人的许可,您可以不受任何这些条件的限制。
发表评论
上一篇
下一篇

如果您喜欢本篇文章,也许您也会喜欢下面推荐的文章!
文章来自:
Tags: