1.基本语法规范
2.引入方式
1.内部样式表
2.行内样式表
3.外部样式表
3.选择器
选择器的功能
选择器的种类
**1.**基础选择器: 单个选择器构成的
标签选择器
类选择器
id 选择器
通配符选择器
在实际开发应用中用来针对页面中所有的元素默认样式进行消除，主要用来消除边距
基础选择器小结
**2.**复合选择器: 把多种基础选择器综合运用起来.
后代选择器
子选择器
并集选择器
伪类选择器
复合选择器小结
4.常用元素属性(更多搜索)
字体属性
字体颜色
字体粗细样式
文本（对齐进行装饰行高）
控制文字水平方向的对齐
案例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.r{
text-align: right;
}
h1{
text-align: center;
font-weight: 700;
}
.z{
text-align: left;
text-indent: 2em;
}
#j{
text-align: center;
}
</style>
</head>
<body>
<h1>卫星</h1>
<div>
<p class="r">2010年12月3日</p>
<hr>
<p class="z">试验二十九号卫星肩负着特殊使命，其核心任务是开展空间环境探测及相关技术验证工作。通过在轨运行
，该卫星将收集关键的空间环境数据，为后续航天器的设计与运行提供重要参考，同时对相关技术进行实战检验，推动航天技术的持续进步。</p>
<p class="z">此次发射任务意义非凡，它是长征系列运载火箭的第592次飞行。自长征系列火箭诞生以来，
凭借其可靠的性能和卓越的发射能力，一次次将各类航天器送入太空，为中国航天事业的发展立下了汗马功劳。
每一次成功发射，都凝聚着无数航天人的智慧与汗水，也彰显了中国在航天领域的强大实力。</p>
<div id="j">
<img src="./yangguang.png">
</div>
<p class="r">卫星</p>
</div>
</body>背景属性
颜色
图片
平铺
位置
圆角矩形
元素显示模式
块级元素
行内元素
让行内元素单独占一行
行内元素和块级元素的区别
**5.**盒模型
边框(border)
内边距（padding）
外边距(margin)
块级元素水平居中
去除浏览器默认样式
边框会撑大盒子
6.弹性布局
案例
<!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>
.box{
border:#d8dad8 solid 2px;
width: 308px;
height: 204px;
}
.gg{
padding-left: 40px;
border-bottom: 2px dotted #e8ebe8;
}
.ym{
font-size: 16px;
flood-color: #898b76;
padding-left: 25px;
line-height: 28px;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="gg">广告板</div>
<div class="ym">大清场 ，全场八折1</div>
<div class="ym">大清场 ，全场八折2</div>
<div class="ym">大清场 ，全场八折3</div>
</div>
</body>
</html>