通用CSS样式表模版

每次设计一个新的网站，我们都要写一个新的CSS样式表，而当中的内容有很多是跟以往的设计类似，甚至一样，像是blockqoute, <h1>至<h6>等设定。因此，我一直想要整理出一个通用的CSS样式表模版(Master Stylesheet)，里面包含一些最基本最常用的CSS设定。当开始设计一个新网站的时候，我们首先载入这个模版，就能马上完成了基本的设计，接下来，只要针对这个网站进行细节的设计，如果模版的设定不适合新网站，可以在新网站的CSS文件重写，CSS会自动覆盖模版的设定。

假设我们把模版命名为master.css，而网站的CSS文件为style.css，那我们可以在style.css开头加入以下语句，即可将模版导入：

@import "master.css";

现在的问题是这个模版要怎么写呢？最近看到了Kyle写的一篇：Master Stylesheet: The Most Useful CSS Technique，是我见过最完整的Master Stylesheet，很多的细节都被考虑到了，直接就能使用。我唯一增加的一段程式码就是在Andrew那里看到的用于重设浏览器设定：

* {
	padding:0;
	margin:0;
}

以下是完整的master.css文件：

/***** Browser Settings *****/
* {
	padding:0;
	margin:0;
}
/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}

h3 {
font-size:1em;
font-weight:bold;
}

/***** Common Formatting *****/

p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}

ul, ol {
padding:0 0 1.25em 2.5em;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}

textarea {
width:100%;
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}

table tr td {
padding:2px;
}

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }

.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }

.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }

.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }

.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

我准备以此作为第一个版本，未来学到新的技巧，再加入，持续强化它。

另外，这里还有一篇关于Master Stylesheet的教学，有兴趣的朋友请点这里。