复习CSS记录的笔记。 从最基本的 CSS 概念开始，复习如何使用 CSS 同时，控制多个网页的样式和布局。它还涉及最新版本 CSS3 掌握新的标准化组件。 
文章目录
- 一、CSS介绍
-
- 1.CSS概述
- 2.CSS语法
- 3.CSS 注释
- 4.CSS 数值与单位
- 5.CSS样式类型
- 二.CSS基本样式
-
- 1.文字排版
- 2.样式列表
- 2.风格链接
- 3.Web字体
- 三、CSS 样式化区块
-
- 1.元素分类
- 2.区块模型
-
- padding（内边距）
- border（边框）
- margin(外边距)
- 高级框架操作
- 3.背景
- 4.图片
- 5.表格
- 6.轮廓
- 7.盒子阴影
- 8.圆角边框
- 9.练习
- 四. CSS选择器
-
- 1.选择器是什么？
- 2. 标签选择器
- 3.类选择器
- 4.id 选择器
- 5.通配符选择器
- 7.标签指定选择器
- 8.后代选择器
- 9.子代选择器
- 10.并集选择器
- 11.属性选择器
- 12.伪类选择器
- 13.CSS 层叠和继承
- 五.CSS 布局模型
-
- 1.布局模型概述
- 2.流动模型
- 3.浮动模型
- 3.清除浮动
- 4.层模型
- 六、CSS3介绍
-
- 1.什么是 CSS3
- 2.CSS3 的好处
- 3.浏览器前缀
- 七、CSS3 元素属性升级
-
- 1.背景
- 2.边框
- 九.CSS3 文本
-
- 颜色之 RGBA
- 2.text-shadow
- 3. text-overflow
- 3.overflow-wrap & word-break
- 十.CSS3 动画和过渡
-
- 1.渐变
- 2.过渡
- 3. 2D 、3D 转换
- 4.动画
- 十一.CSS3布局
-
- 1.Flex 布局
- 2.基本概念
-
- 3.flex-direction
- 4.flex-wrap
- 5.flex-flow
- 6.justify-content
- 7.align-items
- 8.align-content
- 9.flex
- 10.align-self
- 11.多媒体查询
- 12.用户界面
- 十二.CSS3 选择器
-
- 一、常用选择器
- 2.属性选择器
- 3.伪类选择器
- 总结
一、CSS介绍
1.CSS概述
层叠样式表(英语:Cascading Style Sheets，简写 CSS），又称串式列表、级联式列表、串联式列表、阶级式列表，用于结构化文档(如 HTML 文档或 XML 应用程序)由样式(字体、间距和颜色等)添加的计算机语言 W3C 定义和维护。最新版本是 CSS2.1，为 W3C 推荐标准。
注：定义来自维基百科。
直观的来说 CSS 是我们网页的美容师，为我们的网页添加风格，美化网页，让网页更漂亮。我们以前学到的 HTML 写出我们网页的结构。
2.CSS语法
CSS 语法单元是一种风格，每种风格包括两部分：选择器和声明（或规则）：
例子：
h1 {
color: red; } 注：在上述例子中 h1 是选择器，color 是属性，red 是属性值。
- 选择器：您通常需要设置样式 HTML 元素。
- 属性：是您需要设置的样式属性，如宽度、高度、颜色、大小等。
- 属性值：您需要设置的样式属性的具体值，如宽度和高度 px，颜色是什么？
3.CSS 注释
注释用于部分 CSS 添加额外的解释代码，或组织浏览器分析部分区域 CSS 代码。
语法：
/* 这是一行单行注释 */ /* 这是 多行注释 */ 新建一个 test.html 文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> p {
color: red; /*font-size:28px; font-weight:500;*/ } div {
width: 200px; height: 200px; /* background:blue;*/ background: red; } </style> </head> <body> <div>小牛</div> <p>小马使我快乐！</p> </body> </html> 4.CSS 数值与单位
你会在很多地方看到 CSS 单位中使用到数值。下面为大家介绍数值的最常用类别。
在网页中的颜色设置是非常重要，有字体颜色，背景颜色，边框颜色等，设置颜色的方法也有很多：
p {
color: pink;
}
/*给p标签的字体颜色设置为粉色*/
由 Red、Green、Blue 三种颜色的比例来配色，简称 RGB。
p {
color: rgb(154, 32, 432);
}
每一项的值可以是 0~255 之间的整数，也可以是 0~100% 的百分数，如：
p {
color: rgb(30%, 20%, 40%);
}
现在较为普遍的颜色使用法，其原理其实也是 RGB 设置，但是其每一项的值由 0~255 变成了十六进制 00-ff。
p {
color: #00eeff;
}
长度单位总结了几种常用单位：px，em，%，这三种单位都是相对单位。
px 像素（Pixel）。相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的。
特点：
- E 无法调整那些使用 px 作为单位的字体大小。
- 国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位。
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em=14px。如果 font-size 为 18px，那么 1em=18px。
p {
font-size: 14px;
line-height: 2em;
}
/*在这里的line-height行高被设置成了14*2=28px*/
p {
font-size: 14px;
line-height: 120%;
}
/*行高为：14*1.2=16.8*/
5.CSS样式类型
CSS 样式类型分为三种：内联式、内嵌式、外链式。
通过标签的 style 属性来设置元素的样式，语法格式为：
<标签名 style="属性1:属性值1; 属性2:属性值2; ..."> 内容 </标签名>
例子：
<p style="color:blue;">Hello World</p>
优点：十分灵活，书写方便，权重高（后面会提到）。 缺点：只能操作某一个标签，没有实现样式和结构相分离。
将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义。语法格式为：
<head>
<style type="text/css">
选择器 {
属性1:属性值1; 属性2:属性值2; ...}
</style>
</head>
例子：
<style type="text/css">
p{
color:blue;}
</style>
优点：可以通过一条语句操作多个标签或类。 缺点：只能控制一个页面，没有彻底实现样式和结构分离。
将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中。语法格式为：
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
注：href 定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。rel 定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”，表示被链接的文档是一个样式表文件。
例子：
首先我们要创建一个 css 文件，比如：main.css。然后在里面就能直接写 css 代码了。比如:
p {
color: blue;
}
其次我们在 html 文件中引入这个 css 文件。
<link rel="stylesheet" href="main.css" />
优点：一个单独的 CSS 文件，多个 HTML 文件可以引用一个 CSS 样式表文件。HTML 代码和 CSS 代码分离,要写什么就在哪个文件去找，修改方便。
注：这样写的前提是 HTML 页面与 CSS 文件在同一文件夹下。行内样式表一般写在标签头部，内嵌式样式表、外联式一般写在 标签内。为了编码规范，希望大家尽量使用外联式来写我们的 CSS 代码。
我三种 CSS 样式类型，如果对于同一个元素，同时使用了三种方法设置了 CSS 样式，这个时候，哪个方法是有效的呢 ？
可以记住一个优先级：
内联式 > 嵌入式 > 外链式
但是“嵌入式 > 外链式” 有一个前提：嵌入式 CSS 样式的位置一定在外链式后面
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body>
<p style="font-size:60px">
<span style="color:blue">G</span>
<span style="color:red">o</span>
<span style="color:orange">o</span>
<span style="color:blue">g</span>
<span style="color:green">l</span>
<span style="color:red">e</span>
</p>
</body>
</html>
注：span 是一个行内标签，它能够不换行显示。
二.CSS基本样式
1.文字排版
通过 font-family 属性设置字体种类，注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
body {
font-family: 'yahei';
/*微软雅黑*/
}
</style>
</head>
<body>
<p>小牛</p>
</body>
</html>
几种几乎所有系统都能够支持的几种字体：Arial，Courier New，Georgia，Times New Roman，Trebuchet MS，Verdana。
字体大小通过 font-size 属性设置。字体的常用单位是：px，em。字体颜色通过 color 属性来设置。
<style>
body {
font-family: 'yahei';
font-size: 40px;
color: red;
}
</style>
<body>
<p>小牛</p>
</body>
注意：这里只展示
通过 font-weight 属性设置字体的粗细。常用的有 normal：字体正常，bold：文字加粗。
<style>
body {
font-size: 40px;
color: red;
font-weight: bold;
}
</style>
<body>
<p>小牛</p>
</body>
通过 font-style 属性设置文字格式。
- normal: 将文本设置为普通字体 (将存在的斜体关闭)。
- italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
- oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
body {
font-size: 40px;
color: red;
font-style: italic;
}
通过 text-decoration 属性设置或者取消字体上的文本装饰，我们一般会使用这个属性去掉链接上的默认下划线。
可用值为：
- none: 取消已经存在的任何文本装饰。
- underline: 文本下划线。
- overline: 文本上划线。
- line-through: 穿过文本的线（删除线）。
body {
font-size: 40px;
color: red;
font-style: italic;
text-decoration: underline;
}
段落缩进使用 text-indent 属性，中文文字中的段前习惯空两个文字的空白。
<style>
body {
font-size: 14px;
color: red;
font-style: italic;
text-decoration: underline;
text-indent: 2em;
}
</style>
<body>
<p>小牛和小马是好朋友</p>
</body>
可以使用 line-height 属性设置段落行高。
<style>
body {
font-size: 14px;
color: red;
}
</style>
<body>
<p>小牛和小马是好朋友</p>
<p style="line-height:30px">小牛和小马是好朋友</p>
</body>
当两个段落一个设置行高，一个未设置行高时的效果：
可以使用 letter-spacing 属性设置文字间距或者字母间距。
<style>
body{
font-size:14px;
color:red;
letter-spacing:2em;
}
</style>
</head>
<body>
<p>小牛和小马是好朋友</p>
</body>
如果想为块状元素中的文本、图片设置样式居中，可以使用text-align 属性。
<style>
body{
font-size:14px;
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>小牛和小马是好朋友</p>
</body>
同样也可以使用 text-align:left 设置左对齐，使用 text-align:right 设置右对齐。
2.样式化列表
list 列表大体上和其他文本一样，这里讲解一些特殊用在列表上的 CSS 属性。
符号样式：用 list-style-type 设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。常见的取值有：
- disc 无序列表的默认值，实心圆。
- circle 空心圆。
- square 实心方块。
- decimal 有序列表的默认值阿拉伯数字。
- lower-alpha 小写英文字母。
- upper-alpha 大写英文字母。
栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>555</li>
<li>666</li>
<li>777</li>
</ol>
</body>
</html>
运行效果：
项目符号位置：通过 list-style-position 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
- 默认值为 outside，这使项目符号位于列表项之外。
- 如果值设置为 inside，项目条目则位于行内。
我们把前面的例子设置为 inside 来看看效果,为了便于查看效果，我们为 ul 和 li 设置背景色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
ul {
list-style-type: circle;
list-style-position: inside;
background-color: red;
}
ol {
list-style-type: lower-alpha;
}
li {
background-color: gold;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>555</li>
<li>666</li>
<li>777</li>
</ol>
</body>
</html>
效果为：
2.样式化链接
选择器中有以下几种伪类 :link、 :hover、 :active、 :visited， 我们也可以为伪类设置样式。
首先我们写一个链接，来看看它默认的一些样式：
<a href="#">我是链接</a>
效果图： 我们发现以下特点：
- 链接具有下划线。
- 未访问过的 (Unvisited) 的链接是蓝色的。
- 访问过的 (Visited) 的链接是紫色的。
- 悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。
- 激活 (Active) 链接的时候会变成红色 (用鼠标左键点击链接)。
知道链接的默认样式后，我们同样可以使用 color 属性改变链接不同状态的颜色，使用 text-decoration 属性去掉链接默认的下划线。一般来说对于链接的样式，掌握这两个就够了。
<style>
a:hover {
color: red;
text-decoration: none;
/*鼠标经过，字体颜色变成红色，并且去掉下划线*/
}
</style>
<body>
<a href="https://www.lanqiao.cn/">实验楼</a>
</body>
3.Web字体
对于字体的使用来说，有时候我们可能并不仅仅满足于使用自带的字体。而通过 Web 字体，我们可以使用更多的不同的文本样式。
首先我们通过 @font-face 指定要下载的字体文件。
@font-face {
font-family: 'Bitstream Vera Serif Bold';
src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');
}
然后使用 @font-face 中指定的字体种类名称来将你的定制字体应用到你需要的地方，比如说：
body {
font-family: 'Bitstream Vera Serif Bold', serif;
}
完整的代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
@font-face {
font-family: 'Bitstream Vera Serif Bold';
src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');
}
body {
font-family: 'Bitstream Vera Serif Bold', serif;
}
</style>
</head>
<body>
<div>我爱学习，学习使我快乐！</div>
</body>
</html>
使用 Web 字体后在浏览器中运行的效果图为： 再来看看没有使用之前是什么样子的： 注：现在网上有很多免费可以使用的 web 字体，大家可以自行百度搜索下载使用在自己的网页当中。比如：Google Web Fonts。
三、CSS 样式化区块
1.元素分类
在 HTML 中的标签元素大体被分为三类：块级元素、行内元素、行内块元素。
常用的块级元素：
<div>
<p></p>
<h1>
...
<h6>
<ol>
<ul>
<table>
<address>
<blockquote>
<form></form>
</blockquote>
</address>
</table>
</ul>
</ol>
</h6>
</h1>
</div>
常见的行内元素：
<a>
<span>
<br />
<i>
<em>
<label> <label></label></label></em></i></span
></a>
常见的行内块元素：
<img /> <input />
块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可以自定义 width 和 height，除此之外，块级元素独自占据一行高度（float 浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。
块级元素有以下特点：
- 每个块级元素都从新一行开始，并且其后的元素都另起一行。
- 元素的高度、宽度、行高以及顶和底边间距都可以设置。
- 元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素宽度一致）。
行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。
行内元素有以下特点：
- 和其他元素在一行上。
- 元素的高度、宽度、行高以及顶和底边间距都不可以设置。
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如 input、img 就是行内块级元素，它可以设置高宽以及一行多个。
具体特点如下：
- 和其他元素在一行上。
- 元素的高度、宽度、行高以及顶和底边间距都可以设置。
2.区块模型
区块模型也就是我们常说的盒子模型，而所谓盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的。CSS 定义的宽和高，指的是填充以里的内容范围。
因此盒子的宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距。
每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。我们用一张图来表示：
padding（内边距）
padding 内边距位于内容框的外边缘与边界的内边缘之间。padding-top:上内边距，padding-right:右内边距，padding-bottom:下内边距，padding-left:左内边距。
设置内边距的写法：
- padding:5px 10px 15px 20px;表示上内边距是 5 px，右内边距是 10 px，下内边距是 15 px，左内边距是 20 px。
- padding:5px 10px 15px;表示上内边距是 5 px，右内边距和左内边距是 10 px，下内边距是 15 px。
- padding:5px 10px;表示上内边距和下内边距是 5 px，右内边距和左内边距是 10 px。
- padding:10px;表示所有 4 个内边距都是 10 px。
注：padding 属性接受长度值或百分比值，但不允许使用负值。如果使用百分比值，百分数值是相对于其父元素的 width 计算的。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#box1 {
width: 200px;
height: 200px;
background-color: red;
padding: 20px 10px 10px 50px;
}
#box2 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
可以看到，同样是设置高宽为 200 像素的盒子，有 padding 的明显要大一些，padding 在边框里面。
border（边框）
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。你可以设置它的粗细，样式和颜色。
边框语法：
border: border-width||border-style||border-color;
例子：
div {
border: 2px solid red;
}
这条代码能给 div 设置边框粗细为 2px、样式为实线、颜色为红色的边框。
注意：border-style（边框样式）的常用样式有：dashed（虚线）、dotted（点线）、solid（实线）.
你可以按照上右下左的格式，分别写出元素的各个边框的属性。
例子：
div {
border-style: solid;
border-width: 15px 5px 15px 5px;
}
也可以简写为：
div {
border-style: solid;
border-width: 15px 5px;
}
注：和前面 padding 的简写方式一样，有遗忘的可以往前面看看哟。
也可以单独设置一个方向的边框：
div {
border-top: 1px solid red;
}
/*只给上边框设置一像素的红色实线*/
以此类推：
border-right：右边框
border-left：左边框
border-bottom：下边框
边框的颜色可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
p {
border-style: dashed;
border-color: yellow rgb(25%, 35%, 45%) #909990 red;
}
注：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。
margin(外边距)
外边距（margin）代表 CSS 框周围的外部区域，称为外边距。和 padding 类似，也有 margin-top、margin-right、margin-bottom 和 margin-left。写法仿照 padding。
注：与 padding 不同的是 margin 可以是负值。
外边距合并问题：
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
外边距合并示例图：
高级的框操作
溢流: 当你使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用 overflow 属性来控制这种情况的发生。
常用的值：
- auto:当内容过多的时候溢流的内容被隐藏，然后出现滚动条，让我们滚动查看所有的内容。
- hidden: 当内容过多，溢流的内容被隐藏。
- visible: 当内容过多，溢流的内容被显示在盒子的外边。 例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> p { width: 500px; height: 2.5em; padding: 1em 1em 1em 1em; border: 1px solid black; } .one { overflow: auto; } .two { overflow: hidden; } .three { overflow: visible; } </style 标签：8px连接器cn