<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选择器