CSS 001HTML模板和CSS基准样式

转发 HTML模板和CSS基准样式-1

转发 HTML模板和CSS基准样式-2

转发 HTML模板和CSS基准样式-3

W3C网站

很多人喜欢用Dreamweaver，但是我的习惯是直接手写代码。虽然那样看上去很原始，但是能够做到对网页最精确的控制，并且减少了不必要的冗余代码。

手写代码最麻烦的地方在于，每次都必须写一些重复性的代码，比如和这样的标签。所以，这两天我就在做一个模板，将那些重复性的代码都事先写好，以后写网页的时候，只要直接写内容部分就可以了。

下面就是我制作模板的过程，也顺便整理了一下相关的HTML和CSS知识。我想对需要自己设计网页的朋友，应该都是有用的。

因为内容比较多，需要分三次才能贴完。今天是第一部分"HTML模板"。

一个标准的网页模板，应该看上去是下面这样的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>HTML Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <style type="text/css">
        @import url(style.css );
    </style>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="alternate" type="application/atom+xml" title="Atom" href="" />
</head>
<body>
    <div name="header"></div>
    <div name="container"></div>
    <div name="footer"></div>
</body>
</html>

它分成这样几个部分：

Doctype部分

这个部分声明网页的类型。我使用的是HTML 4.01 Strict。

1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

除此还可以选择HTML 4.01 Transitional、XHTML 1.0 Strict和XHTML 1.0 Transitional。相应的DOCTYPE分别为

1
2
3
4
5
6
7
8


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这里需要注意，如果选择xhtml类型，那么第一行必须加入xml类型说明，而且就是根元素，它后面必须注明文档的命名空间，要写成下面这样：

1
2
3
4


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

我个人还是推荐使用HTML 4，因为xHTML取消了一些标签，用起来不是很灵活。根据我的观察，一些大网站，比如Google和Yahoo!，主页都是使用HTML 4。更多DocTYPE类型，请访问W3C网站。

TITLE部分

这个部分最好写成"网站名称 - 网页描述"，或者"网页描述 - 网站名称"，有利于搜索引擎收入你的网页。

META部分

这个部分对网页进行说明。

第一行是必须要有的，对网页使用的语言编码进行说明。我在这里使用了UTF-8编码。

1

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

第二行对网页内容进行描述，第三行提供了网页的关键词。它们是选择性的，不一定要填写。

1
2


<meta name="description" content="" />
<meta name="keywords" content="" />

你还可以在这里加入更多的说明，比如网页生成的时间、作者、所用的软件、版权说明等等。

1
2
3
4


<meta name="date" content="" />
<meta name="author" content="" />
<meta name="generator" content="" />
<meta name="copyright" content="" />

Style部分

这个部分加入样式表。

我使用了import命令，此外还可以使用标签，效果是一样的。

1

<link rel="stylesheet" href="" type="text/css" />

Favicon部分

这一行是加入网页的图标。

1

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Feed部分

这一行是加入网页的Feed。

1

<link rel="alternate" type="application/atom+xml" title="Atom" href="" />

type类型除了上面的"application/atom+xml"，还可以写成"application/rss+xml"，这根据你的Feed格式而定。

上面只是最基本的网页模板，还缺少起码的CSS设置和布局设置，我将在后面的文章中介绍。并且在全文结尾处，我会提供完整的模板下载。

今天，我要写的是CSS文件的模块化。

如果你看过CSS文件，就会知道很难看懂它。每个CSS文件有许多行，每一行就是一条命令，可以放在文件的任何位置，都能够同样生效，而且后面的行随时可以覆盖前面的行的设置。所以，阅读CSS文件就好像猜谜一样，必须努力将不同的线索拼起来，令人非常痛苦，这直接导致了日后难于维护和修改。

考虑到这一点，很早就有人提出了CSS文件的模块化，就是将相关的设置都放在一起。一般来说，CSS中的设置可以分成下面几个模块：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


* typography（字体）

* colour（颜色）

* link（链接）

* forms（表单）

* layout（布局）

* navigation（导航）

这些模块当然不是固定不变的，你可以根据自己的需要进行增删。有时候，单单一个模块中就有许多行，这时候，你就可以把它独立出来，作为一个单独的CSS子文件，然后在父文件中进行调用。

比如，昨天的HTML模板中，调用CSS文件是这样写的：

1

@import url(style.css);

在这里，style.css就是父文件，然后我们在其中调用子文件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* typography styles */
@import url("typo.css");

/* form elements */
@import url("forms.css");

/* main layout */
@import url("layout.css");

/* navigation */
@import url("horizontal-nav.css");

/* colour scheme */
@import url("skin.css");

除了上面这些模块以外，CSS中有些设置是全局性的，主要用于覆盖浏览器的默认样式，这被称作CSS基准样式。我们可以把基准样式单独做成一个base.css，将它也加入主样式表。

1
2


/* basic styling */
@import url("base.css");

网上有很多别人已经写好的CSS基准样式，我下面采用的是Crucial Web Hosting提供的一份，我觉得写得比较规范，内容也很充分。

  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
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152


/***** 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;
}

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; }

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

.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; }

有了HTML模板和CSS基准样式以后，最后就剩下一个页面布局的问题了，这将是我明天要写的内容。

今天是这个连载的最后一部分，内容关于网页的布局。

从布局上看，世界上所有的网页，大多由三个部分构成：

1
2
3
4
5


* Header（头部）

* Footer（尾部）

* Content（内容区）

一般来说，Header总是在网页的上方，Footer总是在网页的下方，Content是中间的一大块。在 Content中又可以分成很多栏，从一栏式到三栏式都很常见。

我们的目的是通过CSS文件，实现栏位和布局的自动调整。网上有很多现成的布局模板，我采用的是Tripoli项目中的布局模板，然后做了一些修改。

它要求的网页代码结构是这样的：

 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


<body class="[layout classes]">
    <div id="container">
        <div id="header">
            <div class="content"><!-- header content --></div>
        </div>

        <div id="content_zone">
            <div id="primary">
                <div class="content"><!-- primary content --></div>
            </div>

            <div id="secondary">
                <div class="content"><!-- secondary content --></div>
            </div>

            <div id="tertiary">
                <div class="content"><!-- tertiary content --></div>
            </div>

        </div>

        <div id="footer">
            <div class="content"><!-- footer content --></div>
        </div>
    </div>
</body>

在body标签下面，直接是一个"container"，所有网页的内容都属于这个容器。然后，container又分成五个部分，分别是：header、primary、secondary、tertiary和footer。primary 是主内容区，secondary是次内容区，tertiary是第三内容区。也就是说，这个模板最多只支持三栏式布局。

另外，请注意，在body标签的后面，class属性是需要你自己设置的。Tripoli默认提供9种布局，用l1-l9来表示。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


* l1：2栏式 66% - 33%

* l2：2栏式 33% - 66%

* l3：2栏式 50% - 50%

* l4：3栏式 33% - 33% - 33%

* l5：3栏式 16% - 66% - 16%

* l6：3栏式 25% - 50% - 25%

* l7: 3栏式 66% - 16% - 16%

* l8: 3栏式 50% - 25% - 25%

* l9：3栏式 25% - 25% - 50%

你选择一种，将它填入class属性就可以，比如class=“l2”。

class属性值中还可以设置一个equal类，这将使得各个栏位的垂直长度保持相等，比如class=“l2 equal”。

其他设置就没有了，是不是很简单？

最后，就是这一套完整的模板下载：html_template.zip（3.4KB）。

文章目录

See Also

最近文章

分类

标签

其它