一、颜色

1. 通过颜色名称表示

color: red;
color: green;
color: blue;
color: orange;
color: gray;

颜色名称：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/named-color

2. RGB/RGBA 的方式

/* rgb(红,绿,蓝) */
/* rgba(红,绿,蓝,透明度) */

/* 使用 0~255 之间的数字表示一种颜色 */
/* 红色 */
color: rgb(255, 0, 0);
/* 绿色 */
color: rgb(0, 255, 0);
/* 蓝色 */
color: rgb(0, 0, 255);
/* 黑色 */
color: rgb(0, 0, 0);
/* 白色 */
color: rgb(255, 255, 255);
/* 紫罗兰色 */
color:rgb(138, 43, 226);
/* 半透明的红色 */
color:rgba(255, 0, 0, 0.5);

/* 也可以使用百分比表示一种颜色 */
/* 红色 */
color: rgb(100%, 0%, 0%);
/* 半透明的红色 */
color: rgba(100%, 0%, 0%, 50%);

3. HEX/HEXA（十六进制 RGB）的方式

/* 每两位十六进制一组共三组，分别表示红绿蓝 */
/* #RRGGBB 或 #RRGGBBAA 或 #RGB 或 #RGBA */

/* 红色 */
color: #ff0000;
/* 绿色 */
color: #00ff00;
/* 蓝色 */
color: #0000ff;
/* 黑色 */
color: #000000;
/* 白色 */
color: #ffffff;
/* 半透明的红色 */
color: #ff000088;

/* 如果每种颜色的两位都是相同的，可以简写*/
/* 等同于 #ff9988 */
color: #f98;
/* 等同于 #ff998866 */
color: #f986;

4. HSL/HSLA 的方式

/* hsl(色相,饱和度,亮度) */
/* hsl(色相,饱和度,亮度,透明度) */

color: hsl(188, 97%, 28%);
color: hsl(321, 47%, 57%);
color: hsla(0, 100%, 50%, 0.5);

• 色相：取值范围是 0~360 度，具体度数对应的颜色如下图：

• 饱和度：取值范围是 0%~100% 。（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有灰）。
• 亮度：取值范围是 0%~100% 。（ 0% 亮度没了，所以就是黑色。 100% 亮度太强，所以就是白色了）。

二、长度单位

• px：像素，常用绝对长度单位。
• em：相对于父元素的字体大小。
• rem：相对于根元素的字体大小。
• vh：相对于视口的高度。
• vw：相对于视口的宽度。
• 百分比：相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

三、字体

• font-family：字体类型。
• font-size：字体大小。
• font-style：字体样式。
• font-weight：字体粗细。
• font：字体复合属性。

1. 字体类型

font-family: "STCaiyun","Microsoft YaHei",sans-serif;

如果字体名包含空格，必须使用引号包裹起来。可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的

2. 字体大小

/* 通过绝对大小设置 */
font-size: 16px;

/* 通过相对父元素字体的大小设置 */
/* 16px * 2.5 = 40px */
font-size: 2.5em;
/* 16px * 1.875 = 30px */
font-size: 1.875em; 
/* 16px * 0.875 = 14px */
font-size: 0.875em;}

• Chrome 浏览器默认的文字大小为 16px。不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
• 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

3. 字体样式

font-style: italic;

• normal：正常，默认值。
• italic：斜体，字体自带的斜体效果。
• oblique：强制倾斜字体。

4. 字体粗细

font-weight: bold;
font-weight: 600;

• lighter：细。
• normal：正常。
• bold：粗。
• bolder：很粗（大多字体不支持）。

也可以使用数值：

• 100~1000 且无单位，数值越大，字体越粗 (或一样粗，具体得看字体设计时的精确程度)。
• 100~300 等同于 lighter，400~500 等同于 normal，600 及以上等同于 bold。

5. 字体复合属性

font: italic bold 16px Georgia, serif;

• 字体大小、字体族必须都写上。
• 各个属性间用空格隔开。
• 字体族必须是最后一位、字体大小必须是倒数第二位。

6. 网络字体（CSS3）

可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字 体了

@font-face {
  font-family: "LIWY字体"; 
  src: url('./liwy.ttf');
}

/* 指定多种格式 */
@font-face {
  font-family: "liwyfont";
  src: url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'),
    url('webfont.ttf') format('truetype');
  font-weight: 600;
}

字体图标库：https://www.iconfont.cn/

四、文本属性

• color：文本颜色。
• letter-spacing：字母间距。
• word-spacing：单词间距。
• text-decoration：文本装饰线，可以设置类型（none，underline，overline，line-through）、样式（dotted，wavy）、颜色。
• text-indent：文本缩进。
• text-align：水平对齐，left（默认），right，center。
• line-height：行高。
• vertical-align：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式，不能控制块元素。
• white-space：空白处理方式。

/* 设置文本颜色 */
color: rgb(112,45,78);
color: #90CCEE;
/* 设置字母间距 */
letter-spacing: 10px;
/* 设置单词间距 */
word-spacing: 20px;

/* 无装饰线 */
text-decoration: none;
/* 下划线，虚线 */
text-decoration: underline dotted;
/* 上划线，红色波浪线 */
text-decoration: overline wavy red;
/* 删除线，红色 */
text-decoration: line-through red;

/* 设置文本缩进 */
text-indent:40px;

/* 设置水平对齐 */
text-align: left;
text-align: right;
text-align: center;

/* 设置行高 */
line-height: 60px;
/* 自身font-size的倍数 */
line-height: 1.5;
/* 自身font-size的百分比 */
line-height: 150%;

/* 使元素的基线与父元素的基线对齐, 默认值 */
vertical-align: baseline;
/* 使元素的中部与父元素的基线加上父元素字母 x 的一半对齐 */
vertical-align: middle;
/* 使元素的顶部与其所在行的顶部对齐(所在行即当前行内最高元素的高度) */
vertical-align: top;
/* 使元素的底部与其所在行的底部对齐(所在行即当前行内最高元素的高度) */
vertical-align: bottom;

/* 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。(默认值) */
white-space: normal;
/*强制不换行*/
white-space: nowrap;
/*原样输出，与 pre 标签的效果相同。*/
white-space: pre;
/*在 pre 效果的基础上，超出元素边界自动换行。*/
white-space: pre-wrap;
/*合并空白符序列，但是保留换行符。*/
white-space: pre-line;
white-space: break-spaces;

CSS3 新增样式：

• text-overflow：文本溢出。
• text-shadow：文本阴影。
• -webkit-text-stroke：文字描边复合属性，可设置宽度、颜色。

/* 文本溢出, 需配合 white-space 与 overflow 使用 */
white-space: nowrap;
overflow: hidden;
/* 将溢出文本裁剪掉 */
text-overflow: clip;
/* 将溢出文本替换为 ... */
text-overflow: ellipsis;

/* 设置文本阴影 */
/*
  text-shadow: h-shadow v-shadow blur color;
  h-shadow：必需。水平阴影的位置。允许负值。
  v-shadow：必需。垂直阴影的位置。允许负值。
  blur：可选。模糊的距离。
  color：可选。阴影的颜色。
*/
text-shadow: 5px 5px 5px #FF0000;
/* 无阴影，默认 */
text-shadow: none;

/* 文本描边 */
-webkit-text-stroke: 3px #999000;

五、字体设计概念

字体框是设计字体时，采用的指定高度，这个高度一旦确定就不会更改。而字体框的宽度会按照比例自行修改。而 font-size 属性就是指这个字体框的高度。任何字体的基线都是当前字体字母 x 下端的水平线。

由于字体设计的一些特性，导致字体一些约定俗成的协议如下：虽然存在字体框的约束，但是为了字体美观性，超出字体框的现象都存在。比如字母：f、j、g 等，但是他们都不可能超过上字体框。

• 基线（base-line）：小写英文字母 x 的下边缘(线)。
• 中线（middle）：横过小写英文字母 x 的中间的线。
• 行高（line-height）：定义的两行文字基线之间的距离。
• line-height 与 font-size 的差值（行距）分为两半，分别加到一个文本行内容的顶部和底部。