网页设计:重置CSS样式表

网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表。这样,“抹掉”这些默认样式表成了首要问题,也就有了CSS样式表重置一说,目前用的最多的,也是自己现在正在用的方法是,添加以下代码:

第一种方式

1
* {margin:0px; padding:0px;}

现在众多的设计师发现,这行代码虽然简单,但却让网页解析太慢,呵呵,当然了,自己是业余的,不用太在意。
于是出现了几种CSS重置方法:

第二种方式

NETTUTS上的 Jeffrey Way写了篇文章Weekend Quick Tip: Create Your Own Simple Reset.css File
释出自己用来重置CSS样式表的方法

1
2
3
4
5
6
7
8
9
10
11
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body{line-height: 1;font-size: 88% /* Decide for yourself if you want to include this. */;}
h1, h2, h3, h4, h5, h6{font-size: 100%;padding: .6em 0;margin: 0 15px;}
ul, ol{list-style: none;}
a{color: black;text-decoration: none;}
a:hover
{text-decoration: underline;}
.floatLeft{float: left;padding: .5em .5em .5em 0;}
.floatRight{float: right;padding: .5em 0 .5em .5em;}

这个方法适用于大多数的网页设计。

第三种方式

一部分人追求彻底抹去浏览器影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;}

第四种方式

还有今天sofish提到的Yahoo的YUI提供的CSS重置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
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网页设计技巧,第一位却一定是这个。

Related Posts

You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

14 Responses to “网页设计:重置CSS样式表”

  1. 浮黑 says:

    很好玩……这个时间是什么?留言时间么?

    Reply

    page Reply:

    这些同学的blog更新时间。

    Reply

  2. 老n says:

    好玩~~~

    Reply

    page Reply:

    都回去加上吧,这个就要看谁的blog更新快,排名才靠前了。

    Reply

  3. 诡谲 says:

    很多朋友都有使用这个插件的,比如ArtHack.Org

    Reply

    page Reply:

    闻道有先后 术业有专攻嘛

    Reply

  4. 抽筋儿 says:

    我不会,我啥都不会,我找墙角画圈圈去。

    Reply

    page Reply:

    你也不会?你不是RSS专题么?

    Reply

    抽筋儿 Reply:

    呵呵,我一时兴起占了这么个坑,俺专业跟网络啊代码啊啥的都没关的。

    Reply

    page Reply:

    ^_^咱们一样

  5. yacca says:

    我现在用thinkagain的hotfriendsclouds也不错的,活跃友链字体显示的大个些

    Reply

    page Reply:

    我觉得,现在这个google ajax太慢,只有不拖累网页加载,就是好的。

    Reply

    美丽星点 Reply:

    google ajax是很慢,前几天我用了一个google ajax的库,网站速度明显降了许多

    Reply

  6. 莫邪 says:

    想转一下你的这篇文章~~

    Reply

Leave a Reply