css（层叠样式表）

将网页内容和显示样式进行分离，提高了显示功能

css与html的结合方式

• 在每个html标签上面都有一个属性 style。<div style="background-color:red;color:green;">
• 使用html的一个标签实现

<style type="text/css"> 
    div {   background-color:blue;
            color: red;
        }       
</style>

• 用Link引入css文件
  
  • 优先级（一般情况）：由上到下，由外到内。优先级由低到高。
  • 后加载的优先级高

CSS的基本选择器

• 标签选择器
  使用标签名作为选择器的名称
  div {
  background-color:gray;
  color:white;}
• class选择器
  每个html标签都有一个属性 class
• id选择器
  style > id选择器 > class选择器 > 标签选择器
• 组合选择器（设置成统一格式）

<p>yeweilan</p>  
<div>hello</div>
p,div{  background-color: #333300;}

• 关联选择器（只修改第一行的颜色）

<div><p>hello</p></div>
<p>yeweilan</p>

div p{
background-color: #333300;
}

CSS盒子模型

• 在进行布局前需要把数据封装到一块一块的区域内（div）
  
  • 边框
    border: 2px solid blue;
    border：统一设置
    上 border-top
    下 border-bottom
    左 border-left
    右 border-right
  • 内边距/外边距
    padding/margin:20px;
    使用padding/margin统一设置
    也可以分别设置
    上下左右四个内边距

css的漂浮与定位

• float
  
  • 属性值
    left :　 文本流向对象的右边
    right :　 文本流向对象的左边
• 定位
  position：
• 属性值
  
  • absolute ：
    将对象从文档流中拖出
    可以是top、bottom等属性进行定位
  • relative ：
    不会把对象从文档流中拖出
    可以使用top、bottom等属性进行定位