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代码; } |
<style type="text/css">
a:link{
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="01-hello-world.html">hello-world</a>
</body>
</html> 例子
列子
<style type="text/css">
.box{
width: 100px;;
} .top,.bottom{
width: 100px;
height: 100px;
background-color: chartreuse; } .top:hover{
background-color: red; 鼠标移动到top区域，颜色变红色
} .box:hover .top{
background-color: red; 鼠标移动到box区域，top区域变红色
} </style>
</head>
<body>
<div class="box">
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
:hover 背景黄色 鼠标上去红色 例子
选择器的优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。 2、有!important声明的规则高于一切。 3、如果!important声明冲突，则比较优先权。 4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 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; |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.back{
border:1px solid red;
width: 800px;
height: 800px;
background-image: url("meinv.png");
background-repeat: no-repeat; #不平铺满
background-repeat: repeat-x; #横向平铺满
} .back{
border:1px solid red;
width: 800px;
height:800px;
background-image: url("meinv.png");
background-repeat: no-repeat;
background-position: 0 0;
}
</style>
</head>
<body>
<div class="back"> </div>
</body>
</html>
背景属性 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> span{
display: inline-block;
width: 18px;
height: 20px;
background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
background-position: 0 -100px;
}
</style>
</head>
<body> <span></span>
<span></span>
<span></span>
<span></span> </body>
</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; 单词首字母大写 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
div{
height:100px;
background-color: aquamarine;
text-align: center; #水平居中
line-height:100px; #文本设置为和div一样的高度，显示居中
}
</style> </head>
<body>
<div>文本属性</div>
</body>
</html>
text-align line-height
e.边框属性
|
1
2
3
4
5
6
7
8
9
|
border-style: solid; border-color: chartreuse; border-width: 20px;-----------简写---------------border: 30px rebeccapurple solid; |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
.foo{
width:200px;
height:200px;
border:1px solid red;
}
</style> </head>
<body>
<div class="foo"></div>
</body>
</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(''); } |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
ul,ol{
list-style: none; #取消列表前面的小图标
}
</style>
</head>
<body> <ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul> <ol>
<li>123</li>
<li>456</li>
<li>789</li>
</ol>
</body>
</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;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span,a{
width:100px;
height:100px;
}
span{
background-color: yellow;
display: inline-block;
}
a{
background-color: firebrick;
display: inline-block;
}
div{
word-spacing: -5px; #取消边距间隔
}
</style>
</head>
<body>
<div>
<span>span</span>
<a href="#">a</a>
</div>
</body>
</html>
word-spacing 取消边距间隔
四.外边距(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等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
font-size:0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div> <div>footer</div>
</body>
</html>
清除浮动
六.position(定位)
a. static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
b. position: relative／absolute
position: relative
1. 参照物是元素之前文档流中的位置
2. 元素不脱离文档流(之前的空间位置依然存在)
position: absolute
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素
那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框
而不论原来它在正常流中生成何种类型的框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> *{
margin: 0px;
} .div1{
width: 300px;
height: 200px;
background-color: red;
}
/*.div2{*/
/*width: 300px;*/
/*height: 300px;*/
/*background-color: rebeccapurple; */
/*position: relative;*/
/*top:100px;*/
/*left:100px;*/
/*}*/ .div2{
width: 300px;
height: 300px;
background-color: rebeccapurple;
position: absolute;
top:100px;
left:100px;
} .div3{
width: 300px;
height: 200px;
background-color: green; } </style>
</head>
<body> <div class="outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div> </body>
</html>
relative absolute例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> *{
margin: 0px;
} .item1{
width: 200px;
height: 200px;
background-color: red;
} .item2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top:200px;
left:200px;
} .item3{
width: 200px;
height: 200px;
background-color: green; }
.outer{
border: 1px solid red ;
position: relative;
} </style>
</head>
<body> <div class="item1"></div> <div class="outer">
<div class="item2"></div>
<div class="item3"></div>
</div> </body>
</html>
常用设置
c. position:fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width: 100%;
height: 1200px;
background-color: darkgrey;
}
.return_top{
width: 80px;
height: 80px;
background-color: burlywood;
color: white;
text-align: center;
line-height: 80px;
position: fixed;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body> <div class="content"></div>
<div class="return_top">返回顶部</div> </body>
</html>
fixed 右下角定位
python CSS的更多相关文章
- Python之路-python(css布局、JavaScript)
CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...
- Python之路-python(css、JavaScript)
css JavaScript 一.CSS 分层: position: fixed;(固定到页面的具体位置) 例如:返回顶部 <!DOCTYPE html> <html lang=&q ...
- python css基本操作
1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
- python css概述
1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
- python css选择器
css 选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- python css功能补充讲解
###########总结#### 标签选择器 标签名 id选择器 #box1 类选择器.box2 css高级选择器 *子选择器* 子选择器用 大于号 .box1>.box2{ w ...
- selenium3 + python - css定位
一.css:属性定位 1.css可以通过元素的id.class.标签这三个常规属性直接定位到 2.如下是百度输入框的的html代码: <input id="kw" class ...
- python css盒子型 浮动
########################总结############### 块级标签能够嵌套某些块级标签和内敛标签 内敛标签不能块级标签,只能嵌套内敛标签 嵌套就是: <div> ...
- python 第三方模块 转 https://github.com/masterpy/zwpy_lst
Chardet,字符编码探测器,可以自动检测文本.网页.xml的编码. colorama,主要用来给文本添加各种颜色,并且非常简单易用. Prettytable,主要用于在终端或浏览器端构建格式化的输 ...
随机推荐
- [Tarjan 学习笔记](无向图)
今天考试因为不会敲 Dcc 的板子导致没有AK(还不是你太菜了),所以特地写一篇博客记录 Tarjan 的各种算法 无向图的割点与桥 (各种定义跳过) 割边判定法则 无向边 (x,y) 是桥,当且仅当 ...
- 关于Maven的配置与学习
1. 简介 官方说法:Apache Maven is a software project management and comprehension tool. Based on the concep ...
- 单元测试er——为什么真的真的要写单元测试
优点 为什么很多技术或者知识要说优点?因为有些道理看着很简单,大家表面上都觉得对,但是做的时候又不去做或者做不到.其中有一个很重要原因是骨子里或者潜意识并没有真实觉得这是对的,一旦想去做的时候同时会冒 ...
- iOS CocoaPods一些特别的用法 指定版本、版本介绍、忽略警告
简介 介绍一些CocoaPods一些特别的用法 CocoaPods github地址 CocoaPods 官方地址 1. 指定第三方库版本 1. 固定版本 target 'MyApp' do use_ ...
- 如何让shell脚本自杀
有些时候我们写的shell脚本中有一些后台任务,当脚本的流程已经执行到结尾处并退出时,这些后台任务会直接挂靠在init/systemd进程下,而不会随着脚本退出而停止. 例如: [root@maria ...
- SQL Quick Reference From W3Schools
SQL Statement Syntax AND / OR SELECT column_name(s)FROM table_nameWHERE conditionAND|OR condition AL ...
- [CentOS] SSH 免密钥登录
一.环境说明: 操作系统:CentOS-7-x86_64-Minimal-1611 虚拟机:VMware® Workstation 12 Pro:12.5.5 build-5234757 服务器:no ...
- R语言-逻辑回归建模
案例1:使用逻辑回归模型,预测客户的信用评级 数据集中采用defect为因变量,其余变量为自变量 1.加载包和数据集 library(pROC) library(DMwR)model.df <- ...
- CSS的盒子模型有哪些，区别是什么
1)盒模型: 内容(content).填充(padding).边界(margin). 边框(border) 2)有两种, IE 盒子模型.标准 W3C 盒子模型:IE的content部分包含了 b ...
- JavaScript(第二十九天)【js处理XML】
随着互联网的发展,Web应用程序的丰富,开发人员越来越希望能够使用客户端来操作XML技术.而XML技术一度成为存储和传输结构化数据的标准.所以,本章就详细探讨一下JavaScript中使用XML的技术 ...