CSS学习笔记CSS CSS【Casading Style Sheets层叠样式表】是一种用于描述HTML或XML文档外

CSS

本篇将让我们更加熟悉CSS，贯穿CSS2及CSS3新特性，后续会持续更新

CSS【Casading Style Sheets层叠样式表】是一种用于描述HTML或XML文档外观和格式的样式语言。它用于控制网页的布局、颜色、字体、间距等视觉效果，使网页内容与表现分离，从而提高开发效率和维护性，一句话: CSS控制着网页的布局和样式，使得网页的布局更加美观，极大提高了用户体验

一. CSS基础

1. CSS的作用

美化网页: 通过CSS可以设置文字颜色、背景、边框、阴影等效果
布局控制: CSS提供了强大的布局能力，如(Flexbox、Grid等)，可以轻松实现复杂的页面布局
响应式设计: 通过媒体查询(Media Queries)，CSS可以根据设备屏幕大小调整网页布局，实现响应式设计
动画与交互: CSS支持过度(Transitions)和动画(Animations)可以为网页添加动效效果

2. CSS的编写位置

2.1 行内样式

写在标签的style属性中(又称内联样式)

语法:

<h1 style="color:red; font-size:60px;">欢迎来到CSS的世界</h1>

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

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

2.2 内部样式

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

语法:

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

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

2.3 外部样式

写在单独的.css文件中，随后在HTML文件中引入使用
语法:
1. 新建一个扩展名为.css的样式文件，把所有CSS代码都放入此文件中
```
h1 {
	color: red;
    font-size: 40px;
}
```
2. 在 HTML 文件中引入.css文件
```
<link rel="stylesheet" href="./xxx.css">
```
注意点:
1. 标签要写在标签中
2. 标签属性说明: - href: 引入的文档来自于哪里 - rel: (relation:关系)说明引入的文档与当前文件之间的关系
3. 外部样式的优势: 样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离
4. 实际开发中，几乎都使用外部样式，这是最推荐的使用方式

3. 样式表的优先级

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

内部样式、外部样式，这二者的优先级相同，且: 后面的会覆盖前面的(简记: 后来者居上)

同一个样式表中，优先级也和编写顺序有关，且: 后面的会覆盖前面的(简记: 后来者居上)

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

4. CSS语法规范

CSS语法规范有两部分构成:

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

备注1: 最后一个声明后的分号理论上能省略，但最好还是写上

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

注释的写法:

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

5. CSS代码规范

展开风格【开发时推荐，便于维护和调试】
```
h1 {
    color: red;
    font-size: 40px;
}
```
紧凑风格【项目上线时推荐，可减少文件体积】
```
h1{color:red;font-size:40px;}
```
备注:

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

二. CSS选择器

1. CSS基本选择器

通配符选择器、元素选择器、类选择器、id选择器

1.1 通配符选择器

作用: 可以选中所有的HTML元素
语法:
```
* {
    属性名: 属性值;
}
```
备注: 通配符选择器，通常用来处理一些元素自身携带的默认样式

1.2 元素选择器

作用: 为页面中某些元素统一设置样式
语法:
```
标签名 {
    属性名: 属性值;
}
```
备注: 元素选择器，无法差异化设置

1.3 类选择器

作用: 根据元素的class值，来选中某些元素
语法:
```
.类名 {
    属性名: 属性值;
}
```
注意:
1. 结构中class定义，样式.调用
2. class值是自定义的，遵守标准: 不要使用中文，尽量使用引文与数字组合，多个单词使用-连接，做到见名知意
3. 一个元素不能写多个class属性【一个元素中只能拥有一个class属性】
4. 一个元素的class属性，能写多个值，要用空格隔开

1.4 id选择器

作用: 根据元素的id属性值，来精确的选中某个元素
语法:
```
#id值 {
    属性名: 属性值;
}
```
注意:
1. 结构中id定义，样式#调用
2. id属性值: 尽量由字母、数字、下划线、短杠组成，最好以字母开头，不要包含空格，区分大小写
3. 一个元素只能拥有一个id属性，多个元素的id属性值不能相同
4. 一个元素可以同时拥有id和class属性

1.5 基本选择器总结

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

2. CSS复合选择器

CSS的选择器整体分为两大类: 基本选择器(通配选择器、元素选择器、类选择器、id选择器)、复合选择器(交集选择器、并集选择器、后代选择器、子元素选择器...)

复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。

复合选择器可以在复杂结构中，快速而准确的选中元素

2.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

2.2 并集选择器

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

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

示例:

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

注意:
1. 并集选择器，我们一般竖着写
2. 任何形式的选择器，都可以作为并集选择器的一部分
3. 并集选择器，通常用于集体声明，可以缩小样式表体积
4. 多个选择器之间使用英文的 , 进行分隔，此处的都好代表的含义是: 或

2.3 后代选择器

作用: 选中指定元素中，复合要求的后代元素
语法: 选择器1 选择器2 选择器3 ...选择器n {} 【先写祖先，再写后代】

示例

/* 选中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. 选择器之间，用空格隔开，空格可以理解为: xxx中的，其实就是后代的意思
3. 儿子、孙子、重孙子、都算是后代
4. 结构一定要符合HTML嵌套要求，例如: 不能p中写h1~h6

2.4 子代选择器

作用: 选中指定元素中，符合要求的所有子元素儿子元素【先写父，再写子】
语法: 选择器1 > 选择器2 > 选择器3 > ...选择器n {}

示例

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

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

2.5 兄弟选择器

相邻兄弟选择器:
- 作用: 选中指定元素后，符合条件的相邻[兄弟元素](相邻: 紧挨着它的下一个，简记: 睡在我下铺的兄弟)
- 语法: 选择器1+选择器2 {}
- 示例
```
/* 选中div后相邻的兄弟p元素【选中的是p元素】 */
div+p {
    color: red
}
```
通用兄弟选择器:
- 作用: 选中指定元素后，符合条件的所有[兄弟元素](简记: 睡在我下铺的所有兄弟)
- 语法: 选择器1~选择器2 {}
- 示例:
```
/* 选中div后的所有的兄弟p元素 */ 
div~p { 
    color:red;
}
```
注意: 以上两种兄弟选择器，选择的都是当前元素的下面兄弟【不包含当前元素

2.6 属性选择器

作用: 选中属性值符合一定要求的元素
语法:

[属性名] 选中具有某个属性的元素

[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素

[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素

[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素

[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素

示例:

/* 选中具有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;
}

2.7 伪类选择器

作用: 选中特殊状态的元素
常用的伪类选择器:

**一. 动态伪类 **
1. :link 超链接未被访问的状态
2. :visited 超链接访问过的状态
3. :hover 鼠标悬停在元素上的状态
4. :active 元素激活的状态[什么是激活](按下鼠标不松开，注意动态伪类的编写顺序: 遵循LVHA的顺序)
5. :focus 获取焦点的元素 [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 个
- 了解即可:
  1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个
  2. :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
  3. :only-child 选择没有兄弟的元素（独生子女）
  4. :only-of-type 选择没有同类型兄弟的元素
  5. :root 根元素
  6. :empty 内容为空元素（空格也算内容）
三. 否定伪类
- :not(选择器) 排除满足括号中条件的元素
四. UI伪类
1. :checked 被选中的复选框或单选按钮
2. :enable 可用的表单元素（没有 disabled 属性）
3. :disabled 不可用的表单元素（有 disabled 属性）
五. 目标伪类(了解)
- :target 选中锚点指向的元素
六. 语言伪类(了解)
- :lang() 根据指定的语言选择元素（本质是看 lang 属性的值）

2.8 伪元素选择器

作用: 选中元素中的一些特殊位置
常用伪元素:
- ::first-letter 选中元素中的第一个文字
- ::first-line 选中元素中的第一行文字
- ::selection 选中被鼠标选中的内容
- ::placeholder 选中输入框的提示文字
- ::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）
- ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）

3. 选择器的优先级(权重)

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了

简单描述:

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
详细描述:
1. 计算方式: 每个选择器，都可计算出一组权重，格式为: (a, b, c)
  - a: ID选择器的个数
  - b: 类、伪类、属性选择器的个数
  - c: 元素、伪元素选择器的个数
  示例:
  
  选择器权重
  ul>li （0,0,2)
  div ul>li p a span (0,0,6)
  #atguigu .slogan (1,1,0)
  #atguigu .slogan a (1,1,1)
  #atguigu .slogan a:hover (1,2,1)
2. 比较规则: 按照从左到右的顺序，依次比较大小，当前位胜出后，后边的不再对比，例如:
  - (1,0,0) > (0,2,2)
  - (1,1,0) > (1,0,3)
  - (1,1,3) > (1,1,2)
3. 特殊规则:
  - 行内样式权重大于所有选择器
  - !important的权重，大于行内样式，大于所有选择器，权重最高！
4. 图示:

选择器	权重
ul>li	（0,0,2)
div ul>li p a span	(0,0,6)
#atguigu .slogan	(1,1,0)
#atguigu .slogan a	(1,1,1)
#atguigu .slogan a:hover	(1,2,1)

三. CSS三大特性

1. 层叠性

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

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

2. 继承性

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

text-?? ， font-?? ， line-?? 、 color ...
备注: 参照MDN网站，可查询属性是否可被继承

3. 优先级

简单聊: !important > 行内样式 > id选择器 > 类选择器 > 元素选择器 > * > 继承的样式
详细聊: 需要计算权重

计算权重时需要注意: 并集选择器的每一个部分是分开算的

CSS学习笔记

CSS