备注：可以在控制台中调试样式，快速看到样式效果
颜色：
（1），预设值：定义好的单词 red，yellow，green...
（2），颜色函数：三原色，色值：光学三原色（红，绿，蓝）这三种颜色可以组合成任何一种颜色
R 红 G 绿 B 蓝
红+蓝=紫色
红+绿=黄色
蓝+绿=青色
红+绿+蓝=白色
在计算机中三原色的每个颜色可以使用0-255之间的数字来表达
0代表完全没有这个颜色，255这个颜色饱和度占比到最大程度
```html
color：rgb(0,255,0) 红色饱和度占0，绿色饱和度占255，蓝色饱和度占0
```
（3）颜色代码 3，hex表示法：16进制 0-9 a-f
每2位代表一种颜色 R 红 G 绿 B 蓝
#f5f5f5,#008c8c 6位
关于颜色的简写方式：每2位有重复的，可以简写成1位
淘宝红：#ff4400,#f40
红：#ff0000 ,#f00
绿：#00ff00,#0f0
蓝：#0000ff,#00f
不能简写：#ff4432
透明色： transparent | rgb(255, 255, 255,0.5) 0.5透明度 数字 || 百分比
2，font-size：文字大小
基准字号:
每个元素必须有字体大小，如果没有声明，则直接使用父元素字体大小，
如果没有父元素，则使用基准字号大小
基准字号大小的设置：浏览器中设置外观->字号
单位：
px：像素，绝对单位，固定值
例如：电脑分辨率1920*1080，横向把屏幕分为1920个小格，纵向分为1080个小格,
一个小格就是一个像素，像素值越大显示越大
rem：相对单位，相对于html根元素的字体大小
em：相对单位，相对于父元素的字体大小
设置的大小是字体的宽还是高？
高，如果设置的是宽，高矮不同一眼就能看出来，但是这种高，
宽一点，瘦一点没有关系
3，font-weight：文字粗细，可以取值数字，可以取值为预设值
默认值是normal：普通没有粗体
加到最粗没有效果，是因为字体包的问题，没有更粗的字体包
4，font-family:文字类型
百度使用字体：PingFang SC,Arial,Microsoft YaHei,sans-serif
注意：设置的文字类型必须是用户计算机中存在的字体才能有效果
衬线字体：用于打印的字体，例如： 宋体，打印出来美观
非衬线字体：sans-serif 打印不美观，但是在网页显示很圆滑美观，例如：微软雅黑
5，font-style：文字样式 ，斜体 italic
6，text-decoration：文本修饰 给文本线（上线，下线，中线）
7，text-indent：首行文本缩进
备注：中文缩进和英文缩进的2个字符大小时不同的，设置的时候注意
8，letter-spacing：文字之间的间隙，可以设置数字
9，text-align：文字的水平排列方式，默认是靠左, left,right,center, justify(两端对齐)
10，line-height：每行文本的高度，值越大行高越大
单行设置行高为容器的高度，可以让文本垂直居中
多行设置行高是行与行之间的间距
11，height：高度
12，width：宽度
实例：诗句文章
border-width:1px; 规定边框的宽度（边框粗细）
thin、medium和thick分别表示细、中等和粗，或者指定具体的数值来定义边框宽度
border-style: 规定边框的样式 实线，虚线
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
border-color: #f40; 规定边框的颜色
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式
预设值 name - 指定颜色的名称，如 "red"
颜色函数 RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
颜色代码 Hex - 指定16进制值, 如 "#ff0000"
还可以设置边框的颜色为"transparent"
border是复合属性：多个属性组合一起使用
border-style 和border-width 、 border-color 可以一起使用
border:1px solid red; 顺序可以打乱 solid red 1px
上下左右边框的样式可以单独设置
border-top-style:dotted;
border-right-color:red;
border-bottom-style:dotted;
border-left-style:solid;
border-top-left-radius: 10px; 左上角圆角
border-bottom-right-radius: 5px; 右下角圆角
实例：写等腰三角形，直角三角形
原文：https://www.cnblogs.com/dulonglong/p/14047528.html