div与span元素

一、div元素

• 把相关的元素归为一组，放在div元素中，这样有助于清晰识别页面结构。可以把共同样式的元素放在一个div元素中。
  例子:

<div id="jiajulei">
     <div id="shafa">
     <p>......</p>
     </div>
</div>

• width属性
  width属性只指定了内容的宽度
  盒子的宽度=内容的宽度+左右内边距+左右外边距+左右边框宽度。
• text-align属性用于块元素中的所有内容对齐,只能在块元素上使用，在内联元素上使用无作用。

text-align: center；  /*居中*/
text-align: left;    /*左对齐*/
text-align: right;   /*右对齐*/

• 子孙选择器
  用于选择嵌套在元素中元素。可以选择子元素，也可以选择孙子元素。

<div id="elixirs">
    <h2>Weekly Elixir Specials</h2>
    <p>
      ![](images/yellow.gif)
    </p>
    <h3>Lemon Breeze</h3>
    <p>
      The ultimate healthy drink, this elixir combines
      herbal botanicals, minerals, and vitamins with
      a twist of lemon into a smooth citrus wonder
      that will keep your immune system going all
      day and all night.
    </p>

上面元素中，选择h2元素则为：

div h2{
color: black;
}
/*因div有id属性，则表达为*/
#elixirs h2{
color: black;
}

二、span元素

• div用于块级元素的逻辑划分，span用于内联元素的逻辑划分。
  例子：

/*为相同的类创建span class属性*/   
 <ul>
      <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
      <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
      <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
      <li><span class="cd">Le Roi Est Mort, Vive Le Roi!</span>, <span class="artist">Enigma</span></li>
      <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
    </ul>

为span元素指定样式：

.cd{
font-style: italic;       /*cd类设置为斜体*/
}
.artist{
font-weight: bold;        /*artist类设置为粗体*/
}

显示效果
三、 根据<a>元素状态指定样式

a:link{                  /*未访问过状态的链接显示为绿色*/
color: green;
}
a:visited{               /*访问过状态的链接显示为红色*/
color: red;
}
a:hover{                 /*鼠标悬停在链接上显示为黄色*/
color: yellow;
}