【前端老赵的CSS简明教程】1-2 CSS的基本语法和选择器

大家好，欢迎来到本节课程！我是前端老赵！今天我们将探讨CSS的基本语法和选择器，这是我们深入了解CSS的重要一步。CSS语法是CSS的基础，也是掌握CSS的必要前提。而选择器则是CSS的核心，通过选择器，我们可以针对不同的HTML元素来设置样式和外观。在这一节中，我们将详细讲解CSS的基本语法和选择器的使用方法。

首先，让我们来了解一下CSS的基本语法。CSS的语法由选择器和声明块组成，其中选择器用于选中HTML元素，而声明块则包含了一个或多个声明，每个声明用于设置一个属性的值。下面是一个简单的CSS代码示例：

p{ color: red; font-size: 16px; }

在这个示例中，p是一个选择器，它选中了所有的<p>标签，表示这个声明块中的属性都将应用于所有的段落元素。color和font-size是两个属性，分别用于设置文本颜色和字体大小。在声明块中，属性和值之间用冒号分隔，不同的声明之间用分号分隔。

接下来，让我们来了解一下选择器。选择器是用于选中HTML元素的一种模式，它可以根据元素的标签名、类名、ID、属性等特征来进行选择。下面是几个常见的选择器：

1.标签选择器

标签选择器是最常见的一种选择器，它通过元素的标签名来进行选择。例如，下面的CSS代码将设置所有的段落元素的颜色为红色：

p{ color: red; }

2.类选择器

类选择器通过元素的class属性来进行选择，类名前需要加上一个点号.。例如，下面的CSS代码将设置所有具有highlight类的元素的背景色为黄色：

.highlight{ background-color: yellow; }

3.ID选择器

ID选择器通过元素的ID属性来进行选择，ID名前需要加上一个井号#。例如，下面的CSS代码将设置ID为header的元素的背景色为蓝色：

#header{ background-color: blue; }

通过这节课的学习，我们了解了CSS的语法结构和选择器的分类，这些是掌握CSS的必备知识。

在下一节课中，我们将继续深入学习CSS的更多细节和应用，包括盒模型、布局、响应式设计等等。下次见！

前端老赵的CSS简明教程目录

• 0 课程介绍

• 1-1 CSS是什么，它的作用是什么

• 1-2 CSS的基本语法和选择器

• 1-3 如何在HTML中引入CSS样式

• 2-1 CSS盒模型的概念和作用

• 3-1 常用的CSS基本样式

• 3-2 如何使用CSS样式美化HTML元素

• 4-1 CSS文本样式的使用方法

• 4-2 如何在网站中使用Web字体

• 5-1 CSS选择器和优先级规则

• 6-1 CSS的伪类和伪元素

• 7-1 CSS常用的布局方式有哪些

• 8-1 CSS动画和过渡的概念和使用方法

• 9-1 常用的CSS框架

• 10-1 CSS预处理器和使用方法