装饰器完整写法,ccs选择器,样式设置, 背景图片,圆形设置, display设置,盒模型设置
from functools import wraps
def outer(func):
"""
如果没有装饰这个方法,被装饰的对象打印出的结果是function outer
装饰了之后打印结果就是被装饰本身
没装饰的话(如果要打印这个方法内的注释就会出现问题,注释上方有代码会打印不出注释)
"""
2.注释和引入css样式方法(https://www.cnblogs.com/Dominic-Ji/p/10474769.html)
1.单行注释/**/
多行注释
/*
*/
2.三种引入css样式的方式
head内style标签内直接写css
<p style="color: red" xxx="1" class="c1">颜色</p>
head内link标签引入外部css样式
<link rel="stylesheet" href="my.css">
标签内直接写style属性来设置样式
<style>
p {
color: red;
}
</style>
3.基础选择器
元素选择器(直接用标签名字作为选择器名字,进行设置样式,span,div等)
id选择器((id=a, #a作为选择器名字,进行设置样式))
类选择器((class=a, .a作为选择器名字,进行设置样式))
通用选择器((*作为选择器名字,进行设置样式,页面全部同一设置成同一种样式))
4.组合选择器
后代选择器(找div里面所有的span)
div span
儿子选择器(找div标签里面的第一个span)
div>span
毗邻选择器(找div一个级别相邻的span,只往下面开始找)
div+span
弟弟选择器(找div下面级别相同所有的span)
div~span
5.属性选择器
具有某个属性的标签(在标签后随意一个属性名称,可以用[xxx]在style里进行样式设置)
<p xxx>p</p>
具有某个属性并且值为xxx的标签(在标签后随意一个属性名称,可以用[xxx="1"]在style里进行样式设置)
<p xxx="1">p</p>
具有某个属性并且值为xxx的某个p,input,div标签
6.分组与嵌套
<style>
div,span,p {/*1.分组,3个标签写在一起(样式相同情况下可以简写)*/
color: blue;
}
.c1,#d1 {/*2.嵌套不同的选择器用相同的样式*/
color: green;
}
</style>
<div class="c1">div</div>
<span id="d1">span</span>
<p>p</p>
7.伪类选择器
a:link {#修改a标签默认颜色(没点击之前是蓝色)
color: green;
}
a:hover {#悬浮到字体上变色触发
color: black;
}
a:active {#点击字体之后变色触发
color: orange;
}
a:visited {访问之后变色触发
color: aqua;
}
input:focus {#文本框点击后文本框内变色触发(获取焦点)
}
<a href="https://www.sogo.com">点我去搜狗</a>
8.伪元素选择器
p:first-letter {#p字段的第一个字改变样式
color: red;
font-size: 24px;
}
p:before {#p字段字体最前面添加一个字体样式
content: '*';
color: red;
}
p:after {#p字段字体最后面添加一个字体样式
content: '?';
color: blue;
font-size: 24px;
}
<p>节奏</p>
9.选择器优先级
选择器相同的情况下,谁离标签近谁占主导
选择器不同的情况下
行内选择器>id选择器>类选择器>元素选择器
10.css设置标签样式(长宽,文本样式,颜色,对齐方式,装饰,背景颜色)
/*行内选择器长宽设置*/
<span style="height: 100px;width: 200px">span</span>
/*font-family:字体样式, font-size:字体大小 font-weight:字体粗细 */
p {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
font-size: 24px;
font-weight: lighter;
}
/*设置字体颜色的几种方法,rgba可以设置颜色透明度(字体不行)*/
p {
color: #336699;
color: red;
color: rgb();
color: rgba();
}
/*字体对齐方式center,left,right*/
p {
text-align: left;
}
/*text-decoration 属性用来给文字添加特殊效果。
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。*/
a {
text-decoration: none;#去掉a下划线
}
/*将段落的第一行缩进 32像素：*/
p {
text-indent: 32px;
}
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
div {
height: 400px;
width: 400px;
/**/
/*background-image: url("1.png");*/
/*background-repeat: no-repeat;*/
/*background-position: 50px 100px;*/
background: #336699 url("1.png") center center no-repeat;
}
11.背景图片实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 400px;
width: 100%;
background-color: red;
}
.c2 {
height: 400px;
width: 100%;
background: url("1.png") center center;
/*固定住图片*/
background-attachment: fixed;
}
.c3 {
height: 400px;
width: 100%;
background-color: orange;
}
.c4 {
height: 400px;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>
12.边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
/*border-width:宽度,border-style:样式,border-color: blue:颜色*/
/*div {*/
/*border-width: 2px;*/
/*border-style: dotted;*/
/*border-color: blue;*/
/*}*/
div {
border: 1px solid red ;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
13.画圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
background-color: red;
height: 400px;
width: 400px;
border: 3px black solid;
/*改变边框角度*/
border-radius: 50%;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
14.display属性相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display属性相关</title>
<style>
/*.c1 {*/
能够隐藏标签,并且不占据文档空间
/*display: none;*/
/*}*/
/*div {*/
变成行级标签
/*display: inline;*/
/*}*/
/*span {*/
变成块级标签
/*display: block;*/
/*}*/
行级和块级标签特性都有
span {
display: inline-block;
height: 200px;
width: 200px;
border: solid red 3px;
}
</style>
</head>
<body>
<div class="c1">div</div>
<div>div</div>
<span>span</span>
<span>span2</span>
</body>
</html>
15.css盒子模型
margin 外边距 调整标签与标签之间距离的
border 边框
padding 内填充(内边距) 调整文本内容与标签边框之间的距离
content 文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
/*.c1 {*/
/*height: 200px;*/
/*width: 200px;*/
/*border: 3px solid black;*/
/*}*/
/*.c2 {*/
/*!*margin-top: 20px;*!*/
/*!*margin-left: 20px;*!*/
/*!*margin-right: 20px;*!*/
/*height: 50px;*/
/*width: 50px;*/
/*border: 3px solid red;*/
/*!*margin: 12px 10px 4px 20px;*!*/
/*上下0 左右自动居中 */
/*margin: 0 auto;*/
/*}*/
p {
border: solid 3px red;
/*padding-top: 10px;*/
/*padding-left: 20px;*/
/*padding-right: 50px;*/
/*padding-bottom: 40px;*/
/*上下 左右*/
padding: 20px 40px;
}
</style>
</head>
<body>
<!--<div class="c1">-->
<!--<div class="c2"></div>-->
<!--</div>-->
<p>这是盒子模型</p>
</body>
</html>
