Python开发【第十篇】：CSS （二）
Python开发【前端】：CSS
Kylin Zhang
css样式选择器
标签上设置style属性：
<body>
<div style="height: 48px;">第一层</div>
<div style="height: 48px;">第二层</div>
<div style="height: 48px;">第三层</div>
</body>
直接在div里写相对应的样式
id选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">第一层</div>
</body>
把样式写到head里面，以#开头命名，调用对应样式在div里用id属性指定相应的id名
class选择器（最常用）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">第一层</div>
<div class="c1">第二层</div>
<div class="c1">第三层</div>
</body>
把样式写到head里面，以.开头命名，调用对应样式在div里用class属性指定相应的类名，可以多个div调用
标签选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div >第一层</div>
<div >第二层</div>
<div >第三层</div>
</body>
标签选择器，设置div样式，则body里所有的div标签内的内容都会应用此内容
关联选择器（层级选择器）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span div{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div >第一层</div>
<span>
<div >span里的div</div>
</span>
<div >第三层</div>
</body>
只让span里面的div标签应用样式，可多层嵌套
组合选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,#i2,#i3{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">第一层</div>
<div id="i2">第一层</div>
<div id="i3">第一层</div>
</body>
组合选择器，加,号，相同样式多命名
属性选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[name="James"]{width: 20px;height: 20px;}
</style>
</head>
<body>
<input type="text" name="James">
<input type="text">
<input type="password">
</body>
根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式
css样式引用
css样式优先级
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}
</style>
</head>
<body>
<div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
如果样式不冲突，则样式都应用，如果样式有冲突，style样式优先级最大，其次其他的安装编写的顺序，越靠近越优先
文件方式引用样式
定义样式并保存到commons.css文件
.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}
引用commons.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="commons.css">
</head>
<body>
<div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
</html>
css样式边框
基本边框
<body>
<div style="border: 1px dotted red;">
第一层边框
</div>
<!--border：边框宽度 solid：边框样式实线（dotted虚线）颜色：red-->
</body>
边框其他样式
<body>
<div style="height: 48px;
width: 80%;
border: 1px solid brown;
font-size: 16px;
text-align: center;
line-height: 48px;
">第二层边框</div> <!--height: 48px 边框高度-->
<!--width: 80% 宽度页面的80%-->
<!--border: 1px solid brown 边框宽度、样式、颜色-->
<!--font-size: 16px; 字体大小-->
<!--text-align: center; 水平居中-->
<!--line-height: 48px; 垂直居中-->
</body>
-》》点击显示效果
CSS样式浮动
初识float
<body>
<div style="width: 20%;float: left;">左边</div>
<div style="width: 80%;float: right;">右边</div>
</body>
-》》点击显示效果
float测试页
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0 auto;">
<div class="pg-header">
<div style="float: left;">*收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
</div>
<div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="clear: both"></div>
</div>
</body>
-》》点击显示效果
注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线
CSS样式display
块级标签和行内标签相互转换
<body>
<div style="display: inline">块级</div>
<span style="display: block">行内</span>
</body>
-》》点击显示效果
注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
<body>
<span style="display: inline-block;height: 50px;width: 70px">行内</span>
<div style="display: inline">块级</div>
</body>
-》》点击显示效果
注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）
CSS样式边距
外边距margin
<body>
<div style="border: 2px solid red;height: 70px;">
<div style="background-color: green;height: 50px;
margin-top: 25px;"></div>
</div>
</body>
-》》点击显示效果
注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px
内边距padding
<body>
<div style="border: 2px solid red;height: 70px;">
<div style="background-color: green;height: 50px;
padding-top: 25px;"></div>
</div>
</body>
-》》点击显示效果
注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px
Python开发【第十篇】：CSS （二）的更多相关文章
- Python开发【第一篇】：目录
本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! Python开发[第一篇]:目录 Python开发[第二篇]:初识Python ...
- Python开发【第二篇】：初识Python
Python开发[第二篇]:初识Python Python简介 Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏 ...
- Python 学习 第十篇 CMDB用户权限管理
Python 学习 第十篇 CMDB用户权限管理 2016-10-10 16:29:17 标签: python 版权声明:原创作品,谢绝转载!否则将追究法律责任. 不管是什么系统,用户权限都是至关重要 ...
- Python开发【第一篇】:目录
本系列博文包含Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习Python编程的朋友们提供一点帮助! .Python开发[第一篇]:目录 .Python开发[第二篇]:初始P ...
- Python开发【第九篇】：HTML （二）
python[第十四篇]HTML基础 时间:2016-08-08 20:57:27 阅读:49 评论:0 收藏:0 [点我收藏+] 标签: 什么是HTML? H ...
- Python开发【第一篇】基础题目二
1 列表题 l1 = [11, 22, 33] l2 = [22, 33, 44] # a. 获取l1 中有,l2中没有的元素 for i in l1: if i not in l2: # b. 获取 ...
- 跟着老男孩教育学Python开发【第一篇】：初识Python
Python简介 Python前世今生 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...
- Python开发【第一篇】：初识Python
初识python 一.python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...
- [Python笔记]第十篇:模块续
requests Python标准库中提供了:urllib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来完成最简 ...
- Python开发【第二篇】：初始Python
Python的前世今生 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,中国人称他为龟叔,他在圣诞节期间在阿姆斯特丹为了打发时间,决定开发一个新的脚本 ...
随机推荐
- HashMap在Android和Java中的不同实现
起因 今天在项目中遇到一个很"奇葩"的问题.情况大致是这样的:Android终端和服务器(Spring),完全相同的字符串键值对放入HashMap中竟然顺序不一样,这直接导致了服务 ...
- 2661: [BeiJing wc2012]连连看
Description 凡是考智商的题里面总会有这么一种消除游戏.不过现在面对的这关连连看可不是QQ游戏里那种考眼力的游戏.我们的规则是,给出一个闭区间[a,b]中的全部整数,如果其中某两个数x,y( ...
- NSValue NSNumber NSData类
NSValue NSNumber NSData类 步骤1 NSValue 我们先看看NSValue能做什么: 一个NSValue对象是用来存储一个C或者Objective-C数据的简单容器.它可以保存 ...
- 深入浅出C语言中的堆和栈
在谈堆栈的时候,我在这有必要把计算机的内存结构给大家简单的介绍下(高手们可以直接飘过) 一. 内存结构 每个程序一启动都有一个大小为4GB的内存,这个内存叫虚拟内存,是概念上的,真正能用到的,只是 ...
- [151225] Python3 实现最大堆、堆排序，解决TopK问题
参考资料: 1.算法导论,第6章,堆排序 堆排序学习笔记及堆排序算法的python实现 - 51CTO博客 堆排序 Heap Sort - cnblogs 小根堆实现优先队列:Python实现 -cn ...
- 今天写了个从一张表数据插入到另一张表的oracle 语句
create or replace procedure data_move(param in number) is cursor enterprise is select SENTERPRISEID, ...
- MC中间件WCCS
一.问题描述 在大访问量的Web服务中,MC集群作为缓解后端数据源访问压力的中间层已经成为了不可缺少的一部分,机器数量越来越大,维护成本也变得越来越高了,其中的问题有: 故障机器自动剔除.后端某台MC ...
- 【Java】Java6 WebService的发布
WebService服务发布往往比较混乱,Axis2的发布形式与XFire发布方式差别很大,而Java6 Web服务的发布与Axis2.XFire的Web服务的发布方式也有着天壤之别,它们之间没有经验 ...
- Hotel
poj3667:http://poj.org/problem?id=3667 题目大意:Hotel有N(1 ≤ N ≤ 50,000)间rooms,并且所有的rooms都是连续排列在同一边,group ...
- Unity NGUI实现序列帧动画播放
如题,要实现序列帧的播放导入图片的时候需要注意: (1)图片的命名要连续,如图: (2)将这些图片在NGUI中打包成Altas图集的时候图片应该在同一个Altas中: 这里以播放特效为例,满足条件时播 ...