《Head First HTML与CSS》笔记——10 div与span

前言

这一章我们学习两个新的HTML元素：<div>和<span>。它们在HTML是举足轻重的钢铁支架，一旦有了这些架构，就能用各种新颖、强大的方式为它们增加样式。

<div> 元素

<div> 将页面划分为逻辑区或逻辑分组

目标

本次的目标是调整饮料内容的样式，使它们看起来像宣传页：

我们通过以下四步实现：

1. 首先，把这些内容用<div>元素包围：
   
2. 增加边框
   在CSS中增加一个新规则：使用id选择这个<div>元素：
   
3. 继续增加样式
   
4. 调整文本行高和标题颜色
   
   
   

用简写指定属性

• 简写并非必要
• 简写时，最好有一个参考手册

<span>元素

<div>允许你为块级内容创建逻辑划分，<span>元素则采用类似的方式建立内联内容的逻辑分组。

练习

目标：
我们可以通过以下三步实现：

1. 将CD和艺术家嵌在单独的<span>元素中
2. 将一个<span>增加到"cd"类，另一个增加到“artist”类。
   
3. 指定<span>的样式
   

• 如果要强调某些文字，可以用<em>。如果想强调一个重点，可以用<strong>。
• 如果想要的只是改变某些文字的样式，就应该使用<span>，并把<span>元素放在适当的类中，对它们分组并指定样式。

伪类

一个链接可以有多种状态：未访问、已访问、处于悬停状态等等。这些状态可以用一个伪类来区分：

• a:link、a:visited、a:hover这些在HTML并不存在，但允许你指定样式，这就是伪类。
• 浏览器会仔细检查所有<a>元素，把它们增加到正确的伪类中。如果一个链接已经访问过，它会放在visited伪类中。如果用户把鼠标悬停在一个链接上，浏览器会把这个链接放在hover伪类中。
• 伪类不只能处理链接，还可以处理其他元素。例如：伪类first-child对应元素的第一个子元素，如<blockquote>中的第一个段落。甚至可以用：last-cchild伪类选择<blockquote>的最后一个段落。

改变lounge.css

层叠

浏览器如何选择样式表

实际上，用户在访问你的页面时选择样式的方式是这样的：

层叠

下面我们以<h1>元素为例，来看一下浏览器如何获取这个元素的font-size属性：

计算特定性

练习层叠

假设浏览器想知道<h1>元素的color属性：

小结