裝飾器完整寫法,ccs選擇器,樣式設置, 背景圖片,圓形設置, display設置,盒模型設置
阿新 • • 發佈：2019-04-03
id選擇器 組合 family css盒子模型 -c 單行註釋 splay cor fun
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屬性來設置樣式
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>
裝飾器完整寫法,ccs選擇器,樣式設置, 背景圖片,圓形設置, display設置,盒模型設置