请编写一个外部样式表文件图书介绍网站
时间: 2024-05-08 22:19:47 浏览: 25
好的,下面是一个简单的外部样式表文件,用于图书介绍网站的设计。
```css
/* 定义全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
/* 定义header样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* 定义导航样式 */
nav {
background-color: #444;
color: #fff;
padding: 10px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background-color: #555;
}
/* 定义主要内容样式 */
section {
margin: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
/* 定义footer样式 */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* 定义表格样式 */
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
color: #333;
}
/* 定义表单样式 */
form {
padding: 10px;
margin: 20px;
background-color: #fff;
border: 1px solid #ddd;
width: 50%;
}
label {
display: block;
margin-bottom: 10px;
}
input[type=text], textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type=submit] {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
input[type=submit]:hover {
background-color: #555;
}
```
以上是一个比较简单的外部样式表文件,你可以在编写网页时将它链接到你的HTML文件中,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>图书介绍网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>图书介绍网站</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">分类</a>
<a href="#">购物车</a>
<a href="#">我的账户</a>
</nav>
<section>
<h2>最新图书</h2>
<table>
<tr>
<th>图书名称</th>
<th>作者</th>
<th>价格</th>
</tr>
<tr>
<td>JavaScript高级程序设计</td>
<td>Nicholas C. Zakas</td>
<td>¥89.00</td>
</tr>
<tr>
<td>CSS揭秘</td>
<td>Lea Verou</td>
<td>¥79.00</td>
</tr>
<tr>
<td>精通CSS</td>
<td>Eric A. Meyer</td>
<td>¥89.00</td>
</tr>
</table>
</section>
<footer>
<p>版权所有 © 2021 图书介绍网站</p>
</footer>
</body>
</html>
```
在HTML文件中,你需要使用 `link` 标签将样式表文件链接进来。这里我们将样式表文件命名为 `style.css` ,在 `head` 标签中使用 `link` 标签将其链接进来。
注意到我们在样式表文件中使用了一些全局样式和针对特定元素的样式,例如 `body`,`header`, `nav`,`section` 和 `footer` 等,这些样式可以控制整个页面的外观。
我们还可以为不同类型的元素定义其他样式,例如表格和表单。
希望这能帮助你编写一个漂亮、易于操作的网站。如果你还有任何问题,欢迎向我提问!