这里写自定义目录标题

• 三种添加样式的方法
• • 方法一：行内样式
  • 方法二：内部样式
  • 方法三：外部样式
• 样式命名规范
• CSS代码风格
• • 展开风格
  • 紧凑风格
• CSS基本选择器
• • 通配选择器
  • 元素选择器
  • 类选择器
  • ID选择器
• CSS复合选择器
• • 交集选择器
  • 并集选择器
  • 后代选择器
  • 子代选择器
  • 兄弟选择器
  • 属性选择器

CSS： Cascading Style Sheets 层叠样式表；

三种添加样式的方法

方法一：行内样式

第一种方式；

不推荐，HTML结构和CSS样式混杂，不便于维护；不能复用；

方法二：内部样式

通过第二个样式设定

同样不推荐，并没有完全将结构与样式分离，在多个HTML中无法实现复用；

方法三：外部样式

新建 .css 样式文件

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

在 .html 文件中引入 .css 样式文件；

推荐使用，彻底将结构与样式分离，触发浏览器缓存机制，提高访问速度，可以复用；

优先级规则：

1. 行内样式 > 内部样式 = 外部样式，相互之间覆盖重复部分，属于 A∪B 的操作；
2. 同一种样式方法，后来者居上，且只覆盖重复部分，属于一种 A∪B 的操作；

样式命名规范

CSS代码风格

展开风格

开发时使用，便于调试；

h1 {color: blue;font-size: 66px;
}

紧凑风格

项目上线时使用，可有效减小文件体积；常用 webpack 对展开风格的 css 代码进行“压缩”；

h1{color:blue;font-size:66px;}

CSS基本选择器

通配选择器

* {属性名: 属性值;
}

作用范围为所有的 HTML 元素；

元素选择器

h2 {属性名: 属性值;
}

作用范围为指定的元素，比如上述指定的是所有 h2 元素；

类选择器

我对你说：
你对我说：

ID选择器

我对你说：

CSS复合选择器

交集选择器

李四
小猪佩奇
小狗旺财

当然，使用两个类名作为交集选择器也是可以的；

并集选择器

李四
小羊苏西
小猪佩奇
小狗旺财

并集选择器使得 李四，小羊苏西，小猪佩奇以及小狗旺财都具有指定的效果；

后代选择器

抽烟
喝酒
烫头
张三
李四
王五

子代选择器

子代选择器，所谓子，只指儿子，不指孙子，从孙子；

张三李四王五
赵六
孙七

兄弟选择器

张三
李四
王五

div+p 概念是 div 后下一个紧紧相邻的 p
div~p 概念是 div 后所有相邻的 p

主页
秒杀
订单
我的

属性选择器

/* 选中具有 title 属性的元素 */
[title]{color:red;}

/* 选中具有 title 属性值为 atguigu 的元素 */
[title="atguigu"]{color:red;}

/* 选中具有 title 属性值以 a 开头的元素 */
[title^="a"]{color:red;}

/* 选中具有 title 属性值以 a 结尾的元素 */
[title$="a"]{color:red;}

/* 选中具有 title 属性值包含 t 的元素 */
[title*="t"]{color:red;}