<div style="">hello</div><!-- 在boby里面 内联样式 优点:控制精确; 缺点:代码重用性差,看起来会特别乱 -->
<style sype="test/css"></style><!-- 在head里面 内嵌样式 优点:代码重用性好 控制不精确 -->
<link href="练习.css" rel="stylesheet" type="text/css" /><!-- 在head里面 外部样式 优点:代码重用性最好; 控制性最不精确 -->
优先级: 内联最高 内嵌的其次 外部和内嵌一样
<style type="text/css"> /*内嵌的*/ /*注释*/
*{color:#...} *选择器
#d1{color:#...}
<div id="d1">id选择器</div> id选择器
.c1{color:#093}
<div class="c1">class选择器</div> class选择器
span{color:...}
<span>标签选择器</span> 标签选择器
<div id="m1">
<div>选择子集<div>
<div>选择子集</div> #m1 div{color:...}
<div>
<span>标签选择</span> div,span{color:...}
<div>标签选择</div>
<span class="c1">只查找div</span> div.c1{color:...}
<div class="c1">只查找div</div>
<div class="c1">只查找div</div>
<ul id="d1">
<li>序列选择</li> #d1 li{color:...}
<li>序列选择</li>
</ul>
</style>
选择器优先级:
标签选择器>*(所有)
class选择器 > 标签选择器
id选择器 > class选择器