CSS样式学习笔记之样式 语法 代码 / 通配元素类ID交集并集选择器
参考：CSS样式大全
第57节课
CSS的全称为层叠样式表（Cascading style sheets）
CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等等。
简单理解：CSS可以美化HTML，让HTML更漂亮。
核心思想：HTML搭建结构，CSS 添加样式，实现了结构与样式的分离。
CSS_行内样式
css样式写在标签style属性中（又称内联样式），css样式是名和值成对，用冒号分割，html名和值是用等号分割。
语法：
<h1 style="color:red;font-size:60px;">文字名称</h1>
注意点:
1. style 属性的值不能随便写，写要符合 CSS 语法规范，是 名:值; 的形式。
2. 行内样式表，只能控制当前标签的样式，对其他标签无效。
存在的问题:
书写繁琐、样式不能复用、并且没有体现出结构与样式分离的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用。
CSS_内部样式
css写在head标签里，style标签中
写在 html页面内部，将所有的CSS代码提取出来，单独放在<style>标签中。
语法：
<style>
h1{
color:red;
font-size:40px;
}
</style>注意点：
1. <style>标签理论上可以放在HTML文档的任何地方，但一般都放在<head>标签中。
2. 此种写法样式可以复用，代码结构清晰。
存在的问题：
1. 并没有实现结构与样式完全分离。
2. 多个HTML页面无法复用样式。
CSS_外部样式
css外部样式写在单独的.css文件中，随后在html文件中引入使用。
引用外部样式在当前html文档内写入标签<link rel="stylesheet" href="../position.css">
语法:
1. 新建一个扩展名为.css 的样式文件，把所有 cSS 代码都放入此文件中
h1{
color:red;
font-size:40px;
}2. 在 HTML文件中引入 .css 文件。
<link rel="stylesheet" href="./xxx.css">
注意点:
1. <link>标签要写在 <head>标签中。
2. <link>标签属性说明：
href：引入的文档来自于哪里。
re1：(relation：关系)说明引入的文档与当前文档之间的关系。
3. 外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。
4. 实际开发中，几乎都使用外部样式，这是最推荐的使用方式！
CSS_样式表的优先级
优先级规则：行内样式＞内部样式=外部样式
1. 内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的(简记：“后来者居上”)。
2. 同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的(简记：“后来者居上”)。
CSS_语法规范
css语法由两部分构成：
选择器：找到要添加样式的元素。
声明块：设置具体的样式(声明块是由一个或多个声明组成的)，声明的格式为：属性名:属性值;
备注1：最后一个声明后的分号理论上能省略，但最好还是写上。
备注2：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上。
注释的写法：
/* 给h1元素添加样式 */
h1 {
/* 设置文字颜色为红色 */
color: red;
/* 设置文字大小为40px */
font-size: 40px
}属性名查询 https://developer.mozilla.org/zh-CN/docs/Web/CSS
CSS_代码风格
1、展开风格 --开发时推荐，便于维护和调试
h1 {
color: red;
font-size:40px;
}2、紧凑风格 -- 项目上线时推荐，可减小文件体积。
h1{color:red;font-size:40px;}备注：
项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文件体积，节约
网络流量，同时也能让用户打开网页时速度更快。
CSS_通配选择器
基本选择器包括：
1. 通配选择器
2. 元素选择器
3. 类选择器
4. id 选择器
通配选择器 作用：可以选中所有的 HTML 元素。
语法:
* {
属性名:属性值;
}举例：
* {
/*选中所有元素 */
color: orange;
font-size: 40px;
}备注：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助。
CSS_元素选择器
作用：为页面中 某种元素 统一设置样式。
语法：
标签名 {
属性名:属性值;
}
举例：
/*选中所有h1元素 */
h1 {
color: orange;
font-size:40px;
/*选中所有p元素 */
p {
color:blue;
font-size:6px;
}备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样。
CSS_类选择器
作用：根据元素的 class 值，来选中某些元素。
class翻译过来有：种类、类别的含义，所以class 值，又称:类名,
语法：
.类名 {
属性名:属性值;
}
举例：
/*选中所有class值为speak的元素 */
.speak {
color:red;
/*选中所有class值为answer的元素 */
.answer {
color: blue;
}注意点：
1. 元素的 class 属性值不带“.”，但 CSS的类选择器要带“.”。
2. class值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用“-”做连接，例如：left-menu，且命名要有意义，做到“见名知意”。
3. 一个元素不能写多个class 属性，下面是错误示例：
<!--该写法错误，元素的属性不能重复，后写的会失效-->
<h1 class="speak" class="big">你好啊</h1>
4. 一个元素的class 属性，能写多个值，要用空格隔开，例如：
<!--该写法正确，class属性，能写多个值--> <h1 class="speak big">你好啊</h1>
CSS_ID选择器
作用：根据元素的 id 属性值，来精准的选中某个元素。
语法：
#id值 {
属性名：属性值;
}
举例：
/*选中id值为earthy的那个元素 */
#earthy {
color：red;
font-size：60px;
}注意：
1. id属性值：尽量由字母、数字、下划线(_)、短杠(-)组成，最好以字母开头、不要包含空格、区分大小写。
2. 一个元素只能拥有一个id属性，多个元素的id属性值不能相同。
3. 一个元素可以同时拥有id和class属性。
基本选择器总结
CSS_交集选择器
作用：选中同时符合多个条件的元素
交集有并且的含义(通俗理解：即..又..… 的意思)，例如：年轻且长得帅。
语法：
选择器1选择器2选择器3...选择器n {}
举例：
/*选中：类名为beauty的p元素，为此种写法用的非常多!!!!*/
p.beauty{
color： blue;
}
/*选中：类名包含rich和beauty的元素 */
.rich.beauty{
color： green;
}注意：
1. 有标签名，标签名必须写在前面。
2. id 选择器、理论上可以作为交集的条件，但实际应用中几乎不用 -- 因为没有意义。
3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素.
4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty。
CSS_并集选择器
作用：选中多个选择器对应的元素，又称：分组选择器。
所谓并集就是或者的含义(通俗理解：要么…要么…. 的意思)，例如：给我转10万块钱或者我报警。
语法：选择器1,选择器2,选择器3,…. 选择器n{}
多个选择器通过","连接，此处","的含义就是：或。
举例：
/*选中id为peigi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich，
.beauty {
font-size：40px;
background-color：skyblue;
width：200px;
}注意：
1. 并集选择器，我们一般竖着写。
2. 任何形式的选择器，都可以作为并集选择器的一部分。
3. 并集选择器，通常用于集体声明，可以缩小样式表体积。
CSS_html元素间的关系
父元素：直接包裹某个元素的元素，就是该元素的父元素
子元素：被父元素直接包含的元素（简记：儿子元素）
祖先元素：父亲的父亲......，一直往外找，都是祖先。
备注：父元素，也算是祖先元素的一种。
例如：张三的父亲，也算是张三的祖先，但一般还是称呼：父亲
后代元素：儿子的儿子......一直往里找，都是后代。
备注：子元素，也算是后代元素的一种。
例如：张三的儿子，也算是张三的后代，但一般还是称呼：儿子。
兄弟元素：具有相同父元素的元素，互为兄弟元素。
