Python开发【前端】：CSS

Kylin Zhang

发表于 2016-11-10 13:13:57

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

内容来源：http://www.cnblogs.com/lianzhilei/p/6046131.html

转载于:https://www.cnblogs.com/weiman3389/p/6223261.html

Python开发【第十篇】：CSS （二）相关推荐

  1. Python开发【第二篇】：初识Python

    Python开发[第二篇]:初识Python Python简介 Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为 ...

  2. Python开发【第一篇】：目录

    本系列博文改编自武沛齐老师的原创博文,主要包含  Python基础.前端开发.Web框架.缓存以及队列等内容 ,用于学习记录成长!!! Python开发[第一篇]:目录 Python开发[第二篇]:初 ...

  3. CCNP-第十篇-BGP(二)

    CCNP-第十篇-BGP(二) 首先 BGP都基本上部署在PE,CE设备 PE:Provider edge =运营商边界 CE:Customer edge =用户边界 建立BGP 1.一般呢,是会使用 ...

  4. python django开发工具_利用pyCharm编辑器创建Django项目开发环境-python开发工具第一篇...

    [前置说明] 1.django环境与python对应关系: Django version Python versions 1.11 2.7, 3.4, 3.5, 3.6, 3.7 (added in ...

  5. 使用Python开发游戏运行脚本（二）实现模拟点击

    本文接上一篇文章 使用Python开发游戏运行脚本(一)成功调用大漠插件 上一篇我们已经简单实现了python调用大漠插件并输出版本号的功能,接下来我们要做的就是通过大漠插件模拟鼠标点击和键盘文字输入 ...

  6. 如何确定python开发环境已经配置好_python学习第一天：window安装python开发环境完整篇...

    Python是跨平台的,它可以运行在Windows.Mac和各种Linux/Unix系统上: 要开始学习Python编程,首先就得把Python安装到电脑里.安装后,你会得到Python解释器(就是负 ...

  7. Python开发【第二篇】：基础数据类型

    内容概要 格式化输出 运算符 编码 基本数据类型 深浅拷贝.小数据池 1.格式化输出 # %s 占位字符串. 实际上可以占位任何东西(用的最多的) # %d 占位整数. 只能占位数字 # name = ...

  8. python urllib.request 爬虫 数据处理-运维学python之爬虫基础篇（二）urllib模块使用...

    1 何为爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引. ...

  9. 基于 HTML5 网络拓扑图的快速开发之入门篇（二）

    2019独角兽企业重金招聘Python工程师标准>>> 前言 上一篇我们绘制了一个 graphView 场景,在场景之上通过 graphView.dm() 获取数据容器,并通过 gr ...

  10. Python原创第十篇~字符串

    # 2017-11-15 17:19:12 November Wednesday the 46 week, the 319 day 第一步:Sublime Text -> Tools -> ...

最新文章

  1. 【计网】IP地址、子网掩码、网络号、主机号、网络地址、主机地址以及ip段/数字-如192.168.0.1/24是什么意思?
  2. 用计算机进行有理数计算时,鲁教版六上2.11《用计算器进行有理数的计算》word学案.doc...
  3. 音视频技术开发周刊 | 134
  4. 还在用ABAP进行SAP产品的二次开发？来了解下这种全新的二次开发理念吧
  5. mysql数据库+ssh框架_SSH框架+Mysql数据库开发java web会员积分消费管理系统
  6. Swift 中的Closures(闭包)详解
  7. (第五章)统计函数分组
  8. Unity 2D 跑酷道路动起来
  9. linux某用户 计划任务,Linux基本计划任务
  10. 小米2S ROM重分区
  11. .net excel循环插数据_[PaperReading]MEMC-Net 运动估计和运动补偿网络
  12. C语言程序设计第三版微课版,C语言程序设计（第3版 微课版）
  13. 【现代通信原理笔记】2 无线信道的传播特征
  14. html%2b怎么转换成加号,url 参数的加号变成空格处理
  15. 一文说透Sentinel熔断策略、降级规则、流量控制
  16. 台式电脑 在哪找到计算机名,win7电脑的投屏功能在哪？教你找到！
  17. 苹果手机被偷，从北京到三亚，我用79天找回了它
  18. 生成带logo的二维码
  19. Excel怎么设置密码保护工作表
  20. linux下查看cpu峰值,linux下查看CPU信息

热门文章

  1. 1151 LCA in a Binary Tree (含求LCA的通法)
  2. 软件测试培训分享：软件测试的职业发展方向有哪些
  3. UI设计培训怎么选择就业方向
  4. java中如何应对读改写场景
  5. 通过一个案例理解 JWT
  6. 《JavaScript高级程序设计（第3版）》教程大纲
  7. 动态规划和分治法，贪心算法以及递归的再一次深刻理解和体会
  8. 2017年安全漏洞审查报告：安全补丁在不断增加，用户却不安装
  9. 营销自动化的4大预测分析错误
  10. 配置Activiti Explorer使用MYSQL