在HTML的基础上，我们已经搭建起了网页的骨架，但想要让网页变得生动、吸引人，还需要给它穿上一件美丽的外衣。CSS，即层叠样式表，正是用来为网页增添色彩、布局和样式的强大工具。本文将带你走进CSS的世界，通过一系列实用的技巧和示例，教你如何利用CSS来美化网页文本。从标题到段落，再到列表与引用，我们将逐一探索如何通过简单的CSS代码，让你的网页焕发出不一样的光彩。
任务准备
- VsCode开发工具已安装
- 掌握基础的html知识
- 掌握css样式知识
任务描述
- 头部信息：使用
header标签包含标题和简单描述，标题使用了大字体、颜色及下划线。 - 文本段落：多个
p段落展示了常规文本的样式。 - 列表：
ul标签用于展示有序或无序的文本列表。 - 引用：使用
blockquote标签进行引用，并且加上了左边框和斜体效果。 - 高亮文本：通过类选择器
highlight来高亮特定文本。 - 按钮：创建了一个样式化的按钮，配有悬停效果。
- 响应式设计：使用媒体查询根据屏幕大小调整字体大小及内边距。
任务实施
1.新建index.html网页内容如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合文本样式示例</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置字体 */
background-color: #f9f9f9; /* 设置背景颜色 */
color: #333; /* 设置文本颜色 */
line-height: 1.6; /* 设置行高 */
margin: 0;
padding: 20px; /* 页面内边距 */
}
header {
text-align: center; /* 居中对齐 */
margin-bottom: 20px; /* 下外边距 */
}
h1 {
font-size: 2.5em; /* 大标题字体大小 */
color: #4CAF50; /* 标题绿色 */
text-decoration: underline; /* 下划线 */
}
h2 {
font-size: 2em; /* 小标题 */
color: #333; /* 标题颜色 */
margin-top: 20px; /* 上外边距 */
}
p {
font-size: 1.2em; /* 段落字体大小 */
margin: 10px 0; /* 段落上下边距 */
}
.highlight {
background-color: rgba(255, 255, 0, 0.4); /* 设置高亮背景 */
font-weight: bold; /* 加粗 */
}
ul {
margin: 20px 0; /* 上下边距 */
padding-left: 20px; /* 列表左内边距 */
}
blockquote {
border-left: 4px solid #4CAF50; /* 左侧边框 */
padding-left: 20px; /* 左内边距 */
color: #555; /* 引用颜色 */
font-style: italic; /* 斜体 */
margin: 20px 0; /* 上下外边距 */
}
button {
background-color: #4CAF50; /* 按钮背景颜色 */
color: white; /* 按钮文本颜色 */
border: none; /* 去掉边框 */
padding: 10px 20px; /* 按钮内边距 */
font-size: 1em; /* 按钮字体大小 */
cursor: pointer; /* 鼠标悬停变成手形 */
border-radius: 5px; /* 圆角 */
transition: background-color 0.3s; /* 背景颜色过渡效果 */
}
button:hover {
background-color: #45a049; /* 悬停时的背景颜色 */
}
@media (max-width: 600px) {
body {
padding: 10px; /* 小屏幕下的内边距 */
}
h1 {
font-size: 2em; /* 小屏幕下的标题字体大小 */
}
p, h2 {
font-size: 1em; /* 小屏幕下的段落和小标题字体大小 */
}
}
</style>
</head>
<body>
<header>
<h1>综合文本样式示例</h1>
<p>展示如何使用CSS对文本进行全面的格式化</p>
</header>
<h2>文本格式化示例</h2>
<p>下面是一些重要的文本样式：</p>
<ul>
<li>字体样式和大小</li>
<li>颜色和背景</li>
<li>文本对齐</li>
<li>文本装饰</li>
</ul>
<blockquote>
“CSS是用来描述HTML文档外观的样式表语言。” - W3C
</blockquote>
<p>可以使用<span class="highlight">高亮文本</span>来强调重要信息。</p>
<button>点击我</button>
</body>
</html>
实验实训
案例一：文章样式排版
目标：设计一篇模拟文章的布局，包含标题、摘要、段落及引用。
要求：
- 使用
h1作为文章标题。 - 使用
p标签展示文章内容。 - 使用
blockquote形式引用外部资料。 - 使用合适的段落间距和行高提升可读性。
