前端三(san)劍客(ke)——CSS樣(yang)式(shi)
CSS樣式： 進行(xing)美化頁面即html標簽中的style
??大綱：
??????1.CSS樣式(shi)應用方式(shi)
??????2.CSS樣式的選(xuan)擇器
??????3.CSS樣式的大致內容
????CSS樣式應用方式：即CSS樣式寫在哪
????????????1.應用在html標(biao)簽上
<img src="..." style="color:red" />
<div style="color:red">你好</div>????????????2應用.在(zai)head里(li)面
<head>
<meta charset="UTF-8">
<title>大米</title>
<style>
body{
margin:0;
}
.header{
background: #333;
}
.container{
width: 1226px;
margin: auto;
}
.menu{
float: left;
}
.account{
float: right;
}
.header a{
font-size: 12px;
color: #b0b0b0;
margin-left: 10px;
height: 40px;
line-height: 40px;
}
</style>
</head>????????????3.應用在文件里： ??使(shi)用情況：布局多個頁面時避免(mian)重復寫(xie)style
在head里面導入文件
<link rel="stylesheet" href="放css樣式的文件.css（基于falsk框架寫的網站css文件寫在static目錄下）">
????CSS樣式選擇器： 即如何去調用寫好的CSS樣式
????????????1.類選擇(ze)器(qi) ?：?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
.c1{
color: red;
}
</style>
</head>
<body>
<div class="c1">
你好
</div>
</body>
</html>????????????2.后(hou)代選擇 ：??
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
.c1>li{
color: pink !important; /* 把 !important 放在屬性值和分號之間 */
}
.c1 li{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<li>你好</li>
<div>
<li>你好</li>
</div>
</div>
</body>
</html>????????????3.標(biao)簽選(xuan)擇(ze)器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>
你好
</div>
<h1>你好</h1>
</body>
</html>????????????4.id選擇器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
#c1{
color: red;
}
</style>
</head>
<body>
<div id="c1">
你好
</div>
</body>
</html>????????????5.屬性選(xuan)擇(ze)器：
????????????6.補充：多個選擇器和覆蓋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
.c1{
color: red !important;
}
.c2{
color: pink;
}
</style>
</head>
<body>
<div class="c1 c2">你好</div>
</body>
</html>
????CSS樣式大致內容
????????????1.高度和寬度設置
.c1{
color: red;
height: 40px;
width: 50%;
}????????????注意事項：1.寬(kuan)度(du)(du)支(zhi)持百(bai)分比??2.行內標簽(qian)設(she)置高度(du)(du)和(he)寬(kuan)度(du)(du)支(zhi)撐不(bu)(bu)起(qi)來(lai)，得(de)用(yong)(yong)display：block改變??3.雖然(ran)塊級標簽(qian)使(shi)用(yong)(yong)寬(kuan)度(du)(du)限制其在此(ci)行所占(zhan)位(wei)置，但此(ci)行剩余部分依然(ran)不(bu)(bu)可(ke)以被使(shi)用(yong)(yong)，得(de)用(yong)(yong)display: inline-block改變??
????????????2.塊級，行內(nei)標(biao)簽轉換設置： 用(yong)display進(jin)行改變:??塊級->行內(nei)?和?行內(nei)->塊級?或(huo)?既具有行內(nei)又有塊級的特性
#塊級變行內 display:inline
.c1{
color: red;
height: 40px;
width: 50%;
display: inline;
}
<div class="c1">你好</div> #此時塊級標簽變成行內標簽所以c1里面的寬度對其無效 
#行內變塊級
.c1{
color: red;
height: 40px;
width: 50%;
display: block;
}
<span class="c1">你好</span> #變成塊級標簽后可以進行設置寬度 此行后面剩余部分則不可被其他標簽占用
#即具有塊級和行內的特性
.c1{
color: red;
height: 40px;
width: 50%;
display: inline-block;
}
<div class="c1">你好</div> 或 <span class="c1">你好</span>
你好
????????????3.字(zi)體(ti)設置： 顏色 大小 加粗(cu) 字(zi)體(ti)格式
.c1{
color: red; #字體顏色
font-size: 20px; #字體大小
font-weight: 600; #字體粗細
font-family: Arial; #字體格式
}
<span class="c1">你好</span>
????????????4.文字對齊方式： 水平(ping)居中（text-align : center) 垂(chui)直居中(line-height : 設置的（height)）
.c1{
color: red;
height: 80px;
width: 150px;
text-align: center; #水平對齊
line-height: 80px; #垂直對齊
border: 1px solid red; #加邊框（可視化）
display: inline-block;
}
<span class="c1">你好</span>
??
????????????5.內邊距： padding????為自(zi)己(ji)原有位置(zhi)擴(kuo)展領(ling)域(yu)（在塊級區域(yu)中保持自(zi)己(ji)高寬（150，80）不變，向外擴(kuo)張(zhang)padding的值，則擴(kuo)張(zhang)后的區域(yu)也是屬于(yu)這個塊級區域(yu)的）
.c1{
height: 80px;
width: 150px;
border: 1px solid red;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px; #簡寫：padding：10px 20px 30px 20px 上 右 下 左 圖3
}
<div class="c1">你好呀！</div>
你好
????????????6.外(wai)邊距： margin
.c1{
height: 80px;
width: 150px;
border: 1px solid red;
display: inline-block;
}
.c2{
height: 80px;
width: 150px;
border: 1px solid red;
margin-left: 10px;
display: inline-block;
}
<div class="c1">你好呀！</div>
<div class="c2">你好</div>
????
??????遇到的問題：第一個div中CSS樣式有添加內邊距時 第二個div標簽不在頂端，如圖：??????解決辦法：浮動并排
????????????7.浮動并(bing)排 ??float
??困惑點：既然可以把(ba)塊(kuai)級標簽通(tong)過(guo)display：inline-block使(shi)其(qi)不在霸(ba)道(dao)，讓(rang)此行(xing)剩(sheng)余部分讓(rang)別人(ren)進行(xing)占用 ，為(wei)什(shen)么要有浮動并排
??困(kun)惑點可(ke)視化：6中遇見的(de)問題
原因
簡單說：兩個元素并排時，默認是按“文字基線”對齊的（就像寫字母時，字母底部對齊那條線）。第一個元素加了內邊距（padding），把自己撐高了，它的“基線”位置也跟著變低了。
第二個元素沒加內邊距，就跟著這個變低的基線對齊，所以看起來它的頂部沒對齊，好像往下挪了一點。
解決辦法：
1.給第二個元素加一句 `vertical-align: top;`，強制讓它們頂部對齊，就頂格了。
2.把兩個元素都改成塊級元素，再用浮動并排
先去掉 display: inline-block，然后給兩個元素都加 float: left。
6中問題解決
body{
margin: 0;
}
.c1{
height: 80px;
width: 150px;
border: 1px solid red;
padding: 10px;
float: left;
}
.c2{
height: 80px;
width: 150px;
border: 1px solid red;
margin-left: 10px;
float: left;
}
<div class="c1">你好呀！</div>
<div class="c2">你好</div>
????????浮(fu)動并排:
查看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
body{
margin: 0;
}
.a1{
background-color: black;
}
.a1 .c1{
height: 40px;
border: 1px solid red;
padding: 10px;
float: left;
}
.a1 .c2{
height: 40px;
border: 1px solid red;
margin-left: 10px;
float: left;
}
</style>
</head>
<body>
<div class="a1"> #父級
<div class="c1">你好呀！</div>
<div class="c2">你好</div>
<div style="clear:both"></div> #給父元素加 “清除浮動”，避免父元素高度坍塌（避免父級元素被覆蓋）
</div>
</body>
</html>
????????注意點：父(fu)級如果沒(mei)有高(gao)度或者寬(kuan)(kuan)度，孩(hai)子(zi)若有高(gao)度或者寬(kuan)(kuan)度則會(hui)把父(fu)級支撐(cheng)起(qi)來
???????????? 如果父級中存在孩子浮動則要加避免(mian)坍塌的語句
????????????8.body：body標簽默認(ren)有邊距(ju)造成頁面四(si)周(zhou)有間隙
解決辦法:
body{
margin: 0;
}
??????
????????????9.內容居中： 文本(ben)居中(zhong)??區域(yu)居中(zhong)
??????1.文本居中(zhong)：??text-align:center??line-height:height??
body{
margin: 0;
}
.a1{
background-color: black;
}
.a1 .c1{
color: white;
height: 60px;
border: 1px solid red;
text-align: center;
line-height: 60px;
float: left;
}
.a1 .c2{
height: 40px;
border: 1px solid red;
margin-left: 10px;
float: left;
}
<div class="a1">
<div class="c1">你好呀！</div>
<div class="c2">你好</div>
<div style="clear:both"></div>
</div>
??????2.區(qu)域居中：??自己得(de)有寬度+margin-left：auto margin-right：auto
.a1{
height: 100000px;
width: 100px;
background-color: pink;
margin: 0 auto; #上0 右平均 下0 左平均
}
<div class="a1"></div>
一般是container
????????????
????????????10.背景色和邊框：
背景色：background-color: pink;
邊框：border: 1px solid red; transparent透明色
border-radius:5px; 圓角
???????????? 11. hover偽裝：????不僅可以改變(bian)自(zi)己還可以改變(bian)自(zi)己內部的標簽的元(yuan)素
??????改變(bian)自己：
.a1 .c1 a{
height: 60px;
text-align: center;
line-height: 60px;
float: left;
text-decoration:none;
}
.a1 .c1 a:hover{
color: red;
}
<div class="a1">
<div class="c1">
<a href="//www.luffycity.com/study/vip-card/5AG2JbrKlMwQ578EHw" target="_blank">點擊跳轉</a>
</div>
</div>鼠標放上前：
??? 鼠標放上后：???
??????
??????改變自己內(nei)部標簽(qian)的元素(su)
.a1{
height: 100000px;
width: 65%;
margin: 0 auto;
border: 1px solid red;
}
.a1 .c2{
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
margin-left: 10px;
float: left;
color: -webkit-link;
}
.a1 .c2 .b1{
display:none;
}
.a1 .c2:hover .b1{
display:block;
}
<div class="a1">
<div class="c2">
<div>作者微信</div>
<div class="b1">
<img src="./images/微信圖片_20251024215623_91_2.jpg" alt="作者微信">
</div>
</div>
</div>
CSS 中鼠標懸停的偽類是 :hover（冒號開頭），必須緊跟在要觸發 hover 的元素選擇器后面（比如 .c2:hover），表示 “當鼠標懸停在 .c2 上時”，再去控制它內部的 .b1 元素。
修改后，當鼠標放到 “作者微信” 所在的 .c2 區域時，圖片就會顯示出來了。鼠標放上前 
????? ?鼠標放上后??
????????????12.after偽裝：??.clearfix:after
.clearfix:after{
content: "";
display: block;
clear: both;
}
????????????13.opacity： 透明度(du)（0-1）
.fix{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:black;
opacity:0.5;
}
<div class="fix"></div>
position: fixed 定位的元素無法通過 margin 來調整基于瀏覽器視口的位置，原因和它的定位機制有關：
當元素設置 position: fixed 時，它的定位參考是瀏覽器的視口（整個窗口），并且會完全脫離正常文檔流。此時 margin 的作用邏輯發生了變化：
正常文檔流中，margin 是用來控制元素與其他元素的間距；
但 fixed 定位的元素已經 “懸浮” 在視口上，margin 無法讓它相對于視口產生偏移，只能影響它內部內容的排版（比如如果它里面有子元素，margin 可以控制子元素和它的間距）。
????????????14.position ：????fixed ? ?relative ??absolute 后兩者(zhe)進行搭配使用
??????????????????1.position：fixed：固定方(fang)式(shi) 相對于瀏覽器
??????????????????????脫離文(wen)檔流(liu)，不影(ying)響去他元素布局??定位參考：瀏覽器視口??用于懸浮固定的(de)場景
.fix{
position:fixed;
bottom:10px;
right:10px;
height:40px;
width:40px;
border:1px solid red;
}
<div class="fix"></div>
.bb{
position:fixed;
width:400px;
height:400px;
left:0;
right:0;
margin:0 auto;
background-color:black;
}
<div class="bb"></div>
??????????????????2.relative ??absolute
.aa{
position: relative;
height: 500px;
width: 500px;
margin: 0 auto;
border: 1px solid red;
}
.aa .bb{
position: absolute;
height: 50px;
width: 50px;
background-color: red;
}
<div class="aa">
<div class="bb"></div>
</div>
????????????15.box-shadow 是 CSS 中用于(yu)(yu)給元(yuan)(yuan)素添(tian)加陰影效(xiao)果的(de)屬(shu)性，能讓(rang)元(yuan)(yuan)素看起來有立體感(gan)，常用于(yu)(yu)按鈕、卡片、輸(shu)入(ru)框等組件(jian)的(de)美化。
