html编写图书具体介绍,用外界样式表
时间: 2023-07-12 12:45:27 浏览: 103
当我们使用外部样式表来设置图书介绍页面的样式时,需要在 HTML 文件中添加一个 `<link>` 标签来引用外部样式表文件。具体步骤如下:
1. 创建一个 CSS 文件,例如 `style.css`,并在其中添加需要的样式规则。例如,可以设置标题的字体颜色、段落的行高、图片的边框等。
2. 在 HTML 文件的 `<head>` 标签内添加一个 `<link>` 标签来引用 CSS 文件。例如,可以使用下面的代码:
```html
<head>
<title>图书介绍页面</title>
<link rel="stylesheet" href="style.css">
</head>
```
3. 在 HTML 文件的 `<body>` 标签内添加页面内容,包括书籍封面、书名、作者、出版日期、ISBN 码、简介等信息。可以使用 HTML 标签来定义页面元素,例如 `<img>`、`<h1>`、`<p>` 等。在 HTML 标签中可以使用 CSS 类名或 ID 来应用样式规则。例如,可以使用下面的代码:
```html
<body>
<img id="book-cover" src="book.jpg" alt="书籍封面">
<h1 class="book-title">《JavaScript 高级程序设计》</h1>
<h2 class="book-author">作者:Nicholas C. Zakas</h2>
<p class="book-date">出版日期:2013年9月</p>
<p class="book-isbn">ISBN 码:978-7-121-20759-0</p>
<p class="book-intro">简介:本书全面、深入地介绍了 JavaScript 的核心概念和技术,包括面向对象编程、函数式编程、DOM、BOM、Ajax、JSON、Canvas 等。适合有一定 JavaScript 基础的读者阅读。</p>
<a href="https://book.douban.com/subject/10546125/">查看详情</a>
</body>
```
4. 在 CSS 文件中添加相应的样式规则。例如,可以使用下面的代码:
```css
#book-cover {
width: 200px;
height: 300px;
border: 1px solid black;
}
.book-title {
font-size: 24px;
color: blue;
}
.book-author {
font-size: 18px;
color: green;
}
.book-date,
.book-isbn {
font-size: 14px;
color: gray;
}
.book-intro {
line-height: 1.5;
}
```
这样,我们就可以使用外部样式表来设置图书介绍页面的样式了。同时,通过将样式规则和页面内容分离开来,我们可以更方便地管理和修改样式。
阅读全文