下面是小凰凰的簡介，看下吧！
💗人生態度：珍惜時間，渴望學習，熱愛音樂，把握命運，享受生活
💗學習技能：網絡 -> 雲計算運維 -> python全棧( 當前正在學習中)
💗您的點贊、收藏、關注是對博主創作的最大鼓勵，在此謝過！
有相關技能問題可以寫在下方評論區，我們一起學習，一起進步。
後期會不斷更新python全棧學習筆記，秉着質量博文爲原則，寫好每一篇博文。
文章目錄
一、塊級標籤樣式
設置塊級標籤的長寬屬性：
<head>
<style>
#d1 {
background-color: red; # 背景樣式會學
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="d1">
hello world!
</div>
</body>
常用行內、塊級標籤請見：https://blog.csdn.net/weixin_44571270/article/details/106857012
二、文字樣式
1、用於控制字體、文本顯示的方式
（1）字體屬性
/*字族：STSong作爲首選字體, 微軟雅黑作爲備用字體*/
font-family: "STSong", "微軟雅黑";
/*字體大小 通常14-16比較好*/
font-size: 40px;
/*也可以加數字：字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/
font-weight: bolder; /* 詳細用法見下圖 bolder要求掌握！*/
/*字體顏色 (還有多種顏色設置的方法，需要掌握，詳見實戰演練)*/
color: red;
font-weight用來設置字體的字重（粗細）：
（2）文本格式控制
/*行高: 其實也就是指定行的高度，
比如下面這個是一行的大小
--------
--------
指定更大的高度：
--------
--------
*/
line-height: 200px;
/* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) | justify (兩端對齊) */
text-align: center;
/*字劃線: overline(上劃線) | line-through(中劃線) | underline(下劃線) | none(取消a標籤的自帶的下劃線) |
inherit 繼承父元素的text-decoration屬性的值 */
text-decoration: none; /* none使用較多*/
/*字間距*/
letter-spacing: 2px; /* 指定字的間隔，英文中單詞的字母的間隔*/
/*詞間距*/
word-spacing: 5px; /* 對中文無用，指定單詞間隔大小*/
/*首行縮進：1em相當於一個字的寬度*/
text-indent: 2em;
2、實戰演練
<style>
p {
/* !*第一個不生效就用後面的 寫多個備用*! */
font-family: "Arial Black","微軟雅黑","...";
/* !*字體大小*! */
font-size: 24px;
/* !*bolder lighter 100~900 inherit繼承父元素的粗細值*! */
font-weight: inherit;
/* !*直接寫顏色英文*! */
color: red;
/* !*顏色編號*! */
color: #ee762e;
/* !*三基色 數字 範圍0-255*! */
color: rgb(128,23,45);
/* !*第四個參數是顏色的透明度 範圍是0-1*! */
color: rgba(23, 128, 91, 0.9);
/*當你想要一些顏色的時候 可以利用現成的工具
1 pycharm提供的取色器
2 qq或者微信截圖功能（推薦）
微信公衆號:軟件管家...
*/
}
</style>
三、背景樣式
一般與用於塊級標籤的樣式之中！
這裏普及一個知識，我們的塊級標籤其實隱藏了一個座標系，目的是便於設置塊級標籤內的內容的位置
/* 設置背景圖片：url函數可以鏈接網絡或本地圖片*/
background-image: url('https://www.baidu.com/favicon.ico');
/* 平鋪:repeat-x(x軸方向平鋪) | repeat-y(y軸方向平鋪) | repeat(雙軸平鋪) | no-repeat (不平鋪) */
background-repeat: no-repeat; /* 當你的背景圖片，沒有塊級標籤的區域大時，就會複製多份該背景圖片填充滿該區域 */
/* x軸背景圖片位置偏移：正值往x軸正半軸偏移，負值往x軸負半軸偏移 */
background-position-x: 10px;
/* y軸背景圖片位置偏移：正值往y軸正半軸偏移，負值往y軸負半軸偏移 */
background-position-y: 10px;
/* 第一個參數爲x軸座標位置 第二個參數爲y軸座標位置 */
background-position:center center; /* 塊級標籤區域的x軸方向上居中，塊級標籤區域的y軸方向上居中 */
/* 由於這麼多重複的前綴background，因此我們可以進行簡寫*/
background: url("123.png") blue no-repeat center center
/* 注意：
1. 每個屬性的位置可以不一樣，但一個屬性裏的多個需要連在一起寫（例如：center center）
2. 參數個數不做限制，不加就採用默認配置
*/
下面這個參數我需要單獨拿出來說明，因爲它不容易理解！
/* 鎖定圖片爲背景地圖，不可滑動 */
background-attachment: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
background-color: red;
height: 500px;
}
#d2 {
background-color: green;
height: 500px;
}
#d3 {
background: url("123.jpg") fixed; /* 這裏我採用簡寫 */
height: 500px;
}
#d4 {
background-color: pink;
height: 500px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
效果展示：
四、顯示樣式
display屬性其實就是實現行內標籤和塊級標籤的特點互換！
1、display:none
<!-- 隱藏標籤不展示到前端頁面並且原來的位置也不再佔有，但是還存在於文檔上。一般用於配合JavaScript代碼使用。 -->
2、display:block
<span style="display: block;"></span>
<i style="display: block;"></i>
<!--
1. 將標籤設置爲塊級標籤的特點
2. block方式顯示的標籤，默認會換行
3. block方式顯示的標籤，支持所有的css樣式
4. block方式顯示的標籤，可以嵌套所有顯示方式的標籤
注：標題標籤和段落標籤雖然也是block顯示類標籤，但不建議嵌套block顯示類標籤
-->
3、display:inline
<div style="display: inline;"></div>
<p style="display: inline;"></p>
<!--
1. 將標籤設置爲行內標籤的特點
2. inline方式顯示的標籤，默認不會換行
3. inline方式顯示的標籤，不支持所有css樣式(如：不支持手動設置該標籤的寬高)
4. inline方式顯示的標籤，建議只用來嵌套所有inline顯示方式的標籤
-->
4、display:inline-block
<span style="display: inline-block;"></span>
<i style="display: inline-block;"></i>
<!--
1. 任意標籤的display樣式值均可以設置爲inline-block，那麼該標籤就會以inline-block方式來顯示
2. inline-block方式顯示的標籤，具有inline特性，默認不換行
3. inline-block方式顯示的標籤，也具備block特徵，支持所有css樣式（可以設置寬高）
4. inline-block方式顯示的標籤，不建議嵌套任意顯示方式的標籤
-->
5、display:none與visibility:hidden的區別
# 不論是行內標籤還是塊級標籤下都有一個visibility屬性，也可以實現隱藏！
visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
display:none: 可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。
五、邊框
邊框屬性：
- border-width 邊框的粗細
- border-style 邊框的風格
- border-color 邊框的顏色
border-style的屬性值有：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
height: 200px;
width: 200px;
/*border-width: 5px;*/
/*border-style: solid;*/
/*border-color: green;*/
border: 2px solid green;
/* 和background一樣，具有簡寫形式，三者位置可以隨意寫 */
}
div {
border-left-width: 5px;
border-left-color: red;
border-left-style: dotted;
border-right-width: 10px;
border-right-color: black;
border-right-style: solid;
border-top-width: 15px;
border-top-color: deeppink;
border-top-style: dashed;
border-bottom-width: 20px;
border-bottom-color: tomato;
border-bottom-style: solid;
}
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /* 直接寫50%即可 長寬一樣就是圓 不一樣就是橢圓 */
}
</style>
</head>
<body>
<div id="d1"></div>
<p></p>
</body>
效果展示：
