Python开发——17.CSS
一、CSS
1.概述
CSS（Cascading Style Sheets），层叠样式表，用来控制网页数据的表现，使网页的表现与数据内容分离。
2.引入方式
（1）行内式
<body>
<div style="color: chartreuse;background-color: bisque">Hello,world!</div>
</body>
（2）嵌入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: aqua;
font-size: 20px;
}
</style>
<body>
<p>Hello,world!!</p>
</body>
</html>
（3）导入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "style1.css";<!--先加载html，再加载css-->
</style>
<body>
<p>Hello,world!!</p>
</body>
</html>
（4）链接式（较多使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style1.css">先准备好css样式再加载HTML
<body>
<p>Hello,world!!</p>
</body>
</html>
3.选择器
（1）嵌套规则
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
- 块级元素不能放在p里面。
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。（错误的：<div><h2></h2><span></span></div>）
（2）基础选择器
<style>
＊ 通用元素选择器，匹配任何元素
E 标签选择器，匹配所有使用E标签的元素
.info class选择器，匹配所有class属性为info的元素
#info id选择器，匹配所有id属性为info的元素
*{
color: orangered;
}
div{
color: blue;
}
#P2{
color: blueviolet;
}
.PPP{
color: crimson;
}
div.PPP{
color: darkcyan;
}
</style>
（3）组合选择器
<style>
(E,F) 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
(E F) 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
(E>F) 子元素选择器，匹配所有E元素的子元素F
(E+F) 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
#P2,div.PPP{
color: firebrick;
}
.div1 div{
color: fuchsia;
}
.div1>.P{
color: darkkhaki;
}
.div1+div{
background-color: darkred;
}
（4）属性选择器
<style>
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] 匹配属性值中包含指定值的每个元素
E[att|=val] 匹配所有att属性具有多个连字号分隔的值，其中一个值以“val”开头的E元素，主要用于lang属性
[dazui]{
color: brown;
}
[dazui="bigmouth"]{
color: deeppink;
}
[dazui~="Kog'Maw"]{
color: orangered;
}
</style>
（5）伪类选择器
<!--专用于控制链接的显示效果-->
<style>
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态
a:link{
color: red;
}
a:visited{
color: blue;
}
a:hover{
color:green;
}
a:active{
color: yellow;
}
.top,.bottom{
width: 100px;
height: 100px;
background-color: green;
}
.top:hover{
background-color: yellow;
}
.add:after{
content: 'China';
color: orange;
}
.add:before{
content: 'nihao';
color: red;
}
</style>
</head>
<body>
<a href="css_选择器.html" target="_blank">hello world!</a>
<div class="box">
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="add">hello,world</div>
</div>
</body>
（6）选择器的优先级与继承
优先级
<style>
#id3{
color: yellow;
}
.div3{
color: green !important;
}
</style>
<body>
<div class="div1" id="id1">
div1
<div class="div2" id="id2">
div2
<div class="div3" id="id3">
div3
</div>
</div>
</div>
<div class="div" id="di0" style="color:darkred;">div</div>
</body>
- 当一个选择器中含有多个选择器时，需要将所有的选择器的优先级进行相加，然后再进行比较，优先级高的优先显示，选择器的计算不会超过其最大的数量级（10个id选择器的优先级不能达到1000）
- 分组选择器（并集选择器）的优先级单独计算，不会相加。
- 样式后面加！important，该样式获取最高优先级，内联样式不能加！important属性。
- 样式相同的谁在下面执行谁（样式的覆盖）。
继承
继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代，但权重为0
CSS继承有限制，有一些属性不能被继承，如：border，margin，padding，background等。
4.常用属性
（1）颜色属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1{color: green;}
.p2{color:#1E1E1E;}
.p3{color:rgb(255,24,8)}
.p4{color:rgba(255,24,8,0.5)}
</style>
</head>
<body>
<p class="p1">日照香炉生紫烟</p>
<p class="p2">遥看瀑布挂前川</p>
<p class="p3">飞流直下三千尺</p>
<p class="p4">疑是银河落九天</p>
</body>
（2）字体属性
<style>
.p1{font-size: 20px}
.p2{font-family: "Times New Roman"}
.p3{font-weight: bolder}
.p4{font-style: italic}
</style>
（3）背景属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
border: 1px solid red;
width: 600px;
height: 800px;
background-image: url("back.jpg");
background-repeat:no-repeat;
background-position: 0 center;
}
</style>
</head>
<body>
<div class="back"></div>
</body>
小图标调整
<!--小图标调整-->
<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>
</body>
（4）文本属性
<style>
div{
height: 200px;
background-color: greenyellow;
text-align: center;
line-height: 200px;
text-indent: 120px;
letter-spacing: 12px;
word-spacing: 24px;
text-transform: capitalize;
}
</style>
（5）边框属性
<style>
.div1{
width: 200px;
height: 200px;
/*border: dashed 1px yellowgreen;*/
border-style: dotted;
border-width: 2px;
border-color: orange;
border-left-color: red;
}
</style>
（6）列表属性
<style>
ul,ol{
list-style: decimal-leading-zero;
list-style: none;
list-style: circle;
list-style: upper-alpha;
list-style: disc; }
</style>
（7）display属性
<style>
.div1,p,span,a{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
/*display: inline;*/
/*display: inline-block;*/
display: none;
}
p{
background-color:yellowgreen;
/*display: inline;*/
display: inline-block;
}
span {
background-color: pink;
/*display: block;*/
display: inline-block;
}
a{
background-color: purple;
/*display: block;*/
display: inline-block;
}
.outer{
word-spacing: -8px;
}
</style>
</head>
<body>
<div class="div1">div标签</div>
<p>p标签</p>
<div class="outer">
<span>span标签</span>
<a href="#">a标签</a>
</div>
</body>
（8）盒子模型
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
border: solid 2px yellowgreen;
margin: 0px;
}
.div1{
width: 100px;
height: 100px;
background-color: orange;
border: solid 20px blue;
padding: 30px;
/*margin: 20px;*/
/*margin-bottom: 30px;*/
/*margin: 10px 20px 30px 40px;*/
margin-top: 20px;
} .div2{
width: 100px;
height: 100px;
background-color: red;
border: solid 20px green;
padding-left: 30px;
margin-top: 40px;
}
.outer1{
height:600px;
background-color: yellow;
border: 1px solid darkkhaki;
}
.outer2{
height: 200px;
background-color: fuchsia;
}
</style>
</head>
<body>
<div class="outer2"></div>
<div class="outer1">
<div class="div1">hello div1</div>
<div class="div2">hello div2</div>
</div> </body>
- 在默认情况下，body距离html会有若干像素的margin
- 兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
- 父子div父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin
（9）float
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: yellow;
/*float: left;*/
}
.div2{
width: 200px;
height: 100px;
background-color: fuchsia;
float: left; }
.div3{
width: 100px;
height: 200px;
background-color: yellowgreen;
/*float: left;*/
}
.div4{
width: 200px;
height: 200px;
background-color: darkgreen;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
清除浮动
清除浮动可以理解为打破横向排列
对于CSS的清除浮动(clear)，只能影响使用清除的元素本身，不能影响其他元素。
三种方法
<style type="text/css">
* {
margin:0;padding:0;
}
.container{
border:1px solid red;
width:300px;
overflow: hidden;
}<!--第三种方法-->
#box1{
background-color:green;
width:100px;
height:100px;
float: left;
}
#box2{
background-color:deeppink;
float:right;
width:100px;
height:100px;
}
#box3{
background-color:pink;
height:40px;
}
.clearfix:after{
content:"";
display: block;
clear: both;
}<!--第二种方法-->
</style>
</head>
<body>
<div class="container clearfix">
<div id="box1">box1 向左浮动</div>
<div id="box2">box2 向右浮动</div>
<div style="clear: both"></div><!--第一种方法-->
</div>
<div id="box3">box3</div>
</body>
</body>
（10）position
position:static，默认值 static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不 会被应用
position:relative 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
position:absolute 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。
position:fixed 对象脱离正常文档流,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
}
.div1{
width: 200px;
height: 100px;
background-color: yellow;
}
.div2{
width: 200px;
height: 100px;
background-color: fuchsia;
/*position: relative;<!--不脱离文档流-->*/
/*left: 100px;*/
/*bottom: -100px;*/
}
.div3{
width: 200px;
height: 200px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 200px;
}
.div4{
width: 200px;
height: 200px;
background-color: darkgreen;
}
.outer{position:relative }
.returnTop{
width: 80px;
height: 40px;
bottom: 50px;
right: 5px;
background-color: yellow;
position: fixed;
}
</style>
</head>
<body>
<div style="border: solid 1px;height:100px;background-color: aqua"></div>
<div class="outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
<div style="height: 2000px;background-color: orange"></div>
<div class="returnTop">返回顶部</div>
</body>
Python开发——17.CSS的更多相关文章
- Python开发【前端】：CSS
css样式选择器 标签上设置style属性: <body> <div style="background-color: #2459a2;height: 48px;" ...
- Python开发【第十篇】：CSS （二）
Python开发[前端]:CSS Kylin Zhang 发表于 2016-11-10 13:13:57 css样式选择器 标签上设置style属性: <body> <div sty ...
- Python开发【第十篇】：CSS --无内容点击-不进去（一）
Python开发[第十篇]:CSS --无内容点击-不进去(一)
- Python开发【前端】：jQuery
jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是&qu ...
- Python开发【第二十一篇】：Web框架之Django【基础】
Python开发[第二十一篇]:Web框架之Django[基础] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5237704.html Python之 ...
- 《Python开发实战》
<Python开发实战> 基本信息 作者: (日)BePROUD股份有限公司 译者: 盛荣 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:9787115320896 上架时 ...
- Python黑帽编程1.2 基于VS Code构建Python开发环境
Python黑帽编程1.2 基于VS Code构建Python开发环境 0.1 本系列教程说明 本系列教程,采用的大纲母本为<Understanding Network Hacks Atta ...
- Python开发【前端】：HTML
HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...
- Python开发入门与实战17-新浪云部署
17. 新浪云部署 上一章节我们介绍了如何在本地windows服务器部署python django的网站,本章我们简要说明一下如何把python django工程部署到云服务上. 本章章节我们描述如何 ...
随机推荐
- 【深入Java虚拟机（1）】：Java内存区域与内存溢出
原文出处: 兰亭风雨 内存区域 Java虚拟机在执行Java程序的过程中会把他所管理的内存划分为若干个不同的数据区域.Java虚拟机规范将JVM所管理的内存分为以下几个运行时数据区:程序计数器.Jav ...
- icons 在线网站
icons https://www.iconfinder.com/ http://v3.bootcss.com/components/ http://fontawesome.io/icons/ htt ...
- Form-encoded method must contain at least one @Field.
https://blog.csdn.net/liunian823/article/details/80290855 记得之前遇到过这个问题,并且记录笔记了,这次再翻笔记,却没有找到...搜索 了下. ...
- centos7 安装 transmission
貌似官方文档 注意:是centos7才能用此方法 Step 1. First, you need to enable EPEL repository on your system. yum insta ...
- 每月IT摘录201904
技术 1.项目,相比数量,规模更重要. 毫无疑问,在实际工作中,积极参与实际工程项目是快速积累经验最好的办法. 相对于项目的数量,项目的规模更加重要.项目的规模是可以比较容易判断的.实际服务用户的数量 ...
- 我们一起踩过的坑----react（antd）（二）
1.antd Upload默认值问题 需求是这样的,后台若没有图片默认值,则只有上传按钮,且只能上传一张图片:若有默认值,则显示默认头像图片, 可删除,删除之后有且只能添加一张图片,没有删除默认图片时 ...
- A Boring Problem UVALive - 7676
16年北京现场赛的题,全场过的队30+. 初看只知道 O(N^2logK)的暴力,以为是什么变换. 仔细发现活用 二项式定理 就行. #include <bits/stdc++.h> us ...
- sqlserver2017 SSAS配置远程访问不成功的问题
sqlserver2017 SSAS通过IIS配置远程访问一直访问不成功的解决办法: 出现这个问题的原因从微软给出的更新包中说的就是: 从 SQL Server 2017 开始,Analysis Se ...
- Eclipse使用相关配置
问题描述:The word is not correctly spelled问题分析:eclipse校验单词拼写造成,出现在配置文件中,会影响到程序的正常执行解决方案:在eclipse下的Window ...
- 帆软报表(FineReport)实现跨数据源父子查询(2阶段查询)
问题描述: 在报表中需要查询多个系统多个数据源,且有一个数据源的入参是另一个数据源的返回值.所以当用户点击查询到展现报表数据这个过程中,需要先做父查询,查询出的结果在作为子查询. 实现方案: 方案一: ...