现在的互联网前端分三层:
HTML:超文本标记语言,从语义的角度描述页面结构.
CSS:层叠样式表,从审美的角度负责页面样式.
JS:Javascript,从交互的角度描述页面行为.
CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果,将网页内容和显示样式进行分离,提高了显示功能.
1.CSS的引入方式:
1.内嵌式
<h1 style="font-size:10px; color:yellow">呵呵哒</h1>
2.内联式
<style type="text/css"> h1{ font-size:30px; color:red; } </style>
3.外链式
<link rel="stylesheet" type="text/css" href="./css/index.css">
4.导入式
@import url("./css/index.css")
2.CSS选择器
1.基础选择器:
通配符选择器:匹配所有标签,通常不建议使用通配符选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需谨慎使用.
#wrap id选择器:匹配以唯一标识符id属性等于wrap的对象作为选择符,唯一的只有一个.
div 标签选择器:匹配div标签的选择器.
. 类选择器:以class属性包含myclass的对象作为选择符,不同于ID选择的唯一性,类选择符可以同时定义多个.
2.高级选择器:
ul>li:子代选择器:只能命中子元素,而不能命中孙辈
ul a:后代选择器:选择符将会命中所有符合条件的后代,包括儿子,孙子......
li+a:相邻选择器:选择紧贴在li元素之后的a元素
li a:兄弟选择器:选择li元素后面的所有兄弟元素a
选择器的权重:行内样式1000>ID选择器100>类选择器10>标签选择器1
3.属性选择器:
E[att]:选择具有att属性的元素
E[att="val"]:选择具有att属性且属性值等于val的E元素
E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素
4.伪元素算择期:
E:before:设置在对象前(依据对象树的逻辑结构)发生的内容,用来和content属性一起使用,并且必须定义content属性.
E:after:设置在对象后(依据对象树的逻辑结构)发生的内容,用来和content属性一起使用,并且必须定义content属性.
3.CSS的继承性和层叠性
继承性:给父级设置一些属性,子级继承了父级的该属性,
有一些属性可以继承下来:color,font-*,text-*,line-*,主要是文本级的标签元素.
但是像一些合资元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承.
层叠性:权重的标签覆盖掉了权重小的标签,谁的权重大,浏览器就会显示谁的属性.
数:id的数量,class的数量,标签的数量.
总结:
1.先看标签元素有没有被选中,如果选中了,就数数(id,class,标签的数量),谁的权重大,就显示谁的属性,权重一样大,后来者居上.
2.如果没有被选中标签元素,权重为0
3.如果属性都是被继承下来的,权重都是0.权重都是0:"就近原则":谁描述的近,就显示谁的属性.
4.继承来的元素权重为0,跟选中的元素没有可比性.
5.!important:设置权重为无限大,只影响选中的元素.
4.盒模型
盒子内容的宽度
height:盒子内容的高度
padding:内边距,内容区域(content)到边框(border)的距离,内边距会扩大元素所在的区域,一些padding的属性和border类似.
margin:外边距,四个方向
外边距合并的情况:
1.外边距合并只会发生在上下两个方向上,并且只有块级元素上
2.当两个垂直外边距相遇时,会形成一个外边距,称为外边距合并,所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之.(毗邻的定义为:同级或者嵌套的盒元素,并且他们之间没有非空内容,padding或border分隔)
3.父子嵌套设置垂直外边距之后,会形成外边距合并,影响页面布局
解决办法:
1.父级或子元素使用浮动或者绝对定位absolute
2.父级overflow:hidden
3.父级设置padding(破坏非空白的折叠条件)
4.父级设置border
border边框:
border-分别设置四个边框宽度
如果提供全部四个参数值,将按上,右,下,左的顺序作用于四边
如果只提供一个,将用于全部的四边
如果提供两个,第一个用于上,下,第二个用于左,右.
如果提供三个,第一个用于上,第二个用于左,右,第三个用于下.
border-style:
none:默认,无轮廓
dotted:点状轮廓
dashed:虚线轮廓
solid:实线轮廓
double:双线轮廓
border-color:和border-width使用一样
border-left:
border-left-width
border-left-style
border-left-color
border-left:1px solid red
border-right,border-top,border-bottom:和border-left用法一样
border-radius:border-radius:50%圆
5.浮动
1.浮动效果:可以使元素按指定位置排列,直到遇到父元素的边界或另一个元素的边界停止
float:left 左浮动,左侧为起始,从左往右依次排列
float:right 右浮动,右侧为起始,从右往左依次排列
float:none 默认不浮动
2.浮动特性:
①浮动可以使元素脱离文档流,不占位置
②浮动会使元素提升层级,不建议
③浮动可以使块元素在一行排列,不设置宽高的时候,可以使元素适应内容
④浮动可以使行内元素支持宽高
浮动可以使元素脱离文档流,它可以使元素并排显示,有贴边和收缩现象,只要盒子浮动了,不区分行内还是块级标签,可以任意的设置宽高,但是,要浮动一起浮动,要不一起不浮动.
3.浮动产生的问题:
在页面布局中,一般情况父元素的高度是不设置的,通过子元素来填充它的高度,但是子元素设置浮动之后,不会撑开父元素的高度,因为子元素不占位置.
4.浮动解决方案:
①给父盒子设置固定高度(缺点:不灵活)
②给浮动元素最后一个子元素后面添加一个空的块级元素,且该元素不浮动,设置clear:both,缺点:结构冗余
③官方写法:给父盒子设置:.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:"0"}
④给父元素添加overflow:hidden
6.定位
static:默认没有定位
relative:相对定位:相对于自身进行定位
1.不设置偏移量的时候,对元素没有任何影响
2.可以提升层级关系
3.微调元素
absolute:绝对定位
1.无父级元素定位时,以浏览器的左上角为基准
2.有父级元素的情况下,父级设置相对定位,子级设置绝对定位,是以父盒子为基准进行定位,这就是"父相子绝".
fixed:固定定位:设置固定定位之后,当前元素不会发生改变
7.z-index
1.z-index属性设置元素的堆叠顺序(层级关系),拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素前面
2.对于同级元素,默认position:static情况下文档流后面的元素会覆盖前面的
3.对于同级元素,position不为static且z-index存在的情况下,z-index大的元素会覆盖z-index小的元素,即z-index越大,优先级越高.
4.从父原则:子级的永远大于父级的.