一、选择器
1.标签名选择器
div{
border: 5px blue dotted;
color: aquamarine;
font-size: 20px;
}
<body>
<div id="div001">div标签1</div>
<div id="002">div标签2</div>
</body>
//只写出了重点部分2.id选择器
#div001{
color: aquamarine;
font-size: 20px;
}
<body>
<div id="div001">div标签1</div>
<div id="002">div标签2</div>
</body>
//只写了重点部分3.类选择器
.class03{
color: blanchedalmond;
font-size: 30px;
border:1px solid yellow;
}
<body>
<div id="div001">div标签1</div>
<div id="002">div标签2</div>
<div class="class03">div标签3</div>
</body>
//只写了重点部分4.组合选择器
组合选择器可以让多个选择器共用同一个css样式代码
.class03,#div001{
color: blanchedalmond;
font-size: 30px;
border:1px solid yellow;
}
<body>
<div id="div001">div标签1</div>
<div id="div002">div标签2</div>
<div class="class03">div标签3</div>
</body>
//只写了重点部分二、css常用样式介绍
<head>
<meta charset="utf-8">
<title>css常用样式</title>
<style type="text/css">
div{
color: red;
border: 1px solid yellow;
width: 300px;
height: 300px;
background-color: antiquewhite;
font-size: 30px;
margin-left: auto; //div居中
/* margin-right: auto; */ //div居中
text-align: center; //div中文字进行居中
}
.a01{
text-decoration: none;
}
table{
border: 1px solid black; //设置边框
/* border-collapse:collapse; //将边框进行合并 */
border-collapse:collapse; //不起效果
}
td,th{
border: 1px solid black ;
}
#ul01{
list-style: none;
}
</style>
</head>
<body>
<div>我是div标签</div>
<a href="http://baidu.com">百度</a><br />
<a href="http://baidu.com" class="a01">百度</a>
<hr />
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<ul>
<li>你的名字</li>
<li>我的世界</li>
</ul>
<ul id="ul01">
<li>你的名字</li>
<li>我的世界</li>
</ul>
</body>运行结果
