chapter10: div和span

[zilongxuan001]

主要内容

• <div>
• <span>
• 指定属性的捷径
• 伪类（psedo-classes）

[zilongxuan001]

div和逻辑区

什么是div? 什么是逻辑区？ 如何将一个页面划分为逻辑区？

div定义

<div>是块元素，用于划分逻辑区。

<div>不仅是逻辑容器还是图形容器。

逻辑区

就是相互之间关系比较亲密的几个元素。

如何将页面划分为逻辑区

1.找出主要逻辑区

用方框将HTML文档的每个元素覆盖，标上元素名称。 根据内容，用大括号把主要相关元素标出，这就是主要内容区。

比如下图有两个内容区：“猫猫区”和“狗狗区”。

2. 用div标记逻辑区 在属于一个逻辑区的周围放置<div>开始标记和技术标记。

3.标出<div>标签 用id属性为<div>提供一个唯一的标签。

比如猫猫区设置id为cats，狗狗区设置id为dogs。

4. 增加样式

   对<div>中包含的一组元素制定样式。 比如说增加背景图片。

5. 展现更多结构

为其他元素使用div标签。 （1） 可以看出底层逻辑解耦股，利于页面维护。 （2） 有需要时，便于增加样式。 （3）重新审视页面设计，是否有冗余元素。

6.在结构上增加结构

在逻辑区上增加逻辑区，就是嵌套，比如说，将"猫猫区"和"狗狗区“嵌套到“宠物区”。

来源：《Head First HTML 与 CSS》(中文第二版)P417-421

[zilongxuan001]

元素的宽度和高度

元素的宽度怎么计算？ 指定元素宽度的方法有哪些？ 元素的默认高度是什么？ 宽度和高度的适用范围是什么？ 内联元素能设置宽度和高度等之类的属性吗？

元素的宽度

元素的宽度由左外边距宽度、左边框宽度、左内边距宽度、内容区宽度、右内边距宽度、右边框宽度、右外边距宽度组成。

一个块元素的默认宽度是“auto”，可以延伸占满可用的空间。

指定元素宽度的方法

可以用像素和百分数制定宽度。

元素默认高度

元素默认高度和宽度是auto

宽度和高度的适用范围

height和width既可以设置图片的高度和宽度，也可以设置段落的高度和宽度。

内联元素的宽度和高度属性

内联元素可以设置宽度，不过设置后效果不明显。

内联元素可以设置外边距、内边距和边框。

内联元素四周设置外边距后，只有左右边会增加空间。

内联元素的上边和下边增加的内边距会和其他内联元素重叠。

图像的宽度、内比距和外边距比较像块元素。

来源：《Head First HTML 与 CSS》(中文第二版) 429-430 w3school，CSS height 属性

[zilongxuan001]

text-align

text-align可以对图像对齐吗？ text-align对块元素和内联元素都起作用吗？ text-align为什么可以对嵌套元素中的文本进行对齐？

text-align和图像对齐

text-align可以让图像对齐。

text-align和块元素、内联元素

text-align在块元素上设置，可以将块元素的内联元素对齐。

text-align和嵌套元素

嵌套元素可以继承父元素的属性，所以text-align可以对嵌套中的元素对齐。

来源：《Head First HTML 与 CSS》(中文第二版)P432

[zilongxuan001]

子孙选择器

什么是子孙选择器？ 子孙选择器的形式举例？ 哪种形式可以选择所有嵌套的元素？ 哪种形式只能选择直接下面的子元素？ 哪种形式可以选孙元素？

子孙选择器

子孙选择器就是选择子元素或者孙元素的选择器。

子孙选择器形式

父元素名称 子元素名称{
          属性: 值；
}

这个表示是选择<div>下所有<h2>元素，包括嵌套的<h2>元素。

父元素类名 子元素名称{
        属性:  值；
}

父元素id名 子元素名称{
         属性: 值；
}

选择所有的嵌套元素

上面的形式就是选择所有的嵌套元素

只能选择直接下面的元素

加个大于号>

父元素名称>子元素名称{
          属性: 值；
}

这个表示是选择<div>下的<h2>元素，不包括嵌套的<h2>元素。

父元素类名>子元素名称{
        属性:  值；
}

父元素id名>子元素名称{
         属性: 值；
}

选孙元素

不断的加子孙选择器，中间要有空格。

来源：《Head First HTML 与 CSS》(中文第二版)P437-438

[zilongxuan001]

span

span可以做什么？ 为什么要用<span>，而不用<em>或<strong>

span的作用

<span>，一个内联元素，用于分区。且分区后在浏览器显示时不会换行。

<span>可以创建内联元素和元素的逻辑分组。

为什么用span

span用于表现形式，而em或strong是用于表现结构， em用于强调某些文字 strong用于强调一个重点。

来源：《Head First HTML 与 CSS》(中文第二版)P447，P450

[zilongxuan001]

伪类

什么叫未访问的链接？未访问的链接是什么颜色？ 什么叫已访问的链接？已访问的链接是什么颜色？ 什么叫悬停？ 悬停会有什么效果？ 什么是焦点状态？ 什么是活动状态？ 如何根据元素的状态指定链接样式，即语法是什么样的？ 如何让元素的链接状态不变？ 如何让链接处于同时处于多种状态？ 什么叫伪类？ 除了链接，还有那些伪类？

未访问的链接

未访问的链接，就是一次都没有点开过的链接。 默认链接颜色是蓝色。

已访问的链接

已访问过的链接，就是已经点击过的链接。 默认链接颜色是紫色。

悬停

悬停就是你把鼠标放到链接上，不点击。悬停时会显示<a>的title内容。

焦点

就是通过tab键，在浏览器页面上移动到链接上时的状态。

活动

用户第一次单击一个链接时，就处于活动（active）状态。 就是'active'时的状态。

根据元素状态指定链接样式

未访问的链接

a: link { 属性: 值;}

已访问的链接

a: visited{属性: 值;}

悬停

a:hover {属性: 值；}

焦点

a:focus {属性: 值；}

活动

a:active {属性: 值；}

让元素链接状态不变

a {属性: 值；}

如何让链接的下划线消失

a: link{
      text-decoration: none;
}

a: visited{
      text-decoration: none;
}

如何让链接的下划线变成其样式

a: link{
      text-decoration: none;
      border-bottom: thin dotted #b76666;      
}

a: visited{
      text-decoration: none;
      border-bottom: thin dotted #b76666;      
}

让链接处于同时处于多种状态

按照 未访问的链接→已访问的链接→悬停→焦点→活动 即link→visited→hover→focus→active。

伪类

伪类就是看着像类，但是在HTML页面中找不到类的名称。 比如a: link中的link，a:hover中的hover

伪类的种类

1.链接状态

2. child

first-child对应元素的第一个子元素 last-child对应元素的最后一个段落。

比如

元素名称:firstchild {属性: 值;}

来源：《Head First HTML 与 CSS》(中文第二版)452-454

[zilongxuan001]

层叠

浏览器确定元素样式的优先顺序？ 如何确定一个元素属性的样式？ 如何计算特定性？ 那个词可以覆盖作者样式？ 为什么叫层叠？

浏览器确定元素样式的优先顺序

优先顺序： 作者样式→读者样式→浏览器默认样式

确定元素的属性

“扮演浏览器”游戏

（1）收集所有样式表

收集作者写的样式表，读者增加的样式表，浏览器的默认样式。

（2）找到所有匹配的声明

找到样式表里所有关于该元素的属性声明。

（3）现在对所有匹配对规则排序

作者规则>读者规则>浏览器规则

（4）按特定性对所有声明排序

按照下面的计算特定性的秘诀计算特定性。

（5）对冲突的规则，按照在样式表中出现的顺序进行排序

各样式表中后面的规则更重要。

计算特定性的秘诀

默认为000，id特定性在百位；类的特性在十位；元素的特性在个位。 如果有一个id特定性，就在百位加一； 如果有一个类特定性，就在十位加一； 如果有一个元素特定性，就在个位加一；

覆盖作者特定的词

important!

层叠原因

"层叠"这个名字，来自多个样式表都层叠在页面上，对各个元素会应用最特定的样式。

来源：《Head First HTML 与 CSS》(中文第二版)457，457-459，464