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
-
块级元素与块级元素并列、内联元素与内联元素并列。
三.属性选择器
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属性
none block inline inline-block #none(隐藏某标签) p{display:none;} 注意与visibility:hidden的区别: visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。 display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。 #block(内联标签设置为块级标签) span {display:block;} 注意:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。 #inline(块级标签设置为内联标签) li {display:inline;} #inline-block display: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(外边距)
单边外边距属性: 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>