CSS 学习笔记

CSS 基础

CSS 是什么？

常说前端三件套：HTML 、CSS、javaScript 。可以将这三者的关系视为：

HTML 一个光溜溜的人。【结构】
CSS 人身上穿的衣服。让人外表上看起来更美丽。【表现】
JavaScript 让人具有动作、表情、神态。人看起来更有活力。【行为】

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

CSS 的出现，让前端实现了 结构 与 样式 相分离。

CSS 的语法

CSS 语法规范由两部分组成：

选择器 ：找到要添加样式的元素。
声明块 ：设置具体的样式（声明块中可以有多个声明），声明的格式为：属性名: 属性值;

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

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

注释的写法：

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

CSS 的编写位置

CSS的编写位置有三种：元素的行内、html文件的内部、单独外部的CSS文件。

行内样式

写在标签的style属性中，又称为内联样式。
语法：

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

注意

1、行内样式表，只能控制当前标签的样式，对其他标签无效。

2、书写繁琐、样式不能复用。

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

内部样式

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

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

注意

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般都放在 <head> 标签中。

此种写法：样式可以复用、代码结构清晰。

并没有实现：结构与样式完全分离。

多个 HTML 页面无法复用样式。

外部样式

写在单独的.CSS文件中，随后在HTML文件中引入使用。
语法：

1、新建一个扩展名为.CSS的样式文件，把所有CSS代码都放入此文件中。(注意这里不要把<style>标签也复制进来了)

h1{
color: red;
font-size: 40px;
}

2、在HTML文件中引入.CSS文件。

1	<link rel="stylesheet" href="./xxx.css">

注意

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

<link> 标签属性说明：

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

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

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

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

样式表的优先级

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

内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（简记：“后来者居上”）。

同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：“后来者居上”）。

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

CSS 代码风格

展开风格

h1 {
color: red;
font-size: 40px;
}

紧凑风格——项目上线时再使用，可以减小文件体积。

1	h1{color:red;font-size:40px;}

备注

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

CSS 选择器

CSS 基本选择器

通配选择器
元素选择器
类选择器
ID选择器

通配选择器

作用：选中所有的 HTML 元素。
语法：
1
2
3
*{
属性名：属性值；
}

举例

/* 选择所有的元素，设置颜色与字体大小 */
*{
    color: orange;
    font-size: 40px;
}

通配选择器一般用的不多。但是在后续清除样式时可以有很大帮助。

元素选择器

作用：为页面中 某种元素 统一设置样式。

语法：

1
2
3

标签名{
    属性名：属性值；
}

举例

/* 为所有 h1 元素设置颜色与字体大小*/
h1 {
    color:green;
    font-size:40px;
}

/* 为所有的 p 元素设置颜色与字体大小 */
p {
    color:red;
    font-size:60px;
}

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

类选择器

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

这里的class就是元素的类名。

语法：

1
2
3

.类名 {
    属性名：属性值；
}

举例

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

/* 选择class值为answer的元素 */
.answer {
    color:green;
}

CSS的类选择器选择元素的class属性时要在class的值前带一个.。

class值，是自己创建元素时自己定义的。按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名要有意义，做到 “见名知意”。

一个元素中不能写多个class属性，下面是错误示例:
1
2
>
><h1 class="speak" class="big">你好啊</h1>
一个元素的class属性可以有多个值，要使用空格隔开，例如：
1
2
>
><h1 class="speak big">你好啊</h1>

ID选择器

作用：根据元素的id属性值来精准的选择某一个元素。

语法：

1
2
3

#id值 {
    属性名：属性值；
}

举例：

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

id属性值：尽量由字母、数字、下划线、短横线组成，最好以字母开头，不要包含空格、区分大小写。

一个元素只能有一个id属性，并且id的值要唯一。id的值就类似人的身份证号，具有一一对应。

一个元素可以同时拥有id、class属性。

基本选择器总结

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

CSS 复合选择器

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

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

1️⃣交集选择器

2️⃣并集选择器

3️⃣后代选择器

4️⃣子元素选择器

……

交集选择器

作用：选中同时符合多个条件的元素。
语法：选择器1选择器2选择器3…选择器n{ }
举例
1
2
3
4
5
6
7
8
/* 选中：类名为beauty的p元素，此种写法用的非常多！ */
p.beauty {
color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}
1. 并集条件中有标签名时，标签名必须写前面。
2. id选择器通常不作为选择器的条件，因为id一个人就能确定指定元素。
3. 交集选择器中不可能出现两个元素选择器，因为一个元素不可能既是p元素又是h元素。
4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty

并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。
语法：选择器1，选择器2，选择器3，…选择器n { }

多个选择器通过,连接，此处的，就是：或。
举例
1
2
3
4
5
6
7
8
/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
font-size: 40px;
background-color: skyblue;
width: 200px;
}
1. 并集选择器我们一般竖着写。
2. 任何形式的选择器都可以作为并集选择器的一部分。
3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

HTML元素间的关系

1️⃣父元素；2️⃣子元素；3️⃣祖先元素；4️⃣后代元素；5️⃣兄弟元素。

<div>
    <h1>欢迎阅读我的博客</h1>
    <ul>
        <li>笔记</li>
        <li>资源</li>
        <li>思维</li>
        <li>
            <span>高中化学</span>
        </li>
    </ul>
</div>

父元素：==直接==包裹某个元素的元素，就是该元素的父元素。

子元素：被父元素直接包含的元素。

祖先元素：父亲的的父亲….，一直往外找，都是祖先。

后代元素：儿子的儿子……，一直往里找，都是后代。

兄弟元素：具有相同父元素的元素，互为兄弟元素。

父元素也算是祖先元素的一种，但一般还是称父元素。

同理，子元素也是后代元素的一种。

后代选择器

作用：选定指定元素中，符合要求的后代元素。

语法：选择器1 [空格] 选择器2 [空格]…选择器n { } (先写祖先，再写后代)

1 2	1. 选择器之间，用空格隔开，空格可以理解为：" xxx 中的"，其实就是后代的意思。 2. 选择器 1234....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;
}

后代选择器，最终选择的是后代，不选中祖先。

儿子、孙子、重孙子，都算是后代。

结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

子元素选择器

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

子代选择器又称：子元素选择器、子选择器。

语法：选择器1>选择器2>选择器3>……选择器n { }

1 2	选择器之间，用 > 隔开， > 可以理解为：" xxx 的子代"，其实就是儿子的意思。选择器 1234....n ，可以是我们之前学的任何一种选择器。

举例

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

子代选择器，最终选择的是子代，不是父级。

子、孙子、重孙子、重重孙子 …… 统称后代！，子就是指儿子。

兄弟选择器

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

这两种兄弟选择器，选择的是下面的兄弟。

属性选择器

作用：选中属性值符合一定要求的元素。
语法：
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;}

伪类选择器

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

如何理解“伪” ? — 虚假的，不是真的。

如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。

常用的伪类选择器

一、动态伪类

二、结构伪类

三、否定伪类

四、UI伪类

五、目标伪类（了解）

六、语言伪类（了解）

伪元素选择器

选择器的优先级（权重）

CSS 三大特性

层叠性

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

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

CSS学习笔记