WEB标准之CSS 打造自己的reset.css

下面是详细讲解“WEB标准之CSS 打造自己的reset.css”的完整攻略：

什么是reset.css

reset.css是一种技术，它的作用是将所有HTML标签的样式都重置为浏览器默认的样式，避免不同浏览器之间对同一HTML标签样式的差异。

为什么需要reset.css

不同的浏览器对同一HTML标签的默认样式可能不同，例如IE与Chrome对于h1标签的默认样式就存在区别。当我们编写网页的时候，如果不进行reset，会导致页面在不同浏览器中显示不一致。因此，我们需要重置页面中所有HTML标签的默认样式，以便于我们更好地样式化页面元素。

如何编写reset.css

下面是自己实现reset.css的步骤：

1. 新建一个reset.css文件，并将文件连接到HTML页面中。

<link rel="stylesheet" href="reset.css">

1. 重置所有HTML标签的默认样式。

/* reset.css */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/* 去除链接的下划线 */
a{text-decoration:none;}

1. 完成后保存reset.css文件并连接到HTML页面中。

<link rel="stylesheet" href="reset.css">

示例说明

示例1：设置所有HTML标签的默认样式

在示例中，我们对所有HTML标签的默认样式进行了重置，以保证页面元素在不同浏览器中的样式显示更加统一。

/* reset.css */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}

示例2：去除链接的下划线

在示例中，我们去除了链接的下划线，使得页面中的链接更加美观。

/* reset.css */
a{text-decoration:none;}

总结

上文介绍了如何通过编写reset.css来重置HTML标签的默认样式，使得页面在不同浏览器中的样式显示更加统一。为了达到更好的效果，我们应该仔细研究不同浏览器中的默认样式，针对性编写reset.css。