CSS模块（一）

CSS简介

• 概念 层叠样式表
• 特点
  1. 继承性
  2. 层叠性
• 作用
  1. 样式和html的代码分离
  2. 提高页面的执行效率
  3. 精确控制页面布局
  4. 弥补html对属性的的控制度

基本语法

写在head之间

选择器 选择一个或多个标签的一种语法

1. 类选择器

   • 一次可以选择多个标签

   
   

2. id选择器

   • 一次只能选中一个标签
   • 通过id来选中这个标签
   • 每个标签的id值是唯一的

   
   

3. 标签选择器

   • 一次可以选择多个标签

     
     

4. 包含选择器

   • 可以包含列表中的一项

   • 可以包含块内的某些标签或类等等

   • …

     

5. 伪类选择器 可以表示四种状态

   1. 链接状态
   2. 鼠标悬浮状态
   3. 鼠标按下状态
   4. 链接访问过后的状态

   

6. 通配符选择器 选择部分或全部

   • 全局通配

   • 局部通配

     
     

7. 相邻选择器

   • +相邻选择器 紧挨着的那个

   • ~ 相邻所有 后面所有的

     
     

8. 子选择器

   选择列表或者块的子项进行变化

   
   

9. 属性选择器

   • 通过选择类型相同的属性来对目标进行变化

     
     

选择器的优先级别

• 当多个选择器 选中了同一个标签 如果控制的样式没有冲突 叠加生效
• 当多个选择器 选中了同一个标签 一旦有了冲突 按选择器的优先级来选择

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

元素的鼠标悬浮与按下状态辨别

借用伪类选择器来实现 两种状态的图片变换

引入css文件方法

CSS待续…