css知识点笔记

一：css的简介

1. 什么是css

    （1）层叠样式表  css是对html进行样式修饰语言
        层叠：就是层层叠加，如果不同的css样式对同一个html标签进行修饰，样式有冲突的部分
        用后来的覆盖前面的，不冲突的部分相互作用
        样式表：就是css属性样式的集合

2.css的作用

（1）修饰html的，使其样式更加漂亮
（2）提高样式代码的复用性
（3）html内容与样式相分离，便于后期的维护

3.css的引入方式和书写规范

（1）内嵌样式
        把css样式嵌入html标签里面
        <div style="color:red;font-size: 25px;">study,study,study</div>
        语法：
            1）通过style属性讲样式嵌入html标签里面
            2）属性的写法：   属性：属性值
            3）多个属性之间使用分号隔开
        不建议使用
（2）内部样式
        在head标签中使用style标签进行css的引入
        <style type="text/css">//告知浏览器使用css解析器去解析
            div {color: red;font-size: 25px;}
        </style>
        语法：
            1）使用style标签进行css的引入
            2）属性的写法  属性：属性值
            3）多个属性之间用分号隔开
（3）外部样式
        讲css样式抽取成一个单独css文件，谁去使用就引用这个文件
        <link rel="stylesheet" type="text/css" href="d.css"/>
        语法：
                1）创建css文件，讲css属性写带css文件中
                2）在head中使用link标签进行使用
                3）rel：代表要引入的文件与html的关系
                4）属性的写法  属性：属性值
                5）多个属性之间用分号隔开
（4）@import方式（基本不用）
            <style type="text/css">
                @import url("css地址");
            </style>

    link与@import的区别：
            1）link所有浏览器都支持 import部分低版本不支持
            2）import方式是等待html加载完之后再加载
            3）import方式不支持js的动态修改

二：css选择器

1.基本选择器

    （1）元素选择器
        语法：html标签名{css属性}
        实例：
        <style type="text/css">
            span{color:red;font-size:100px;}
        </style>

    （2）id选择器
        语法：  #Id的值{css的属性}
        <style type="text/css">
            #div1{background-color:red;}
            #div2{background-color:pink;}
        </style>
     （3）class选择器
        语法：.class的值{css属性}
        实例：
        .style1{color:red;}
        .style2{color: pink;}

    选择器优先级：id选择器 > class选择器 > 基本选择器

2.属性选择器

   语法：基本选择器[属性=“属性值”]{css属性}
   示例：
        <style type="text/css">
            input[type="text"]{background-color: yellow;}
            input[type="password"]{background-color: red;}
        </style>
        <form action="#">
            name:<input type="text"/></br>
            pass:<input type="password"/></br>
        </action>

3.伪元素选择器

a标签的伪元素选择器
    语法：
        静止状态：a:link{css属性}
        悬浮状态：a:hover{css属性}
        出发状态：a:active{css属性}
        完成状态：a:visited{css属性}

4.层次选择器

   语法：父级选择器 子级选择器......

三：css属性

1.文字属性
    font-size : 大小
    font-family：字体类型

2.文本属性
    color：颜色
    text-docoretion：下划线
        属性值：none（没有）     underline（有）
    text-align：对齐方式
        属性值：left right center

3.背景属性
    background-color：背景颜色
    background-image：背景图片
        属性：url("图片地址")
    background-repeat：平铺方式
        属性：repeat：平铺（默认） no-repeat：单张   repeat-x：横向平铺    repeat-y：竖向平铺

    <style type="text/css">
body{
    background-image: url("vans.gif");
    background-repeat: repeat-y ;
}
</style>


4.列表属性
    list-style-type:列表项前的小标志
        属性值：太多
    list-style-image:列表前加小图片
        属性值：url("图片地址")；

5.尺寸属性
    width：宽度
    height：高度
    <style type="text/css">
#div1{background-color: pink;width: 300px;height: 300px}
#div2{background-color:blue;width: 300px;height: 300px}
</style>

6.显示属性
    display:
        属性值：none：隐藏
                block：块级显示
                inline：行级显示


7.浮动属性
    float：
        属性值：left right
                clear:清除浮动  left right both
         缺点： （1）影响相邻元素不能正常显示
                （2）影响父元素不能正常显示

四：css盒子模型
border:边界
border-style：边框的线性
border-width:盒子的厚度
border-color：边框的颜色
简写：border:厚度 线性 颜色
border-top:上边框
border-bottom：下边框
border-left：左边框
border-right：右边框

padding：盒子内壁与内部元素之间的距离
    padding：10px；代表上下左右都是10px
    padding：1px 2px 3px 4px；代表上右下左
    padding:1px 2px; 上下  左右
    padding：1px 2px 3px；上 左右 下
    padding-top,padding-bottom.padding-left,padding-right

margin：盒子的外壁与外部元素的距离
    边框外壁与其他元素之间的距离
    margin：10px；代表上下左右都是10px
    margin：1px 2px 3px 4px；代表上右下左
    margin:1px 2px; 上下  左右
    margin：1px 2px 3px；上 左右 下
    margin-top,margin-bottom.margin-left,margin-right