溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML中如何使用CSS層疊樣式表

發(fā)布時間：2021-07-27 18:20:09 來源：億速云 閱讀：143 作者：Leah 欄目：web開發(fā)

HTML中如何使用CSS層疊樣式表，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

CSS層疊樣式表

1.結(jié)構(gòu),樣式,行為的分離

<!--樣式-->
<style type="text/css">
    p{
        background-color:green;
        height:100px;
        width:400px;
        border:1px solid red;
    }
    h3{
        background-color:#aaa;
        height:100px;
        width:400px;
        border:1px solid red;
    }
    <!--選擇器-->
    .yellow{
        background-color:yellow;
        height:300px;
        width:600px;
        border:1px solid red;
    }
</style>

<!--行為-->
<script type="text/javascript">
    <!--當(dāng)頁面加載完畢,我們就執(zhí)行一個函數(shù),來完成對h3的操作-->
    window.onload()=function(){
        <!--獲取要操作的h3標(biāo)簽-->
        h3Node=document.getElementById("tt");
        <!--當(dāng)鼠標(biāo)經(jīng)過,我們就改變h3的外觀-->
        h3Node.onmouseover=function(){
            this.className="yellow";
        }
        <!--鼠標(biāo)離開,就恢復(fù)h3的外觀和大小-->
        h3Node.onmouseout=function(){
            this.className="";
        }
    }

</script>
<body>
    <h3 id="tt">靜夜思</h3>
    <p>床前明月光</p>
</body>

2.css的分類
(1)id選擇器
(2)標(biāo)簽選擇器
(3)類選擇器
(4)分組選擇器
(5)通配符選擇器
(6)偽類選擇器(對超鏈接的操作)
(7)派生選擇器,也稱復(fù)合選擇器
選擇器的優(yōu)先級:就近原則,范圍越小,優(yōu)先級越高
可以使用!important改變優(yōu)先級

<style>
    /*id選擇器*/
    #a01{
        color:red;
    }
    /*標(biāo)簽選擇器*/
    p{
        color:blue;
    }
    /*類選擇器*/
    .c01{
        background:green;
    }
    /*分組選擇器*/
    h2,h3,h4{
        color:yellow
    }
    /*通配符選擇器*/
    *{
        background:#aaa
    }
    /*派生選擇器*/
    li strong{
        color:orange;
    }
</style>
<body>
    <ul>
        <li><strong>無序列表選項(xiàng)1</strong></li>
        <li>無序列表選項(xiàng)2</li>
        <li>無序列表選項(xiàng)3</li>
        <li>無序列表選項(xiàng)4</li>
    </ul>
    <h2 id="a01">靜夜思</h2>
    <h3 class="c01">床前明月光</h3>
    <h4>疑是地上霜</h4>
    <p>舉頭望明月</p>
    <strong>低頭思故鄉(xiāng)</strong>
</body>

偽類選擇器
支持css的瀏覽器中,鏈接的不同狀態(tài)都可以不同的方式顯示,這些狀態(tài)包括:活動狀態(tài),已被訪問狀態(tài),未被訪問狀態(tài),和鼠標(biāo)懸停狀態(tài)
偽類的順序:link,visited,hover,active

<style type="text/css">
    a:link{ /*未被訪問狀態(tài)*/
        color:#000000;
        text-decoration:none;
    }
    a:visited{ /*已訪問過的*/
        color:#FF6633;
    }
    a:hover{ /*鼠標(biāo)懸停*/
        color:#00FF66;
        rext-decoration:underline;
    }
    a:active{
        color:#CCFF6;
    }
</style>
<body>
    <a href="#">構(gòu)造css規(guī)則</a>
</body>

focus偽類
在元素獲得焦點(diǎn)時向元素添加特殊樣式

<style>
    input:focus{
        background-color:#FF0066
    }
</style>
<body>
    <p>
        <input type="text" size="20"/>
    </p>
</body>

3.css的使用方式
(1)內(nèi)嵌式

<style>
    li{
        color:red
    }
</style>
<body>
    <ul>
        <li><strong>無序列表選項(xiàng)1</strong></li>
        <li>無序列表選項(xiàng)2</li>
        <li>無序列表選項(xiàng)3</li>
        <li>無序列表選項(xiàng)4</li>
    </ul>

</body>

(2)行內(nèi)式

<body>
    <p><span style="color:blue;font-size:20px">我<span>能抽象出整個世界</p>
</body>

(3)導(dǎo)入式

<style type="text/css">
    @import "文件路徑";
</style>
<body>
    <ul>
        <li><strong>無序列表選項(xiàng)1</strong></li>
        <li>無序列表選項(xiàng)2</li>
        <li>無序列表選項(xiàng)3</li>
        <li>無序列表選項(xiàng)4</li>
    </ul>
    <h2 id="a01">靜夜思</h2>
    <h3 class="c01">床前明月光</h3>
    <h4>疑是地上霜</h4>
    <p>舉頭望明月</p>
    <strong>低頭思故鄉(xiāng)</strong>
</body>

創(chuàng)建.css文件

    #a01{
        color:red;
    }
    p{
        color:blue;
    }

(4) 鏈接式

<link href="文件路徑" rel="stylesheet" type="text/css">
<body>
    <ul>
        <li><strong>無序列表選項(xiàng)1</strong></li>
        <li>無序列表選項(xiàng)2</li>
        <li>無序列表選項(xiàng)3</li>
        <li>無序列表選項(xiàng)4</li>
    </ul>
    <h2 id="a01">靜夜思</h2>
    <h3 class="c01">床前明月光</h3>
    <h4>疑是地上霜</h4>
    <p>舉頭望明月</p>
    <strong>低頭思故鄉(xiāng)</strong>
</body>

創(chuàng)建 .css文件

    #a01{
        color:red;
    }
    p{
        color:blue;
    }

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手