入門級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頁面中都違反了此原則。