1. 文字颜色
概念： 在HTML代码中，我们有三种方式可以设置颜色。
- 直接使用颜色名称，如
red、green等。 - 使用RGB代码来表示一种颜色，
rgb(0, 128, 128)。 - 使用十六进制代码来表示一种颜色，如
#000000。
链接入口： rgb和十六进制查询网站
1.1 RGB颜色
概念： HTML颜色采用的是RGB颜色，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色。三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
1.2 WEB安全色
概念：
- 数年以前，当大多数计算机仅支持256 种颜色的时候，一系列216种Web安全色作为Web标准被建议使用。其中的原因是，微软和Mac操作系统使用了40种不同的保留的固定系统颜色（双方大约各使用20 种）。最初，216跨平台web安全色被用来确保：当计算机使用256 色调色板时，所有的计算机能够正确地显示所有的颜色。
- 我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。
2. 文字单位
概念：
- 在CSS长度设置中，我们经常使用到度量单位，即以什么样的单位设计我们的字体或边框宽度。
- 在CSS中长度单位又分为绝对长度和相对长度，而计算机中使用的都是相对长度。相对长度是指相对于其他容器（如屏幕）的长度，一共有5种。
| 单位 | 描述 |
|---|---|
em |
与父元素字体字号相关，比如2em代表父元素字号的2倍 |
rem |
与 <html> 元素设置的字号相关，比如2rem代表根元素字号的2倍 |
px |
像素、与分辨率相关 |
% |
相对于另一个值的百分比 |
`rem` 是C3的新款度量单位，效果优于 `em`，`em` 每次都需要根据它自身的父元素的值来计算比例，而所有 `rem` 是根据 `<html>` 中的字号的值来计算，更方便。
布局：
<span>body中的文本</span>
<section id="sec">section中的文本</section>
样式：
html{
font-size: 10px;
}
body{
font-size: 100px;
}
#sec{
font-size: 50%;
}
3. 字体常用属性
| 属性 | 值 | 描述 |
|---|---|---|
font-size |
xx-small、x-small、smallmediumlarge、x-large、xx-largesmaller、larger15px、50% |
字体大小 |
font-variant |
normalsmall-caps |
正常 改为小型大写字母 |
font-style |
normalitalicoblique |
普通 倾斜 强制倾斜 |
font-weight |
normalbold |
正常 加粗 |
font-family |
楷体，微软雅黑 |
字体家族 |
布局：
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>English</p>
<p>English</p>
<p>我是文本</p>
样式：
p:nth-child(1){ font-size:xx-small; }
p:nth-child(2){ font-size:x-small; }
p:nth-child(3){ font-size:small; }
p:nth-child(4){ font-size:medium; }
p:nth-child(5){ font-size:large; }
p:nth-child(6){ font-size:x-large; }
p:nth-child(7){ font-size:xx-large; }
p:nth-child(8){ font-size:smaller; }
p:nth-child(9){ font-size:larger; }
p:nth-child(10){ font-variant: normal; }
p:nth-child(11){ font-variant: small-caps; }
p:nth-child(12){
font-style: italic;
font-weight: bold;
font-family: 楷体, 宋体;
font-size:100px;
}
4. WEB字体
概念：
- CSS提供了WEB字体，也就是服务器端字体，我们将某一种字体文件一并上传到服务器端，这样即使用户电脑没有这种字体，也无所谓。
- 字体文件可以从
C:\Windows\Fonts下复制一个出来或者网上下载一个，如：SIMKAI.TTF .ttc和.ttf、.otf等字体文件都支持。
布局：
<div>I am a 正常的字体</div>
<p>I am a 特殊的字体</p>
样式：
@font-face {
font-family: myFont;
src: url("consola.ttf");
}
div{
font-family: myFont;
}
