原课程在这里:https://www.icourse163.org/learn/BJFU-1003382003?tid=1003609002#/learn/announce
标签选择器
<style type="text/css">
body{background-color:#fff;
text-align:center;
font-size:12px;}
h1{font:"黑体";font-size:20px;}
p{color:red;font-size:16px;}
hr{width:200px;}
</style>
--------------------------------------
<body>
<h1>标题</h1>
<hr>
<p>正文的段落</p>
版权所有
</body>
类别选择器
<style type="text/css">
p {font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px;}
</style>
----------------------------
<body>
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="two">类别2</p>
<p class="two">类别2</p>
<p>普通段落中的文字</p>
</body>
ID选择器
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
---------------------------
<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>
嵌套声明
<style type="text/css">
p span{
color:red;
}
</style>
<body>
<p><span>固态硬盘</span>具有传统机械硬盘不具备的快速读写、质量轻、能耗低以及体积小等特点,同时其劣势也较为明显。</p>
</body>
集体声明
<style type="text/css">
h1,p{text-align:center;}
</style>
------------------------------
<body>
<h1>web前端开发</h1>
<p>web前端开发</p>
</body>
全局声明
<style type="text/css">
*{text-align:center;}
</style>
---------------------------
<body>
<h1>web前端开发</h1>
<p>web前端开发</p>
<h2>web前端开发</h2>
</body>
混合
多个class选择器混用,用空格分开
<div class="one yellow left">......</div>
id和class混用
<div id="my" class="one yellow left">...</div>
id选择器不可以多个同时使用