一、CSS基础

CSS的全称为：层叠样式表（Cascding Style Sheets）。
CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字的大小、颜色、元素宽高等等。

简单理解：CSS可以美化HTML，让HTML更漂亮

核心思想：HTML搭建结构，让CSS添加样式，实现了结构与样式的分离。

2.CSS的书写位置

2.1、行内样式

写在标签的style属性中，（又称：内联样式）。

语法

1	<h1 style="color: red;font-size: 60px;">欢迎学习CSS</h1>

注意点：
1. style属性的值不能随便写，写要符合CSS语法规范，是名：值；的形式。
2. 行内样式表，只能控制当前标签的样式，对其他标签无效。
存在的问题：

书写繁琐、样式不能重复使用、并且没有体现出：结构与样式分离的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用。

2.2、内部样式

写在html页面内部，将所有的CSS代码提取出来，单独放在<style>标签中。

语法

<style>
   h1 {
   	  color: red;
      font-size: 40px;
   }
</style>

注意点：
1. <style>标签理论上可以放在HTML文档的任何地方，但一般都放在<head>标签中。
2. 此种写法：样式可以重复、代码结构清晰。
存在的问题：
1. 并没有实现结构与样式完全分离。
2. 多个HTML页面无法重复使用样式。

2.3、外部样式

写在单独的.css文件中，随后在HTML文件中引入使用。
语法：
1. 新建一个扩展名为.css的样式文件，把所有的CSS代码都放入此文件中。
  1
  2
  3
  4
  h1 {
  color: red;
  font-size: 40px;
  }
2. 在HTML文件中引入.css文件
  1
  <link rel="stylesheet" herf="./xxx.css">
注意点：

<link>标签要写在<head>标签中。

<link>标签属性说明：

href：引入的文档来自于哪里。

rel：（relation：关系）说明引入的文档与当前文档之间的关系。

外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。

实际开发中，几乎都使用外部样式，这是最推荐的使用方式！

3、样式表的优先级

优先级规则：行内样式 > 内部样式 > 外部样式

内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的。

同一个样式表中，优先级也和编写的顺序有关，且后面的会覆盖前面的。

分类	优点	缺点	使用频率	作用范围
行内样式	优先级最高	1.结构与样式未分离 2.代码结构混乱 3.样式不能复用	很低	当前标签
内部样式	1.样式可复用 2.代码结构清晰	1.结构与样式未彻底分离 2.样式不能多页面复用	一般	当前页面
外部样式	1.样式可多个页面复用 2.代码结构清晰 3.可触发浏览器的缓存机制 4.结构与样式的彻底分离	需要引入才能使用	最高	多个页面

4、CSS语法规范

CSS语法由两部分构成

选择器：找到要添加样式的元素
声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名：属性值；

备注1：最后一个声明的分号理论上可以省略，但最好还是加上。

备注2：选择器与声明块之间，属性与属性值之间，均有一个空格，理论上能省略，但最好还是写上。

注释的写法：

注释快捷键：Ctrl+/，取消注释同样的道理。

/* 给h1元素添加样式 */
h1 {
    /* 设置文字颜色为红色 */
    color: red;
    /* 设置文字大小为40px */
    font-size: 40px;
}

5、CSS代码风格

展开风格 — —开发时推荐，便于维护和调试。
1
2
3
4
h1 {
color: red;
font-size:40px;
}
紧凑风格–项目上线时推荐，可减少文件体积。
1
h1{color:red;font-size:40px;}
备注：

项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减少文件体积，节约网络流量，同时也能让用户打开网页时速度更快。

6、CSS基本选择器

基本选择器包括：

通配选择器

元素选择器

类选择器

id选择器

6.1、通配选择器

作用：可以选中所有的HTML元素
语法
1
2
3
* {
属性名：属性值;
}
举例
1
2
3
4
5
* {
/*选中所有元素*/
color:orange;
font-size:40px;
}
备注：目前来看通配选择器貌似有点鸡肋，但后面清楚样式时，对我们会有很大的帮助，后面会提到。

6.2、元素选择器

作用：为页面中某种元素统一设置样式。
语法
1
2
3
标签名 {
属性名：属性值;
}

举例

/* 选中所有的h1元素 */
h1 {
    color: orange;
    font-size: 40px;
}

/* 选中所有的p元素 */
p {
    color: blue;
    font-size: 60px;
}

备注：元素选择器无法实现差异化设置，例如上面的所有的代码中所有的p元素效果都是一样的。

6.3、类选择器

作用：根据元素的class值，来选中某些元素。

class翻译过来有：种类、类别的含义，所以class值，又称：类名；
语法：
1
2
3
.类名 {
属性名：属性值;
}

举例：

/* 选中所有class值为speak的元素 */
.speak {
    color: red;
}

/* 选中所有class值为answer的元素 */
.answer {
    color: blue;
}

注意点：
1. 元素的class属性值不带 . , 但是CSS的类选择器要带 . 。
2. class值，是我们自定义的按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如：left-menu，且命名要有意义，做到”见名知意”。
3. 一个元素不能写多个class属性，下面是错误示例
1
2

<h1 class="speak" class="big">你好呀</h1>
1. 一个元素的class属性，写多个值，要用空格隔开，例如：
1
2

<h1 class="speak big">你好呀</h1>

6.4、ID选择器

作用：根据元素的id属性值，来精确的选中某个元素。
语法：
1
2
3
#id值{
属性名：属性值;
}

举例：

/* 选中id值为earthy的那个元素 */
#earthy{
    color: red;
    font-size: 60px;
}

注意：
- id属性值尽量由字母、数字、下划线（_）、短杠（-）组成，最好以字母开头、不要包含空格、区分大小写。
- 一个元素只能拥有一个id属性，多个元素的id属性值不能相同。
- 一个元素可以同时拥有id和class属性。

6.5、基本选中器总结

基本选择器	特点	用法
通配选择器	选中所有的标签，一般用于清楚样式。	`* {color：red}`
元素选择器	选中所有同种标签，但是不能差异选择。	`h1 {color:red}`
类选择器	选中所有特定类名{`class`值}的元素—-使用频率很高。	`.say {color:red}`
ID选择器	选中特定`id`值的那个元素{唯一的}。	`#earthy {color:red}`

7、其他选择器

7.1、交集选择器

作用：选中同时符合多个条件的元素。

交集有并且的含义（即…….又…….的意思）
语法：选择器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。

7.2、并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器

所谓并集就是或者的含义（通俗的理解：要么…..要么…..的意思），例如给我转10万或者我报警。
语法：选择器1,选择器2,选择器3,….选择器n {}

多个选择器通过，连接，此处,的含义就是：或。

举例：

/* 选中id为peiqi,或类名为rich，或类名beauty的元素 */
#peiqi,
.rich,
.beauty {
  font-size: 40px;
  background-color: skyblue;
  width: 200px;
}

注意：
1. 并集选择器,我们一般竖着写。
2. 任何形式的选择器，都可以作为并集选择器的一部分。
3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

7.3、后代选择器

作用：选中指定元素中，符合要求的后代元素。
语法：选择器1,选择器2,选择器3, …. 选择器n{}（先写祖先，在写后代）

选择器之间，用空格隔开，空格可以理解为：“xxx中的”。其实就是后代的意思。

选择器1234…..n，可以是我们之前学的任何一种选择器。

举例

HTML代码

<body>
    <ul>
        <li>抽烟</li>
        <li>喝酒</li>
        <li>
            <a href="">烫头</a>
        </li>
    </ul>
    <ol class="subject">
        <li class="front-end">前端</li>
        <li>Java</li>
        <li>大数据</li>
        <div class="front-end">UI</div>
    </ol>
</body>

CSS代码

/* 选中ul中的所有li */
ul li {
    color: red;
}
/* 选中ul中的所有li中的a */
ul li a {
    color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
    color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
    color: blue;
}

注意：
1. 后代选择器，最终选择的是后代，不选中祖先。
2. 儿子、孙子、重孙子，都算是后代。
3. 结构一定要符合之前讲的HTML嵌套要求，例如不能p中写h1 ~ h6。

7.4、子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

子代选择器又称：子元素选择器、子选择器
语法：选择器1>选择器2>选择器3>……选择器n {}

选择器之间，用 > 隔开， > 可以理解为：“ xxx的子代 ”，其实就是儿子的意思。

选择器1234…..n，可以是我们之前学的任何选择器。

举例

/* div中的子代a元素 */
div>a {
    color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a {
    color: red;
}

注意：
1. 子代选择器，最终选择的是子代，不是父级。
2. 子、孙子、重孙子、重重孙子…..统称后代!，子就是指儿子

7.5、兄弟选择器

相邻兄弟选择器：
- 作用：选中指定元素后，符合条件的相邻兄弟元素。
  
  所谓相邻，就是紧挨着他的下一个。
- 语法：选择器1+选择器2 {}
- 示例：
  1
  2
  3
  4
  /* 选中div后相邻的兄弟p元素 */
  div+p {
  color: red;
  }
通用兄弟选择器：
- 作用：选中指定元素后，符合条件的所有兄弟元素。
- 语法：选择器1~选择器2 {}
- 实例：
  1
  2
  3
  4
  /* 选中div后的所有的兄弟p元素 */
  div~p {
  color: red;
  }
注意：两种兄弟选择器，选择的是下面的兄弟。

7.6、属性选择器

作用：选中属性值符合一定要求的元素。
语法：
1. [ 属性名 ] 选中具有某个属性的元素。
2. [ 属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
3. [ 属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [ 属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [ 属性名*="值"] 选中包含某个属性，且属性值包含指定的元素。

举例：

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

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

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

/* 选中title属性值为u结尾的元素 */
div[title$="u"]{color:red;}

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

7.7、伪类选择器

作用：选中特殊状态的元素。

如何理解“伪”？-虚假的，不是真的。

如何理解“伪类”？ -像类(class)，但不是类，是元素的一种特殊状态。
常用的伪类选择器：

一、动态伪类：
1. :link：超链接未被访问的状态
2. :visited：超链接访问过的状态
3. :hover：鼠标悬停在元素上的状态
4. :active：元素激活的状态
  
  什么是激活？——按下鼠标不松开。
  
  注意点：遵循LVHA的顺序，即：link、visited、hover、active。
5. :focus 获取焦点的元素。
  
  表单类元素才能使用:focus伪类。
  
  当用户：点击元素、触摸元素、或通过键盘的tab键等方式，选择元素时，就是获得焦点。
二、动态伪类：
- 常用的
1. :first-child 所有兄弟元素中的第一个。
2. :last-child 所有兄弟元素中的最后一个。
3. :nth-child(n) 所有兄弟元素中的第n个。
4. :first-of-type 所有同类型兄弟元素中的第一个。
5. :last-of-type 所有同类型兄弟元素中的最后一个。
6. :nth-of-type(n) 所有同类型兄弟元素中的第n个。
  
  关于n的值：
  1. 0或不写：什么都不选中 — 几乎不用。
  2. n：选中所有子元素 —几乎不用。
  3. 1~正无穷的整数：选中对应序号的子元素。
  4. 2n或even：选中序号为偶数的子元素。
  5. 2n+1或odd：选中序号为奇数的子元素。
  6. -n+3：选中的是前3个
8、选择器的优先级

通过不同的选择器，选中不同的元素，并且为相同的样式设置不同的值时，就发生了样式的冲突。到底应用到哪个样式，此时就需要看优先级了。
- 简单描述：
  
  行内样式 > ID选择器 > 类选择器 > 元素选择器 > 统配选择器。

二、CSS三大特性

1、层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

什么事样式冲突？ — 元素的同一个样式名，被设置了不同的值，这就是冲突。

2、继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
常见的课可继承属性：

text-?? , font-?? , line-?? , color …….
备注：MDN网站，可查询属性是否可被继承。

3、优先级

简单聊：!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。

一、CSS基础

2.CSS的书写位置

2.1、行内样式

2.2、内部样式

2.3、外部样式

3、样式表的优先级

4、CSS语法规范

5、CSS代码风格

6、CSS基本选择器

6.1、通配选择器

6.2、元素选择器

6.3、类选择器

6.4、ID选择器

6.5、基本选中器总结

7、其他选择器

7.1、交集选择器

7.2、并集选择器

7.3、后代选择器

7.4、子代选择器

7.5、兄弟选择器

7.6、属性选择器

7.7、伪类选择器

一、动态伪类：

二、动态伪类：

8、选择器的优先级

二、CSS三大特性

1、层叠性

2、继承性

3、优先级