1：什么是CSS
Cascading style Sheet :层叠级联样式表
CSS：字体，颜色，边距，宽度，背景图片。。。
2：CSS的快速入门语法（推荐引入css的样式）建议使用独立的css文件，方便项目的维护以及代码的清楚性
3：四种css导入的方式
样式的优先级的问题：就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--
-->
h1 {
color: red;
}
</style>
<!-- 导入式-->
<link rel="stylesheet" href="我的第一个css程序/css/style.css">
<!-- 导入式的另外一种写法 (不推荐使用,是在css2.1中出现的)-->
<style>
@import "我的第一个css程序/css/style.css";
</style>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式-->
<h1 style="color: black">我是标题</h1>
</body>
</html>
4：CSS中的选择器
作用：选择页面上的某一个或者某一类元素
1：标签选择器：选择一类标签
2：类选择器 class：选择所有class属性一致的标签
3：id选择器：全局唯一
<style>
/*1：标签选择器会选择这个页面所有的标签*/
h1 {
color: red;
font-size: 18px;
}
/*2：类选择器的格式：.class的名称{}
好处：
可以多个标签归类，是同一个class
*/
.xst {
color: blue;
background: red;
}
/*3：id选择器的格式：#id名称{}
好处：id选择器全局必须唯一
*/
/*id选择器>class选择器>标签选择器*/
#xxxx{
color: black;
}
</style>
5：补充说明一些高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/*后代选择器
body p{}
*/
body p {
background: red;
}
/*子选择器
body>p：表示body后面的第一代元素
*/
body > p {
background: blue;
}
/* 相邻兄弟选择器：只有一个，一般是向下的一个元素*/
.xst + p {
background: blue;
}
/*通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/
.xst ~ p {
background: black;
}
.
</style>
</head>
<body>
<p>p1</p>
<p class="xst">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
</body>
</html>
6：结构伪类选择器（在页面中存在冒号的css叫做伪类选择器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- -->
<style>
/*ul的第一个子元素*/
ul li:first-child {
background: palevioletred;
}
/* ul的最后一个元素*/
ul li:last-child {
background: blue;
}
/* 选中p1：定位到父元素，定位到父元素,选择当前p元素的父级选择，选中当前
父级元素的第一个，并且类型是当前元素才生效
nth-child(a):选择当前父元素下的第a个元素
*/
p:nth-child(1) {
background: red;
}
/*选中当前元素的父元素的第一个类型为p的元素，设置背景色为aqua*/
p:nth-of-type(1) {
background: aqua;
}
</style>
</head>
<body>
<h1>1111</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
7：属性选择器（最常用的）
<!--属性选择器（id+class结合使用）
格式：a[id]{}：表示a标签中的id选择器
=：表示绝对等于
*=：表示包括的
^=：表示以这个开头
$=：表示以这个结尾
-->
8：CSS中的样式
（1）字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/* font-size：表示字体的大小
font-family：表示字体的格式
font-weight：字体的粗细（bold加粗）
color：字体颜色
em：表示缩进，一个tab表示两个em
*/
#nm {
font-size: 20px;
font-family: 楷体;
font-weight: bold;
}
</style>
<body>
<!--span：span标签一般用于显示比较突出的字-->
<span id="nm">重点</span>突出的字
</body>
</html>
（2）文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
</head>
<!--补充说明颜色的使用
颜色：
单词
RGB 0-F
RGBA A:0-1
text-align
center：居中
text-indent：表示首行缩进
line-height：行高（行高和块的高度一致，就可以上下居中）
text-decoration：underline（下划线）line-through（中划线）overline（下划线）
-->
<style>
h1 {
text-align: center;
}
.p1 {
text-indent: 2em;
}
.p2 {
line-height: 200px;
text-indent: 2em;
}
</style>
<body>
<h1>故事介绍</h1>
<p class="p1">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，内海和边海的水域面积约470多万平方千米。海域分布有大小岛屿7600多个，其中台湾岛最大，面积35798平方千米 [2]
。中国同14国接壤，与8国海上相邻。省级行政区划为23个省、5个自治区、4个直辖市、2个特别行政区。 [2] </p>
<p class="p2"> [5] ，国徽内容为国旗、天安门、齿轮和麦稻穗 [6] ，通用语言文字是普通话和规范汉字 [7] ，首都北京 [8] ，是一个以汉族为主体、56个民族共同组成的统一的多民族国家。</p>
</body>
</html>
（3）超链接伪类（a:hover）表示鼠标悬停的状态
（4）ul-li的一些补充说明
/*line-style:
none：去掉原点
circle：圆心
.....
*/
ul li{
list-style: none;
}
（5）盒子模型以及边框的使用
1：什么是盒子
margin：外边距（上下左右）通常用margin：0 auto 来居中，auto：自动对齐方式
padding：内边距
border：边框
（a）粗细，样式，颜色（常用：1px,solid,red）
2：盒子的计算方式：margin+border+padding+内容宽度
（6）浮动
1：display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
display:
block：块元素
inline：行内元素
inline-block：是块元素，但是可以内联
none：消失
-->
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div快级元素</div>
<span>span行内元素</span>
</body>
</html>
2：float（左右浮动）
（6）
1：z-index：表示一个层级问题，默认是0，最高无限制，
2：背景透明度，opacity：0.5