入门级PHP Web应用程序开发/HTML和CSS：用户展示
HTML和XHTML是内容标记语言，因此对于Web应用程序来说，它们是内容的载体。这意味着以HTML/XHTML形式提供给Web浏览器的标记在没有任何演示信息的情况下应该看起来相当简单，也就是说，层叠样式表。本章重点介绍如何构建一个简单的网页（不使用PHP）以及如何使用CSS来提高页面的可读性，同时让HTML保持内容。
让我们看一下我们之前向您展示的“Hello, World”示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<p>
Hello, World!
</p>
</body>
</html>
这是一个非常基本的页面。为了使此示例更加实用，让我们添加一些额外的标记
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>
Hello, World! This is an <acronym title="HyperText Markup
Language">HTML</acronym> paragraph.
</p>
<p>
I have some things to tell you:
</p>
<ul>
<li>HTML is the “language of the Web.”</li>
<li>PHP is an excellent server-side language.</li>
<li>CSS makes things look pretty.</li>
<li><em>You want to make efficient use of your time…</em></li>
<li><strong>So, you want to do things correctly.</strong></li>
</ul>
</body>
</html>
以下是此HTML在Firefox 3中的显示方式。如您所见，它看起来相当普通
层叠样式表旨在使修改HTML页面外观的工作变得轻松。让我们稍微更改一下，使页面看起来完全不同；以下内容将直接添加到<title>…</title>行下方，在<head>部分
<style type="text/css">
* {
margin: 0px;
padding: 0px;
background-color: #99ffff;
font-size: 10px;
}
body {
margin-left: 5px;
margin-right: 5px;
}
h1 {
text-align: center;
font-family: "Times New Roman", serif;
text-decoration: underline;
font-weight: bold;
color: #ffffff;
margin-top: 5px;
margin-bottom: 1em;
font-size: 3em;
}
p {
margin-bottom: 0.4em;
border: 1px dotted #000000;
background-color: #ffffff;
}
acronym {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
cursor: help;
}
ul {
margin-left: 2em;
margin-right: 2em;
font-family: "Times New Roman", serif;
border: 1px dashed #000000;
}
li {
margin-left: 2em;
font-size: 1.3em;
}
strong {
font-size: inherit;
font-family: Arial, sans-serif;
}
em {
font-size: inherit;
font-family: Arial, sans-serif;
}
</style>
这样做的目的是告诉Web浏览器以不同的方式装饰文本，具体取决于它在HTML文档中的位置。CSS的格式为
SELECTOR1 SELECTOR2 ... SELECTORn {
property1: value;
property2: value;
...
propertyn: value;
}
其中选择器告诉浏览器我们想要装饰什么，属性和值告诉浏览器我们想要如何装饰它。让我们看一下上面的第一个CSS条目
* {
margin: 0px;
padding: 0px;
background-color: #99ffff;
font-size: 10px;
}
这里的选择器是星号（“*”）。这表示“我希望您将这些格式化规则应用于所有内容”。结果是所有元素都会丢失其默认的边距、填充、背景颜色和字体大小设置。它充当重置Web浏览器默认设置的一种方式。注意测量值是如何指定的 - 作为数字，然后是单位。有多种方法可以将测量值传递给Web浏览器。在本例中，我们使用的测量单位是px，表示像素。
下一段CSS告诉浏览器将一些边距设置应用于<body>标签的内容，即设置左右边距
body {
margin-left: 5px;
margin-right: 5px;
}
同样，我们使用px作为测量单位，表示我们希望左右边距距离浏览器查看区域的边缘（称为视窗）5像素。
CSS的工作方式都一样；在大多数情况下，它也很容易阅读。请注意，这只是非常基本的CSS，它只改变事物的外观。以下是完整的HTML文档现在的样子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello, World!</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
background-color: #99ffff;
font-size: 10px;
}
body {
margin-left: 5px;
margin-right: 5px;
}
h1 {
text-align: center;
font-family: "Times New Roman", serif;
text-decoration: underline;
font-weight: bold;
color: #ffffff;
margin-top: 5px;
margin-bottom: 1em;
font-size: 3em;
}
p {
margin-bottom: 0.4em;
border: 1px dotted #000000;
background-color: #ffffff;
}
acronym {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
cursor: help;
}
ul {
margin-left: 2em;
margin-right: 2em;
font-family: "Times New Roman", serif;
border: 1px dashed #000000;
}
li {
margin-left: 2em;
font-size: 1.3em;
}
strong {
font-size: inherit;
font-family: Arial, sans-serif;
}
em {
font-size: inherit;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>
Hello, World! This is an
<acronym title="HyperText Markup Language">HTML</acronym> paragraph.
</p>
<p>
I have some things to tell you:
</p>
<ul>
<li>HTML is the “language of the Web.”</li>
<li>PHP is an excellent server-side language.</li>
<li>CSS makes things look pretty.</li>
<li><em>You want to make efficient use of your time…</em></li>
<li><strong>So, you want to do things correctly.</strong></li>
</ul>
</body>
</html>
在Web浏览器中
好吧，它并不漂亮，但它说明了这一点：CSS是一种非常强大的机制，因为它允许您控制格式，同时保留页面的内容。
在最新的示例中，我们看到了CSS的功能。但是，它存在一个问题 - 我们将CSS直接包含在网页本身中。如果我们有多个网页，将CSS一次写入并让多个网页使用同一个CSS更有意义。我们可以继续将CSS直接包含在网页中，但如果我们想要更改所有页面的外观，会发生什么呢？我们必须编辑所有页面 - 这将需要大量的工作。
顺便说一下，软件开发最重要的原则之一被称为不要重复自己，或DRY。如果我们有多个页面，将CSS嵌入到每个HTML页面中都违反了此原则。