css摺疊樣式（2）――定義樣式表

最後更新：2016-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

第一樣式表可用（1）內置樣式表（2）引入式樣式表，兩種方式來實現，
如下我便以代碼的形式放在下面：
（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標記定義 -->          .div1{background-color:green;font-size:20px;}  <!--class定義樣式 -->          #divid{background-color:blue;font-size:20px;}  <!--id定義樣式 -->              <!---組合選取器不能與其他選取器共存-->          p,h1,h2,.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>            <h1>這是定義樣式1</h1>      <h2>這是定義樣式2</h2>      <p>這是定義樣式3</p>      <p class="p1">這是定義樣式4</p>      <p id="pid">這是定義樣式5</p>                  <a href="http://www.baidu.com/1" target="_blank">百度1</a>      <a href="http://www.baidu.com/2" target="_blank">百度2</a>      <a href="http://www.baidu.com/3" target="_blank">百度3</a>      <a href="http://www.baidu.com/4" target="_blank">百度4</a>      <a href="http://www.baidu.com/5" target="_blank">百度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>      <h1>css樣式使用</h1>      <a href="http://www.baidu.com/1" target="_blank">百度1</a>      <a href="http://www.baidu.com/2" target="_blank">百度2</a>      <a href="http://www.baidu.com/3" target="_blank">百度3</a>      <a href="http://www.baidu.com/4" target="_blank">百度4</a>      <a href="http://www.baidu.com/5" target="_blank">百度5</a>      <br>      <h1>這是定義樣式1</h1>      <h2>這是定義樣式2</h2>      <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定義樣式的優先順序：id > class >HTML 樣式</div>  </body>    </html>

style.css

body{      background-color:yellow;      color:#fff    }    p,h1,h2,.p1,#pid {color:red;font-size:20px;}  /* 組合樣式定義*/    a:link { color:red; }   /* 顯示紅色*/  a:hover { color:green; } /* 滑鼠移動至該處變綠色*/  a:active { color:yellow; } /* 滑鼠點擊該處時變黃色*/  a:visited { color:blue; } /* 滑鼠點擊該處後變藍色*/    div{background:red;font-size:20px}  /* HTML樣式定義   */  .div1{background-color:green;font-size:20px;}  /* class樣式定義   */  #divid{background-color:blue;font-size:20px;}  /* id樣式定義   */

以上就是css摺疊樣式（2）――定義樣式表的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More