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>
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')">
<div style="width: 300px;height: 300px;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分钟的时间。