css和html的结合方式（4种结合方式）：
（1）在每个html标签上面都有一个属性 style，把css和html结合在一起
<div style="background-color:red;color:green">这是一个div</div>
--------------------------------------------------
（2）使用html的一个标签实现<style>,写在head里面
代码：
<html>
<head>
<title>html实例</title>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>天行健，君子以自强不息</div>
</body>
</html>
----------------------------------------------------
（3）在style标签里面使用语句：
@import url(css文件的路径)
html代码：
<html>
<head>
<title>html实例</title>
<style type="text/css">
@import url(div.css)
</style>
</head>
<body>
<div>天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</div>
</body>
</html>
---------------------------------------------
css代码：
div{
background-color:red;
color:green;
}
------------------------------------------
（4）使用头标签link,引入外部文件css
html代码：
<html>
<head>
<title>html实例</title>
<link rel="stylesheet" type="text/css" href="div.css"/>
</head>
<body>
<div>天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</div>
</body>
</html>
----------------------------------------------
div代码:
div{
background-color:gray;
color:green;
}
第三种结合方式在某些浏览器下不兼容，通常我们使用第四种方式
css的三种选择器：
语法：
选择器名称 {
属性名：属性值；属性名：属性值；…….}
（1）标签选择器：使用标签名作为选择器
代码：
<html>
<head>
<title>html实例</title>
<style type="text/css">
div{
background-color :blue;
color:red;
}
p{
background-color :blue;
color:red;
}
</style>
</head>
<body>
<div>天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</div>
<p>你快乐吗，我很快乐</p>
</body>
</html>
----------------------------------------------------
<html>
<head>
<title>html实例</title>
<style type="text/css">
p{
background-color :green;
color:red;
}
</style>
</head>
<body>
<p>天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</p>
</body>
</html>
---------------------------------------------
（2）class选择器：每个html上面都有一个class属性。
代码：
<html>
<head>
<title>html实例</title>
<style type="text/css">
div.hello{
background-color :gray;
color:red;
}
</style>
</head>
<body>
<div class="hello">天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</div>
</body>
</html>
---------------------------------------------------
（3）id选择器：每个html上面都有一个class属性
代码：
<html>
<head>
<title>html实例</title>
<style type="text/css">
div#hahah{
background-color :green;
color:black;
}
</style>
</head>
<body>
<div id="hahah">天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</div>
</body>
</html>
------------------------------------------------
扩展选择器：
（1）关联选择器：设置div标签里面p标签的样式，嵌套标签里面的样式
代码：
<html>
<head>
<title>html实例</title>
<style type="text/css">
div p{
background-color:gray;
color:yellow;
}
</style>
</head>
<body>
<div><p>css扩展选择器</p></div>
</body>
</html>
----------------------------------------------------
（2）组合选择器：设置不同标签的相同样式
代码：
<html>
<head>
<title>html实例</title>
<style type="text/css">
div,p{
background-color:gray;
color:yellow;
}
</style>
</head>
<body>
/*设置不同标签的相同样式*/
<div>笑傲江湖</div>
<p>css扩展选择器</p>
</body>
</html>
--------------------------------------------------
（3）伪元素选择器：(了解，浏览器的兼容性比较差)
css里面提供了一些定义好的样式，可以拿过来使用
比如超链接：
超链接的状态：
原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
记忆的方法
lv ha
代码：
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*原始状态*/
a:link {
background-color: red;
}
/*悬停状态*/
a:hover {
background-color: green;
}
/*点击状态*/
a:active {
background-color: blue;
}
/*点击之后的状态*/
a:visited {
background-color: gray;
}
</style>
</head>
<body>
<a href="http://www.sina1.com.cn" target="_blank">CSS概述和与HTML的结合方式超链接一</a>
</body>
</html>
CSS盒子模型：
代码：
<html>
<head>
<title>html实例</title>
<style type="text/css">
//设置整个边框
div{
width:300px;
height:100px;
border:3px solid blue;
}
//设置第二个的内边距
div#hello2{
padding:50px
}
div#hello3{
padding-top:80px
}
//设置第二个的外边距
div#hello2{
margin:30px
}
div#hello3{
margin-left:100px
}
</style>
</head>
<body>
<div id="hello1">天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤1</div>
<div id="hello2">天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤2</div>
<div id="hello3">天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤3</div>
</body>
</html>`
CSS布局的漂浮（简单了解）：
CSS布局的定位：
position属性值：
absolute:将对象从文档流中拖出，使用top,bottom等属性进行定位。
relative:不会把对象从文档流中拖出，使用top,bottom等属性进行定位。
------------------------------------------------
