css02

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:哪些会有继承