10、介绍CSS的基础知识，包括样式规则、选择器、属性、值等

第10课：CSS的基础知识

CSS是一种用于设置HTML样式的语言。在Web设计中，CSS通常用于控制页面的布局、字体、颜色、背景图像等。本节课将介绍CSS的基本知识，包括样式规则、选择器、属性、值等内容。

一、样式规则

CSS样式规则由两个主要部分组成：选择器和声明块。选择器是用于选择要应用样式的HTML元素的一种模式。声明块包含一组属性和值，用于描述要应用到HTML元素的样式。

选择器和声明块之间有一个大括号括起来的区域，其中包含一组属性和值。每个属性都有一个值，属性和值之间用冒号分隔，不同属性和值之间用分号分隔。

例如，以下是一个CSS样式规则的示例：

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

这个规则选择了所有p元素，并设置它们的颜色为红色、字体大小为16像素。

二、选择器

选择器用于指定要样式化的HTML元素。常见的选择器包括：

1. 标签选择器：选择一类HTML元素，例如 p、h1、div等。

2. 类选择器：选择具有相同类名的HTML元素，类名以一个句点（.）开头，例如 .header、.nav、.btn等。

3. ID选择器：选择具有相同ID的HTML元素，ID名以一个井号（#）开头，例如 #header、#logo、#main等。

4. 属性选择器：选择具有相同属性的HTML元素，例如 [type="text"]、[href^="http://"]、[class~="btn"]等。

三、属性和值

CSS属性和值用于设置元素的样式。常见的CSS属性包括：

1. color：设置文本颜色。

2. font-size：设置字体大小。

3. font-family：设置字体样式。

4. background-color：设置背景颜色。

5. border：设置边框样式。

6. width/height：设置元素宽度和高度。

7. margin：设置元素外边距。

8. padding：设置元素内边距。

常见的属性值包括颜色、长度、字体名称等。

四、样式优先级

当多个样式规则应用于同一元素时，可能会出现样式冲突的情况。在这种情况下，CSS规定了一套样式优先级规则，用于确定哪些样式将被应用到元素上。

样式优先级从高到低依次是：!important > 内嵌样式 > ID选择器 > 类选择器和属性选择器 > 标签选择器。

如果两个规则具有相同的优先级，则后面的规则将覆盖前面的规则。

五、总结

在本课程中，我们介绍了CSS的基础知识，包括样式规则、选择器、属性、值等内容。掌握了这些基础知识后，我们可以使用CSS来控制HTML的外观和布局。下一节课我们将演示如何将CSS样式应用于HTML文档。