第十章：高级Web建设-----div与span

利用<div>元素将页面划分为逻辑区（块级元素）

<div id=cats>
  <h2>balabala</h2>
  <p>balabalacats cats cats</p>
</div>

<div id=dogs>
  <h2>balabala</h2>
  <p>balabaladogsdogs dogs dogs</p>
</div>

这样就划分了两个逻辑区 cats和dogs.

在css中怎么写呢？

#cats{
       color:red;
}
#dogs{
       color:black;
}

当然，一个元素只有一个id，同时可以属于一个或者多个类。

如果只想要<div id=dogs>的<p>的颜色变为绿色，怎么办呢？用到子孙选择的方法。

#dogs p {color : green ;}

这样就将dogs逻辑区的所有<p>颜色变了，不论<p>嵌套的多深。

有没有一种方法选择直接的孩子？

如果dogs的p中嵌套了很多元素，比如p,h1,h2...那么只想要dogs的直接孩子p变色，其他不用变，怎么办呢？

#dogs>p {color:red;}

如果我需要更复杂的选择呢？比如要选择一个<h2>，要求他是一个<blockquote>的孩子，而且<blockquote>在elixirs中，可以做到吗？

当然可以！这样：

#elixirs blockquote h2{
         color:blue;
}

<span></span>将一行分为不同样式（行级元素）

这个元素类似于<div>，<div>是块级元素，包含段落，标题，列表等很多元素，页面效果上会自动换行

而<span>将一行内划分为好几个区域，以便显示不同的效果。<span>会显示在同行。

<ul>
<li>zhang,a girl</li>
<li>gao,a boy</li>
</ul>

这是一个列表，如果想要‘zhang’和‘gao’用斜体显示，‘a girl’和‘a boy’用粗体显示，怎么办呢？

<ul>
<li><span class="people">zhang</span>,<span class="sex">a girl</span></li>
<li><span class="people">gao</span>,<span class="sex">a boy</span></li>
</ul>

然后css中这样：

.people{
        font-style:italic; 
}
.sex{
        font-weight:bold;
}

width属性只指定内容区的宽度

块元素text-align来对齐之中包含的文本

center-------文本居中                  left------------左对齐                    right----------右对齐

h1{
        text-align:center;
}
h2{
        text-align:left;
}
h3{
        text-align:right;
}

                                                这是h1

这是h2                                                        

                                                                                                                                       这是h3

要注意，text-align属性只能在块元素上使用，如果直接在内联元素（如<img>上使用则不起作用）

<a>元素与它的多重人格

一个链接可能有多个状态：未访问link，已访问visited，悬停状态hover（还有其他状态focus和active）

那么怎么才能让不同状态下显示的效果不同呢？这里用到了伪类！

看看如何对链接指定样式：

a:link {color:green;}
a:visited {color:red;}
a:hover {color:yellow;}

说说伪类吧：

它像一个类，却不是真正的类。你可以对伪类指定样式，但是没有人在HTML中真正输入这些类。像上边的link伪类，visited伪类，hover伪类，你就直接在css这样写了，那你在html中写过类似class="..."的东西吗？并没有！

浏览器怎么知道你的链接是访问过还是没访问过，还是其他状态呢？

浏览器会仔细检查所有的<a>元素，把他们增加到正确的伪类当中，如果访问过，就把他放到visited伪类中。。。。。浏览器会在后台向这些类增加和删除元素，这些类也确实存在。

怎么运用伪类呢？假如一个<a>元素嵌套在id为elixirs中,则我们给他指定样式：

#elixirs a:link{
  color:#007e7e;
}
#elixirs a:visited{
  color:#333333;
}
#elixirs a:hover{
  background:#f88396;
  color:#od5353;
}