美文网首页
css背景及三大特性

css背景及三大特性

作者: 让思念入土 | 来源:发表于2019-01-07 21:28 被阅读0次

    背景

    1、背景颜色    background-color:   默认的值是 transparent 透明的

    2、背景图片  background-image: url();

    none默认无背景图  url()使用绝对或相对地址指定背景图像

    3、背景平铺  background-repeat: ; 

       属性值: repeat背景图像在纵向和横向上平铺(默认的)

                    no-repeat  背景图像不平铺

                    repeat-x  背景图像在横向上平铺

                    repeat-y  背景图像在纵向平铺

    4、背景位置 background-position :length  / position;

    属性值: position     top | center | bottom | left | center | right 方位名词

                    length百分数 | 由浮点数字和单位标识符组成的长度值

    注意:

    必须先指定background-image属性

    position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。

    如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left  top和top  left效果一致

    如果只指定了一个方位名词,另一个值默认居中对齐。

    如果position 后面是精确坐标, 那么第一个,肯定是 x  第二的一定是y

    如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中

    如果指定的两个值是 精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标

    5、背景附着: background-attachment : scroll | fixed

                scroll背景图像是随对象内容滚动

                fixed背景图像固定

    背景简写:

    background: transparent url(image.jpg) repeat-y scroll center top ;

    6、背景透明:background: rgba(0, 0, 0, 0.3);

    最后一个参数是alpha 透明度 取值范围 0~1之间

    注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响

    因为是CSS3 ,所以 低于 ie9 的版本是不支持的。

    css三大特性

    1、层叠性:所谓层叠性是指多种CSS样式的叠加。

    样式冲突,遵循的原则是就近原则 那个样式离着结构近,就执行那个样式。样式不冲突,不会层叠

    2、继承性:子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

    子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性

    3、优先级:

    定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时,选择器相同,则执行层叠性;选择器不同,就会出现优先级的问题。这时候需要用到权重计算公式

    标签选择器                      计算权重公式

    继承或者                             *0,0,0,0

    每个元素(标签选择器)      0,0,0,1

    每个类,伪类                        0,0,1,0

    每个ID                                    0,1,0,0

    每个行内样式 style=""            1,0,0,0

    每个!important 重要的∞         无穷大

    值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

    权重叠加:我们经常用交集选择器,后代选择器等,是有多个基础选择器组合而成,那么此时,就会出现权重叠加。

    就是一个简单的加法计算例如:

    div ul  li  ------>      0,0,0,3

    .nav ul li  ------>      0,0,1,2

    a:hover      -----—>  0,0,1,1

    .nav a      ------>      0,0,1,1

    注意:

    数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。

    一定要看该标签有没有被选中。

    1) 如果选中了,那么以上面的公式来计权重。谁大听谁的。 2) 如果没有选中,那么权重是0,因为继承的权重为0.

    相关文章

      网友评论

          本文标题:css背景及三大特性

          本文链接:https://www.haomeiwen.com/subject/hvbprqtx.html