【前端】CSS

努力经营当下，直至未来明朗！

---

前言

Hi，这里依旧是不想秃头的宝贝儿！

本文主要就是简单介绍 【CSS】相关内容。

---

一个人最大的痛苦就是对自己无能的愤怒！

---

CSS：层叠样式表
（样式：其实就是某个东西长啥样）

---

一、【基本语法规范】

1. 格式：

选择器 + {一条/N条声明}

2. CSS是可以嵌入在html中的，当嵌入到html中时需要使用style标签。
   

• 选择器：声明针对哪个/哪些元素生效。
• CSS设置的具体属性：使用键值对。
• 若干个属性都在一个{}中，属性之间使用；来分割，键和值之间使用：来分割。

【css的特性可以借助开发者工具f12调试】

3. CSS的属性命名方式是带-的。
   如：font-size

注：之前学的变量命名风格：
① 驼峰命名：fontSize （Java、JS）
② 蛇形命名：font_size（C、C++、Python）
③ 脊柱命名：font-size （CSS，CSS中不能进行算术运算）

5. CSS中注释：/* */ （只支持这种注释，快捷键 ctrl+/）
   不能嵌套注释！！

---

二、【CSS引入方式】

1. 内部样式：使用style标签进行嵌入。
   

2. 内联样式：使用style属性（每个标签都可以有style属性，里面就可以直接写CSS，不必写选择器，只针对当前元素生效）

3. 当给一个元素分多种方式设置样式的时候，如果是不同属性就会进行叠加（都生效）；如果是相同样式，style 属性设置 的优先级>style 标签 优先级

4. CSS的样式优先级【前端面试典型面试题】

5. 外部样式：把CSS写到一个单独的.css文件中，通过link标签引入到html里面（一般是在head中引入）。
   

6. 外部样式和内联样式冲突了，还是内联样式优先级高
   外部样式和内部样式冲突了，看谁离元素更近。

7. 实际开发中，最主要的写法就是外部样式。写做外部样式，可以让页面结构和样式分离开，同时也可以复用到其他的页面中（写一个css文件，可以被多个html引用）

---

三、【代码风格】

1. 样式风格
   1）展开风格：适合于代码编写阶段；
   2）紧凑风格：适合于部署到生产环境中，减小开销。

2.样式大小写：虽然 CSS 不区分大小写, 我们开发时统一使用小写字母
3. 空格规范：

• 冒号后面带空格
• 选择器和 { 之间也有一个空格.

---

四、【CSS选择器】

CSS选择器描述了你要选中页面的哪个/哪些元素，{}中的样式就是针对这些元素生效的！

1. 基础选择器

1. 标签选择器：写个标签名字，标签名就表示针对当前页面中所有的指定标签都要被选中。
   

2. 类选择器：相同标签下呈现样式差异化

以.开头的就表示一个CSS的类名（这和java面向对象的类是不一样的）

然后在html中使用class属性，引用对应的CSS类名，从而使对应的样式针对指定元素生效。（引用的时候不带.）

【类选择器可以允许多个元素引用同一个类，是CSS选择器中最灵活最常见的方式。】

3. id选择器：每个选择器都有一个id属性，值在该页面中是唯一的。使用id选择器来选中到对应的元素上。
   # 开头表示的是id选择器。
   

4. 通配符选择器

 * { }
1

表示选中页面中的所有元素，可以让页面中的所有元素都被选中，通常用于干掉浏览器中的默认样式（浏览器默认样式可能在不同浏览器上不一样）

2. 复合选择器

【复合选择器】：多个基础选择器的组合

1. 后代选择器：
   ① 父子标签

ul是li的父标签，li是ul的子标签，即：li是ul的后代；
li 是div的父标签，ul是div的爷爷，div就是ul的孙子，也是后代。

② 格式： 元素1 元素2 {样式声明}
元素1、元素2可以是标签选择器，也可以是类选择器，还可以是id选择器

2. 子选择器：和后代选择器类似，但是只是选择子标签，无法选择孙子及其以后的标签。

使用>表示这仅仅是子元素的关系！！

【补充：下拉框中字体也可以改变颜色】

3. 并集选择器：针对多个不同的选择器应用相同的样式属性，使用 ， 进行分割。
   

4. 伪类选择器：选中元素的不同状态
   主要介绍两种：
   ① hover：鼠标放上去
   ② active：鼠标按下去（左键）
   【写按钮的时候很有用！】
   

   （如果要实现自己闪，就需要使用js的计时器使之周期性修改样式）

5. 以上是一些最简单的选择器，CSS中还有很多其他选择器
   （可以参考：MDN文档）

6. 学习前后端都可能需要经常查文档，前端查文档推荐MDN文档，搜索的时候使用 【关键词+mdn】

7. 注：其实样式style一般是放到head中的

---

五、【CSS常用元素属性】

1. 可以参考文档：CSS属性

1. 【字体相关属性】

1. 设置字体：使用font-family
   （需要保证设置的字体是浏览器运行的电脑上有的字体，使用的是单引号！）
   

2. 设置字体粗细：font-weight，值是100-900的整数（100的倍数），数字越大没字体越粗（数字后面没有任何单位！）。
   补充：不仅可以是数字，也可以是英文单词.（详细可以参考：字体粗细）
   

【可以通过CSS设置文字的大小和粗细，达到和h1标签类似的效果】

3. 文字倾斜：font-style

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
1
2
3
4

2. 【文本属性】

1. 文本颜色：color
   color的值有多种写法：

① 直接写英文单词：如green、yellow…
② 写成rgb/bgba的形式
（a是透明度，数字越小就越透明，0是全透明，1是不透明） （rgb：是计算机表示颜色的基本方式，光的三原色。)
计算机中典型的表示方式就是分别使用一个字节表示R、G、B，所以每种颜色的取值是0-255，合在一起颜色的取值就很多了
③ 写成 # 十六进制数字
注：针对十六进制的表示方式，是可以有缩写形式的（每个分量的两个数字都是一样的时候，就可以把六位数字缩写成三位数字）。如#AABBCC =》 #ABC

【以上三种颜色表示规则在其他的CSS和颜色相关的属性中也是如此】

补充：获取色号办法：使用qq截图

2. 文本对齐：text-align
   1）默认网页上的文字是居中对齐
   2）有时候需要居中对齐（如文章标题）、右对齐（如落款）
   3）文本对齐使用text-align来进行设置

3. 文本装饰：text-decoration
   常用取值:

• underline 下划线.
• [常用] none 啥都没有. 可以给 a 标签去掉下划线.
• overline 上划线. [不常用]
• line-through 删除线 [不常用]

none：可以将原本带有线装饰的文字去掉装饰。

① 注：在VSCode中编写代码时不必完全写出单词，输入首字母一般就行了，会自动补充
② 补：文字是啥颜色，下划线就是啥颜色的；如果想要让文字和下划线颜色不同就需要使用边框的方式来模拟下划线

4. 文本缩进：text-indent
   控制每个段落的首行自由缩进。
   但是如果想要精准控制缩进两个字的效果，那就需要知道一个字的大小（可以通过font-size设置字体大小 ） or 直接 2em（1em就是当前元素的一个文字的尺寸，如果前面的数字是负的就是往左缩进）

5. 行高：line-height
   相当于是：文字大小+行间距
   行高其实就是：基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离
   

3. 【背景属性】

1. 背景颜色：background-color
   颜色取值的表示方式和color完全相同

2. 背景图片：background-image
   ① 格式：background-image: url(图片路径);
   ② 设置的背景图片默认是平铺的。

注意:

1. url 不要遗漏.
2. url 可以是绝对路径, 也可以是相对路径
3. url 上可以加引号, 也可以不加.

3. 背景平铺：background-repeat
   ① 使用background-repeat来控制背景图的平铺/不平铺/水平平铺/竖直平铺
   ② 重要取值:

repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

③ 默认是 repeat.
④ 背景颜色和背景图片可以同时存在，但是背景图片在背景颜色的上方

4. 背景位置：background-position
   设置图片你显示位置：background-position （left、right、top、center、bottom）

两个center说明水平垂直都居中

或者是使用具体数值控制（相当于是坐标，原点一般在左上角）

5. 背景尺寸：background-size设置背景图片尺寸
   

contain、cover都是使图片变大，尽可能适应所给尺寸。
cover是尽可能拉伸，contain是尽可能把完整图片显示在内。

【body默认是没有高度的】
如何让图片大小跟着浏览器宽高改变？
先把background-size设置成contain，然后再让放背景图片的标签样式和窗口大小一样即可。
（父类body、html都要进行高度设置）

4. 【圆角矩形】

1. 圆角矩形 ：border-radius
   圆角矩形：border-radius: 20px;
   （数值越大，圆角就越大，弧线越强烈：想象矩形中有个内切圆，这个数值就是内切圆半径）

html元素默认是矩形，四个角都是90°的直角，比较锋利，不太好看。我们经常使用的是圆角矩形。

2. 圆形：border-radius:
   （如头像）
   首先要有一个正方形，然后设置圆角矩形，让圆角矩形的半径是正方形变长的一半就是一个圆形。

（在CSS+html中是无法直接搞个正圆的，只能搭配border-radius）
（但是在js中是有办法可以直接进行画圆，乐意画啥就画啥canvas api）

html的基本盘都是通过矩形构成的。

3. 展开写法：（不太常用）

border-radius: 10px 20px 30px 40px;

等价于：

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
（也就是：顺时针方向）

5. 【调试】（了解）

1. 打开浏览器

有两种方式可以打开 Chrome 调试工具（其他浏览器也是）：
直接按 F12 键
鼠标右键页面 => 检查元素

2. 标签页含义

elements 查看标签结构
console 查看控制台
source 查看源码+断点调试
network 查看前后端交互过程
application 查看浏览器提供的一些扩展功能(本地存储等)
Performance, Memory, Security,Lighthouse 暂时不使用, 先不深究

3. elements 标签页使用

ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.
使用 左上角 箭头选中元素
右侧可以查看当前元素的属性, 包括引入的类.

右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如 字体大小,可以使用方向键来微调数值. 此处的修改不会影响代码, 刷新就还原了
如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)

---

六、【元素的显示模式】

（元素的显示模式很多，重点介绍两个）

1. 块级元素：
   1）常见元素：

h1 - h6
p
div
ul
ol
li
table
tr

2）特点：

• 独占一行
• 高度, 宽度, 内外边距, 行高都可以控制.
• 宽度默认是父级元素宽度的 100% (和父元素一样宽)
• 是一个容器(盒子), 里面可以放行内和块级元素.

3） 注意：

• 文字类的元素内不能使用块级元素
• p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div

2. 行内元素/内联元素：
   1）常见元素：

a
strong
b
em
i
del
s
ins
u
span
…

2）特点：

不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素

3）注意：

a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做).
a 标签里可以放块级元素, 但是更建议先把 a转换成块级元素.

3. 行内元素和块级元素的区别：

① 块级元素独占一行, 行内元素不独占一行
② 块级元素可以设置宽高, 行内元素不能设置宽高.
③ 块级元素四个方向都能设置内外边距,行内元素垂直方向不能设置

4. 改变显示模式：
   1）可以使用display属性针对块级/行内元素相互转换。（绝大多数是把行内元素转为块级元素）
   2）取值：

display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素

display也就是实现了每个a独占一行

display还有一个用途：让元素隐藏：display：none

---

七、【盒模型】

页面上的html元素都是一个一个的矩形，每个矩形就可以视为“盒子”，盒子里面就可以装东西（如：文字、链接、图片、表格…其他任意元素）
每个盒子除了内容之外，还会有一些其他部分。

盒子构成部分：

边框 border
内容 content
内边距 padding
外边距 margin

html中的每个元素都是按照上述的规则进行展开的。

1. 边框

1. 基础属性：

① 粗细: border-width
② 样式: border-style, 默认没边框：solid 实线边框
dashed 虚线边框 dotted 圆点线边框
③ 颜色: border-color

2. 边框会撑大盒子。通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子。
   

3. 让文字居中：text-align：center 水平居中 line-height 行高和元素一样高
   

4. 边框还可以分方向来单独设置
   border-top/bottom/left/right
   

2. 【内边距】

1. padding ：设置内容和边框之间的距离.
2. padding:是给每个方向都设置。
3. 当然也可以分别给各个方向设置。
   

（如果记不住就使用显式的书写：padding-left、right、top、bottom）

3. 【外边距margin】

使用方法和padding非常相似，只不过margin控制的是元素之间的距离。

---

八、【弹性布局】

1. 之前所介绍的CSS属性都是针对元素自己的。

2. 弹性布局则是用来描述元素之间的关系的（相对位置关系），一般会用于网页布局。

3. HTML/CSS发展了这么多年，有很多种布局方式：

① 最早的是基于 表格 来布局（和之前的 填写简历 案例类似）
② 后来又有了基于 浮动 来布局（副作用大）
③ 再后来到2000年后又有了弹性布局（功能强且使用较简单），是当下最主流的布局方式
④ 然后到2010年后又有了一个 网格布局。弹性布局是一维的（一行一行来布局），而网格布局针对二维。 （还比较新，一些旧电脑的旧浏览器可能还不支持）

对于行内元素，宽度/高度/外边距等的设置都是不生效的！！

要想生效，就需要转成块级元素：

当把行内元素span设置成块内元素后，虽然宽度生效了，但是发现元素被分行了，也就是开始独占一行，不再在同一行上显示了。

要想这几个元素能够在水平方向排列开（不独占一行），此时就是弹性布局需要解决的问题。

disply:flex; 把当前元素设置成“弹性布局”的容器，里面的子元素就会按照弹性布局的规则来排列了（只是针对子元素生效，不影响孙子元素！！）

加到div上，因为span是div的子元素。此时div就是弹性布局的容器，里面的子元素（三个span）就按照弹性布局的规则来进行排列了

1. 弹性布局就解决了在一行里如何进行排列的问题：水平排列，靠左对齐。

2. 所以：由于块级元素本身就是垂直方向排列的，实际进行网页布局的时候，就是一行一行的往下布局；每一行里如果有多个元素并列就使用弹性布局。

3. 在弹性布局的父容器中可以使用justify-content属性来设置水平方向的排列方式。
   属性取值：
   

flex-start都是默认值：不管水平还是垂直

4. 垂直方向的排列，使用align-items进行排列。
   属性取值：参考1 or 参考2

5. 注意:

align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents

6. 小结：
   HTML&CSS：就可以写出一些简单的“静态网页”（网页内容固定）了，但是要想让网页动起来有更多的交互操作就需要使用js了。

---

THINK

1. 基础选择器：标签、类、id、通配符选择器
2. 符合选择器：后代、子、并集、伪类选择器
3. 常用属性：字体、文本、背景、圆角矩形
4. 行内元素和块级元素
5. 盒模型：边框boder、内边距padding、外边距margin
6. 弹性布局