CSS语法、选择器和定位

CSS

CSS是层叠样式表也称级联样式表，是一种用来为HTML文档添加样式的语言，CSS文件扩展名.css。

CSS可以美化页面，操作布局，提高我们的工作效率，节省了大量工作。

1. CSS语法：

   1. css规则主要由选择器和一条或多条声明组成；

   2. 选择器通常为需要改变样式的HTML元素。

   3. 声明由属性和属性值组成，属性和属性值用冒号隔开。

2. 基本选择器:

   1. 元素选择器：

   2. id选择器：以“#”定义，根据元素id属性选择特定的html元素；id选择器用于选择一个唯一的元素；id选择器的优先级>元素选择器；

   3. 类选择器：类选择器的优先级>元素选择器；特定class属性

   4. 通用选择器：(*)选择页面上的所有html元素；元素选择器的优先级大于通用选择器

   5. 分组选择器：选取所有具有相同样式的html元素；用“逗号”隔开。

3. 组合选择符

   1. 后代选择器 空格：用于选取某元素的后代元素（子元素）；后代选择器的优先级大于分组选择器

   2. 子元素选择器 >：找到指定标签中所有特定的直接子元素

   3. 相邻兄弟选择器 +：可选择紧接在另一元素后的元素，且二者有相同父元素。

   4. 后续兄弟选择器 ~：后续兄弟选择器优先级大于相邻兄弟选择器；选取指定元素之后的所有相邻兄弟元素

4. 属性选择器

   1. [属性名]选择器：用于选取带有特定属性的元素。

   2. [属性名='属性值']选择器：用于选取带有特定属性和值的元素。

5. 定位：

   1. position属性：应用于元素的定位方法的类型。

      • static 静态 默认情况下的定位

      • relative 相对定位 相对其正常位置进行定位，不会对其余内容进行调整来适应元素留下的任何空间

      • absolute 绝对定位，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览器页面。

      • fixed 固定定位，元素的位置相对于浏览器窗口是固定位置；即使窗口是滚动的它也不会移动。

      • sticky 粘性定位 根据用户的滚动位置进行定位；粘性元素的滚动位置在相对定位和固定定位之间切换。

      • 重叠元素：对元素进行定位时，它们可以与其他元素重叠；

      • z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）一个元素可以有正数或负数的堆叠顺序。