CSS学习笔记

CSS:页面美化和布局控制

　　1.概念:Cascading Style Sheets 层叠样式表

　　　　*层叠:多个样式可以作用在同一个html的元素上,同时生效

　　2.好处:
　　　　1.功能强大

　　　　2.将内容展示和样式控制分离

　　　　　　*降低耦合度,解耦

　　　　　　*让分工更容易

　　　　　　*提高开发效率

　　3.CSS的使用:CSS与html结合方式

　　　　1.内联样式:

　　　　　　*在标签内使用style属性指定css代码

　　　　　　*如:<div sytle="color:red;">hello css</div>

　　　　2.内部样式

　　　　　　*在head标签内,定义style标签,style标签的标签体内容就是css代码

　　　　　　*如:

　　　　　　<style>

　　　　    　　　　div{

　　　　　　    　　 color:blue;

　　　　　    　}

　　　　　　</style>

　　　　　　</div>hello css</div>

　　　　3.外部样式

　　　　　　1.定义css资源文件

　　　　　　2.在head标签内,定义link标签,引入外部的资源文件

　　　　　　*如:

　　　　　　　　a.css文件

　　　　　　　　　　div{

　　　　　　　　　　　　color:green;

　　　　　　　　　　}

　　　　　　<link rel="stylesheet" href="css/a.css">

　　　　　　<div>hello css<div>

　　　　　　<div>hello css<div>

　　　注意:

　　　　　　*1,2,3种方式css作用范围越来越大了

　　　　　    *1方式不常用,后期常用2.3

　　　　　　*第三种格式可以写为:

　　　　　　<style>

　　　　　　　　@import "css/a.css"

　　　　　　</style>

　　

4.css语法:

　　*格式:

　　　　选择器{

　　　　属性名1:属性值1;

　　　　属性名2:属性值2;

　　　　...

　　　　}

　　*选择器:筛选具有相似特征的元素

　　*注意:每一对属性需要使用;隔开,最后一对属性可以不加;

5.选择器:筛选uuyou相似特征的元素

　　*分类:

　　　　1.基础选择器

　　　　　　1.id选择器:选择具体的id属性值的元素,建议在一个html页面中id值唯一

　　　　　　　　*语法:#id属性值{}

　　　　　　2.元素选择器:选择具有相同标签名称的元素

　　　　　　　　*语法: 标签名称{}

　　　　　　　　*注意:id选择器优先级高于元素选择器

　　　　　　3.类选择器:

　　　　　　　　*语法: .类名{}

　　　　　　　　*注意:类选择器优先级高于元素选择器

　　　　2.扩展选择器

　　　　　　1.选择所有元素:

　　　　　　　　*语法:*{}

　　　　　　2.并集选择器:

　　　　　　　　选择器1,选择器2{}

　　　　　　3.子选择器:筛选选择器1元素下的选择器2元素

　　　　　　　　*语法:选择器1 选择器2{}

　　　　　　4.父选择器:赛选选择器2 的父元素选择器1

　　　　　　　　*语法: 选择器1>选择器2{}

　　　　　　5.属性选择器:选在元素名称,属性名=属性值得元素

　　　　　　　　*语法:元素名称[属性名="属性值"]{}

　　　　　　6.伪类选择器:选择一些元素具有的状态

　　　　　　　　*语法:元素:状态{}

　　　　　　　　*如:<a>

　　　　　　　　　　*状态:

　　　　　　　　　　　　*link:被初始化的状态

　　　　　　　　　　　　*visited:被访问过的状态

　　　　　　　　　　　　*active:正在访问的状态

　　　　　　　　　　　　*hover:鼠标悬浮的状态

6.属性

　　1.字体,文本

　　　　*ont-size:字体大小

　　　　*color:文本颜色

　　　　*text-align:对其方式

　　　　*hover:鼠标悬浮状态

　　2.背景

　　　　background:url("img/logo.jpg") no-repeat center;

　　3.边框

　　　　*border:设置边框,复合属性

　　4.尺寸

　　　　*width:宽度

　　　　*height:高度

　　5.盒子模型

　　　　*maargin:外边距

　　　　*padding:内边距

　　　　　　*默认情况下内边距会影响整个盒子的大小

　　　　　　*box-sizing:border-box;设置盒子的属性,让width和height就是你最终盒子的大小

　　　   *fload:浮动

　　　　　　*left

　　　　　　*right