前端三劍客——CSS樣式

CSS樣式： 進(jìn)行美化頁(yè)面即html標(biāo)簽中的style

??大綱：

??????1.CSS樣式應(yīng)用方式

??????2.CSS樣式的選擇器

??????3.CSS樣式的大致內(nèi)容

????CSS樣式應(yīng)用方式：即CSS樣式寫在哪

????????????1.應(yīng)用在html標(biāo)簽上

<img src="..." style="color:red" />
<div style="color:red">你好</div>

????????????2應(yīng)用.在head里面

<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.應(yīng)用在文件里： ??使用情況：布局多個(gè)頁(yè)面時(shí)避免重復(fù)寫style

在head里面導(dǎo)入文件
<link rel="stylesheet" href="放css樣式的文件.css（基于falsk框架寫的網(wǎng)站css文件寫在static目錄下）">

????CSS樣式選擇器：即如何去調(diào)用寫好的CSS樣式

????????????1.類選擇器 ?：?

<!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.后代選擇：??

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>111</title>
    <style>
    .c1>li{
        color: pink !important; /* 把 !important 放在屬性值和分號(hào)之間 */
    }
    .c1 li{
        color: red;
    }

    </style>
</head>
<body>
    <div class="c1">
        <li>你好</li>
        <div>
            <li>你好</li>
        </div>
    </div>

</body>
</html>

????????????3.標(biāo)簽選擇器：

<!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.屬性選擇器：

????????????6.補(bǔ)充：多個(gè)選擇器和覆蓋

<!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樣式大致內(nèi)容

????????????1.高度和寬度設(shè)置

.c1{
    color: red;
    height: 40px;
    width: 50%;
}

????????????注意事項(xiàng)：1.寬度支持百分比??2.行內(nèi)標(biāo)簽設(shè)置高度和寬度支撐不起來，得用display：block改變??3.雖然塊級(jí)標(biāo)簽使用寬度限制其在此行所占位置，但此行剩余部分依然不可以被使用，得用display: inline-block改變??

????????????2.塊級(jí)，行內(nèi)標(biāo)簽轉(zhuǎn)換設(shè)置：用display進(jìn)行改變:??塊級(jí)->行內(nèi)?和?行內(nèi)->塊級(jí)?或?既具有行內(nèi)又有塊級(jí)的特性

#塊級(jí)變行內(nèi) display:inline
.c1{
    color: red;
    height: 40px;
    width: 50%;
    display: inline;
}
<div class="c1">你好</div>      #此時(shí)塊級(jí)標(biāo)簽變成行內(nèi)標(biāo)簽所以c1里面的寬度對(duì)其無效

#行內(nèi)變塊級(jí)
.c1{
    color: red;
    height: 40px;
    width: 50%;
    display: block;
}
<span class="c1">你好</span>     #變成塊級(jí)標(biāo)簽后可以進(jìn)行設(shè)置寬度   此行后面剩余部分則不可被其他標(biāo)簽占用

#即具有塊級(jí)和行內(nèi)的特性
.c1{
    color: red;
    height: 40px;
    width: 50%;
    display: inline-block;
}
<div class="c1">你好</div>        或        <span class="c1">你好</span>
你好

????????????3.字體設(shè)置：顏色大小加粗字體格式

.c1{
    color: red;                #字體顏色
    font-size: 20px;           #字體大小
    font-weight: 600;          #字體粗細(xì)
    font-family: Arial;        #字體格式
}
<span class="c1">你好</span>

????????????4.文字對(duì)齊方式：水平居中（text-align : center) 垂直居中(line-height : 設(shè)置的（height)）

.c1{
    color: red;
    height: 80px;
    width: 150px;
    text-align: center;             #水平對(duì)齊
    line-height: 80px;              #垂直對(duì)齊
    border: 1px solid red;          #加邊框（可視化）
    display: inline-block;
}
<span class="c1">你好</span>

??

????????????5.內(nèi)邊距： padding????為自己原有位置擴(kuò)展領(lǐng)域（在塊級(jí)區(qū)域中保持自己高寬（150，80）不變，向外擴(kuò)張padding的值，則擴(kuò)張后的區(qū)域也是屬于這個(gè)塊級(jí)區(qū)域的）

.c1{
    height: 80px;
    width: 150px;
    border: 1px solid red;

    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;                    #簡(jiǎn)寫：padding：10px 20px 30px 20px 上 右 下 左  圖3
}
<div class="c1">你好呀！</div>
你好

????????????6.外邊距： 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>

????

??????遇到的問題：第一個(gè)div中CSS樣式有添加內(nèi)邊距時(shí) 第二個(gè)div標(biāo)簽不在頂端，如圖：??????解決辦法：浮動(dòng)并排

????????????7.浮動(dòng)并排 ??float

??困惑點(diǎn)：既然可以把塊級(jí)標(biāo)簽通過display：inline-block使其不在霸道，讓此行剩余部分讓別人進(jìn)行占用，為什么要有浮動(dòng)并排

??困惑點(diǎn)可視化：6中遇見的問題

原因

簡(jiǎn)單說：兩個(gè)元素并排時(shí)，默認(rèn)是按“文字基線”對(duì)齊的（就像寫字母時(shí)，字母底部對(duì)齊那條線）。第一個(gè)元素加了內(nèi)邊距（padding），把自己撐高了，它的“基線”位置也跟著變低了。
第二個(gè)元素沒加內(nèi)邊距，就跟著這個(gè)變低的基線對(duì)齊，所以看起來它的頂部沒對(duì)齊，好像往下挪了一點(diǎn)。
解決辦法：
1.給第二個(gè)元素加一句 `vertical-align: top;`，強(qiáng)制讓它們頂部對(duì)齊，就頂格了。
2.把兩個(gè)元素都改成塊級(jí)元素，再用浮動(dòng)并排
  先去掉 display: inline-block，然后給兩個(gè)元素都加 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>

????????浮動(dòng)并排:

查看代碼

<!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">                              #父級(jí)
        <div class="c1">你好呀！</div>
        <div class="c2">你好</div>
        <div style="clear:both"></div>            #給父元素加 “清除浮動(dòng)”，避免父元素高度坍塌（避免父級(jí)元素被覆蓋）
    </div>
</body>
</html>

????????注意點(diǎn)：父級(jí)如果沒有高度或者寬度，孩子若有高度或者寬度則會(huì)把父級(jí)支撐起來

???????????? 如果父級(jí)中存在孩子浮動(dòng)則要加避免坍塌的語(yǔ)句

????????????8.body：body標(biāo)簽?zāi)J(rèn)有邊距造成頁(yè)面四周有間隙

解決辦法:
body{
    margin: 0;    
}

??????

????????????9.內(nèi)容居中：文本居中??區(qū)域居中

??????1.文本居中：??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.區(qū)域居中：??自己得有寬度+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偽裝：????不僅可以改變自己還可以改變自己內(nèi)部的標(biāo)簽的元素

??????改變自己：

.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  target="_blank">點(diǎn)擊跳轉(zhuǎn)</a>
    </div>
</div>

鼠標(biāo)放上前： ??? 鼠標(biāo)放上后：???

??????

??????改變自己內(nèi)部標(biāo)簽的元素

.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 中鼠標(biāo)懸停的偽類是 :hover（冒號(hào)開頭），必須緊跟在要觸發(fā) hover 的元素選擇器后面（比如 .c2:hover），表示 “當(dāng)鼠標(biāo)懸停在 .c2 上時(shí)”，再去控制它內(nèi)部的 .b1 元素。
修改后，當(dāng)鼠標(biāo)放到 “作者微信” 所在的 .c2 區(qū)域時(shí)，圖片就會(huì)顯示出來了。

鼠標(biāo)放上前 ????? ?鼠標(biāo)放上后??

????????????12.after偽裝：??.clearfix:after

.clearfix:after{
    content: "";
    display: block;
    clear: both;
}

????????????13.opacity：透明度（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 定位的元素?zé)o法通過 margin 來調(diào)整基于瀏覽器視口的位置，原因和它的定位機(jī)制有關(guān)：
當(dāng)元素設(shè)置 position: fixed 時(shí)，它的定位參考是瀏覽器的視口（整個(gè)窗口），并且會(huì)完全脫離正常文檔流。此時(shí) margin 的作用邏輯發(fā)生了變化：
正常文檔流中，margin 是用來控制元素與其他元素的間距；
但 fixed 定位的元素已經(jīng) “懸浮” 在視口上，margin 無法讓它相對(duì)于視口產(chǎn)生偏移，只能影響它內(nèi)部?jī)?nèi)容的排版（比如如果它里面有子元素，margin 可以控制子元素和它的間距）。

????????????14.position ：????fixed ? ?relative ??absolute 后兩者進(jìn)行搭配使用

??????????????????1.position：fixed：固定方式相對(duì)于瀏覽器

??????????????????????脫離文檔流，不影響去他元素布局??定位參考：瀏覽器視口??用于懸浮固定的場(chǎng)景

.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 中用于給元素添加陰影效果的屬性，能讓元素看起來有立體感，常用于按鈕、卡片、輸入框等組件的美化。

h-offset：水平偏移量（必填）。正數(shù)向右，負(fù)數(shù)向左。
v-offset：垂直偏移量（必填）。正數(shù)向下，負(fù)數(shù)向上。
blur：模糊半徑（可選）。值越大，陰影越模糊（默認(rèn)為 0，即清晰邊緣）。
spread：陰影大小（可選）。正數(shù)擴(kuò)大陰影，負(fù)數(shù)縮小陰影（默認(rèn)為 0）。
color：陰影顏色（可選）。默認(rèn)使用文本顏色，建議顯式指定（如 rgba(0,0,0,0.2)）。
inset：內(nèi)陰影（可選）。添加后陰影會(huì)在元素內(nèi)部顯示（默認(rèn)是外陰影）。
```
box-shadow: 5px 5px 20px #aaa;
```

posted @ 2025-10-25 00:28 guohan 閱讀(11) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

前端三劍客——CSS樣式

公告