1.CSS层叠样式表，简单的说就是来美化页面的 、修饰网页的一门技术
通过CSS可以实现将设置样式的CSS代码和展示数据的HTML代码进行分离。增强网页的展示能力。
2.css总共有三种标签，非别是div、span、p
这三个元素的区别：
div和p是块级元素，独占一行，而span是行内元素，<!DOCTYPE html>
3. css样式：
A通过标签上的 style 属性给div设置样式
B通过style标签给span设置样式
C通过Link标签引入外部的css文件
4：使用style属性定义样式
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
</head>
<body>
<!-- geox给下面的div/span/p加上css样式 -->
<!--sytle属性：
border:边框 宽度
solid:设置边框颜色
font-size:字体大小
font-family:字体属性
font-style:是否为斜体
font-weight:是否加粗
background:底色
-->
<div id="" style="border: 2px solid red;font-size: 25px; font-family: '微软雅黑';font-style: italic; font-weight: bolder;"> div111 </div> <div id="" style="border: 2px solid red;font-size: 25px; font-family: '微软雅黑';font-style: italic; font-weight: bolder;"> div111 </div> <span style="border: 3px solid blue; font-size: 25px;font-style: italic;"> span222 </span> <span style="border: 3px solid blue; font-size: 25px;font-style: italic;"> span222 </span> <p style="background: blueviolet;font-size: 30px; font-style: italic;font-weight: bolder;">p333333</a></p> <p style="background: blueviolet;font-size: 30px; font-style: italic;font-weight: bolder;">p333333</a></p> </body> </html>
使用link标签引入外部css样式和style标签定义样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
border: 3px solid red;
font-size: 50px;
font-weight: bolder;
background: green;
}
div{
border: 1px solid red; font-size: 40px;
background: pink;
}
</style>
<!--href：引入文件路径
rel：引入文件的样式
-->
<link rel="stylesheet" href="002.css" />
</head>
<body>
<div>
这是一个DIV
</div>
<span>
这是另一个sapn
</span>
<span>
这是另一个sapn
</span>
<p>pppppp</p>
<p>pppppp</p>
<p>pppppp</p>
</body>
</html>
css:
p{ border: 10px solid blue; font-size: 30px; font-weight: bolder; font-style: italic; background: burlywood; }
5标签选择器
5.1标签名选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
/*标签名选择器*/
span{
border: 3px solid red;
font-size: 40px;
font-weight: bolder;
}
</style>
</head>
<body>
<span>111</span>
<span>222</span>
<span>3333</span>
</body>
</html>
5.2类或id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
.p1{
border: 3px solid red;
font-size: 40px;
font-weight: bolder;
}
#aa{
border: 3px solid #FF0000;
font-size: 40px;
font-weight: bolder;
background: yellow;
}
</style>
</head>
<body>
<span class="p1">111</span>
<span id="aa">222</span>
<span>3333</span>
</body>
</html>
若是标签名、类、id同时被选中，起效果先后顺序为：id>类>标签名
6.后代选择器
div span{} div内部的所有span元素 div>span{} div内部所有span子元素 div,span,p{} 分组选择器 *[class]{} 选中所有具有class属性的元素 input[type='text']{} 选中input标签内属性type='text'的标签
#p1+p{} 相邻兄弟选择器，选择id为p1后面的兄弟元素
div a:hover{} 当鼠标移入时
7.盒子模型
margin：外边距
div{ margin-top:1px 上编辑 margin-left:1px 左边距 margin-bottom:1px 下边距 margin:1px 1px 1px 1px 上 右 下 左
margin:1px 1px 1px 上 左右 下
margin:1px 1px 1px 上下 左右
}
垂直方向的外边距（上下）相遇是，会有一个外边距合并的现象，合并的结果，是取较大者！！！
border：边框
padding：内边距（同上）