CSS
1. css简介
css: 层叠样式表
层叠： 一层一层
样式： 有很多的属性值。
使显示效果更加好css将网页内容和显示样式进行分离，提高了显示功能。
div特点：自动换行
2. css和html的结合方式（四种）
1）在每个html标签上都有一个style
<div style = "background-color:red ; color:green ; ">
2）使用html的一个标签实现<style>标签，写在head里面，相当于Java里的方法体
<style tye="text/css"> //css代码 div{ background-color:red; color:green ; } <style> <div>实例</div>
3）在style标签里面使用语句 ---将内容和样式分离，相当于Java中接口
@import url(css文件的路径)--创建一个css文件，css文件中编写样式代码
<style tye="text/css"> @import url(css文件的路径) <style>4) 使用头标签link,引入外部css文件
创建一个css文件
引入<link rel="stylesheet" type="text/css" href="css文件的路径" />第三种缺点，在某些浏览器下不起作用
一般使用第四种
***css的优先级（一般情况下）
由上到下，由外到内,优先级增高
后加载的优先级高
3. css的基本选择器（三种）
选择器---选择操作哪个标签内的属性格式：
选择器名称
{
属性名：属性值
属性名：属性值
....
}1）标签选择器
用标签作为选择器名称
2）class选择器 ( .名称 )* 每个html标签都有一个属性 class,用class值作为选择器名称
div.aaaaa{ background-color:red; } 选择div中class值为aaaa的 .aaaa{ background-color:red; } 所有class值为aaaa的都被选择 -<div class="aaaa" > 123456 </div>3）id选择器（ #名称 ）
* 每个html标签都有一个属性id ,用id值作为选择器名称
div#aaaa{ background-color:red; } 选择div中id值为aaaa的 #aaaa{ background-color:red; } 所有id值为aaaa的都被选择 -<div id="aaaa" > 123456 </div>***css的优先级（特殊情况下）
style > id选择器 > class选择器 > 标签选择器
4.扩展选择器
1）关联选择器eg:<div><p> 123456 </p></div>
只设置div标签里p 标签的的样式，设置被嵌套在标签里面的样式div p{ ... }2)组合选择器
<div> 123456 </div>
<p> 654321 </p>
将两个标签设为相同样式div,p{ ... }3)伪元素选择器
* * 超链接状态
原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visiteda:link{ a:hover{ a:activ{ a:visited{
} } } }<a href = "www.baidu.com">超链接</a>
CSS盒子模型： 在进行布前需要把数据封装到一块一块的区域内（div+css）
对数据操作，需要把数据放在一个区域里(div)
边框统一设置三个属性
border： width(px) style color
分开设置
border-top：上
border-bottom：下
border-left：左
border-right：右内边距
统一设置
padding: width(px)分开设置：
padding-top：上
padding-bottom：下
padding-left：左
padding -right：右外边距
统一设置
margin： length(px)
分开设置
margin-top：上
margin-bottom：下
margin-left：左
margin -right：右
6.css的布局悬浮
float
left : 将自身固定到左边，下一行对象漂浮到右边，下下一行上升一行
right ：将自身固定到右边，下一行对象漂浮到左边，下下一行上升一行
7.css布局的定位
position:
absolute:将对象从文档流中拖出，漂浮在文档上面(漂浮位置需要设定)，下面对象自动上升
relative: 不会从文档流中拖出，只改变自身位置。
都可通过top、bottom、left、right设定位置
8.图文混排
图片与文字并行显示
做法：
设置整体边框 ：在最外层用<div></div>将图片和文字框起来
用<div></div>包裹图片。用选择器设置float ,固定图片位置。
用<div></div>包裹文字，文字将自动上浮到边框内非图片区域
9.图像签名
文字在图像上面。
做法：
用<div></div>包裹图片。
用<div></div>包裹文字。
用选择器设置position为absolute