python/CSS运用

本文转载自查看原文 2017-05-17 16:37 2500

python/CSS运用

CSS称为层叠样式表

主要对所有的html文件进行渲染

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明（1，属性选择器（通过选择器查找标签）2，操作标签（属性标签））

例如：

1 h1{color：red；font-size：20px；}

CSS的四种引入方式

（1）.行内式

行内式是在标记的style属性中设定SS样式。这种方式没有体现出CSS的优势，不推荐使用

例如：

1 <p style="color: red;background-color:gold;">heelo</p>

（2）.嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签中格式

例如：

1 <style>
2    
3    p{background-color: red;color: gold;}
4 </style>

（3）.链接式

将一个.css文件引入到HTML文件中

例如：

1 <link rel="stylesheet" href="css1.css">

（4）.导入式（导入式有数量限制）

将一个独立的.CSS文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

1 <style>
2     @import "css1.css";
3    
4 </style>

注意：导入式会在整个网页加载完毕后再加载CSS文件，因此就导致一个问题，如果网页比较大或者延迟有点高，就会给用户带来体验不完美，和渲染缺陷。

CSS选择器

基本选择器分为（标签选择器、ID选择器、class选择器、通配选择器）

标签选择器：

1 <style>
2 p{color：red;}
3 </style>

ID选择器：

1 <style>
2 #p1{color: brown}
3 </style>

class选择器：

1 <style>
2 .pp{color:green}
3 </style>

通配选择器：

1 <style>
2 *{color:yellow}
3 </style>

组合选择器：

1.（outer,okl）多元素选择器，同时匹配所有outer元素或okl元素，E和F之间用逗号分隔

例如：

1 <style>
2 .outer,.okl{color:aquamarine;}
3 </style>

2.(outer,okl)后代元素选择器，匹配所有属于outer后代的okl，outer和okl之间用空格分隔

例如：

1 <style>
2 .outer okl{color:red;} 
3 </style>

3.子元素选择器（子级元素），匹配所有E元素的子元素

例如：

1 <style>
2 .outer>okl{color:red;}
3 </style>

4.毗邻元素选择器(必须是紧邻着，如果中间有别的元素就没有执行成功，向下紧挨着)，匹配所有紧随outer元素之后的统计元素okl

例如：

1 <style>
2 .outer+okl{color;red;}
3 </style>

5.普通兄弟选择器（以破折号分隔）这个查找就不是紧挨着进行查找的

例如：

<style>
.outer~p{color:red;}
</style>

注意：关于标签套嵌，一般，块级标签可以包含内联标签和块级标签，但是内俩标签只能包含内俩标签（例外<p>不能包含块级标签）

属性选择器：

1、E[att]匹配所有具有att属性的E元素，不考虑它的值。

例如：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         [class]{color:red;}
 8  
 9     </style>
10 </head>
11 <body>
12 <div class="d1">ppp</div>
13 
14 </body>
15 </html>

2、E[att=value] 匹配所有att属性等于value的E元素

例如：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         div[class='d2']{
 9             color:green;
10         }
11 
12     </style>
13 </head>
14 <body>
15 <div class="d2">php</div>
16 </body>
17 </html>

3、E[att~=vlaue]匹配所有att具有多个空格分隔的值、其中一个值等于value的E元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         div[class~='qq']{
 9             color:blue;
10         }
11 
12     </style>
13 </head>
14 <body>
15 <div class="d3 qq">ppp</div>
16 
17 </body>
18 </html>

4、E[att^=vlaue]匹配属性值以指定开头的每个元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         div[class^='ww']{
 9             color:lightblue;
10         }
11 
12     </style>
13 </head>
14 <body>
15 
16 <div class="wwffwefwer">pph</div>
17 
18 </body>
19 </html>

5、E[att$=vlaue]匹配属性值以指定结尾的每个元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         div[class$='rr']{
 9             color:darkviolet;
10         }
11        
12     </style>
13 </head>
14 <body>
15 
16 <div class="wwffwefwerr">hph</div>
17 
18 </body>
19 </html>

6、E[att*=vlaue]匹配属性值中包含指定值的每个元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         div[class*='l']{color: darkgoldenrod;}
 9     </style>
10 </head>
11 <body>
12 
13 <div class="wffwlefwer">hph</div>
14 </body>
15 </html>

CSS继承：

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             color: green;
 9         }
10         p{color:yellow;}
11     </style>
12 </head>
13 <body>
14 
15 <p>hello</p>
16 </body>
17 </html>

body{color：green；} 设置了颜色

<p> hello </p> 这时文本的颜色就继承了body颜色

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

p{color:green;} 现在给文本加个颜色就直接覆盖的继承下来的颜色

继承也是有限制的，有一些属性不能被继承（border、margin、padding、background）等

CSS优先级：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .h1 .w1{color:red;}
 8         .h2 .w1{color:green;}
 9         /*同样是class标签，那个在最后那个优先级高*/
10         #h .w1{color:blue;}
11         /*ID 的优先级高于标签，就执行ID的颜色设置*/
12         .w1{color: darkgoldenrod;}
13         /*标签的优先级最低，所以不执行*/
14         .w1{color: darkgoldenrod!important;}
15         /*这个！important 不管你什么优先级就执行我*/
16     </style>
17 
18 </head>
19 <body>
20 
21 <div class="h1 h2" id="h">
22     hello
23     <p class="m1">Meet</p>
24     <div class="w1">
25         world
26         <p class="m2">Ken</p>
27         <div class="t3">tt</div>
28     </div>
29 </div>
30 <div>alex</div>
31 
32 </body>
33 </html>

所谓优先级，就是指CSS样式在浏览器中被解析的先后顺序

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

特殊：!importan 不管什么优先级就执行我

1.内联样式表的权值最高 style---------------1000

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

3.统计选择符CLASS属性个数 .class---------------10

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

按这些规则将数字逐位相加，就得到最终的权重，然后在比较取舍是按照左到右的顺序逐位比较

!importan、style、ID、class、标签

CSS属性操作：

css text

文本颜色

颜色属性被用来设置文字的颜色

颜色是通过CSS最经常的指定

十六进制值--------#FF1FFFFF

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{color: #FF1FFF;}   
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

一个RGB值--------RGB(212,121,212)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{color:RGB(212,121,212);}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

标签{color：red；}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{color:red;}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

文本水平对齐方式：

text-align 属性规定元素中的文本的水平对齐方

left 把文本排列到左边。默认值：游浏览器决定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{text-align: left}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

right 把文本排列到右边

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{text-align: right}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

center 把文本排列到中间

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{text-align: center}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

justify 实现俩端对齐文本效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{text-align: justify}
 8     </style>
 9 </head>
10 <body>
11 <p>
12    hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
13     hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
14     hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
15     hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
16     hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
17     hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
18     hellohellohellohellohellohellohello
19 </p>
20 </body>
21 </html>

背景属性

属性介绍

简写：

background:#ffffff url('hello.jpg') no-repeat right top;

background-color 设置背景颜色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{background-color: red}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

backgrou-image：url （‘hello.jpg’）设置背景图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{  width: 640px;
 8             height: 413px;
 9             background-image: url("hello.jpg")}
10     </style>
11 </head>
12 <body>
13 <p>hello</p>
14 </body>
15 </html>

background-repeat （平铺）no-repeat（不平铺）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{  width: 100%;
 8             height: 100%;
 9             background-image: url("hello.jpg");
10             background-repeat:repeat;
11 
12         }
13 
14     </style>
15 </head>
16 <body>
17 <p>hello</p>
18 </body>
19 </html>

background-position：right top（20px 20px）设置背景图左对齐聚左边边框和顶部边框个 20px

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{  width: 100%;
 8             height: 100%;
 9             background-image: url("hello.jpg");
10             background-repeat:no-repeat;
11             background-position:right 20px,20px;
12 
13         }
14 
15     </style>
16 </head>
17 <body>
18 <p>hello</p>
19 </body>
20 </html>

边框属性

简写：

border：30px rebeccapurple solid；

border-width 设置框的宽度

border-style（solid）设置框体为（实体）

border-color 设置颜色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7        div{width: 80px;
 8            height: 80px;
 9            border-width: 3px;
10             border-style:solid ;
11            border-color: red;
12        }
13 
14     </style>
15 </head>
16 <body>
17 <div>hello</div>
18 </body>
19 </html>

边框单独设置各边

border-top-style：dotted；设置顶边框

border-right-style：solid；设置左边框

border-bottom-style：dotted；设置底部框

border-left-style：none；设置右边框不显示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7        div{
 8            width: 80px;
 9            height: 80px;
10            border-width: 3px;
11            border-color: red;
12            border-top-style: dotted;
13            border-right-style: solid;
14            border-bottom-style: dotted;
15            border-left-style: none;
16        }
17     </style>
18 </head>
19 <body>
20 <div>hello</div>
21 </body>
22 </html>

列表属性

list-style-type 设置列表项标志的类型

list-style-image 将图像设置为列表项标志

list-style-position 设置列表中列表项标志的位置

list-style 简写属性。用于把所有用于列表的属性设置一个声明中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         ul{list-style-type:square}   设置 列表项标志的类型
 8         ul{list-style-image: url("hello.jpg")}  将图像设置为列表项标志
 9         ul{list-style-position: inside}  设置列表中列表项标志的位置
10         ul{list-style: url("hello.jpg")}  简写属性。用于把所有用于列表的属性设置一个声明中
11     </style>
12 </head>
13 <body>
14       <ul>
15           <li>11</li>
16           <li>22</li>
17           <li>33</li>
18       </ul>
19 </body>
20 </html>

属性指定列表项标记的类型

ul{list-style-type：square；}

使用图像来替换列表项的标记

ul{list-style-imge：url（‘hello.jpg’）}

dispaly属性：

none 不显示（隐藏某标签）

block 块级

inline 内联

inline-block 拥有块级的属性（可以设置宽，高）也不是单独占一行

注意与visibility：hidden的区别

visibility：hidden是隐藏内容并且占着网页空间

display：none 是隐藏内容还不占网页空间（隐藏的内容下边会替补上来）

block（内联标签设置为块级标签）

a{dispaly:block}

inline（块级标签设置为内联标签）

div{dispaly：inline}

inline-block（有着块级标签的属性（可以设置宽，高）也有着内联标签的属性（不独占一行））

内联标签不能设长宽

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             background-color: red;
 9             display: inline;}
10         a{
11             background-color:green;
12             display: block;
13         }
14         span{
15             background-color: aqua;
16             display: inline-block;
17         }
18     </style>
19 </head>
20 <body>
21   <div>tt</div>
22   <a>bb</a>
23   <span>dd</span>
24 </body>
25 </html>

外边框和内边框：

ｍａｒｇｉｎ　用于控制元素与元素之间的距离；ｍａｒｇｉｎ的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的的目的

ｐａｄｄｉｎｇ　用于控制内容与边框之间的距离

Ｂｏｒｄｅｒ（边框）　围绕在内边距和内容外的边框

Ｃｏｎｔｅｎｔ（内容）　盒子的内容，显示文本和图像

ｍａｒｇｉｎ（外边距）

单边外边距属性：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{background-color: #2459a2;
 8             width: 500px;
 9             height: 300px;
10             margin-top:100px;
11             margin-bottom: 100px;
12             margin-left: 50px;
13             margin-right: 100px;
14         }
15     </style>
16 </head>
17 <body>
18 
19   <div class="c1">guo</div>
20 
21 </body>
22 </html>

padding（内边距）

单独使用填充属性可以改变上下左右的填充，缩写填充属性也可以使用，一旦改变都改变

float属性

浮动标准：

会判断上一个元素是否浮动，如果浮动紧贴着漂浮，

否则，与上一个元素保持垂直显示

所谓的文档流，指的是元素排版布局过程中，元素会自动从左到右，从上往下的流式排列

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位

清除浮动（clear）

none 默认值。允许两边都可以有浮动对象

left 不允许左边有浮动对象

right 不允许右边有浮动对象

both 不允许有浮动对象

注意：clear 是清除浮动，清除的是自己本身

position 定位

static 默认值，无定位，不能当做绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的

psoition：relastive

参照物是元素之前文档流的位置

元素不脱离文档流（之前的空间位置依然存在）

psoition：absolute

参照物是元素之前文档流的位置

元素不脱离文档流（之前的空间位置依然存在）

psoition：

定位使用

父元素：psoition：relastive

子元素：psoition：absolute

脱离文档流的属性：

float（部分脱离）

position：absolute

position：fixed

详细请查看http://www.cnblogs.com/yuanchenqi/articles/6856399.html

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Html之CSS的简单运用 css-table属性运用 python偏函数的运用运用Python成为黑客 python日志syslog运用运用Python计算Π的多少（大致计算） python函数名的运用 python闭包的运用运用 CSS in JS 实现模块化 css中clip-path属性的运用