目录
一、CSS中的颜色设置
1、颜色的表示方式
（1）、颜色名
（2）、rgb函数
（3）、十六进制表示（HEX 值）
二、CSS样式规则
1、字体规则
(1) font-family属性：字体
(2) font-style：字体样式
(3) font-size：字号
(4) font-weight：文字的粗细
2、列表样式
(1) list-style-position：设置项目符号和文本的位置
(2) list-style-image：指定项目符号的图像
(3)list-style-type：指定项目符号的类型
(4) list-style：指定列表样式
3、表格样式
（1） border-spacing：指定单元格之间的距离,不能是负值
（2） border-collapse：指定单元格的边框是否合并,取值有两个
（4）border-width：边框宽度
（5） border-style：边框线的样式
（6） border-radius：边框的弧度
一、CSS中的颜色设置
1、颜色的表示方式
（1）、颜色名
CSS/HTML支持140种标准颜色名，如：red、blue、yellow等。
（2）、rgb函数
A、r、g、b表示三原色的值(取值范围在0~255之间)，rgb（red，green，blue）。
B、每个参数 (red、green以及blue) 定义了 0 到 255 之间的颜色强度。
eg:rgb（255，0,0）显示为红色，因为红色值设置最大，其它值设置为0。
C、黑色为rgb（0,0,0），白色为rgb(255,255,255)
D、通常为所有 3 个光源使用相等的值来定义灰色阴影。
eg:rgb(120,120,120) rgb(180,180,180)
E、rgba它指定了颜色的不透明度(red,green,blue,alpha),alpha参数介于0.0（完全透明）和1.0（完全不透明）之间的数字。
eg:
（3）、十六进制表示（HEX 值）
A、#rgb或#rrggbb，其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。
B、eg: #ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。
C、黑色为#000，白色为#fff
D、通常为所有 3 个光源使用相等的值来定义灰色阴影。
eg:#3c3c3c, #767676
二、CSS样式规则
1、字体规则
（1)、font-family属性：字体
如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。
(2)、font-style：字体样式
font-style属性主要用于指定斜体文本。
此属性可设置三个值：
normal - 文字正常显示italic - 文本以斜体显示oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
<!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>.normal{font-style: normal;}.italic{font-style: italic;}.oblique{font-style: oblique;}</style></head><body><p class="normal">正常字体normal</p><p class="italic">斜体italic</p><p class="oblique">倾斜oblique</p></body></html>
此处截图显示有问题，大家可以自己实操一下。
(3)、font-size：字号
A、font-size属性设置文本的大小。
B、如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。
C、字号的设置方法（4种）
a、以像素设置字体大小：
使用像素设置文本大小可以完全控制文本大小
b、用 em 设置字体大小：
为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。
W3C 建议使用 em 尺寸单位。
c、使用百分比和 Em 的组合
d、响应式字体大小（vw）：
“视口宽度”（"viewport width"）;
视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米 宽,则 1vw 为 0.5 厘米。
<!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>.px{font-size: 16px; }.em{font-size:1em ;}.em1{font-size:100% ;}.vw{font-size:1vw ;}</style></head><body><p class="px">使用像素</p><p class="em">使用em</p><p class="em1">使用%和em结合</p><p class="vw">使用vw</p></body></html>
(4)、font-weight：文字的粗细
<!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>.normal{font-weight: normal; }.a1{font-weight:400; }.bold{font-weight:bold; }.bolder{font-weight:bolder; }.a2{font-weight:lighter; }</style></head><body><p class="normal">正常粗细</p><p class="a1">正常粗细</p><p class="bold">加粗</p><p class="bolder ">更粗的字体</p><p class="a2">字体变细</p></body></html>
2、列表样式
（1） list-style-position：设置项目符号和文本的位置
<!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>.u1{list-style-position: inside;}.u2{list-style-position: outside;}</style></head><body><h2>项目符号点将在列表项之外</h2><ul class="u1"><li>红楼梦</li><li>水浒传</li><li>三国演义</li></ul><h2>项目符号点将在列表项之内</h2><ul class="u2"><li>红楼梦</li><li>水浒传</li><li>三国演义</li> </ul></body></html>
(2) list-style-image：指定项目符号的图像
.u3{list-style-image: url(../image/1.gif);}
<h2>用图像做项目符号</h2><ul class="u3"><li>红楼梦</li><li>水浒传</li><li>三国演义</li> </ul>
(3)list-style-type：指定项目符号的类型
list-style-type:none属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加margin:0和padding:0
ul {list-style-type: none;margin: 0;padding: 0;}
<!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>.u2{list-style-type:none;}/* .u2{list-style-position: outside;} */</style></head><body><h2>有列表项目符号</h2><ul class="u1"><li>红楼梦</li><li>水浒传</li><li>三国演义</li></ul><h2>删除项目符号</h2><ul class="u2"><li>红楼梦</li><li>水浒传</li><li>三国演义</li> </ul></body></html>
(4) list-style：指定列表样式
在使用简写属性时，属性值的顺序为：
list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）list-style-position（指定列表项标记应显示在内容流的内部还是外部）list-style-image（将图像指定为列表项标记）
如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。
ul {list-style: square inside url("sqpurple.gif");}
3、表格样式
（1）border-spacing：指定单元格之间的距离,不能是负值
A、如果定义一个length参数，那么定义的是水平和垂直间距。
如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。
B、inherit：规定应该从父元素继承 border-spacing 属性的值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">table.one {/* border-collapse: separate; */border-spacing: 10px}table.two{/* border-collapse: separate; */border-spacing: 10px 50px}</style></head><body><table class="one" border="1"><tr><td>张三</td><td>李四</td></tr><tr><td>小明</td><td>小花</td></tr></table><br /><table class="two" border="1"><tr><td>理科</td><td>文科</td></tr><tr><td>美术</td><td>体育</td></tr></table></body></html>
（2）border-collapse：指定单元格的边框是否合并,取值有两个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">table.one {border-collapse:collapse; /*相邻单元格边框合并*//* border-spacing: 10px */}table.two{border-collapse: collapse;/* border-spacing: 10px 50px */}</style></head><body><table class="one" border="1"><tr><td>张三</td><td>李四</td></tr><tr><td>小明</td><td>小花</td></tr></table><br /><table class="two" border="1"><tr><td>理科</td><td>文科</td></tr><tr><td>美术</td><td>体育</td></tr></table></body></html>
（3） border-color：边框颜色
A、border-color:red green blue pink;
上边框是红色右边框是绿色下边框是蓝色左边框是粉色
B、border-color:red green blue;
上边框是红色右边框和左边框是绿色下边框是蓝色
C、border-color:dotted red green;
上边框和下边框是红色右边框和左边框是绿色
D、border-color:red;
所有 4 个边框都是红色
（4）border-width：边框宽度
与颜色设置顺序一样，可以参考上一条
（5）border-style：边框线的样式
与颜色设置顺序一样，可以参考上一条
（6） border-radius：边框的弧度
用%或长度定义圆角形状。
eg:50%或100px
