Python学习第64天（css优先级、继承关系、背景图片属性设置）

　　关于css的选择优先级问题，我们先看一个html　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级测试</title>
    <style>
        .div{
            color:rebeccapurple
        }
        div{
            color:yellow;
        }
        #id1{
            color:lightblue
        }
    </style>
</head>
<body>
    <div class="div1" id="id1" style="color:red">优先级问题</div>
</body>
</html>

　　我们对同一个<div>标签进行了四种方式的颜色设定

　　　　最终<div>标签的颜色是style=“color：red”决定了他的最终颜色

　　　　然后我们通过不断去掉最终颜色对应的优先级问题，然后我们可以得到这样的一个优先级顺序

　　标签内的style > #调用id > .调用类名 > 标签名称

　　但是他们之间的优先级关系又不仅仅是大于的关系，因为会涉及嵌套多册继承，采用不同的方式调用内部

　　　　样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

　　　　　　1 内联样式表的权值最高 style －－－－－－－－－－－－1000；

　　　　　　2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－100

　　　　　　3 统计选择符中的CLASS属性个数 class－－－－－－－－－－－－－10

　　　　　　4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-1　

　　　　大致就是上面这样的一个数值关系，当涉及多个调用方式的时候就可以至今进行相加，最终数字结果越大优先级就越高

　　二、css的继承性

　　　　继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

　　　　body{color:red;} <p>helloyuan</p>

　　　　这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

　　　　p{color:green}

　　　　发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。

　　　　此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。　　

　　部分情况的特殊说明：　　

　　　　1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。

　　　　2、有!important声明的规则高于一切。

　　　　3、如果!important声明冲突，则比较优先权。

　　　　4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

　　　　5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

　　三、css的常用属性

　　　　1.颜色属性

　　　　<div style="color:blueviolet">ppppp</div>

　　　　<div style="color:#ffee33">ppppp</div>

　　　　<div style="color:rgb(255,0,0)">ppppp</div>

　　　　<div style="color:rgba(255,0,0,0.5)">ppppp</div>

　　　　　　最后面的这个参数0.5就是文本的透明度设置

　　　　2.字体属性

　　　　font-size: 20px/50%/larger

　　　　font-family:'Lucida Bright'

　　　　font-weight: lighter/bold/border/

　　　　<h1 style="font-style: oblique">老男孩</h1>

　　　　3.背景属性

　　　　background-color: cornflowerblue

　　　　background-image: url('1.jpg');

　　　　　　以图片为背景，url是内存连接

　　　　background-repeat: no-repeat;(repeat:平铺满)

　　　　　　no-repeatx仅横向铺满

　　　　background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

　　　　简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

　　　　注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。

　　　　测试：　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            background-color: antiquewhite;
            
        }
        body{
            width: 100px;
            height: 600px;
            background-color: deeppink;
            background-image: url(1.jpg);
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
</body>
</html>

　　暂时就是这么多，今天我的pycharm罢工了，非常招人烦。。。浪费了差不多40分钟的时间。