前端开发：（三）CSS入门

1. 介绍CSS

1.1 什么是CSS

CSS（Cascading Style Sheets）是一种用于描述文档样式和布局的样式表语言，用于美化和排版HTML和XML等标记语言的内容。

1.2 CSS的作用和优势

CSS的主要作用是控制网页的样式和布局，包括字体、颜色、间距、边框、背景等方面，从而增强用户体验并提高页面的可读性和美观度。其优势包括：

• 分离内容与表现：将样式和结构分开，使得网页结构更清晰，易于维护和管理。
• 提高网页性能：可以通过CSS控制页面加载速度和渲染效率，提升用户体验。
• 增强可访问性：使用CSS可以轻松实现对网页内容的可访问性和无障碍体验。
• 跨平台兼容性：CSS可以适用于各种不同的设备和平台，并且能够适应不同尺寸和分辨率的屏幕。

1.3 CSS的发展历史

CSS最初由Håkon Wium Lie和Bert Bos在1996年提出，并在1997年成为W3C的推荐标准。随着Web技术的发展，CSS经历了多个版本的更新，从CSS1到CSS2再到CSS3，逐步增加了新的特性和功能，如盒模型、浮动、定位、动画等，以满足不断增长的Web设计需求。

2. CSS基础

2.1 CSS语法规则

CSS语法规则由选择器和声明块组成，选择器用于选择要应用样式的元素，声明块包含一个或多个属性值对。

selector {
    property: value;
}

2.2 CSS样式规则的结构

CSS样式规则由选择器和一组样式声明组成，选择器指定了要应用样式的HTML元素，样式声明指定了要修改的样式属性和对应的值。

h1 {
    color: blue;
    font-size: 24px;
}

2.3 CSS选择器的分类和使用

CSS选择器根据选择元素的不同方式分为元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。不同的选择器适用于不同的场景，可以精确地选择需要修改样式的元素。

/* 元素选择器 */
p {
    color: red;
}

/* 类选择器 */
.title {
    font-weight: bold;
}

/* ID选择器 */
#header {
    background-color: #ccc;
}

2.4 CSS注释的语法

CSS注释以/* */的形式包裹注释内容，用于在样式表中添加注释说明，提高代码的可读性和可维护性。

/* 这是一个CSS注释 */
p {
    color: blue; /* 这是另一个CSS注释 */
}

3. CSS样式的应用

3.1 内联样式

内联样式通过在HTML标签的style属性中直接定义样式，适用于单个元素的特定样式设置。

<p style="color: red; font-size: 16px;">这是一个红色字体的段落。p>

3.2 嵌入样式表

嵌入样式表将样式规则直接写在HTML文档的