一、CSS简介

1.1 什么是CSS？

• 定义：CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML（包括如SVG, MathML之类的XML语言）文档外观和格式的样式语言。
• 作用：分离内容与表现，使网页内容更加丰富和美观。

1.2 CSS如何工作？

• 层叠性：多个样式表可以应用于一个HTML文档，CSS样式按照优先级和来源（如内联、内部、外部）进行层叠。
• 继承性：某些CSS属性可以从父元素继承到子元素。

二、CSS样式规则

2.1 基本结构

css代码：

selector {
    property: value;
}

• selector：选择器，用于指定应用样式的HTML元素。
• property：属性，定义要改变的样式特性。
• value：属性值，为所选属性赋予的具体样式值。

2.2 示例

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

上述规则将所有

元素的文本颜色设置为蓝色，字体大小设置为16像素。

三、CSS选择器

3.1 类型选择器

• 定义：根据HTML元素的类型选择元素。
• 示例：p选择所有段落元素。

3.2 类选择器

• 定义：使用HTML元素的class属性选择元素，类选择器前有一个点（.）。
• 示例：.myClass选择所有class属性为myClass的元素。

3.3 ID选择器

• 定义：使用HTML元素的id属性选择元素，ID选择器前有一个井号（#），且ID在页面中唯一。
• 示例：#myId选择ID为myId的元素。

3.4 属性选择器

• 定义：根据元素的属性及属性值选择元素。
• 示例：[type="text"]选择所有type属性值为text的input元素。

3.5 后代选择器

• 定义：选择某元素内部的所有指定后代元素。
• 示例：div p选择所有位于
  元素内的

  元素。

3.6 伪类选择器

• 定义：选择元素的特定状态，如鼠标悬停、点击等。
• 示例：a:hover改变鼠标悬停在链接上的样式。

3.7 伪元素选择器

• 定义：选择元素的一部分内容，如首字母、首行等。
• 示例：p::first-line改变段落首行的样式。

四、实践应用

4.1 编写一个简单的CSS示例

    
    
    
    


    
这是一个普通的段落。
    
这是一个高亮显示的段落。
    

        
这是一个加粗显示的段落，位于一个div内。
    

五、总结

• CSS是网页设计中不可或缺的一部分，用于控制网页的外观和布局。
• 样式规则由选择器、属性和属性值组成。
• 选择器类型多样，包括类型选择器、类选择器、ID选择器、属性选择器、后代选择器、伪类选择器和伪元素选择器。
• 通过实践应用，可以更好地理解和掌握CSS选择器的使用。