编写全局样式

课后整理 2021-2-25

使用Dreamweaver新建文本文件,保存为styles/reset.css,在该样式表文件中将定义全局样式,重置网页标签基本样式。详细代码如下:

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}
body, button, input, select, textarea {
    font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
address, cite, dfn, em, var {
    font-style: normal;
}
code, kbd, pre, samp {
    font-family: courier new, courier, monospace;
}
small {
    font-size: 12px;
}
ul, ol {
    list-style: none;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
sup {
    vertical-align: text-top;
}
sub {
    vertical-align: text-bottom;
}
legend {
    color: #000;
}
fieldset, img {
    border: 0;
}
button, input, select, textarea {
    font-size: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.clear {
    clear: both;
    float: none;
    height: 0;
    overflow: hidden;
}
html .hide {
    display: none;
}

首先,使用元素标签将每个元素的margin和padding属性都设置为0。这样做的好处是,可以让页面不受到不同浏览器默认设置的页边距和字边距的影响。

然后,设置标签的字体颜色,字号大小等,这样可以规范整个网站的样式风格。

最后,设置其他元素的特定样式。读者可自行查阅CSS手册,了解每个属性的基本用法。关于重置样式,读者也可以参考Eric Meyer的重置样式表和YUI的重置样式表。