【web开发】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状态 */
.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标签内的所有li标签 */
ul li {
font-size: 20px;
}
