一 CSS简介
（Cascading Style Sheets）是层叠样式表用来定义网页的效果显示。可以解决HTML代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
层叠：一层一层的
样式表：有很多的属性和属性值
二 CSS和HTML的四种结合方式（四种）
1 在每个HTML标签上都有一个属性—style。把CSS和HTML结合在一起
<html> <head> <title>CSS和HTML的结合</title> </head> <body> <div style="background-color:red;color:green"> 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div> </body> </html>2 使用HTML的一个标签实现<style>标签，写在head里面
<html> <head> <title>CSS和HTML的结合</title> <style type="text/css"> div{ background-color:blue } </style> </head> <body> <div> 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div> </body> </html>3 在style标签里面，使用语句@importurl(CSS文件的路径)
第一步，创建一个CSS文件:demo.css
demo.css文件代码：
<style> div{ background-color:blue } </style>HTML代码
<html> <head> <title>CSS和HTML的结合</title> <style type="text/css"> @import url(demo.css); </style> </head> <body> <div> 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div> </body> </html>
4 使用头标签link,引入外部css文件
<link rel="stylesheet" type="text/css" href="css文件的路径"/>
css代码同上
<html> <head> <title>CSS和HTML的结合</title> <link rel="stylesheet" type="text/css" href="div.css"/> </head> <body> <div> 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div> </body> </html>第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式
三 CSS的优先级
样式优先级
由上到下，由外到内。优先级由低到高（后加载的优先级高）
代码规范：
选择器名称{ 属性名：属性值; 属性名：属性值; ......} //冒号与分号都是英文格式
属性与属性之间用分号隔开
属性与属性值直接使用冒号链接
如果一个属性有多个值的话，那么多个值用空格隔开。
四 CSS的基本选择器
CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器
CSS选择器的类型
要对哪个标签里面的数据进行操作
HTML标签选择器。使用的就是HTML的标签名
<style> div{ background-color:blue } </style>
class选择器（.）。其实使用的标签中的class属性
每个HTML标签都有一个属性class。
HTML的body中：
<p class="clazz">三千繁华</p>在head的style中：
p.clazz{color:red}id选择器（#）。其实使用的是标签中的id属性
每个标签都有一个属性id.
HTML的body中：
<p id="ID">三千繁华</p>在head的style中：
p#ID{color:red}
五 CSS的基本选择器的优先级
style> id选择器大于class选择器 class选择器优先级大于标签选择器
六 CSS的扩展选择器
1 关联选择器
<div><p>wwwww</p></div>
设置div标签里面p标签的样式，嵌套标签里面的样式
<html> <head> <title>扩展选择器</title> <style type="text/css"> div p{ background-color:green; } </style> </head> <body> <div> 三千繁华，<p>弹指刹那<p>，百年之后，不过一捧黄沙</div> <p>关联选择器</p> </body> </html>2 组合选择器
把不同的标签设置一样的样式
<html> <head> <title>组合选择器</title> <style type="text/css"> div,p{ background-color:blue; } </style> </head> <body> <div> 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div> <p>组合选择器</p> </body> </html>3 伪元素选择器
超链接的状态：
原始状态：:link
鼠标放上去状态：:hover
点击：:active
点击之后：:visited
<html> <head> <title>伪元素选择器</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="href://www.baidu.com.cn" target="_blank">超链接一</a> </body> </html>
七 CSS的盒子模型
div+CSS
在进行布局前需要把数据封装到一块一块的区域内，这个区域的专业术语叫盒子。
1 边框（border）：可统一设置，也可分别设置
上：border-top
下：border-bottom
左：border-left
右：border-right
2 内边距：文本内容距离div四条边的距离
padding:统一设置
padding-top.......同边框
3 外边距：div距离外边的距离
margin：同上
<html> <head> <title>CSS盒子模型</title> <style type="text/css"> div{ width:200px; height:100px; border:2px solid blue; } #div12{ border-right:2px dashed yellow } #div11{ padding-top:20px; } #div13{ margin-top:20px; } </style> </head> <body> <div id="div11">AAAAAAAAAAAAAAAAAAA</div> <div id="div12">BBBBBBBBBBBBBBBBBBBB</div> <div id="div13">CCCCCCCCCCCCCCCCC</div> </body> </html>八 CSS的布局的漂浮
float（漂浮）
none:默认值。对象不漂浮
left：文本流向对象的右边
right：文本流向对象的左边
在某些浏览器上不好使
<html> <head> <title>CSS布局的漂浮</title> <style type="text/css"> div{ width:200px; height:150px; border:2px solid blue; } #div11{ float:left; } </style> </head> <body> <div id="div11">AAAAAAAAAAAAAAAAAAA</div> <div id="div12">BBBBBBBBBBBBBBBBBBBB</div> <div id="div13">CCCCCCCCCCCCCCCCC</div> </body> </html>九 CSS的布局的定位
position
static：默认值，无特殊定位，对象遵循HTML定位规则
absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性对其进行绝对定位。
relative：不会把对象从文档流中拖出去，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。
<html> <head> <title>CSS布局的定位</title> <style type="text/css"> div{ width:200px; height:150px; border:2px solid blue; } #div11{ background-color:red; position:absolute; top:80px; left:120px; } #div12{ background-color:green; position:relative; top:50px; left:50px; } #div13{ background-color:orange; } </style> </head> <body> <div id="div11">AAAAAAAAAAAAAAAAAAA</div> <div id="div12">BBBBBBBBBBBBBBBBBBBB</div> <div id="div13">CCCCCCCCCCCCCCCCC</div> </body> </html>
十 案例—图文混排
<html> <head> <title>案例—图文混排</title> <style type="text/css"> #imgtext{ width:400px; height:300px; border:2px solid blue; border:2px dashed orange; } #div11{ float:left; } #div12{ color:blue; } </style> </head> <body> <div id="imgtext"> <div id="div11"><img src="aa.jpg" width="250" height="200"/></div> <div id="div12">三千繁华，弹指刹那，百年之后，不过一捧黄沙。三千繁华，弹指刹那，百年之后，不过一捧黄沙。 三千繁华，弹指刹那，百年之后，不过一捧黄沙。三千繁华，弹指刹那，百年之后，不过一捧黄沙。 三千繁华，弹指刹那，百年之后，不过一捧黄沙。三千繁华，弹指刹那，百年之后，不过一捧黄沙。 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div> </div> </body> </html>
十一 案例—图像签名
在图片上面显示文字
<html> <head> <title>案例—图像签名</title> <style type="text/css"> #div12{ position:absolute; top:250px; left:30px; } </style> </head> <body> <div id="div11"><img src="77.jpg" width="400" height="300"/></div> <div id="div12">三千繁华，弹指刹那，百年之后，不过一捧黄沙。</div> </body> </html>
