css选择器分为:
1:基础选择器:
标签选择器
类选择器
id选择器
通配符选择器
2:复合选择器:作用:快速高效的选择,更快速更高效
实现:通过基础组合器的不同组合进行实现
1:分类:
1:后代选择器:重点中的重点(只要是后代就可以)
1:.nav a{
color: pink;
}
2:又称为包含选择器, .class child child{}
2:并集选择器:重点
1: p
,span{
color: red;
}
p,
span,
.firstDiv{
color: red;
}
2:不同标签之间都逗号隔开
3:链接伪类选择器:
1:伪类选择器使用方式:
:link{},用于向特殊的元素添加特殊的效果,比如给链接添加特殊效果
1:a:link{} 未访问的连接
2:a:visited{} 已访问的连接
3:a:hover{} 鼠标移动到连接上
4:a:active{} 选定的连接
注意:
按照顺序:lvha
4:子元素选择器(必须是直接子元素)
1:只能选择作为某元素的直接子元素(亲儿子)
2:div>strong{color: red}
3:子元素是指亲子,不包含孙子
5:交集选择器(理解)
1:使用方式:
标签.class{color: red;}
3:标签显示模式(非常重要):例如:div只能占一行,span一行可以显示多个
1:三种显示模式:
1:块元素:
1:块级元素个数:
1:h1-->h6(不能放div , 不能放块级元素)
2:p dt(不能放div , 不能放块级元素)
3:div:(容器级的盒子,放任何元素都可以)
4:h,p,dt属于文字类的标签.里面不能放块级元素
5:ul ol li
2:包含:
h , p , dt, ul , ol , li , div
2:特点:(特别重要)
1:独占一行
2:宽高,外边距,内边距都可以设置
3:宽度默认为100%p
4:是一个块级元素,里面可以放行内元素或者块级元素
2:行内元素
1:包含:a ,strong , b , em , i , del , s , ins , u , span
span:内联元素,行内元素
重点:span a
2:特点:
1:一行显示多个;
2:宽高设置无效;
3:默认宽度就是本身的宽度;
4:只能容纳文本或其他行内元素
3:注意:
1:连接里不能再放连接
2:特殊情况下a里面可以放块级元素,但是给a转换一下块级最安全
3:行内块元素
1:包含:img , input , td
2:特点:
1:一行显示多个;
2:默认宽高是本身的宽高
3:宽高,外边距,内边距可以控制
2:三种显示模式的特点和区别:
3:三种显示模式的相互转化:
1:转换行内:display:inline
div{
display: inline;
}
2:转换块:display:block
span{
display: block;
height: 200px;
width: 200px;
background-color: red;
}
3:块,行内转换为行内块:diaplay:inline-block
a
{
color: red;
width: 200px;
height: 20px;
display: inline-block;
text-decoration: none;
back
ground-color: pink;
}
4:行高(line-height)=height 就会垂直居中(faststore)
行高line-heigh的测量方法:
1:顶线,底线,中线,基线(英文的横道线)
2:基线与基线之间的距离就是行高(顶线与底线之间的距离)
5:单行文本垂直居中:
height = line-height
行高与高度的三种关系:
1:相等:则垂直居中
2:line-height>height , 偏下
3:line-height< heihgt , 偏上
6:css的背景:background
background-color
background-image
background-repeat
background-position
background-attachment
1:背景的作用:
2:css背景图片和插入图片的区别
1:color;重要
1:background-color: pink;
2:默认为trans(透明)
2:image:重要
1:background-image: url(demo.jpeg);
2:背景图片是在容器的底部 , 图片引入为在容器的里面;
3:注意:
1:必须加url
2:图片连接不用加引号
3:默认图片平铺
3:repeat:重要背景平铺
1:background-repeat: no-repeat(背景不平铺)
2:默认平铺
3:background-repeat: repeat(默认平铺水平和数值)
no-repeat(背景不平铺)
repeat-x
repeat-y
4:position:背景位置,重点()
1:background-position: left top ;(x y)
2:top
center
bottom
left
center
right
3:注意:
1;必须指定background-image属性
2:position后面是x,y左边,可以使用各方为精准名词或者精确单位
3:如果只指定了一个方位名词,另一个默认居中对齐
4:两个方位名词值前后顺序无关,因为是方位名词
4:移动绝对数值
1:background-position: 10px 50px ;(x y)
5:如果后面是精确坐标,则第一个为x,第二个为y
6:如果只写了一个值,则为x坐标,第二个为居中 background-position: 10px ;
5:魔兽背景:超大背景图片定位显示:水平居中,垂直靠上
background-position: center top
6:小图片左侧对齐
5:背景附着:background-attachment: scroll|fixed
1:解释:背景是滚动的还是固定的(默认为scroll)
2:background-attachment: scroll|fixed
6:背景简写
background:颜色 地址 平铺 附着 位置;(顺序没有规定,可以打乱顺序)
7:背景透明:取值0-1
background-color: rgba(0, 0, 0, 0.3);
注意:
1:里面文字不受影响,只是背景颜色半透明;
2:因为是css3,所以低于ie9版本是不支持的;有兼容性问题
8:背景总结
1:css(层叠样式表)三大特性:
1:层叠性
1:多个样式重复,会用后者
2:哪个样式冲突,哪个样式会层叠
2:继承性
1:子标签会继承父标签的属性
2:降低css复杂性
1:text
2:font
3:line
4:color
3:优先级(重点)
1:权重计算公式
1:如果选择器相同,则执行层叠性;
2:如果选择器不同,则出现优先级的问题;(每个元素)
1:继承或者带有*: 0000;
2:标签选择器: 0001
3:类选择器,伪类: 0010
4:id选择器: 0100
5:行内样式: 1000
6:!importent: 无穷大
div{
color: red!importent;
}
3:优先级为:
!importent>行内样式>id>类>标签>继承或者*
2:权重叠加
1:复合型选择器出现权重叠加的现象;
2:.nav a{} 0010 + 0001 = 0011
3:叠加没有进制,即为:0005+0005 = 00010
4:只要是继承的权重则为0
5:首先看标签有没有被选中
1:如果选中了,则按照上面的公式来计算;
2:如果没有选中,那么权重是0,因为继承的权重是0
3:0010的优先级要比00012的优先级要高
2:
1:css样式冲突的原则:
2:哪些会有继承