第7节课：CSS基础与选择器——打造网页视觉魅力

CSS（层叠样式表）是网页设计中的核心语言之一，它负责网页的布局和视觉表现。通过CSS，我们可以控制元素的字体、颜色、间距、布局等属性，使网页更加美观和专业。本节课将介绍CSS的基本作用、语法以及常用的选择器，帮助你迈出成为网页设计师的第一步。

CSS的作用

CSS的主要作用是将网页的内容（HTML）与表现分离，使得网页的维护和更新变得更加容易。它提供了丰富的属性来设置元素的样式，包括但不限于：

字体样式（如字体大小、颜色、粗细）
背景和颜色
边框和轮廓
布局（如盒模型、Flexbox、Grid）
响应式设计
动画和过渡效果

CSS的基本语法

CSS规则由两个主要部分组成：选择器和声明块。选择器用于选择要样式化的HTML元素，而声明块包含了一系列的属性和值。

 /* 元素选择器 */
p {
    color: blue;
    font-size: 16px;
}
 
/* 类选择器 */
.highlight {
    background-color: yellow;
}
 
/* ID选择器 */
#main-header {
    font-weight: bold;
}复制

选择器详解

元素选择器

元素选择器是最基本的选择器，它直接通过HTML元素的标签名来选择元素。

 h1 {
    color: red;
}复制

上述CSS规则将所有<h1>标签的文本颜色设置为红色。

类选择器

类选择器允许我们为元素指定一个类名，并通过这个类名来应用样式。类名通过class属性在HTML中指定。

 /* CSS */
.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
}
 
/* HTML */
<button class="button">点击我</button>复制

ID选择器

ID选择器通过元素的ID来选择一个唯一的元素。ID通过id属性在HTML中指定，一个页面中每个ID应该是唯一的。

 /* CSS */
#main-content {
    margin: 0 auto;
    width: 80%;
}
 
/* HTML */
<div id="main-content">
    <!-- 内容 -->
</div>复制

实践：使用CSS美化一个简单的网页

让我们通过一个示例来展示如何使用CSS来美化一个包含标题、段落和按钮的简单网页。

 <!DOCTYPE html>
<html>
<head>
    <title>CSS示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        header {
            background: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        #main-title {
            font-size: 2.5em;
        }
        .content {
            margin: 20px;
        }
        .button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <header>
        <h1 id="main-title">欢迎来到学问小小谢的网站</h1>
    </header>
    <div class="content">
        <p>这是一个段落，展示了CSS如何改变文本的样式。</p>
        <button class="button">点击我</button>
    </div>
</body>
</html>复制

结语

通过本节课的学习，你应该对CSS的作用、基本语法以及如何使用不同的选择器有了基本的了解。CSS是实现网页美观和响应式设计的关键技术。掌握CSS，你将能够创建出既美观又实用的网页。继续深入学习CSS的各种属性和布局技术，你将能够不断提升你的网页设计能力。

标签

	/* 元素选择器 */
	p {
	color: blue;
	font-size: 16px;
	}

	/* 类选择器 */
	.highlight {
	background-color: yellow;
	}

	/* ID选择器 */
	#main-header {
	font-weight: bold;
	}

	/* CSS */
	.button {
	background-color: blue;
	color: white;
	padding: 10px 20px;
	}

	/* HTML */
	<button class="button">点击我</button>

	/* CSS */
	#main-content {
	margin: 0 auto;
	width: 80%;
	}

	/* HTML */
	<div id="main-content">
	<!-- 内容 -->
	</div>

	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS示例</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
	}
	header {
	background: #333;
	color: #fff;
	padding: 10px 0;
	text-align: center;
	}
	#main-title {
	font-size: 2.5em;
	}
	.content {
	margin: 20px;
	}
	.button {
	background-color: #4CAF50;
	color: white;
	border: none;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<header>
	<h1 id="main-title">欢迎来到学问小小谢的网站</h1>
	</header>
	<div class="content">
	<p>这是一个段落，展示了CSS如何改变文本的样式。</p>
	<button class="button">点击我</button>
	</div>
	</body>
	</html>