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,主要用于在终端或浏览器端构建格式化的输 ...
随机推荐
- Linux环境下安装配置Node.js
1.在官网查看版本,LTS代表长期支持的版本 2.进入服务器 3.输入命令:·wget https://npm.taobao.org/mirrors/node/v8.9.3/node-v8.9.3-l ...
- Java设计模式（六）Adapter适配器模式
一.场景描述 “仪器数据采集器”包含采集数据以及发送数据给服务器两行为,则可定义“仪器数据采集器”接口,定义两方法“采集数据capture”和“发送数据sendData”. “PDF文件数据采集器”实 ...
- 分别用EasyAR和Vuforia开发AR(入门级）
最近在一边学习谷歌TensorFlow,一边在做些简单的AR demo,在此总结下学习经验(自学的过程异常痛苦啊,还有总会有好人会在社区分享经验,这就是前人栽树,后人乘凉呐) 自从任天堂推出<精 ...
- 在idea的maven相关配置
1.下载maven 下载地址:点击 2.设置maven 打开maven目录下settings.xml 设置阿里中心仓库 <mirror> <id>alimaven&l ...
- java基础--封装
封 装(面向对象特征之一):是指隐藏对象的属性和实现细节,仅对外提供公共访问方式. 好处:将变化隔离:便于使用:提高重用性:安全性. 封装原则:将不需要对外提供的内容都隐藏起来,把属性都隐藏,提供公共 ...
- RedHat/Fedora/Centos 下bash 自动补全命令
本文转自:运维生存时间:http://www.ttlsa.com/linux/rhel- ... matically-function/ linuser :http://www.linuser.co ...
- Android类参考---SQLiteOpenHelper
public 抽象类 SQLiteOpenHelper 继承关系 java.lang.Object |____android.database.sqlite.SQLiteOpenHelper 类概要 ...
- 团队开发---”我爱淘“校园二手书店 NABC分析
本项目特点之一:可预订 N:对于一些抢手的书可以提前预定,避免学生买不到书 A:网上下单,通过手机便捷购物 B:使得订书更加方便快捷 C:二手书摊.网上书店 团队成员:杨广鑫.郭健豪.李明.郑涛
- C程序设计-----第0次作业
C程序设计-----第0次作业- 1.翻阅邹欣老师的关于师生关系博客,并回答下列问题,每个问题的答案不少于500字:(50分)- 1)最理想的师生关系是健身教练和学员的关系,在这种师生关系中你期望获得 ...
- 成功案例分享：raid5两块硬盘掉线数据丢失恢复方法
1. 故障描述 本案例是HP P2000的存储vmware exsi虚拟化平台,由RAID-5由10块lT硬盘组成,其中6号盘是热备盘,由于故障导致RAID-5磁盘阵列的两块盘掉线,表现为两块硬 ...