一、表格样式
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>
<style>
table{
/* （1）设置表格宽高 */
width: 300px;
height: 200px;
/* （2）设置实线边框 */
border: 1px solid black;
/* （3）设置单边框 */
/* 如果设置了边框合并，则border-spacing自动失效 */
border-collapse: collapse;
border-spacing: 0;
}
th,td{
border: 1px solid palegreen;
}
/* （4）设置隔行变色 */
tr:nth-child(even){
background-color: chocolate;
}
/* （5）设置鼠标移入tr后变色 */
tr:hover{
background-color: aqua;
}
td{
/* （6）设置文本水平居中 */
text-align: center;
/* （7）设置文本垂直居中 */
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<!-- th表头标题：有加粗的默认样式 -->
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
</table>
</body>
</html>二、长度单位
（一）固定单位（不会随着其他的条件而变化）
像素 px: 1个像素其实就是1个发光的小元件
正常情况下，像素是无法看到，可以放大可观察到
（二）相对单位（会随着一定的条件变化，大小发生变化）
1、百分比 %
会随着父元素的大小变化而变化
2、em
会随着当前元素字体 大小的变化而变化,当前元素如果没有字体大小，则会继承祖先元素
直到继承html根标签，根标签默认的字体大小是16px
3、rem
root 只会随着根标签字体大小的变化而变化
4、vw （viewport width）
会随着视口的宽度变化而变化
视口的宽度=100vw
5、vh（viewport height）
会随着视口的高度变化而变化
视口的高度=100vh
以上相对单位，rem，vw，vh参考标准都是唯一的 。所以后期我们开发移动端，主要用这些单位
三、颜色单位
1、直接用颜色的英语单词表示（用的不多）
2、RGB
rgb(red，green，blue)
rgb值在0-255之间，一般直接用取色器，吸取颜色浓度
3、RGBA
rgba(rea，green，blue，alpha)
alpha:透明度 （值在0-1之间，0表示透明 ，1表示不透明）
4、使用十六进制的rgb值来表示颜色（原理和上边RGB原理一样）
如果颜色浓度两两重复，可以简写一位
#ffffff------白色（简写#fff） #000000------黑色（简写#000）
#ff0000------红色（简写#f00） #00ff00------绿色（简写#0f0）
#0000ff------蓝色（简写#00f） #f0f0f0不能简写
四、字体样式
1、color
设置字体颜色，也可以设置其他颜色
2、font-size
设置字体大小
3、font-family
设置指定字体
- 字体分类
在网页中将字体分成5大类：
serif （衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive ['kə:siv]（草书字体）
fantasy ['fæntəsi]（虚幻字体）
将字体设置为这些大的分类以后，浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底
4、@font-face
自定义字体类型
- 使用步骤
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>
<style>
/*第一步： 自定义字体类型 */
@font-face {
/* font-family: "";写入你给自定义字体类型起的名字 */
font-family: "simyou";
/* src: url();自定义字体文件的路径 */
src: url(./字体类型/SIMYOU.TTF);
}
/* 第二步：使用自定义字体类型 */
div {
font-family: "simyou";
}
</style>
</head>
<body>
<p>夭韩承易，重生皇司。\</p>
</body>
</html>5、font-style
设置文字类型
可选值：italic、oblique 斜体 normal 正常显示（可用来清除样式）
6、font-weight
设置字体粗细
可选值：bold、bolder 加粗 normal 正常显示
值在100-900 之间 100 表示最细 ，900 表示最粗
7、font简写
可以同时设置字体大小，类型，是否斜体，是否加粗
条件一：必须要设置字体大小和类型
条件二：字体大小 必须在倒数第二位，字体类型 必须在倒数第一位
css
font: 900 italic 30px monospace;六、行间距
1、行高（line-height）
文字占有的实际高度
- 可选值：
（1）xx长度单位（eg：60px）
（2）数值:字体大小的倍数，如果当前没有字体大小，继承祖先元素的，直到继承根标签html的
（3）百分比（用的不多）
- 作用：
（1）设置文本与文本之间的行间距，值越大，间距越大
（2）设置单行文本的垂直居中： 设置行高跟元素高度一致
2、font简写
可以指定行高
font:字体大小/行高 字体类型;
css
font: 20px/1.5 serif;七、文本样式
1、设置文本阴影效果
text-shadow: h-shadow v-shadow blur color;
h-shadow :阴影的水平位移距离 ：正 值向右 移动，负 值向左 移动 必选
v-shadow :阴影的垂直位移距离 ：正 值向下 移动，负 值向上 移动 必选
blur ：阴影的模糊半径 ，值越大，越模糊 可选,默认是0
color：阴影的颜色 可选，默认是字体颜色
2、设置盒阴影效果
box-shadow: h-shadow v-shadow blur color;
h-shadow :阴影的水平位移距离：正值向右移动，负值向左移动 必选
v-shadow :阴影的垂直位移距离：正值向下移动，负值向上移动 必选
blur ：阴影的模糊半径，值越大，越模糊 可选,默认是0
color：阴影的颜色 可选，默认是字体颜色
css
.box:hover {
/* 将h-shadow和v-shadow设置为0就是四周阴影 */
box-shadow: 0px 0px 20px #6c6b6b;
/* 过渡：让样式变化缓慢进行 */
transition: 1s;
}3、设置文本的修饰线
text-decoration
-
可选值：
none 没有修饰线，文本正常显示
underline 下划线
overline 上划线
line-through 删除线
4、指定字符间距
letter-spacing
5、设置单词之间的距离
word-spacing
6、设置文本的对齐方式
text-align
- 可选值：
left 默认值 靠左对齐
center 居中对齐
right 靠右对齐
- 前提：文本一定是有移动的空间
7、设置首行缩进
text-indent
正 值向右 移动，负 值向左移动
- 拓展作用：隐藏元素 ，设置一个比较大的负值
8、设置是否换行
white-space
css
/* 不可换行 */
white-space: nowrap;9、裁剪多余内容
overflow: hidden;
10、设置文本溢出形式
text-overflow
css
/* 多余文本以省略号出现（设置单行文本省略号） */
text-overflow: ellipsis;11、将元素转成表格单元格显示
display: table-cell;
12、定位
position: sticky;
元素需要设置 top、bottom、left 或 right 中的至少一个属性来指定固定的位置。当滚动到元素距离指定位置还有相应像素时，元素就会固定在该位置，直到滚动离开该范围。