1.CSS的简介：
* css:层叠样式表
-一层一层的
--有很多的属性和属性值
作用使页面的显示效果更加好
css将网页内容和显示样式进行分录，提高了显示功能。
2.css和html的结合方式；
(1)在每个html标签上面都有一个属性style，把css和html结合在一起
<div style="background-color: red;color: green">杨家有女初长成，养在深闺人未识。 天生丽质难自弃，一朝选在君王侧。</div>
(2)使用html的一个标签实现<style>标签，写在<head>里面
<!DOCTYPE html>
<html>
<head>
<title>02css.html</title>
<style type="text/css">
div {
background-color: blue
}
</style>
</head>
<body>
<div>回眸一笑百媚生，六宫粉黛无颜色。</div>
</body>
</html>
(3)在style标签里面 使用语句
@import url(css文件路径)
创建css文件将html和css文件分离
<html>
<head>
<title>02css.html</title>
<style type="text/css">
@import url(test.css);
</style>
</head>
<body>
<div>回眸一笑百媚生，六宫粉黛无颜色。</div>
</body>
</html>
(4)使用头标签link,引入外部css文件
-创建css文件
- 头标签插入 <link rel="stylesheet" type="text/css" href="css文件路径"/>
********第三种结合方式，缺点在某些浏览器不起作用，一般使用第四种方式。
3.CSS基本选择器(三种)
**需要对那个标签的数据进行操作
(1) 标签选择器
*使用标签名作为选择器的名称
<style type="text/css">
div {
background-color: yellow;
}
</style>
(2)class选择器
*每个html标签都有一个属性class
<html>
<head>
<title>04css.html</title>
<style type="text/css">
/* div.haha {
background-color: yellow;
}
p.haha{
background-color: yellow;
} */
.haha{
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">后宫佳丽三千人，三千宠爱在一身。</div>
<p class="haha">金屋妆成娇侍夜，玉楼宴罢醉和春。</p>
</body>
</html>
(3)id选择器
*每个html标签都有一个属性id。
-<div id="qwe">bbbbb</div>
<html>
<head>
<title>05css.html</title>
<style type="text/css">
/* div#haha{
background-color: gray;
}
p#haha{
background-color: gray;
} */
#haha{
background-color: gray;
}
</style>
</head>
</head>
<body>
<div id="haha">后宫佳丽三千人，三千宠爱在一身。</div>
<p id="haha">金屋妆成娇侍夜，玉楼宴罢醉和春。</p>
</body>
</html>
***class优先级大于标签选择器，id选择器大于class优先级
4.css的扩展选择器
(1)关联选择器
<div><p>后宫佳丽三千人，三千宠爱在一身。</p></div>
设置div标签里面p标签的样式
div p {
background: red;
}
(2)组合选择器
<div>111</div>
<p>222</p>
将不同的标签设置成相同的样式
div,p {
background: red;
}
(3)伪元素选择器
css里面提供了一些定义好的样式，可以拿过来直接使用。
**超链接状态
原始状态 悬停状态 点击状态 点击之后
：link :hover :active :visited
<html>
<head>
<title>05css.html</title>
<style type="text/css">
//原始状态
a:link{
background-color: orange;
}
//悬停状态
a:hover{
background-color: green;}
//点击状态
a:active{
background-color: blue;
}
//点击之后
a:visited{
background: red;
}
</style>
</head>
</head>
<body>
<a href="www.baidu.com" target="_blank">click</a>
</body>
</html>
5.css的盒子模型
*在进行布局之前，需要将内容封装到
(1)边框 border
上 border-top
下 border-bottom
左border-left
右border-right
(2)内边距 padding(文字距离边框的距离) 可统一设置也可以分别设置
上padding-top
下padding-bottom
左padding-left
右padding-right
(3)外边距margin
上margin-top
下margin-bottom
左margin-left
右margin-right
<html>
<head>
<title>csshezi1.html</title>
<style type="text/css">
div {
width:200px;
height:100px;
border:2px solid blue;
pa
}
#div2{
border-right: 2px dashed yellow;
padding-top: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div id="div1">aaaaaaaaaaaa</div>
<div id="div2">bbbbbbbbbbbb</div>
<div id="div3">cccccccccccc</div>
</body>
</html>
6.漂浮：
float
none： 设置对象不浮动
left： 设置对象浮在左边 后面的布局会占据右边
right： 设置对象浮在右边 后边的布局占据左边
案例 图文混排案例
<!DOCTYPE html>
<html>
<head>
<title>csshezi1.html</title>
<style type="text/css">
#img1{
float:left;
}
#text1{
color: green;
}
#holder{
width:500px;
height:500px;
border: 2px groove yellow;
}
</style>
</head>
<body>
<div id="holder">
<div id="img1"><img src="1.png"/></div>
<div id="text1">位于陆家嘴的浦东丽思卡尔顿酒店54楼大堂吧，因其可以近距离俯瞰浦江两岸风光的得天独厚地理位置，一直被网民盛赞为“十大魔都下午茶圣地”之一。但是，李小姐近日向本报记者投诉，“去喝下午茶，本以为是次愉悦享受，却不料喝出一肚子气来”。</div>
</div>
</body>
</html>
7.css布局的定位
position
属性：
static： 无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative： 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
absolute： 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed： 对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
案例图像签名
在图像上显示文字
<!DOCTYPE html>
<html>
<head>
<title>imgtxt.html</title>
<style type="text/css">
#img{
width: 450;
height: 300;
}
#index{
position: absolute;
top:20px;
left:20px;
color: green;
}
</style>
</head>
<body>
<div id="img"><img src="1.png"/></div>
<div id="index">这是一张图片</div>
</body>
</html>