字体

color 用来设置前景色，不过一般情况我们用来设置字体色。
font-family 字体族（字体格式）
可选值：
serif sans-serif monospace 这些并不是具体的字体如（宋体，微软雅黑）而是一种分类。
serif 衬线字体 sans-serif 非衬线字体 monospace 等宽字体（每个字体宽度相等）
font
还有 cursive 草书 ,fantasy 魔幻 等等这些用的比较少。
指定字体的类别之后，浏览器会自动使用该类别下的字体。所以一般情况下不会只写一个字体。
font-family 可以同时指定多个字体，多个字体间使用,隔开。字体生效时优先使用第一个，第一个无法使用则第二个，以此类推。
@font-face（写在style中）可以将服务器中的字体直接提供给用户去使用。会有两个属性font-family,src。
注：这里的font-family并不是那个字体族，而是你自己指定的字体的名字。
src则指定服务器中字体的路径。这样之后你再引用字体时，属性值就可以写成你设置的字体的名字。

@font-face {
    /* 你想要让这个字体的名字是 */
    font-family:fontname;
    /* 他在你服务器中的地址 */
    src: url();
}

注：使用服务器的字体可能导致加载速度比较慢，还有就是版权问题。
font-family是“建议”，所以不会出现版权问题。

图标字体

在网页中通常使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且不灵活。
所以在使用图标时，还可以将图标设置为字体，通过font-face的形式来对字体进行引入。
这样我们就可以通过使用字体的形式来使用图标。

fontawesome

这里先用fontawesome来演示
去 官网 下载，下载好后解压，将其中的css和webfonts文件夹移动到项目中。
注：css和webfonts要在同一个目录中
通过link标签来引入。
使用方式：直接通过类名来使用图标（我们通常用i标签来使用图标）两种类 fas和fab，后边的是要引入的图标。class=“fas xxxx”。
注：注意版权。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/all.css">
    <!-- 你的目录中需要有all.css的文件，不然没用 -->
</head>
<body>
    <i class="fas fa-bell"></i>
    <!-- 引入一个铃铛的图标字体 -->
</body>
</html>

还可以通过伪元素来设置图标字体。
在content中设置字体的编码，设置字体的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/all.css">
    <!-- 你的目录中需要有all.css的文件，不然没用 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入重置样式表 -->
    <style>
        li::before{
            content: '\f1b0';
            /* font-family: 'Font Awesome 5 Brands'; */
            font-family: 'Font Awesome 5 Free';
            /* 使用上面两个font-family之中的其一 */
            width: 900px;
            /* 弄大点让图标看得见 */
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

还可以用实体的方式
%#x图标编码；

<span class="fas">&#xf0f3;</span>

阿里的图标库iconfont

css—iconfont阿里字体图标库的引入方式

行高

行高指的是文字占有的实际高度
可以通过line-height来设置行高（默认1.33），行高可以直接指定一个大小（px em）也可以直接为行高设置一个整数，如果是一个整数的话，行高将会是字体的指定的倍数。
字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度。行高会在字体框的上下平均分配。
可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中。
行高经常用来设置文字的行间距。行间距=行高-字体大小。

字体的简写属性

font 可以设置字体相关的所有属性。
font:50px serif;font:字体大小 字体族;
还可以这么写font:50px/2 serif;（字体/行高 字体族）行高可以省略，如果不写则会覆盖之前设置的行高，使用默认值。
font属性还可以设置其他属性，但是要确保字体是倒数第二个，字体族是倒数第一个
这里拓展两个属性 font-weight:bold;
可选值：normal默认值不加粗，bold加粗，实际上提供100-900九个级别（但没啥用）;

font-style 字体的样式

可选值：normal默认值正常，italic斜体。
font:normal normal 50px/2 serif;（注：省略不是不写，而是采用默认值）
文本的水平对齐和竖直对齐:
text-align 设置元素水平对齐的方式。
可选值：left 左对齐 right 右对齐 center 居中对齐 justify 两端对齐。
vertical-align 设置元素垂直对齐的方式。
可选值：baseline 默认值 基线对齐 top 顶部对齐 bottom底部对齐 middle 居中对齐（将元素中线和小写x的中线对齐) 还可以直接指定值。
图片默认是在基线对齐，可以通过vertical-align来让他对齐。

文本的其他样式

text-decoration 设置文本修饰
可选值：none 啥都没有 underline 下划线 line-through 删除线 overline 上划线。
text-decoration:underline red;（其他浏览器支持，ie不支持颜色）
white-space 空白区域,用来设置网页如何处理空白
可选值：normal 正常情况 nowrap 不换行 pre 保留空白（原本多个空格会被识别为一个，设置后则会保留多个空白）
text-overflow:ellipsis;溢出的内容成为省略号

背景

背景包含以下属性：
background-color background-image background-repeat background-position
background-size background-origin background-clip background-attachment

background-image

设置背景图片。
可以同时设置背景图片和背景颜色，这样背景颜色会成为图片的背景色
如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
如果背景的图片大于元素，则部分背景无法完全显示。

background-repeat

用来设置背景的重复方式
可选值：
repeat 默认值 ，背景沿着x轴y轴双方向重复
repeat-x 沿着x轴方向重复 repeat-y 沿着y轴方向重复 no-repeat 背景图片不重复

background-position

用来设置背景图片的位置
设置方式 通过top left right bottom center 几个表示方位的词来设置背景，使用方位词要同时指定两个值，只写一个则第二个值默认center。
通过偏移量来指定背景图片的位置 水平方向的偏移量 垂直方向的偏移量
如：background-position:100px 100px;

background-clip

设置背景的范围
可选值：
border-box默认值，背景会出现在边框的下边。padding-box 背景不会出现在边框，只出现在内容区和内边距。
content-box 背景只会出现在内容区。

background-origin

背景图片的偏移量计算的原点。
可选值：
padding-box 默认值,background-position 从内边距开始计算。
content-box 背景图片偏移量从内容区处计算 border-box 背景图片的变量从边框处开始计算。

background-size

设置背景图片的大小 第一个值表示宽度，第二个值表示宽度。
可选值：cover 图片的比例不变，将元素铺满。contain 图片比例不变，将图片在元素中完整显示。

background-attachment

背景图片是否跟随元素移动
可选值：scroll 默认值 背景图片会跟随元素移动。fixed 背景图片会固定在页面中不移动
background 简写属性无顺序要求无必须要求。注意的是size跟在position后面用/隔开 position/size ，因为origin和clip值一样，所以origin在clip前面。

雪碧图

将多个图片统一保存到一个大图片中，通过background-position来显示，这样图片会同时加载到网页中，有效避免出现闪烁问题。这个技术非常广泛，称为css-sprite,雪碧图。

渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果。
注：渐变是图片，需要通过background-image来设置
线性渐变，颜色沿着一条线直线发生变化
background-image：linear-gradient(red,yellow)，（红色开头，黄色结尾）
也可以指定渐变方向linear-gradient(xxx,red,yellow)
(to left,to right, to bottom,to top，to top left,xxxdeg 其中deg表示度数)
渐变可以同时指定多个颜色，多个颜色默认下平均分配，也可以手动指定渐变分布情况，一般在颜色后面 linear-gradient(red 50px,yellow 150px)
background-image:repeating-linear-gradient(red 50px,yellow 50px);平铺效果。

径向渐变

radial-gradient()径向渐变（放射性效果）
background-image：radial-gradient(red，yellow);默认情况下，径向渐变圆心的形状根据元素的形状来计算的。
我们也可以手动指定径向渐变的大小redial-gradient(100px 100px,red,yellow)
也可以改变渐变位置redial-gradient(100px 100px at 100px 100px ,red,yellow)

表格

我们通过table标签来创建表格。table是块元素但是大小是被内容撑开。默认情况下在table中使用tr表示表格中的一行，几个tr就有几行
在tr中用td表示一个单元格，几个td几个单元格
若需要一个单元占两个单元格 则需要用到colspan(横向的合并单元格)rowspan(纵向的合并单元格)

长表格

可以将一个表格分成3个部分 thead标签 tbody标签 tfoot标签
th表示头部的单元格表格的样式

如果用border加边框的话，看起来会有一点怪。
border-spacing 指定边框之间的距离。
border-collapase 设置边框的合并，这时候值设置为collapse。边框合并的时候就不需要写border-spacing.

有时候我们需要奇数行变色或者偶数行变色，这时候需要用到伪类选择器。
如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中。
所以tr不是table的子元素。

默认情况下rd是垂直居中的 可以通过vertical-aigh来设置垂直布局，可选值：top bottom middle
拓展一下display:table-cell;（将元素设置为单元格）然后就可以使用vertical-aligh来让块内元素垂直居中。
现在用表格比较少了，尽量不要用表格。

表单

现实生活中表单用于提交数据，在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器。
使用form标签来创建表单，form的属性：
action指定表单提交的服务器的地址。
文本框 input标签，type属性值为“text”
提交按钮 input标签 type属性值为“submit"。value属性，value中的值是什么，按钮上就显示什么。
注意：数据要提交到服务器中，必须要为元素指定一个name属性值与对应属性值。
密码框 input标签 type属性值为“password”
单选按钮 input标签 type属性值为“redio”,具有联系的单选按钮需要通过相同的name值来关联。
使用选择框（如单选按钮）时，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器。
checked属性（可以没有属性值） 可以将单选按钮设置为默认选中。
多选框 input标签 type属性为“checkbox” 同样需要指定name和value。
下拉列表 select标签 name属性 select属性中需要有option标签。option标签中需要指定value值，也可以使用selected默认选中。
颜色选择框 input标签 type属性为“color”注：兼容性不是很好，
电子邮件框 input标签 type属性为“email”特点是提交的时候会对你的格式进行检查。但是显示效果可能不同。

按钮

input标签 type属性为“button” value属性，value的值就是按钮上显示。

重置按钮

input标签 type属性为“reset”，作用是让文本框内的值转为默认值

button

button标签type属性有submit,reset,button等等但button是双标签，input是自结束标签。
一般情况下button用的更多一些
autocomplete属性，autocomplete=“off”关闭自动补全，（这个可以放到form中，这样就都没了）
readonly属性 将表单性设置为只读，数据会提交
disabled属性 将表单项设置为禁用，数据不会提交
autofocus属性 设置表单项自动获取焦点
注：以上表单都需要写在form中

过渡

通过过渡可以指定一个属性发生变化时的切换方式。可以创建一些非常好的效果，提升用户的体验。
属性：
transition-property：指定要执行过渡的属性。多个属性使用,隔开，如果都要则使用all。
大部分属性都支持过渡效果。一般可计算的都可以过渡，注意：过渡时必须是从一个有效数值向另外一个有效数值进行过渡（例如auto不是有效数值）。
transition-duration：指定过渡效果的持续时间。
时间单位：s和ms。也可以分别指定时间，用,隔开。
transition-timing-function：过渡的时序函数。指定过渡的执行的方式
可选值：
ease默认值，慢速开始，先加速再减速。 linear匀速运动。 ease-in 加速运动。
ease-out 减速运动。 ease-in-out 先加速，后减速。**cubic-bezier()**来指定时序函数。
steps()分步执行过渡效果。
steps()可以设置第二个值，end表示在时间结束时执行过渡，start表示在时间开始时执行过渡。
transition-delay：过渡效果的延迟，等待一段时间后再执行过渡。
transition是简写属性，并没有顺序要求，只有如果要写延迟，第一个是持续时间，第二个是延迟。

动画

动画和过渡类似，都是可以实现一些动态的效果。不同的是过渡需要在某个属性发生变化时才触发，动画可以自动触发动态效果。
设置动画效果，必须先设置一个关键帧，关键帧设置了动画执行的每一个步骤
用@keyframes设置关键帧

@keyframes text {
    /* @keyframes 后面的是你自己设置的他的名字 */
    form{
        margin-left: 0%;
    }
    /* 表示起始 */
    50%{
        margin-left: 50%;
    }
    /* 中间看你想不想设置 */
    to{
        margin-left: 100%;
    }
    /* 表示结束 */
}

animation-name:要对当前元素生效的关键帧的名字。 animation-duration：动画的执行时间。
animation-delay：设置动画的延时。 animation-timing-function:动画的时序函数。
animation-iteration-count:动画执行的次数。
可选值：次数或者infinite(循环)。

animation-direction:指定动画运行的方向
可选值：
normal默认值从from向to运行。reverse 从to向from。
alternate 从from向to，重复执行动画时反向执行。
alternate-reverse 从to向from 重复执行动画时反向执行。

animation-play-state:设置动画的执行状态
可选值：
running 默认值 动画执行 paused 动画暂停
animation-fill-mode：动画的填充模式
可选值：
none 默认值 动画执行完毕，元素回到原来位置。
forwards 动画执行完毕，元素会停止在动画结束的位置。
backwards 动画延时等待时，元素就会处于开始位置。
both 结合forwards和backwards
animation 简写属性，没有顺序要求。

变形

变形就是指通过css来改变元素的形状或位置。变形不会影响页面的布局。
transform，用来设置元素的变形效果。

平移

translateX（）沿着x轴方向平移 translateY（）沿着y轴平移 translateZ()沿着z轴平移。
平移元素时，百分比是相对于自身计算的。
z轴平移，调整元素在z轴的距离，正常情况就是调整元素和人眼之间的距离。
z轴平移属于立体效果（近大远小），默认情况下网页不支持透视。如果需要看见效果必须要设置网页的视距。
perspective 设置当前网页的视距，写在html标签中

旋转：

通过旋转可以使元素沿着x y或者z旋转指定的角度。
transform属性，
可选值：
rotateX()沿着x轴旋转 rotateY()沿着y轴旋转 rotateZ()沿着z轴旋转 角度用deg；
例如rotateZ（45deg）;
要设置视距才会有近大远小的效果。
backface-visibility是否显示元素的背面。
可选值：
visible 默认值 显示。 hidden 隐藏
transform-style:preserve-3d;设置3d变形效果

缩放

transform属性
可选值：
scaleX（）水平方向，scaleY()垂直方向，scale()双方向的缩放。
transform-origin 变形的原点
默认值center，transform-origin:20px 20px;

Q.E.D.