css（1）

CSS概述
1.什么是css
Cascading style sheets 、层叠样式表、级联样式表、简称样式表
2.作用
设置网页中元素的样式
3.HTML与css关系
HTML：负责搭建，内容展示 —一个页面的骨架
CSS：负责网页的修饰，给网页的化妆
语法规范
常用样式：
1.设置文本样式
color:合法的颜色值
2.设置字体的大小
font-size：以px为单位
3.背景：
background
外部样式表样式表
1.创建样式表以.css作为后缀名
2.在css文件中抒写样式规范
3.在网页头部中引入css样式文件

<link href ='css路劲' rel ='stylesheet'>

继承性
大部分css样式可以被继承
必须为父子结构（有层级关系）
层叠性
可以为一个元素设置多个样式规则
规则不冲突时，多个样式可以同时应用到当元素上
优先级
如果多个样式声明冲突,按照样式的优先级规则应用样式
最高:内联样式
内部和外部:就近原则
最低:浏览器默认样式
调整优先级: !important
基础选择器
1.选择器作用：
规范页面中那些元素使用的样式，的条件
为了匹配元素
2.选择器详解
1.通用选择器
匹配页面上所有的元素

*{样式声明  效率低 项目中少用}

2.元素选择器，标签选择器
设置元素某种默认样式
div{}
p{}
3.分类选择器
将元素选择器和分类选择器结合使用的一种方式
元素选择器.类选择器{样式声明}

p.my_font{background-color: #ccc;}

1.指向更精确
2.优先级高
4.群组选择器
将多个选择器放在一起定义公共样式
多个选择器用逗号隔开
4.子代选择器
元素选择器1>元素选择器2
5.伪类选择器
选择器:伪类选择器{}在这个标签的某一个状态下，才能拥有此样式
input:focus{background:black; color:white}匹配元素获取焦点选择器
6.选择器的权值
权值，表示选择器的重要程度，权值越大 优先级越高
!mpoetant > 1000
内联选择器 = 1000
id 选择器 100
类选择器 10
元素选择器 1
通用的选择器 0
继承的 无
权值的计算不会超过其最大数量（100个1加起来 不大于一个10）
单位
em :相对于父元素设置的尺寸乘以的倍数（1.5em）;
rem:相对于根元素设置尺寸的倍数（1.5rem）
颜色的计算方式
rgb 全称 red green blue 光学三原色

rgba() red green blue alpha（透明度）
溢出
如果需要设置横向溢出需要在内容和容器之间在套一层容器 内层容器的宽度要大于外层容器宽度
border
属性：style solid 实线 dotted 点状线 dashed 虚线 double 双实线
color：支持透明色 （transparent）
边角设置
border-radius：50%；
单角设置：先上下后左右 border-top-left-radius:（左上角设置边框角度）
边框阴影
box-shadow：
取值：h-shadow （水平方向阴影偏移 正右负左） v-shadow（垂直方向阴影 正下负上） blur（阴影模糊距离 越大越模糊，负值消失） spread（阴影尺寸 阴影在基础上扩出来的距离） color（阴影颜色） inset（将外部阴影变为内部阴影）;
轮廓
轮廓是指边框的边框，绘制于边框外边的线条
outline:width style color;
扩模型
1.什么叫框模型
页面元素皆为框（盒子）
margin 及 padding
单位：% 占父元素宽度的百分比
外边距的特殊效果
1.外边距合并
当两个垂直外边距相遇时，他们会合成一个，最终的距离为两个外边距中最大的值
2.行内元素对外边距的表现
行内元素垂直方向对外边距无效（img除外）
3.行内块元素垂直方向对外边距表现
同一行中，一个行内块元素设置了垂直边距，同行其他行内会跟着发生变化
4.外边距溢出
在特殊条件下，为子元素设置上外边距，会作用到父元素身上
条件：
1.父元素没有上边框
2.为第一个子元素设置上外边距
解决方案：
1.为父元素设置上边框 弊端：影响父元素实际高度
2.为父元素设置上内边距 弊端：影响父元素实际高度
3.在父元素的第一个子元素位置添加一个空的table标签
内边距
不会影响其他元素，但是会改变自己的占地尺寸，视觉上大小发生变化
box-sizing属性
指定框模型的计算方式
box-sizing:content-box;默认值
box-sizing: border-box;
元素的实际宽度：左外边距 + width + 右外边距
元素的实际高度：上外边距 + height + 下外边距