系列文章可以查看《FrontEnd Basic》专栏
参考：
通配符可匹配特定类型的元素，如关键字符*，适配所有元素
/* 使用通配符 * 匹配各元素，将所有内边距和外边都设置为 0，一般写在样式表开头，以重置所有默认样式 */
* {
margin:0;
padding:0;
}
参考：CSS 简写属性 (CSS Shorthand Properties)
简写属性是把关于同一主题的常见属性的定义集中在一起，同时设置多个 CSS 属性值，编写更简洁、更具可读性的样式表。如 background 是简写属性，可以定义相应属性 background-color、background-image、background-repeat 和 background-position 的值。类似还有字体 font、盒子 box、各方向的外边距 margin 和 padding 等。
当简写属性替代属性的值是不同类型的值时，对其顺序无强制性要求；若设置的属性值为相同类型值的时候，如 margin 和 padding 等，遵循 1-4 值 的语法
| 方法 | 备注 |
|---|---|
1个值的语法：border-width: 1em | 设置所有边框宽度 |
2个值的语法：border-width: 1em 2em | 第一个值设置垂直方向 top 和 bottom 边框宽度；第二个值设置水平方向 left 和 right 边框宽度 |
3个值的语法：border-width: 1em 2em 3em | 第一个值表示 top；第二个值表示水平方向的，即 left 和 right； 第三个值表示 bottom |
4个值的语法：border-width: 1em 2em 3em 4em | 这四个值分别表示 top、right、bottom、left，即从 top 开始的顺时针顺序（提示：Top-Right-Bottom-Left 首字母与英文单词 trouble 的顺序一致：TRBL） |
简写属性 background 包含以下属性
background-colorbackground-imagebackground-repeatbackground-position可以简写成一行属性，依次为其次级属性赋值
background: #000 url(images/bg.gif) no-repeat top right;
⚠️ 在使用简写属性没有指定其包含的部分次级属性值时，该次级属性会赋予默认值，应注意引起未预期的覆盖行为
/* background-color 默认值为 transparent */
background-color: red;
background: url(images/bg.gif) no-repeat top right; // 以上样式不会将 `background-color` 设置为 `red`，而是使用默认值 `transparent`，因为第二条规则优先
简写属性 font 包含以下属性
font-stylefont-weightfont-sizeline-heightfont-family可以简写成一行属性
font: italic bold .8em/1.2 Arial, sans-serif;
字体样式可以通过简写属性 font 进行设置，其中属性值需要依照一定的顺序
font: font-style font-variant font-weight font-size "font-family";
属性 font-family 设置字体类型，可以设置多个字体，字体名之间用逗号 , 分隔。
font-family: "font1", "font2", "font3" ...；
选用字体原则：
用户可以使用自定义字体，如 Google Fonts | 中文版 获取开源字体。使用自定义字体时，需要在 HTML 文件的 标签中提供渲染字体所需文件的链接，以在页面加载时供浏览器自动下载。
/* 导入自定义字体 Lato 链接*/
* {
font-family: 'Lato', sans-serif;}
⚠️ 使用自定义字体应至少指定一个备用字体以防无法加载自定义字体。使用自定义字体时，值（字体名称）需要用引号括起来。
💡 常用字体（集）及区别
Serif 有衬线字体，常用于标题Sans Serif 无衬线字体，常用于段落属性 font-size 设置字体大小
设置字体大小时需要提供单位，有两种：
cm、pt 磅、pc 等* 表示 CSS 缩放等级的值，如 small等（缩放系数为 1.2）px（Chrome 浏览器的默认字体大小是 16px），相对于设备分辨率而言* 百分数 %，默认大小是100% （相当于 16px），相对父元素字体大小* em 值，相对父元素的字体大小，当父元素字体大小未设置时适用浏览器的默认字体大小（可以在浏览器中进行设置，Chrome 浏览器默认字体大小是 16px）💡 推荐使用相对单位，以基于不同设备动态改变
⚠️ 中文字体应该不小于 12px 或 9pt
💡 对于整页元素 的字体大小设定为 14 px 至 20 px 之间
属性 color 设置字体颜色
多种方式表示颜色属性值：
rgb 编码模式：用三个数字分别指定红色，绿色，蓝色不同比例的搭配，如绿色为 rgb(0,250,0)，三个参数值范围是 0-255，或 0％-100％。也可以添加透明度，即使用 rgba() 模式# 加四位数表示颜色值，如果每两位的值相同可缩写表示，如 color: #aabbcc 可简写为 color: #abcred、blue、orangehsl 色轮选择器：许多优秀图形设计软件上的色轮使用 hsl 来挑选颜色，H 代表色调（hue），这是色轮光谱，就像不同颜色的彩虹，范围为 0~360。S 代表饱和度（saturation），代表颜色有多饱和，范围为 0~100% 表示 没有色彩 到 全彩色范围。L 代表亮度（lightness），可以让你将黑色或白色的颜色与你的颜色混合，范围从 0（黑色）到 100%（白色）。使用 hsl() 设置颜色，使用 hsla() 可以设置颜色的透明度。颜色设置相关工具：
属性是 font-weight 设置字体粗体
两种方式设置字体粗细：
normal 和加粗 bold100-900 由细到粗。400相当于正常粗细 normal，700相当于加粗 bold属性 font-style 设置字形
normal，选择 font-family 的常规字体。italic，如果当前字体没有可用的斜体版本，会选用倾斜体 oblique 替代oblique，可在后附加一个参数设置倾斜角度，单位为 deg💡 斜体 italic 和倾斜体 oblique 都是通过人工倾斜常规字体的字形来模拟的，italic 样式一般是指书写体，相比无样式的字体，通常会占用较少的高度，而 oblique 字形一般只是常规字形的倾斜版本。
属性 font-variant 设置字体变形
有两个属性值可选：
normal 常规（默认值）small-caps 将英文文本设置为小型大写字母border-bottom 设置按钮的边框，调粗可产生逼真的3D效果background-color 设置按钮背景颜色通过更改光标样式，向用户传达信息会非常有效。大多数情况浏览器会自动更改光标，但是你可以使用光标属性来覆盖默认行为。
属性 cursor 设置光标样式，常见鼠标样式对应的属性值：
| 光标样式 | 属性值 | 备注 |
|---|---|---|
| 鼠标箭头样式 | default | 默认值 |
| 光标样式 | auto | 文本输入时的样式 |
| 十字架样式 | crosshair | |
| 小手样式 | pointer | |
| 等待样式 | wait | 加载转圈圈 |
| 帮助样式 | help | 鼠标样式后会有一个小问号 |
请把鼠标移动到单词上，可以看到鼠标指针发生变化：
default
auto
crosshair
pointer
wait
help
属性 visibility 设置元素是否可视
常用属性值：
hidden 隐藏元素，但保留了元素原来占用的空间（占位）visible 显示元素li{display:inline;margin:10px;
}
li.coming-soon {visibility:hidden;
}
- 主页
- 产品
- 服务
- 关于
- 联系人
💡 若想将元素的占位的空间也隐藏，可设置属性 display: none（但使用浏览器「查看源码」选项，依然可见盒子中的内容）
属性 display 设置元素展示的方式。有多种可用的属性值
block 按照块元素的行为进行展示inline 按照行内元素的行为进行展示table 按照表格元素的行为进行展示，即元素的占位大小根据内容而定flex 该元素作为 Flex 容器，其子元素按照弹性布局进行排布grid 该元素作为 Grid 容器，其子元素作为网格项按照网格布局进行排布none 隐藏该元素