一、CSS 常见属性
CSS 中最基础最常用的属性有以下几个，分别是：
- font-size：字体大小
- color：前景色，文字颜色
- background-color：背景色
- width：宽度
- height：高度
<!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>
/* 通过 class 选择器选中 div 元素 */
.title {
font-size: 24px; /*设置字体大小为24px*/
color: chocolate; /*设置字体颜色*/
background-color: black; /*设置背景颜色*/
width: 200px; /*设置div元素的宽*/
height: 200px; /*设置div元素的高*/
}
</style>
</head>
<body>
<div class="title">
Hello
</div>
</body>
</html>
background-color 属性用来决定背景颜色的，如网站的导航栏都会设置一个背景色；
color 属性是用来设置文本内容的前景色，包括文字、装饰线、边框、外轮廓等的颜色，比如网站导航文字的颜色可以使用 color 属性设置颜色；
font-size 属性则是用来设置字体的大小的；
width 和 height 则是针对块级元素的设置，如 div、p 元素等，可以设置该元素的宽和高；
二、HTML 的 link 元素
HTML 中的 <link> 元素是用来引入外部链接的元素，规范了文档与外部资源的关系，<link> 元素通常存在于 <head> 元素中，最常见的是用来引入 CSS 样式表，除此之外还可以引入网站的站点图标；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入CSS -->
<link rel="stylesheet" href="./css/style.css">
<!-- 引入网站图标 -->
<link rel="icon" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6c61ae65d1c41ae8221a670fa32d05aa.svg">
</head>
<body>
<div>DIV</div>
</body>
</html>
在浏览器中打开该 HTML 页面，可以看到图标显示在页面标题上；
这里的 href 属性可以是一个 URL 地址也可以是一个相对或者绝对路径；rel 则指的是引入的链接类型，其中 icon 表示引入站点图标，stylesheet 则表示引入 CSS 样式。
其他常见的类型可以查看 MDN文档。
三、CSS 颜色表示
在 CSS 中，颜色有两种表示方式，第一种是颜色关键字的方式，第二种是RGB的方式。
颜色关键字通过具体的颜色名称来表示颜色，具体的颜色可以通过 MDN 文档来查看。
RGB 是一种色彩空间，通过 R 红色、G 绿色、B 蓝色 三色组成了不同的颜色，通过这三个颜色的比例的不同组成不同的颜色，RGB三种颜色的取值范围为 0~255。
RGB 颜色可以通过 # 为前缀的十六进制字符和函数 rgb()、rgba() 两种方式表示。
十六进制符号：#RRGGBB[AA]
R、G、B 和 A 组成，A 是十六进制符号(0-9，A-F)，A 是可选的，比如 #ff0000 等价于 #ff0000ff
十六进制符号：#RGB[A]
R、G、B 和 A 组成，A 是十六进制符号(0-9，A-F)，三位数符号 #RGB 是六位数 #RRGGBB 形式的简写，如 #f09 和 #ff0099 表示同一个颜色；四位数 #RGBA 是八位数 #RRGGBBAA 形式的简写，如 #f038 和 #ff003388 表示同一个颜色。
函数符：rgb[a]
R、G、B 可以是数字也可以是百分比，0 是 0%, 255 是 100%
创建一个 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>
.box1 {
/* 方式一：颜色关键字表示法，通过 red/blue/black/white等单词表示 */
background-color: red;
}
.box2 {
/*方式二：通过 RGB 表示法*/
background-color: rgb(100, 100, 100);
color: #fff;
}
</style>
</head>
<body>
<div class="box1">BOX1</div>
<div class="box2">BOX2</div>
</body>
</html>
在浏览器中打开该页面，效果如下：
常见颜色的不同表示方式，在使用十六进制表示是，不区分字母大小写
.box3 {
/* 常见颜色的表示 */
/* 灰色 */
background-color: rgb(100, 100, 100);
background-color: #646464;
/* 纯黑色 */
background-color: rgb(0, 0, 0);
background-color: #000000;
background-color: #000;
/* 纯白色 */
background-color: rgb(255, 255, 255);
background-color: #FFFFFF;
background-color: #fff;
}
