一：基础选择器
选择器分为基础选择器和复合选择器
1.标签选择器
语法：
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
2.类选择器：
语法：
类名 {
属性1: 属性值1;
...
}
<div class=‘red’> 变红色 </div>
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
多类名使用方式
<div class="red font">红色字体</div>
3.id选择器
语法：
#id名 {
属性1: 属性值1;
...
}
例：
#nav {
color:red;
}
注意：id 属性只能在每个 HTML 文档中出现一次。 样式#定义,结构id调用, 只能调用一次
4.通配符选择器
语法：
* {
属性1: 属性值1;
...
}
例：
* {
margin: 0;
padding: 0;
}
5.后代选择器又称为包含选择器，可以选择父元素里面子元素
语法：
元素1 元素2 { 样式声明 }
6.子元素选择器（子选择器）只能选择作为某元素的最近一级子元素
语法：
元素1 > 元素2 { 样式声明 }
7.并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法：
元素1,元素2 { 样式声明 }
8.链接伪类选择器用于向某些选择器添加特殊的效果
:link
:visited
:hover
:active
9.:focus 伪类选择器用于选取获得焦点的表单元素（焦点就是光标）
例：
input:focus {
background-color:yellow;
}
二：字体系列
1. font-family 属性定义文本的字体系列
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
2. font-size 属性定义字体大小
例：
p {
font-size: 14px;
}
3. font-weight 属性设置文本字体的粗细
例：
p {
font-weight: bold;
}
normal:默认不加粗
bold:加粗
100~900： 400等同于normal,700等同于bold,注意后面不加单位
实际开发中：数字用的更多
4. font-style 属性设置文本的风格
p {
font-style: normal;
}
normal： 默认值
italic: 斜体
5.复合属性
body {
font: font-style font-weight font-size/line-height font-family;
}
使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
? 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
三：
1.color 属性用于定义文本的颜色
2.text-align 属性用于设置元素内文本内容的水平对齐方式。
left:左对齐
center：中间对齐
right：右对齐
3.text-decoration 属性规定添加到文本的修饰。
none:默认，没有装饰线
underline: 下划线
overline: 上划线
line-through: 删除线
4.text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
5.line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
四：
1.常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素
块级元素的特点：
① 自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素
2.常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
<span> 标签是最典型的行内元素。也称行内元素称为内联元素
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
3.在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
也称它们为行内块元素。
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;
background-color 属性定义了元素的背景颜色。
transparent:透明色
背景图片
background-image : none | url (url)
背景平铺
background-repeat: repeat | no-repeat | repeat-x | repeat-y
背景图片位置
background-position: x y;
5 背景图像固定
background-attachment : scroll | fixed
scroll:背景图像随对象内容滚动
fixed：背景图像固定
复合写法：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
背景半透明：background: rgba(0, 0, 0, 0.2);
最后一个参数是 alpha 透明度，取值范围在 0~1之间
五：盒子模型：
1.border : border-width || border-style || border-color
边框样式 border-style 可以设置如下值：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
2.border-collapse:collapse;表示相邻边框合并在一起
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
3.padding 属性用于设置内边距，即边框与内容之间的距离
4.margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
5.使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况:
①. 相邻块元素垂直外边距的合并
②. 嵌套块元素垂直外边距的塌陷
尽量只给一个margin值
6.去掉 li 前面的 项目符号(小圆点)
语法：
list-style: none;
圆角边框：
border-radius:length;
盒子阴影：
box-shadow: h-shadow v-shadow blur spread color inset;
盒子阴影：
text-shadow: h-shadow v-shadow blur color
CSS3