这是我参与「第四届青训营 」笔记创作活动的的第2天
CSS是什么？
定义
层叠样式表，简单来说就是装饰HTML的样式规则。假如说HTML是一个网页的躯干，CSS就是它的外貌。CSS调整着这个躯干是否鲜艳或单一。
构成
一般的CSS声明由选择器、属性、属性值构成。
在页面中使用HTML
CSS有三种声明方式：
- 外链，在HTML文件外，写一个CSS静态文件。HTML文件中，在头部标签中加入
<link>标签，rel表示引进CSS文档（即需要遵守CSS样式规范），href表示CSS文件的位置。
<head>
<meta charset="utf-8">
<title>开始学习 CSS</title>
<link rel="stylesheet" href="./demo01.css">
</head>
- 嵌入
在HTML文件的
<style>标签内进行CSS编写。
<style>
h1 {
color: green;
}
</style>
- 内联 在标签内直接进行编写。
<h1 style="color: blue;">我是一级标题</h1>
CSS是如何工作的？
浏览器接收到HTML文件后，首先解析HTML，创建DOM树，同时加载并解析HTML中包含或引入的静态CSS文件，将样式添加到DOM树的结点，最后展示内容。如图：
选择器（Selector）
通配符选择器
- 选择页面中所有标签，设置全局属性。一般用作初始化页面的一些属性。
* {
color: green;
}
- 也可以用作某标签下的所有标签，与继承相关，稍后会解释。如
<p>标签下的所有标签：
p * {
color: green;
}
id选择器
一般一个标签只有一个id，由id属性设置值。 注意：
- 选择时，认为id选择器是唯一的，即id选择器只能使用一次。
- 一个id属性， 不能像class属性设置多个值。
#xy {
font-weight: bold;
}
类选择器
显然，可以选择同一类型的标签。由class设置类名，一般类名可以重复。
.aaa {
color: aqua;
}
属性选择器
选择所有使用某属性的元素。如使用了“href='example.com' ” 的标签：
[href="http://example.com"] {
text-decoration: overline;
}
伪类选择器
用来描述元素的特殊状态。如鼠标悬停在某个链接时，链接显示的状态：
a:hover {
color: red;
}
组合选择器
遵守以下规则：
如，使无序列表下的
<li>内的元素设置为斜体，<li>是<ul>的子孙
ul li {
font-style: italic;
}
选择器组
多个选择器选择的元素共享同一段CSS代码，具有部分相同的样式。
#xy,.aaa {
color: darkmagenta;
}
格式化文本内容
颜色——RGB
三原色的叠加程度，在0~255范围内，数值越高，该颜色含量越大。在CSS中有两种表示方式：
颜色——HSL
透明度
也可以叫做不透明度，范围在0~1之间。0表示完全透明，1表示不透明。通常在CSS中这样表示（加粗的为透明度）：
-
#ff0000ff
-
rgba(255, 0, 0, 1)
-
hsla(0, 100%, 50%, 1)
字体（font-family）
通用字体族
一般设置字体族的最后要加上一个通用字体族。这样浏览器找不到你设置的其它字体时，方便加载字体样式，兼容性更强。
注意： 设置字体族时，一般英文字体在前，汉字在后。
Web Fonts
引用或下载网络字体使用，丰富了字体样式。但是会有网页性能消耗。
总结
大体介绍了CSS的简单使用（如选择器的使用）以及格式化文本的颜色表达方式、必不可少的字体表示。和一些编写CSS时的注意事项。
尾声
以上包含了部分个人观点，如有错误，敬请提出。
