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 center3.背景属性    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-rightmargin：盒子的外壁与外部元素的距离    边框外壁与其他元素之间的距离    margin：10px；代表上下左右都是10px    margin：1px 2px 3px 4px；代表上右下左    margin:1px 2px; 上下  左右    margin：1px 2px 3px；上 左右 下    margin-top,margin-bottom.margin-left,margin-right