网站建设

从头开始建立第II部分网站：添加样式（CSS）。

我们将要做什么

在本章中，我们将：

创建该网站的CSS样式表
添加一个链接样式表在我们的网页

创建CSS样式表

在demoweb文件夹中，创建一个名为的site.css一个新的文件。

把CSS文件中的以下代码：

的site.css

body {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 16px;
    background-color: dimgrey;
    color: #696969;
    padding: 3px;
}

#main {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #ffffff;
    border-radius: 0 0 5px 5px;
}

h1 {
    font-family: Georgia, serif;
    border-bottom: 3px solid #cc9900;
    color: #996600;
    font-size: 30px;
}

上面的CSS文件定义要用于样式：

在HTML body元素的<body>
ID为HTML元素=“主”
在HTML标题元素的<h1>

编辑主页

在demoweb文件夹，编辑index.html文件。

更改文件，下面的内容：

的index.html

<!DOCTYPE html>
<html>

<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>

<body>

<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>

<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and Databases)</p>
</div>

</body>
</html>

试一试»

上面的主页，是从以前的章节中的主页的副本。

我们增加了一个链接到一个样式表和一个<DIV ID =“主”>元素来定义内容“部分”。

这些更改标记为红色。

编辑关于页面

要完成你的工作，做about.html同样的变化。

1.添加一个链接样式表。

2.添加<DIV ID =“主”>元素。

about.html

<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>

<body>

<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>

</body>
</html>