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.浮动属性
9297

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