一、选择器
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>
运行结果