一、CSS语法
1.外部样式
<style type="text/css"></style>
2.内部样式
<link rel="stylesheet" type="text/css" href="">
3.内联样式
<p style="color: red"></p>
优先级：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
二、选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
p{}
#pid1{}/* id选择器 */
.pid{}/* 类选择器 */
.fontcolor{}
div p{}/* 后代选择器 */
div>p{}/* 子元素选择器 */
#pid2 ~p{/* 兄弟选择器，后续所有兄弟 */
/* color: red; */
}
#pid2 +p{}/* 兄弟选择器，后续第一个兄弟 */
[id*="pid"]{/* 包含 */
/* color: green; */
}
[id^="_pid"]{/* 匹配开始 */
/* color: gray; */
}
[id$="_"]{/* 匹配结尾 */
/* color: pink; */
}
p:nth-of-type(2n-1){/* 选择所有p元素第2n-1(奇数)个为p的子元素 */
/* color: blue; */
}
p:nth-child(2n){/* 选择所有 p 元素的父元素的第2n(偶数)个子元素 */
/* color: yellow; */
}
</style>
</head>
<body>
<p id="pid1" class="pid fontcolor">段落一</p>
<p id="pid2" class="pid">段落二</p>
<div><p id="_pid3">段落三</p><p id="pid">段落temp</p></div>
<p id="_pid4">段落四</p>
<p id="pid5_">段落五</p>
<div><p id="pid6_">段落六</p></div>
<p id="_pid7">段落七</p>
<p id="pid8_">段落八</p>
<p id="_pid9">段落九</p>
<p id="pid10_">段落十</p>
</body>
</html>三、背景/图片
body{
background-color: ;
background-image: url();
background-repeat: no-repeat|repeat-x|repeat-y|repeat;/*设置背景图像是否及如何重复，repeat为默认*/
background-position: 0 0;/*设置背景图像的起始位置，background-attachment须设置为 "fixed"*/
background-attachment: fixed|scroll;/*背景图像是否固定或者随着页面的其余部分滚动，scroll为默认*/
background-size: ;/*指定背景图片大小*/
}四、文本 / 字体
p{
color: hsla(100,25%,75%,1);
font-family:;/*字体*/
font-size: ;
font-style: italic;/*斜体*//*风格*/
font-weight: bold;/*加粗*//*粗细*/
word-spacing: 3em;/*单词间距*/
letter-spacing: 2em;/*字间距*/
text-shadow: 5px 5px 5px #FF0000;/*指定水平阴影，垂直阴影，模糊的距离，以及阴影的颜色*/
text-indent: 2em;/*缩进*/
text-transform: uppercase;/*大小写转换*/
text-decoration: line-through;/*修饰*/
text-align: left;/*水平对齐方式*/
line-height: 50px;/*行高*/
vertical-align: ;/*垂直对齐*/
}hsla指的是色调(Hue)、饱和度(Saturation)、亮度(Lightness)、透明度（Alpha）
H - 取值为0-360，0(或360)表示红色，120表示绿色，240表示蓝色。
S - 0%是灰色，100%是全彩。
L - 0% 是黑色，100% 是白色。
A - 0是透明，1是不透明。
五、表格 / 列表
ul{
list-style-type:none;
list-style-image:url();
}
table,tr,td{
border: 1px solid #000000;
border-collapse: collapse;/*表格的边框是否被合并为一个单一的边框*/
}六、大小单位（px/em/rem）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式表测试</title>
<style type="text/css">
div{
border: 1px solid #000000;
}
</style>
</head>
<body>
<div style="width: 200px;font-size: 28px;">
<!-- 5*父元素的font-size -->
<div style="width: 5em;">这是DIV1</div>
<!-- 50%*父元素的width -->
<div style="width: 50%;">这是DIV2</div>
<!-- 像素 -->
<div style="width: 150px;">这是DIV3</div>
<!-- 5*html的font-size，默认为16px -->
<div style="width: 5rem;">这是DIV4</div>
</div>
</body>
</html>