從頭開始建立第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>
試一試»閱讀更多
了解更多關於我們的CSS CSS教程 。