css折疊樣式（2）——定義樣式表

發(fā)布時(shí)間：2020-08-04 01:35:19 來源：網(wǎng)絡(luò) 閱讀：341 作者：MK先生欄目：開發(fā)技術(shù)

css折疊樣式（2）——定義樣式表

第一樣式表可用（1）嵌入式樣式表（2）引入式樣式表，兩種方式來實(shí)現(xiàn)，

如下我便以代碼的形式放在下面：

（1）嵌入式樣式表

demo.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS樣式使用</title>
    <style type="text/css">

        div{background:red;font-size:20px} <!--HTML標(biāo)記定義 -->
        .div1{background-color:green;font-size:20px;}  <!--class定義樣式 -->
        #divid{background-color:blue;font-size:20px;}  <!--id定義樣式 -->  

        <!---組合選擇器不能與其他選擇器共存-->
        p,h2,h3,.p1,#pid {color:red;font-size:20px;} <!--組合定義樣式 -->
    
        a:link { color:red; }       
        a:hover { color:green; }
        a:active { color:yellow; }
        a:visited { color:blue; }
        
    </style>
</head>
    
<body>
    <div class="div1" id="divid">css定義樣式</div>
    
    <h2>這是定義樣式1</h2>
    <h3>這是定義樣式2</h3>
    <p>這是定義樣式3</p>
    <p class="p1">這是定義樣式4</p>
    <p id="pid">這是定義樣式5</p>
    
    
    <a >百度1</a>
    <a >百度2</a>
    <a >百度3</a>
    <a >百度4</a>
    <a >百度5</a>
</body>

</html>

（2）引入式樣式表

demo.html

<!doctype html>
<html>
<head>
    <title>Css樣式使用</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h2>css樣式使用</h2>
    <a >百度1</a>
    <a >百度2</a>
    <a >百度3</a>
    <a >百度4</a>
    <a >百度5</a>
    <br>
    <h2>這是定義樣式1</h2>
    <h3>這是定義樣式2</h3>
    <p>這是定義樣式3</p>
    <p class="p1">這是定義樣式4</p>
    <p id="pid">這是定義樣式5</p>
    <div>css的html定義樣式</div>
    <div class="div1">css的class定義樣式</div>
    <div id="divid">css的id定義樣式</div>
    <div class="div1" id="divid">css定義樣式的優(yōu)先級(jí)：id > class >HTML 樣式</div>
</body>

</html>

style.css

body{
    background-color:yellow;
    color:#fff  
}


p,h2,h3,.p1,#pid {color:red;font-size:20px;}  /* 組合樣式定義*/

a:link { color:red; }   /* 顯示紅色*/
a:hover { color:green; } /* 鼠標(biāo)移動(dòng)至該處變綠色*/
a:active { color:yellow; } /* 鼠標(biāo)點(diǎn)擊該處時(shí)變×××*/
a:visited { color:blue; } /* 鼠標(biāo)點(diǎn)擊該處后變藍(lán)色*/

div{background:red;font-size:20px}  /* HTML樣式定義   */
.div1{background-color:green;font-size:20px;}  /* class樣式定義   */
#divid{background-color:blue;font-size:20px;}  /* id樣式定義   */

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

css折疊樣式（2）——定義樣式表

猜你喜歡

最新資訊

相關(guān)推薦

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