4-CSS的三種樣式

發(fā)布時間：2020-07-31 12:40:02 來源：網(wǎng)絡(luò) 閱讀：95 作者：代碼老兵欄目：web開發(fā)

CSS

什么是CSS

CSS的全稱是Cascading Style Sheets，層疊樣式表
它用來控制HTML標(biāo)簽的樣式，在美化網(wǎng)頁中起到非常重要的作用

CSS的編寫格式是鍵值對形式的，比如

color: red;
background-color: blue;
font-size: 20px;
冒號:左邊的是屬性名，冒號:右邊的屬性值（類似字典）

CSS的三種樣式

CSS有3種書寫形式：

行內(nèi)樣式：（內(nèi)聯(lián)樣式）直接在標(biāo)簽的style屬性中書寫

<body >

頁內(nèi)樣式：在本網(wǎng)頁的style標(biāo)簽中書寫

<style>
    body {
        color: red;
    }
</style>

外部樣式：在單獨的CSS文件中書寫，然后在網(wǎng)頁中用link標(biāo)簽引用

<link rel="stylesheet" href="index.css">

行內(nèi)樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行內(nèi)樣式</title>
</head>
<body>
    <div>我是div</div>
    <p>我是段落標(biāo)簽</p>

</body>
</html>

4-CSS的三種樣式

上圖：這是普通的div和段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行內(nèi)樣式</title>
</head>
<body >
    <div>我是div</div>
    <p>我是段落標(biāo)簽</p>

</body>
</html>

代碼：設(shè)計了背景顏色

4-CSS的三種樣式

上圖：設(shè)置顏色的時候，會自動彈出顏色提供選擇

4-CSS的三種樣式

上圖：可以看到背景顏色改為藍(lán)色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行內(nèi)樣式</title>
</head>
<!---->
<!--
    單值屬性：只有一個屬性值
    符合屬性：有多個屬性值
-->
<body>
    <div >我是div</div>
    <p >我是段落標(biāo)簽</p>
</body>
</html>

代碼↓
line13：通過style設(shè)計字體為紅色（color：red）；調(diào)整字體大?。╢ont-size：40px）；調(diào)整字體的背景顏色（background-color：greenyellow）。
line14：設(shè)計字體為紫色；字體大小為100px；給字體設(shè)計邊框，邊框大小為5px，solid是實線，red紅色（border有多個屬性，說明這是復(fù)合屬性）；

4-CSS的三種樣式

上圖：實現(xiàn)效果

頁內(nèi)樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁內(nèi)樣式</title>

    <!--頁內(nèi)樣式的標(biāo)簽-->
    <style>
        body{
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <p>我是段落標(biāo)簽</p>
</body>
</html>

代碼：在head中使用style，然后關(guān)聯(lián)body，設(shè)計body為藍(lán)色，這樣有關(guān)于body的內(nèi)容都會變成藍(lán)色；

4-CSS的三種樣式

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁內(nèi)樣式</title>

    <!--頁內(nèi)樣式的標(biāo)簽-->
    <style>
        /*body{*/
        /*    background-color: dodgerblue;*/
        /*}*/

        div{
            color:red;
            font-size: 45px;
        }

        p{
            color: fuchsia;
            font-size: 60px;
        }

    </style>
</head>
<body>
    <div>我是div</div>
    <p>我是段落標(biāo)簽</p>
</body>
</html>

代碼：將body的樣式注釋掉；然后針對div和p標(biāo)簽進(jìn)行設(shè)計，下圖為效果。

4-CSS的三種樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁內(nèi)樣式</title>

    <!--頁內(nèi)樣式的標(biāo)簽-->
    <style>
        /*body{*/
        /*    background-color: dodgerblue;*/
        /*}*/

        div{
            color:red;
            font-size: 45px;
        }

        p{
            color: fuchsia;
            font-size: 60px;
        }

    </style>
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <p>我是段落標(biāo)簽</p>
    <p>我是段落標(biāo)簽</p>
</body>
</html>

代碼：將body中的其他標(biāo)簽復(fù)制多條，然后看效果

4-CSS的三種樣式

上圖：如果是行內(nèi)樣式，需要在每個div和每個p標(biāo)簽進(jìn)行設(shè)計；而頁內(nèi)樣式只需在head中針對同一類標(biāo)簽進(jìn)行設(shè)計后，所有相同類的標(biāo)簽都會同時被設(shè)計出效果。

外部標(biāo)簽

4-CSS的三種樣式

上圖：圖中每個內(nèi)容都是一個鏈接頁面，也就是說一個網(wǎng)站會有多個頁面，如果使用頁內(nèi)樣式的話就要每個頁面都單獨去設(shè)計。而使用外部標(biāo)簽的話，只需要每個頁面去調(diào)用同一個樣式的話，就可以實現(xiàn)多個頁面使用相同的設(shè)計樣式了。

4-CSS的三種樣式

上圖：當(dāng)前的文件結(jié)構(gòu)

div{
    color: turquoise;;
    font-size: 50px;
    border: 5px double red;
}

p{
    color: maroon;
    font-size: 88px;
}

代碼↓
在index.css文件中設(shè)計樣式；
double為雙實線

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部樣式</title>

    <!--引入-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div>我是MT</div>
    <p>我是段落</p>
</body>
</html>

代碼↓
在03-外部樣式.html文件中引入index.css的樣式；
link 就是引入；
rel要聲明與引入的內(nèi)容是什么關(guān)系，stylesheet表示樣式設(shè)計關(guān)系，就是說會引入樣式設(shè)計；
href指定css文件。

4-CSS的三種樣式

上圖：直接引入css文件中的樣式就實線了效果設(shè)計；如果有多個頁面，每個頁面直接引入即可。

效果就近與疊加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁內(nèi)樣式</title>

    <!--頁內(nèi)樣式的標(biāo)簽-->
    <style>
        /*body{*/
        /*    background-color: dodgerblue;*/
        /*}*/

        div{
            color:red;
            font-size: 45px;
        }

        p{
            color: fuchsia;
            font-size: 60px;
        }

    </style>

    <!--引入-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<p>我是段落標(biāo)簽</p>
<p>我是段落標(biāo)簽</p>
</body>
</html>

代碼↓
代碼中可以看到使用了外部樣式，又使用了頁內(nèi)樣式。
這種情況，body就會使用離它最近的樣式，代碼中可以看到從body往上，是引入的樣式最近，所以優(yōu)先使用引入的外部樣式，然后才會去使用頁內(nèi)樣式；
同一個效果的設(shè)計優(yōu)先使用最近的樣式；如果外部樣式和頁內(nèi)樣式有不沖突的地方，就會疊加。

4-CSS的三種樣式

上圖：外部樣式最近，其次疊加頁內(nèi)樣式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁內(nèi)樣式</title>

    <!--引入-->
    <link rel="stylesheet" href="css/index.css">

    <!--頁內(nèi)樣式的標(biāo)簽-->
    <style>
        /*body{*/
        /*    background-color: dodgerblue;*/
        /*}*/

        div{
            color:red;
            font-size: 45px;
        }

        p{
            color: fuchsia;
            font-size: 60px;
        }

    </style>

</head>
<body>
<div>我是div</div>
<div>我是div</div>
<p>我是段落標(biāo)簽</p>
<p>我是段落標(biāo)簽</p>
</body>
</html>

代碼：樣外部樣式放到頁內(nèi)樣式上面，也就是說現(xiàn)在最近的樣式是頁內(nèi)樣式。

4-CSS的三種樣式

上圖：樣式的位置移動，設(shè)計的樣式也就產(chǎn)生了變化。

向AI問一下細(xì)節(jié)

4-CSS的三種樣式

CSS

CSS的三種樣式

行內(nèi)樣式

頁內(nèi)樣式

外部標(biāo)簽

效果就近與疊加

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽