【web開發(fā)】CSS基礎
==========================================html==========================================
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8">
? ? <style>
? ? ? .index {
? ? ? ? color: green !important;
? ? ? }
? ? </style>
? ? <link rel="stylesheet" href="test.css">
? ? <title>這是標題</title>
? </head>
? <body>
? ? 123<br>
? ? 456
? ? <div class="div1">這是div123</div>
? ? <div class="div2">這是div456</div>
? ? <p>這是p標簽123</p>
? ? <p>這是p標簽456</p>
? ? <span>這是span標簽123</span>
? ? <span>這是span標簽456<i>這是斜體</i><b>這是加粗</b></span>
? ? <a href="http://www.kuwwz.com" target="_blank" class="index kwwz" id="index" style="color: gray;">酷玩蚊仔-首頁</a>
? ? <a href="http://www.kuwwz.com" target="_blank">酷玩蚊仔-首頁</a>
? ? <img src="http://www.kuwwz.com/img/%E5%BE%AE%E4%BF%A1%E6%94%B6%E6%AC%BE%E4%BA%8C%E7%BB%B4%E7%A0%81.png">
? ? <ol>
? ? ? <li>1</li>
? ? ? <li>2</li>
? ? ? <li>3</li>
? ? </ol>
? ? <ul>
? ? ? <li>1</li>
? ? ? <li>2</li>
? ? ? <li>3</li>
? ? </ul>
? ? <button>這是一個按鈕</button>
? ? <input>
? ? <table border="1">
? ? ? <tr>
? ? ? ? <td>111</td>
? ? ? ? <td>222</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>333</td>
? ? ? ? <td>444</td>
? ? ? </tr>
? ? </table>
? </body>
</html>
==========================================test.css==========================================
/* 標簽選擇器，選擇整個頁面所有a標簽，謹慎使用 */
a {
? color: red;
}
/* 類選擇器，class包含index即可，最常用 */
.index {
? color: blue;
}
/* id選擇器，id為index，盡量不要用這種方式 */
/* #index {
?
} */
/* 偽類選擇器，class包含index且處于hover狀態(tài) */
.index:hover {
? color: pink;
}
/* 并集選擇器，class包含div1或div2 */
.div1, .div2 {
? background-color: gray;
}
/* 交集選擇器，class同時包含div1和div2 */
.div1.div2 {
? background: gray;
}
/* class包含index的a標簽 */
a.index {
? border: 1px solid;
}
/* 后代元素選擇器，ul標簽內(nèi)的所有l(wèi)i標簽 */
ul li {
? font-size: 20px;
}
