python 前端 CSS
CSS
一. css的四种引入方式
1.行内式
2.嵌入式
3. 链接式
将一个.css文件引入到HTML文件中
|
1
|
<link href="mystyle.css" rel="stylesheet" type="text/css"/> |
4.导入式
二. css选择器
1.基本选择器
二.组合选择器
|
1
2
3
4
5
6
7
8
9
|
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; } E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝ E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; } E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; } E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; } |
注意嵌套规则：
-
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
-
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
-
li内可以包含div
-
块级元素与块级元素并列、内联元素与内联元素并列。
三.属性选择器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略)。 E[att=val] 匹配所有att属性等于“val”的E元素 E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 E[attr^=val] 匹配属性值以指定值开头的每个元素 E[attr$=val] 匹配属性值以指定值结尾的每个元素 E[attr*=val] 匹配属性值中包含指定值的每个元素 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> [alex]{ color: red; #E[att] } div[alex="sb"]{ color: red; #E[att=val] } div[alex~="xx"]{ color: red; #E[att~=val] } div[alex^="sb"]{ color: red; #E[attr^=val] } div[alex*="sb"]{ color: red; E[attr*=val] } </style> </head><body> <div alex="sb">123</div> <p alex="sb">123</p> <div alex="sb xx">123</div></body></html> |
伪类(Pseudo-classes)
CSS伪类是用来给选择器添加一些特殊效果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
a:link（没有接触过的链接）,用于定义了链接的常规状态。a:hover（鼠标放在链接上的状态）,用于产生视觉效果。a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; } |
1 <style type="text/css">
2 a:link{
3 color: red;
4 }
5 a:visited {
6 color: blue;
7 }
8 a:hover {
9 color: green;
10 }
11 a:active {
12 color: yellow;
13 }
14 </style>
15 </head>
16 <body>
17 <a href="01-hello-world.html">hello-world</a>
18 </body>
19 </html>
20
21 例子
1 <style type="text/css">
2 .box{
3 width: 100px;;
4 }
5
6 .top,.bottom{
7 width: 100px;
8 height: 100px;
9 background-color: chartreuse;
10
11 }
12
13 .top:hover{
14 background-color: red; 鼠标移动到top区域，颜色变红色
15 }
16
17 .box:hover .top{
18 background-color: red; 鼠标移动到box区域，top区域变红色
19 }
20
21 </style>
22 </head>
23 <body>
24 <div class="box">
25 <div class="top">top</div>
26 <div class="bottom">bottom</div>
27 </div>
28 </body>
29 </html>
选择器的优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
1 1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。
2
3 2、有!important声明的规则高于一切。
4
5 3、如果!important声明冲突，则比较优先权。
6
7 4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
8
9 5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
三 css属性操作
1.css text
a. 颜色属性
|
1
2
3
4
5
6
7
|
<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> |
b. 字体属性
|
1
2
3
4
5
6
7
|
font-size: 20px/50%/larger font-family:'Lucida Bright' font-weight: lighter/bold/border/ #粗细 <h1 style="font-style: oblique">老男孩</h1> #斜体 |
c. 背景属性
|
1
2
3
4
5
6
7
8
9
10
|
background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right top（20px 20px）;----简写----background: #ffffff url('1.png') no-repeat right top; |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .back{
8 border:1px solid red;
9 width: 800px;
10 height: 800px;
11 background-image: url("meinv.png");
12 background-repeat: no-repeat; #不平铺满
13 background-repeat: repeat-x; #横向平铺满
14 }
15
16 .back{
17 border:1px solid red;
18 width: 800px;
19 height:800px;
20 background-image: url("meinv.png");
21 background-repeat: no-repeat;
22 background-position: 0 0;
23 }
24 </style>
25 </head>
26 <body>
27 <div class="back">
28
29 </div>
30 </body>
31 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8
9 span{
10 display: inline-block;
11 width: 18px;
12 height: 20px;
13 background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
14 background-position: 0 -100px;
15 }
16 </style>
17 </head>
18 <body>
19
20
21 <span></span>
22 <span></span>
23 <span></span>
24 <span></span>
25
26 </body>
27 </html>
d.文本属性
|
1
2
3
4
5
6
7
8
9
10
11
12
|
font-size: 10px;text-align: center; 横向排列line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效text-indent: 150px; 首行缩进letter-spacing: 10px; 字符于字符之间的距离word-spacing: 20px; 单词与单词之间的距离text-transform: capitalize; 单词首字母大写 |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>文本</title>
6 <style>
7 div{
8 height:100px;
9 background-color: aquamarine;
10 text-align: center; #水平居中
11 line-height:100px; #文本设置为和div一样的高度，显示居中
12 }
13 </style>
14
15 </head>
16 <body>
17 <div>文本属性</div>
18 </body>
19 </html>
e.边框属性
|
1
2
3
4
5
6
7
8
9
|
border-style: solid; border-color: chartreuse; border-width: 20px;-----------简写---------------border: 30px rebeccapurple solid; |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>文本</title>
6 <style>
7 .foo{
8 width:200px;
9 height:200px;
10 border:1px solid red;
11 }
12 </style>
13
14 </head>
15 <body>
16 <div class="foo"></div>
17 </body>
18 </html>
f.列表属性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
list-style-type 设置列表项标志的类型。list-style-image 将图象设置为列表项标志。list-style-position 设置列表中列表项标志的位置。 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中--------------------------------#使用图像来替换列表项的标记:ul { list-style-image: url(''); } |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>文本</title>
6 <style>
7 ul,ol{
8 list-style: none; #取消列表前面的小图标
9 }
10 </style>
11 </head>
12 <body>
13
14 <ul>
15 <li>123</li>
16 <li>456</li>
17 <li>789</li>
18 </ul>
19
20 <ol>
21 <li>123</li>
22 <li>456</li>
23 <li>789</li>
24 </ol>
25 </body>
26 </html>
e.dispaly属性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
noneblockinlineinline-block #none(隐藏某标签) p{display:none;} 注意与visibility:hidden的区别： visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 #block(内联标签设置为块级标签) span {display:block;}注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。 #inline(块级标签设置为内联标签) li {display:inline;} #inline-blockdisplay:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决 #outer{ border: 3px dashed; word-spacing: -5px; } |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 span,a{
8 width:100px;
9 height:100px;
10 }
11 span{
12 background-color: yellow;
13 display: inline-block;
14 }
15 a{
16 background-color: firebrick;
17 display: inline-block;
18 }
19 div{
20 word-spacing: -5px; #取消边距间隔
21 }
22 </style>
23 </head>
24 <body>
25 <div>
26 <span>span</span>
27 <a href="#">a</a>
28 </div>
29 </body>
30 </html>
四.外边距(margine)和内边距(padding)
|
1
2
3
4
|
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。padding: 用于控制内容与边框之间的距离； Border(边框): 围绕在内边距和内容外的边框。Content(内容): 盒子的内容，显示文本和图像。 |
margine(外边距)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
单边外边距属性： margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; 简写属性:------------------ margin:10px 20px 20px 10px； 上边距为10px 右边距为20px 下边距为20px 左边距为10px margin:10px 20px 10px; 上边距为10px 左右边距为20px 下边距为10px margin:10px 20px; 上下边距为10px 左右边距为20px margin:25px; 所有的4个边距都是25px |
五. float属性
- 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .container:after{
8 content: ".";
9 display: block;
10 clear: both;
11 visibility: hidden;
12 line-height: 0;
13 height: 0;
14 font-size:0;
15 }
16 .box1{
17 width: 200px;
18 height: 200px;
19 background-color: red;
20 float: left;
21 }
22 .box2{
23 width: 200px;
24 height: 200px;
25 background-color: blue;
26 float: left;
27 }
28 </style>
29 </head>
30 <body>
31 <div class="container">
32 <div class="box1">box1</div>
33 <div class="box2">box2</div>
34 </div>
35
36 <div>footer</div>
37 </body>
38 </html>
六.position(定位)
a. static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
b. position: relative／absolute
position: relative
1. 参照物是元素之前文档流中的位置
2. 元素不脱离文档流(之前的空间位置依然存在)
position: absolute
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素
那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框
而不论原来它在正常流中生成何种类型的框。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8 *{
9 margin: 0px;
10 }
11
12
13 .div1{
14 width: 300px;
15 height: 200px;
16 background-color: red;
17 }
18 /*.div2{*/
19 /*width: 300px;*/
20 /*height: 300px;*/
21 /*background-color: rebeccapurple; */
22 /*position: relative;*/
23 /*top:100px;*/
24 /*left:100px;*/
25 /*}*/
26
27 .div2{
28 width: 300px;
29 height: 300px;
30 background-color: rebeccapurple;
31 position: absolute;
32 top:100px;
33 left:100px;
34 }
35
36 .div3{
37 width: 300px;
38 height: 200px;
39 background-color: green;
40
41 }
42
43
44 </style>
45 </head>
46 <body>
47
48 <div class="outer">
49 <div class="div1"></div>
50 <div class="div2"></div>
51 <div class="div3"></div>
52 <div class="div4"></div>
53 </div>
54
55
56
57
58 </body>
59 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8 *{
9 margin: 0px;
10 }
11
12
13 .item1{
14 width: 200px;
15 height: 200px;
16 background-color: red;
17 }
18
19
20 .item2{
21 width: 200px;
22 height: 200px;
23 background-color: yellow;
24 position: absolute;
25 top:200px;
26 left:200px;
27 }
28
29 .item3{
30 width: 200px;
31 height: 200px;
32 background-color: green;
33
34 }
35 .outer{
36 border: 1px solid red ;
37 position: relative;
38 }
39
40 </style>
41 </head>
42 <body>
43
44
45 <div class="item1"></div>
46
47 <div class="outer">
48 <div class="item2"></div>
49 <div class="item3"></div>
50 </div>
51
52
53
54
55 </body>
56 </html>
c. position:fixed
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .content{
8 width: 100%;
9 height: 1200px;
10 background-color: darkgrey;
11 }
12 .return_top{
13 width: 80px;
14 height: 80px;
15 background-color: burlywood;
16 color: white;
17 text-align: center;
18 line-height: 80px;
19 position: fixed;
20 bottom: 20px;
21 right: 20px;
22 }
23 </style>
24 </head>
25 <body>
26
27 <div class="content"></div>
28 <div class="return_top">返回顶部</div>
29
30 </body>
31 </html>
浙公网安备 33010602011771号