CSS简介

css
1、简介
    css：层叠样式表
        层叠：一层一层
        样式表：很多的属性和属性值
    使页面显示效果更加好
    css将页面内容和显示样式进行分离，提高了显示功能
2、css和html的结合方式（四种结合方式）
    （1）在每个html标签上面都有一个属性style，使其结合
        <div style="background-color:red;color:green;">
    （2）使用html的一个标签实现<style>标签，写在head里面
        <style type="text/css">
            *css代码;
            div{
                background-color:red;
                color:green;
            }
        </style>
    （3）在style标签里面 使用语句（在某些浏览器下不起作用）
        @import url(css文件的路径);
        第一步：创建一个css文件
        <style type="text/css">
            @import url(div.css);
        </style>
    （4）使用头标签link，引入外部css文件
        第一步：创建一个css文件
        <link rel="stylesheet" type="text/css" href="css文件的路径"/>
        一般采用第四种方式
    从上到下，从外到内，优先级由低变高（一般情况）
3、css的基本选择器（三种）
    要对那个标签里面的数据进行操作
    （1）标签选择器
        使用标签名作为选择器的名称
        div{
            background-color:red;
            color:green;
        }
    （2）class选择器
        每个html标签都有一个属性class
        <div class="haha">aaaa</div>
        .haha{
            background-color:red;
            color:green;
        }
    （3）id选择器
        每个html标签上有一个属性 id
        <div id="hehe">haha</div>
        #hehe{
            background-color:red;
            color:green;
        }
    优先级
    style > id > class > 标签
4、css的扩展选择器
    （1）关联选择器
        <div><p>wwww</p></div>
        设置div标签里面p标签的样式，嵌套标签里面的样式
            div p{
                background-color:red;
            }
    （2）组合选择器
        <div>111</div>
        <p>222</p>
        把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
            div,p{
                background-color:red;
            }
    （3）伪元素选择器
        css里面提供了一些定义好的样式，可以拿过来使用
        比如超链接
            超链接的状态
            原始状态   鼠标放上去状态   点击   点击之后
             :link      :hover    :active   :visited
5、css的盒子模型
    在进行布局前需要把数据封装到一块一块的区域内（div）
    （1）边框
        border：2px solid blue；
        border：统一设置
        上 border-top
        下 border-bottom
        左 border-left
        右 border-right
    （2）内边距
        padding：20px；
        使用padding统一设置
        也可以分别设置
        上下左右四个内边距
    （3）外边距
        margin：20px；
        使用margin统一设置
        也可以分别设置
        上下左右四个外边距
6、css的布局的漂浮
    float：
        属性值
        left：文本流向对象的右边
        right：文本流向对象的左边
7、css的布局定位
    position：
        属性值
        absolute：
            将对象从文档流中拖出
            可以是top、bottom等属性进行定位
        relative：
            不会把对象从文档流中拖出
            可以使用top、bottom等属性进行定位
8、图文混排
    图形和文字在一起显示
9、图像签字
    在图片上显示文字