文章目录
一、CSS 是什么
层叠样式表 (Cascading Style Sheets)
CSS 能够对网页中元素位置的排版进行像素级精准控制，实现美化页面的效果，能够做到页面样式和结构的分离。
二、基本语法规范
选择器 + {一条/N条声明}
- 选择器决定针对谁修改 (找谁)
- 声明决定修改啥. (干啥)
- 声明的属性是键值对，使用
;区分键值对
使用 : 区分键和值
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>
注意:
- CSS 要写到 style 标签中，style 标签可以放到页面任意位置.
- 一般放到 head 标签内 CSS
- 使用 /* */ 作为注释（使用 ctrl + / 快速切换）
三、引入方式
1、内部样式表
写在 style 标签中，放在 html 内部
理论上 style 放在 html 的哪里都行，但一般放在 head 标签内
优点：能够分离样式和页面结构
缺点：分离的还不够彻底，css 内容一旦很多显得很臃肿
2、行内样式表
通过 style 属性来指定某个标签的样式，只适合简单的样式，针对单个标签生效
缺点：只能写简单的样式，而且这种样式优先级高，会覆盖其他样式
<style>
div {
color: red;
}
</style>
<div style="color: green;">白日依山尽，黄河入海流</div>
可以看出：颜色 red 被 green 覆盖了
3、外部样式
实际开发中最常用的方式：创建一个 css 文件，在文件中写入 css 相关样式，使用 link 标签引入 css
<link rel="stylesheet" href="[css文件路径]">
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>白日依山尽，黄河入海流</div>
</body>
</html>
style.css
div {
color: red;
}
效果展示：
优点：样式和页面结构彻底分离
缺点：受浏览器缓存影响，修改之后不一定立即生效
关于缓存:
这是计算机中一种常见的提升性能的技术手段。
网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的。如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了)，从而提高访问效率。
可以通过 ctrl + F5 强制刷新页面，强制浏览器重新获取 css 文件。
四、代码风格
1、样式格式
（1）紧凑风格
p { color: red; font-size: 50px; }
（2）展开风格（建议此风格）
p {
color: red;
font-size: 50px;
}
2、样式大小写
CSS 不区分大小写，但是开发时建议统一使用小写
3、空格规范
（1）冒号后面带一个空格
（2）选择器和 { 之间也有一个空格
五、选择器
1、选择器的功能
选中页面中指定的标签元素，要先选中元素，才能设置元素的属性。
2、选择器的种类
- 基础选择器：单个选择器构成
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
- 复合选择器：把多种基础选择器综合运用起来
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
参考文档：https://www.w3school.com.cn/cssref/css_selectors.asp
3、基础选择器
3.1 标签选择器
特点：
- 能快速为同一类型的标签都选择出来
- 但不能差异化选择
<style>
p {
color: green;
}
div {
color: red;
}
</style>
<p>白日依山尽</p>
<p>白日依山尽</p>
<p>白日依山尽</p>
<div>黄河入海流</div>
<div>黄河入海流</div>
<div>黄河入海流</div>
3.2 类选择器
特点：
- 差异化表示不同标签
- 可以让多个标签都选择同一个类
<style>
.one {
color: red;
}
.two {
background-color: blue;
}
</style>
<div class="one">白日依山尽</div>
<div>黄河入海流</div>
<div class="one">欲穷千里目</div>
<div>更上一层楼</div>
- 类名用
.开头 - 下方的标签用 class 属性来调节
- 一个类可以被多个标签使用，一个标签也能使用多个类(多个类名要使用空格分割，这种做法可以让代码更好复用)
- 如果是长的类名，可以使用 - 分割
- 不要使用纯数字，或者中文，以及标签名来命名类名
3.3 id 选择器
特点（和类选择器类似）：
- CSS 中使用 # 开头表示 id 选择器
- id 选择器的值和 html 中某个元素的 id 值相同
- html 的元素 id 不必带 #
- id 是唯一的，不能被多个标签使用(这一点是和类选择器最大的区别)
<style>
#one {
color: red;
}
</style>
<div id="one">白日依山尽</div>
3.4 通配符选择器
使用 * 的定义，选取所有的标签
* {
color: red;
}
页面的所有内容都会被改成红色，不需要被页面结构调用。
3.5 基础选择器小结
| 作用 | 特点 | |
|---|---|---|
| 标签选择器 | 能选出所有相同标签 | 不能差异化选择 |
| 类选择器 | 能选出一个或多个标签 | 根据需求选择，最灵活，最常用 |
| id 选择器 | 能选出一个标签 | 唯一，同一个 id 在 HTML 中只能出现一次 |
| 通配符选择器 | 选出所有标签 | 特殊情况下使用 |
4、复合选择器
4.1 后代选择器
又叫包含选择器，选择某个父元素中的某个子元素
元素1 元素2 { 样式声明 }
- 元素1和元素2要使用空格分开
- 元素1是父级，元素2是子级，只选元素2，不影响元素1
<style>
ol li {
color: red;
}
</style>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<ul>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
ol 中元素修改不影响 ul 中的元素
元素2 不一定是儿子，也可以是孙子
可以是任意基础选择器的组合（包括类选择器、id 选择器）
4.2 子选择器
和后代选择器类似，但是只能选择子标签
元素1>元素2 { 样式声明 }
- 使用
>分割 - 只选亲儿子，不选孙子元素
div>a {
color: red;
}
<div>
<a href="#">111</a>
<p><a href="#">222</a></p>
</div>
4.3 并集选择器
用于选择多组标签（集体声明）
元素1,元素2 { 样式声明 }
- 通过
,分割多个元素 - 表示同时选中元素1，元素2
- 任何基础选择器都可以使用并集选择器
- 并集选择器建议竖着看，每个选择器占一行（最后一个选择器不能加逗号）
div, ul>li {
color: red;
}
<div>111</div>
<h4>222</h4>
<ul>
<li>333</li>
</ul>
4.4 伪类选择器
（1）链接伪类选择器
a:link选择未被访问过的链接
a:visited选择已经被访问过的链接
a:hover选择鼠标指针悬停的链接
a:active选择活动链接（鼠标按下了但未弹起）
<style>
a:link {
color: black;
text-decoration: none; /* 去掉 a 标签的下划线 */
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
</style>
<a href="#">阿刃, 你怎么这么可爱</a>
-
如何让一个被访问过的链接恢复成未被访问的状态？
清空历史记录即可，ctrl + shift +delete -
注意：如果将 active 拿到前面去会失效，经作者实验，伪类选择器是按选择链接动作顺序来放置选择器代码的
（2）:focus 伪类选择器
选取获取焦点的 input 表单元素
<style>
.one>input:focus {
color: red;
}
</style>
<div class="one">
<input type="text">
/* 此时被选中的表单字体会变成红色 */
</div>
5、复合选择器小结
| 选择器 | 作用 | 注意事项 |
|---|---|---|
| 后代选择器 | 选择后代选择器 | 可以是孙子元素 |
| id 选择器 | 只能选择子元素 | 不可以选择孙子元素 |
| 并集选择器 | 选择相同样式的元素 | 更好做到代码重用 |
| 链接伪类选择器 | 选择不同状态链接 | a:hover |
:focus 链接伪类选择器 |
选择被选中的元素 | input:focus |
六、常见元素属性
CSS 属性参考文档：https://www.w3school.com.cn/cssref/index.asp
1、字体属性
1.1 设置字体
<style>
.a .one {
font-family: 'Microsoft YaHei';
}
.a .two {
font-family: '宋体';
}
</style>
<div class="a">
<div class="one">
微软雅黑
</div>
<div class="two">
宋体
</div>
</div>
- 字体名称可以用中文但不建议
- 多个字体之间用逗号分隔（从左至右查找字体，如果找不到会使用默认字体）
- 如果字体名有空格，使用引号包裹
- 建议使用常见字体，否则兼容性不好
1.2 大小
p {
font-size: 20px;
}
- 不同的浏览器字体大小不一样，最好给个明确的值，chrome 默认大小 16px
- 可以给 body 标签使用 font-size
- 标题标签需要单独指定大小
1.3 粗细
p {
font-weight: 700
}
- bold 表示加粗，bold == 700；normal 表示不加粗，normal == 400
- 取值范围为 [100,900]
1.4 文字样式
p {
font-style: italic;
}
-
font-style: italic设置倾斜 -
font-style: normal取消倾斜 - 很少把某个文字变为倾斜，但经常把 em / i 变成不倾斜
2、文本属性
2.1 文本颜色
（1）认识 RGB
我们的显示器是由很多很多的 “像素” 构成的，每个像素视为一个点，这个点就能反映出一个具体的颜色。
我们使用 R (red)，G (green)，B (blue) 的方式表示颜色(色光三原色)，三种颜色按照不同的比例搭配，就能混合出各种五彩斑斓的效果。
计算机中针对 R, G, B 三个分量，分别使用一个字节表示(8个比特位，表示的范围是 0-255，十六进制表示为 00-FF)
数值越大，表示该分量的颜色就越浓，(255, 255, 255) 就表示白色; (0, 0, 0) 就表示黑色。
（2）设置文本颜色
color: red;
color: rgb(255, 0, 0);
color: #ff0000;
注意：color: #ff00ff; 也可以写成 color: #f0f;
2.2 文本对齐
控制文字水平方向的对齐，不止能控制文本对齐，还能控制图片等元素居中或靠右
text-align: left; /* 左靠齐 */
text-align: center; /* 居中对齐 */
text-align: end; /* 右靠齐 */
2.3 文本装饰
text-decoration: underline; /* 下划线 */
text-decoration: none; /* 什么都没有，可以给 a 标签去下划线 */
text-decoration: overline; /* 上划线 */
text-decoration: line-through; /* 删除线 */
2.4 文本缩进
控制段落的首行缩进，不影响其他行
.a .one {
text-indent: 2em;
}
.a .two {
text-indent: -2em;
}
<div class="a">
<div class="one">正常缩进</div>
<div class="two">反向缩进</div>
</div>
- 单位可以使用 em 或 px
- 建议使用 em ，一个 em 等于当前元素的文字大小
- 缩进可以是负的，表示往左缩进
2.5 行高
行高指上下文本行之间的基线距离
HTML 展示文字涉及到这几个基准线：
- 顶线
- 中线
- 基线
- 底线
内容区：底线和顶线包裹的区域，即下图深灰色背景区域
基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离
行高 = 上边距 + 下边距 + 字体大小，行高也可以取 normal，这取决于浏览器
<style>
.one .two {
line-height: 40px;
font-size: 16px;
}
</style>
<div class="one">
<div>第一行</div>
<div class="two">第二行</div>
<div>第三行</div>
</div>
上下边距是相等的，此处字体大小 16px，行高 40px，那么上下边距就是 12px
行高等于元素高度，可以实现文本垂直居中对齐
3、背景属性
3.1 背景颜色
background-color: red;
默认是 transparent (透明) 的，可以通过设置颜色的方式修改。
3.2 背景图片
比 image 更方便控制图片位置
<style>
.one .two {
background-image: url("image/xiao.webp");
height: 300px;
}
</style>
<div class="one">
<div class="two">背景图片</div>
</div>
- url 可以是绝对路径，也可以是相对路径
- url 可以加上引号，也可以不加
3.3 背景平铺
-
repeat平铺 -
no-repeat不平铺 -
repeat-x水平平铺 -
repeat-y垂直平铺
默认是 repeat ，背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方
<style>
* {
color: red;
}
.bgr .one {
background-image: url('image/ren2.jpg');
height: 200px;
background-repeat: repeat;
}
.bgr .two {
background-image: url('image/ren2.jpg');
height: 200px;
background-repeat: no-repeat;
}
.bgr .three {
background-image: url('image/ren2.jpg');
height: 200px;
background-repeat: repeat-x;
}
.bgr .four {
background-image: url('image/ren2.jpg');
height: 200px;
background-repeat: repeat-y;
}
</style>
<div class="bgr">
<div class="one">平铺</div>
<div class="two">不平铺</div>
<div class="three">水平平铺</div>
<div class="four">垂直平铺</div>
</div>
3.4 背景位置
修改图片的位置
参数有三种风格：
- 方位名词：(top, left, right, bottom)
- 精确单位：坐标或百分比（以左上角为原点）
- 混合单位：同时包含方位名词和精确单位
<style>
.bgp .one {
background-image: url('image/ren.jpg');
height: 500px;
background-repeat: no-repeat;
background-color: green;
background-position: center;
}
</style>
<div class="bgp">
<div class="one">背景居中</div>
</div>
注意：
- 如果参数的两个值都是方位名词，则前后顺序无关（top left 和 left top 等效）
- 如果只指定了一个方位名词，则第二个默认居中
- 如果参数是精确值，则的的第一个肯定是 x ，第二个肯定是 y（100 200 意味着 x 为 100，y 为 200）
- 如果参数是精确值，且只给了一个数值，则该数值一定是 x 坐标，另一个默认垂直居中
- 如果参数是混合单位，则第一个值一定为 x，第二个值为 y 坐标（100 center 表示横坐标为 100，垂直居中）
关于坐标系：
计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的)
3.5 背景尺寸
- 具体的数值：如 40px 60px 表示宽度为 40px, 高度为 60px
- 百分比: 按照父元素的尺寸设置.
- cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
- contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
contain
cover
4、圆角矩形
4.1 基本用法
通过 border-radius 使边框带圆角效果
border-radius: length;
length 是内切圆的半径
<style>
.bgp .one {
height: 200px;
width: 300px;
border: red solid 2px;
border-radius: 10px;
}
</style>
<div class="bgp">
<div class="one">圆角矩形</div>
</div>
4.2 生成圆形
让 border-radius 的值为正方形宽度的一半即可
<style>
.bgp .one {
height: 200px;
width: 200px;
border: red solid 2px;
border-radius: 100px;
}
</style>
<div class="bgp">
<div class="one">圆形</div>
</div>
4.3 生成圆角矩形
让 border-radius 的值为矩形高度的一半即可
<style>
div {
height: 100px;
width: 200px;
border: red solid 2px;
border-radius: 50px;
}
</style>
4.4 展开写法
border-radius 是一个复合写法，实际上可以针对四个角分别设置
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;
七、Chrome 调试工具
1、打开浏览器（打开 Chrome 调试工具）
- 直接按 F12 键
- 鼠标右键页面 => 检查元素
2、标签页含义
- elements 查看标签结构
- console 查看控制台
- source 查看源码+断点调试
- network 查看前后端交互过程
- application 查看浏览器提供的一些扩展功能(本地存储等)
- Performance, Memory, Security, Lighthouse 暂时不使用，先不深究
3、elements 标签页使用
- ctrl + 滚轮进行缩放，ctrl + 0 恢复原始大小
- 使用 左上角 箭头选中元素
- 右侧可以查看当前元素的属性，包括引入的类
- 右侧可以修改选中元素的 css 属性。例如颜色，可以点击颜色图标，弹出颜色选择器，修改颜色；例如字体大小，可以使用方向键来微调数值
- 此处的修改不会影响代码，刷新就还原了~
- 如果 CSS 样式写错了，也会在这里有提示（黄色感叹号）
八、元素的显示模型
在 CSS 中，HTML 的标签的显示模型有很多种，此处只解说两种：（1）块级元素（2）行内元素
1、块级元素
常见的元素：
- h1 - h6
- p
- div
- ul
- ol
- li
特点：
（1）独占一行
（2）高度、宽度、内外边距、行高都可以控制
（3）宽度默认是父级元素的 100%（和父级元素一样高）
（4）是一个容器(盒子)，里面可以放块级元素和行内元素
注意：
（1）文字类的元素内不能使用块级元素
（2）p 标签主要存放文字，内部不能放块级元素，尤其是 div
2、行内元素 / 内联元素
常见的元素：
- a
- strong
- b
- em
- i
- del
- s
- ins
- u
- span
特点：
（1）不独占一行，一行可以显示多个
（2）设置高度、宽度、行高均无效
（3）左右外边距有效(上下无效)，内边距有效
（4）默认宽度就是本身的内容
（5）行内元素只能容纳文本和其他行内元素，不能容纳块级元素
注意：
（1）a 标签中不能再放 a 标签
（2）a 标签里可以放块级元素，但更建议先把 a 标签转成块级元素
3、行内元素和块级元素的区别
（1）块级元素可以独占一行，行内元素不独占一行
（2）块级元素可以设置宽高，行内元素不可以设置宽高
（3）块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置
4、改变显示模型
（1）display: block ：改成块级元素
（2）display: inline ：改成行内元素
（3）display: inline-block ：改成行内块元素
九、盒模型
每一个 HTML 元素都相当于一个矩形的盒子，这里所说的盒模型都是块级元素，如果是行内元素建议转成块级元素再操作，不然不生效。
这个盒子有着几部分构成：
（1）边框：border
（2）内容：content
（3）内边距：padding
（4）外边距：margin
1、边框
（1）基础属性
- 粗细：
border-width - 样式：
border-style默认无边框，-
solid实线边框，dashed虚线边框，dotted点线边框 - 可以更改四个方向任意边框，
border-top上边框，border-bottom下边框，border-left左边框，border-right右边框
-
- 颜色：
border-color
可以简写，没有顺序要求，以上可以简写为：
border: 10px red dotted;
以下的代码只给上边框设为红色，其余为蓝色。利用到的层叠性，就近原则的生效。
border: 10px red solid;
border-top: blue;
（2）边框会撑大盒子
可以看出 width，height 是 200*100，边框是10px，而整个盒子大小是 220*120，相当于高度上下都增大了10px，宽度左右也都增大了10px，边框像素扩大了整个盒子的大小。
通过 box-sizing 属性可以修改浏览器行为，使边框不再撑大盒子。
box-sizing: content-box ：边框撑大盒子，默认情况
box-sizing: border-box ：边框不撑大盒子
2、内边距
padding 设置边框和内容之间的边距
（1）基础写法
默认内容顶着边框放置，可以用 padding 来控制内容和边框的距离
-
padding-top：设置上边距 -
padding-bottom：设置下边距 -
padding-left：设置左边距 -
padding-right：设置右边距
从上图可以看到一个绿色的边框，这就是设定的内边距，而盒子设定大小为 200*100，但实际大小为 230*130，可以看出内边距也会撑大盒子。使用 box-sizing: border-box 设定边框不撑大盒子。
（2）复合写法
可以把多个方向的 padding 合并在一起写
padding: 10px;：表示四个方向都是 10px
padding: 10px 20px;：表示上下边距是 10px，左右边距是 20px
padding: 10px 20px 30px;：表示上边距是 10px，左右边距是 20px，下边距是 30px
padding: 10px 20px 30px 40px;：表示上边距是 10px，右边距是 20px，下边距是 30px，左边距是 40px（顺时针）
3、外边距
控制盒子和盒子之间的距离
（1）基础写法
-
margin-top：设置上边距 -
margin-bottom：设置下边距 -
margin-left：设置左边距 -
margin-right：设置右边距
从上图可看出，div 标签上下外边距为设定的 20px，但是 p 标签没有设置却有上下外边距 16px，这是为什么呢？
注意：CSS 中上下外边距默认有 16px，左右外边距无。并且如果上下两个盒子都设置了外边距，那么两个盒子之间的距离为外边距大的；而若是两个盒子左右分布，则两个盒子之间的距离为外边距之和。如下图所示：
（2）复合写法（规则和 padding 一样）
-
padding: 10px;：表示四个方向都是 10px -
padding: 10px 20px;：表示上下边距是 10px，左右边距是 20px -
padding: 10px 20px 30px;：表示上边距是 10px，左右边距是 20px，下边距是 30px -
padding: 10px 20px 30px 40px;：表示上边距是 10px，右边距是 20px，下边距是 30px，左边距是 40px（顺时针）
（3）块级元素水平居中
- 指定宽度，不指定宽度默认和父元素一样
- 把水平 margin 设为 auto
以下三种方法均可：
margin: auto;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
4、去除浏览器默认样式
浏览器会给元素加上一个默认样式，尤其是内外边距，不同浏览器默认样式有所差别。
为了保证代码在不同浏览器上都能按照统一的样式显示，通常会去除浏览器默认样式
使用通配符选择器即可设置
* {
margin: 0;
padding: 0;
}
十、弹性布局
<style>
div {
height: 150px;
background-color: red;
}
span {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
上述代码效果如下：
当给 div 加上 display: flex 之后，效果如下：
此时 span 有了宽高，span 不再是行内元素。
给 div 加上 justify-content: space-around，效果为
1、flex 布局基本概念
flex 是 flexible box 的缩写，意为 “弹性盒子”
任何一个 html 元素都可以指定为 display: flex，完成弹性布局
flex 布局的本质是给父盒子添加 display: flex 来指定盒子的位置和排列方式
基础概念：
（1）被设置为 display: flex 属性的元素，称为 flex container
（2）它的所有子元素立刻成为了改容器的成员，称为 flex item
（3）flex item 可以纵向排列，也可以横向排列，称为 flex direction
注意：当父元素设置为 display: flex 之后，子元素的 float、clear、vertical-align 都会失效
2、常用元素
justify-content
设置主轴上的子元素排列方式，默认主轴为水平方向
| 属性取值 | 描述 |
|---|---|
| flex-start | 默认值，项目位于容器的开头 |
| flex-end | 项目位于容器的结尾 |
| center | 项目位于容器的中央 |
| space-between | 项目在行与行之间留有间隔 |
| space-around | 项目在行之前、行之间、行之后留有空间 |
未指定 justify-content，默认从左到右方向布局，同设定 flex-start
设置
justify-content: flex-end，此时元素都排列到右侧了
设置
justify-content: center，此时元素都居中排列
设置
justify-content: space-around，此时元素平分了空间
设置
justify-content: space-between，两侧元素先紧贴边框排列，再平分空间
align-items
设置侧轴上的元素排列，与主轴垂直
| 属性取值 | 描述 |
|---|---|
| stretch | 默认值，行拉伸以占据剩余空间 |
| center | 朝着弹性容器的中央对行打包 |
| flex-start | 朝着弹性容器的开头对行打包 |
| flex-end | 朝着弹性容器的结尾对行打包 |
| space-between | 行均匀分布在弹性容器中 |
| space-around | 行均匀分布在弹性容器中，两端各占一半 |
<style>
div {
height: 150px;
background-color: red;
justify-content: space-around;
display: flex;
}
span {
width: 100px;
background-color: green;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
上述代码效果如下：align-items: stretch 为默认值，即同上述代码未设置 align-items 的效果
将上述 span 添加 height: 100px;
设置
align-items: center，此时元素垂直居中
设置
align-items: flex-end，此时元素在最底下
