课六：认识CSS

掌握CSS基本语法与引入方式，实现网页美化基础

一、CSS基本概念与作用

CSS（层叠样式表）是网页的格式标签，用于对网页进行格式化和美化，是现代WEB设计的核心技术之一。

实训实例：理解CSS与HTML的关系，通过简单CSS样式美化段落文本

实现步骤：

  1. 启动VS Code软件，创建新的HTML文件
  2. 编写基础HTML结构，包含一个段落文本
  3. 添加简单CSS样式，设置文本颜色和字号
  4. 保存文件并在Chrome浏览器中预览效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础示例</title>
<style>
p {color: red; font-size: 18px;}
</style>
</head>
<body>
<p>我们的第一节CSS课程,让我们一起进入CSS的美妙世界</p>
</body>
</html>

二、CSS引入HTML的方式

CSS引入HTML主要有三种方式：内部样式表、外部样式表和行内样式，每种方式有其适用场景。

2.1 内部样式表

在HTML的<head>标签内部使用<style>标签声明CSS样式，适用于单一网页的样式定义。

<head>
<meta charset="utf-8">
<title>内部样式表示例</title>
<style>
p {color: blue; font-size: 16px;}
h1 {text-align: center; color: #333;}
</style>
</head>

2.2 外部样式表

创建独立的.css文件，通过<link>标签引入HTML，适用于多个网页共享样式的场景。

实训实例：创建外部样式表文件并引入HTML

实现步骤：

  1. 在VS Code中创建文件夹"cssbase"
  2. 创建"cssbase.css"文件，编写CSS样式
  3. 创建"cssbase.html"文件，在head标签中引入外部样式表
  4. 添加HTML内容并预览效果
<!-- cssbase.css 文件内容 -->
p {color: green; font-size: 17px; line-height: 1.5;}
body {background-color: #f5f5f5;}

<!-- cssbase.html 文件内容 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外部样式表示例</title>
<link rel="stylesheet" href="cssbase.css">
</head>
<body>
<p>外部样式表可以让多个网页共享相同的样式，便于维护和管理。</p>
</body>
</html>

2.3 行内样式

直接在HTML标签中使用style属性定义样式，适用于局部元素的特殊样式设置。

<h1 style="color: red; text-align: center;">行内样式标题</h1>
<p style="font-size: 15px; color: #666;">这是使用行内样式的段落文本</p>

三、CSS基本结构

每个CSS样式由选择符和声明块两部分组成，声明块包含一个或多个属性-值对。

/* 选择符 { 属性1: 值1; 属性2: 值2; ... } */
选择符 {
    属性1: 值1;
    属性2: 值2;
    ...
}

/* 示例 */
h2 {
    color: #2c3e50;
    font-size: 20px;
    margin-bottom: 10px;
}
.button {
    background-color: #3498db;
    color: white;
    padding: 8px 16px;
}

四、综合实训任务

实训要求：创建一个完整的网页，综合运用三种CSS引入方式，实现文本格式化、颜色设置等效果

实现步骤：

  1. 创建项目文件夹"css-practice"
  2. 创建外部样式表"style.css"，定义基础样式
  3. 创建HTML文件"index.html"，引入外部样式表
  4. 在HTML中添加内部样式表，定义页面特定样式
  5. 对部分元素使用行内样式，实现特殊效果
  6. 保存所有文件，在Chrome浏览器中预览并调试
<!-- style.css 文件 -->
body {
    font-family: "Microsoft YaHei", sans-serif;
    margin: 0;
    padding: 20px;
}
.container {
    max-width: 800px;
    margin: 0 auto;
}
h3 {
    color: #e74c3c;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

<!-- index.html 文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS综合实训</title>
<link rel="stylesheet" href="style.css">
<style>
p {
    line-height: 1.8;
    color: #333;
}
.list {
    padding-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align: center; color: #2980b9;">CSS综合应用示例</h1>
<h3>1. 外部样式表应用</h3>
<p>这段文本的样式由外部样式表定义，包含字体、行高和颜色等属性。</p>
<h3>2. 内部样式表应用</h3>
<ul class="list">
<li>列表样式由内部样式表定义</li>
<li>包含内边距设置</li>
</ul>
<h3 style="color: #f39c12;">3. 行内样式应用</h3>
<p style="font-style: italic; color: #7f8c8d;">这段文本使用了行内样式，设置了斜体和特殊颜色。</p>
</div>
</body>
</html>