（4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类

1.每个font-family包含一组共同特征的字体。共五个字体系列：

sans-serif----这个系列包括了没有衬线的字体，与serif相比，通常认为这个系列更容易在计算机上识读。

serif-----------这个系列包括有衬线的字体，很像新闻报纸的文字排版。

monospace-这个系列的字体包含固定宽度的字符（即每个字母在水平方向所占的宽度都是相同的），主要用于显示软件代码示例。（代码很重视对齐、缩进，所以对宽度要求高）

cursive-------这个系列的字体包含看似手写的字体，有时会在标题中使用。

fantasy-------这个系列的字体包含有某种风格的装饰性字体。

其中sans-serif和serif是通用字体，每次定义font-family时，最后一个候选字体都要写上这两者。

 

2.如何为页面增加Web字体

  1.找到一个字体（我用的是有字库）。

  2.确保浏览器支持所需字体的格式——注意，是格式，有.ttf/.otf/.eot/svg/.woff，常用大多数现代浏览器都支持.woff。

  3.把字体放在web上，详见《Head First HTML与CSS》的CSS属性的4.

 

3.指定字体大小

具体的方法有几种，详见：《Head First HTML与CSS》的CSS属性的4.

em和百分数在指定字体大小的作用中是一样的，可以互换使用；这两种都是相对于父辈元素的字体大小定义的。

一般来说，每个浏览器的默认字体大小都不一样——一般<h1>都是默认体文本字体大小的200%,<h2>是150%,<h3>是120%,<h4>是100%（即和默认字体一样大）,<h5>是90%，<h6>是60%。

如果在body中用百分数或者em，则其相对的字体是默认字体。

 

4.字体的斜体和倾斜。

不是所有字体都支持斜体风格，所以很可能你用italic（斜体），但实际上得到的是oblique（倾斜）文本——italic是经过专门设计的相应倾斜字体，而oblique仅仅是浏览器将正常文字倾斜而成。

 除非确实得区分这两种，否则完全可以任选一种（在无法控制用户使用的字体和浏览器情况下，无论你指定什么风格，结果都是不确定的）。确实很重要的话，就必须写清楚其值到底是哪个了。

相关的用法详见：《Head First HTML与CSS》的CSS属性的4.

 

5.Web颜色

Web颜色是按构成颜色的红、绿、蓝三个分量所占数来指定的，这三种颜色的值范围是0%~100%；

所有颜色都是基于上面三种色混合成的，比如100%红色+100%绿色+100%蓝色=白色————将这三种颜色等量混合，低于100%时，会慢慢变成灰色，直到最后0%时变成黑色；

十六进制码是指定Web色最常用的方法，详见：《Head First HTML与CSS》的CSS属性的2.

 

6.color属性为什么不叫text-color？

color属性实际上控制的是元素的前景色，所以她会控制文本和边框颜色，不过你也可以用border-color属性为边框指定颜色。

 

7.有下划线的文档通常会被用户误以为是链接文本，所以要慎用这个属性。

 

盒模型

1.盒模型指所有的元素标签都是一个盒子，其由内容区、内边距、边框、外边距组成；

内边距是可选的，不一定有；内边距是透明的，没有颜色也没有装饰；

边框可以有不同的宽度、颜色和样式；

外边距也是可选的，不一定有；利用外边距可以在同一个页面上的不同元素之间增加空间；外边距是透明的，也没有颜色和装饰；

外边距和内边距都可以通过CSS控制任意一边的的宽度——边框没有这种功能，上下左右只能是一样的宽度。

 

2.盒子能做的设置：

指定是否有内边距或外边距或边框，也可以都有；

边框有八种不同的样式，比如虚线、实线、圆角等；当然也可以设置边框的颜色；

外边距和内边距都可以独立地指定四边的外边距；

内容区也可以用多种方法控制宽度和高度；

 

3.外边距提供元素之间的间距，内边距是在内容周围增加额外的空间；

外边距和内边距相互之间没有依赖关系，所以可以有一个没另一个；

不能对外边距和内边距指定颜色，也不能加任何装饰——但由于她们是透明的，所以会呈现背景颜色或背景图像；

内边距和外边距还有一个区别：元素的背景颜色、背景图像会延伸到内边距下，但不会延伸到外边距。

 

4.一个使用了内外边距的实例，见《Head First HTML与CSS》的CSS属性的5.

 

5.内边距用来在内容区周围创建可见的空间；

边框提供了从视觉上分离内容的一种手段；

外边距允许在元素和其他元素之间增加空间；

 

 

div、span、伪类（pseudo-classes）

 

div

1.div=division=划分。

为什么会有div呢？以下是自己的解释：

一些思想的重复是很好的，<div>就是这样。正常来说，想到的是<p><h1>这种标签就足够把页面结构分层了，但是实际上分层之上还可以有分层！

当然也不是都可以这样想，为何这个可以?因为<p>等的分层说到底只是针对表达的内容，对于表达的内容的分类上就无能为力了！比如，动物园和咖啡厅是分类，动物园下的熊猫、狮子；咖啡厅下的咖啡、套餐就是表达的内容！div就是区分动物园和咖啡厅，<p>等则是区分熊猫狮子。 

书上的解释是:  1.想进一步展现页面的底层逻辑结构，这可以帮助别人理解你的页面，还有助于这些页面的维护。

                         2.需要一种结构，以便为某个逻辑区应用样式（即可以用div元素将需要共同样式的元素归组在一起）。

所以有了div，她允许你将页面划分为逻辑区或逻辑分组，用于“在结构上增加结构”（这里主要是指div下还有div）

这也是我们把div描述为容器的原因。她们不仅相当于逻辑容器，可以用来将一堆相关的元素放在一起；还可以对div指定样式和定位，这时候就变成了图形容器。

但是要注意，只有确实有实际作用才用div增加结构，不要为了加结构而加结构，要在保证任务的前提下让结构尽可能简单——这需要实际项目的磨练来锻炼相关的直觉。          

 这里要重点理解什么是“实际作用”：也许你会觉得很简单，比如想到动物园，你就觉得可以分成老虎、狮子、猫、狗......再仔细想一想，为什么不分为猫科类（这样猫和狮子就划在一个分区了！）、犬类......再仔细想一想，为什么不分为大型猫科动物、小型猫科动物.....你会发现，划分是一种很多方式的东西，看待的角度不同，可以有很多很多种划分！对于一个实际的问题，从哪个角度看好呢？目前我没什么经验，我的看法是从需求入手。比如，这个页面经常要对一些特殊的区域进行页面样式的修改，那么我就把那些样式需要始终一样的部分划为一个逻辑分区，而不是去想哪些东西是一类的，哪些不是一类的——所以说需要实际项目来磨练！这个坑在有一些实践经验后回来补充例子！

2.注意，看div的样式可不是通过里面的某个元素看，而是要从div标签上看。

 

3.在《Head First HTML与CSS》的CSS属性的7里我提到“而浅绿色背景框里并没有设定，这就导致了绿色背景框的内容区实际上是默认按照浏览器的大小来改动的，只是在按照浏览器的大小上确保设置的外边距、内边距等内容是自己所设的值而已，而恰好这些值都是建立在内容区上的，所以内容区按浏览器大小变化，间接的就导致了整体的效果也按浏览器大小变化了。”

这里面的“默认按照浏览器大小来改动”的意思在书中略有提及，原文：

如果没用设置一个元素的宽度，从哪里得到它的宽度呢？

一个块元素的默认宽度是“auto”，这说明她会延伸占满可用的空间。考虑我们之前构建的Web页面，每个块元素都可以延伸占满浏览器的整个宽度，这正是“auto”在起作用。....auto允许内容填满可用的所有空间（考虑内边距、边框、外边距之后）........一个元素的高度是默认的，额就是auto，浏览器在垂直方向上会延伸内容区，使其所有内容都可见......可以显示地设置一个高度，不过这会有风险，如果你指定的高度不够大，不足以放下内容，内容底部（注意，这里强调是底部）有可能“溢出”到其她元素中。一般地，不用指定元素的高度，就让它们默认为auto。

 

span

1.其实和div差不多，只不过div是划分块元素的逻辑分组，span是划分内联元素的逻辑分组。

所以，没啥好记的，就这样。

 

<a>元素的链接色

1.推荐的a的CSS样式设置顺序是：link、visited、hover、focus、active。

下面用一个例子来说明这样写的效果：

CSS：

 

a:link{
  color: green;
}
a:visited{
  color: red;
}
a:hover{
  color: yellow;
}
a:focus{
  color: blueviolet;
}
a:active{
  color: blue;
}

 效果：

没点击时

 

悬停时

 （黄色真是不友好.....）

第一次单击的瞬间

 

点击一次后返回原页面

 

点击一次后悬停

 发现颜色并没有变化了——不再是悬停的黄色样式了。这里不放图，因为我发现了一个问题：过了一会，悬停的颜色又可以变成黄色了.....我在想估计是浏览器渲染慢之类的问题造成的延迟。

第二次单击的瞬间

在这里要注意：上面图的操作只针对第一个链接。

还有一些图我不贴了，你可以自己试试：

为什么我会用了两个链接呢？因为我发现，只要链接点击过一次后，不管你刷新还是关闭页面重开，其颜色都是a:visited的样式色——这说明，“已访问状态”是无法通过刷新页面或者关闭页面重开来使其变成“未访问状态”的！我猜测这是因为“浏览器的浏览记录”还在的原因。经过测试，我在把浏览器的浏览记录清除后就正常了，即进入页面后的颜色是绿色。这一段的内容可以自己实验，我就不贴图了，贴太多图麻烦。（从这段可以看出，visited和link判断的基础不是“点击”而是浏览器记录！其它三个判断的基础才是“点击”）

根据上面的实验和一些思考，就可以知道为什么推荐的CSS设置顺序是：link、visited、hover、focus、active了，我来解释一番（加粗是思考过程，嫌长的直接看后面的非加粗部分的总结）：

前面我说过，link、visited和hover、focus、active的判断基础不一样，所以我们要分两类来看：

第一类：以浏览器记录为判断基础的，也就是link和visited。

第二类：以点击为判断基础的，也就是hover、focus、active。

如果，你希望不管什么时候，只要是浏览过了的，什么情况下都是一种颜色，那么你就要按这个顺序写：第二类、第一类——因为后面会覆盖前面。由于后面是第一类，只要你浏览过了，不管是悬停、焦点还是活动都会被覆盖掉。

如果，你希望区分所有状态，那么就必须按这个顺序写：第一类、第二类——和上面一样的原理，可以自己思考下。

在上面两者情况的基础上，你要继续考虑每个类里面具体的数据。

第一类好考虑，就两种。且浏览记录要么有要么没有，所以不管是link、visited还是visited、link，其实都一样，没有谁覆盖谁一说——因为可以认为状态是不可逆的（清除浏览器记录=重新判断≠状态可逆）。

第二类麻烦一点，有三种。首先，我们发现active是一定会触发hover的（你不悬浮怎么点击....），这意味着要想active有作用，就必须让他在hover的后面，即hover、active；这时候focus就有三个位置可以放1.hober前面或者后面2.active后面。要看你想实现什么效果了，如果你想焦点优先级最大，那就放active后面，其它同理.....

上面关于第二类的讨论是我一开始的想法，但是我错了。

查阅了一些资料，受官方关于伪类顺序是link、visited、hover、active。但visited、link、hover、active的顺序是否也可以呢？中小火柴和陈晟的启发，因为这样想才对：

首先明确，“这是一个交互过程”，那么就要从交互这个需求上考虑——即主要目地是让用户在使用时能区分出自己对这个链接做过什么以及正在做什么。在我看来，之所以区分link、visited、hover、focus、active是因为用户在使用时也需要区分这五种状态。

那么上面的分类还是有用的，为了让用户自己知道有没有看过这个链接，就要有基于浏览器记录判断的状态，也就是第一类状态。

为了让用户知道自己有没有在试图点击一个链接要有hover状态；为了让用户知道自己的tab选择的是哪个标签要有focus状态；为了让用户知道自己有没有点到链接要有一个active状态。

基于以上的内容，我们可以发现：

如果我没有进行第二类的操作，那么就只能是处于第一类的情况下了，这时候第一类和第二类哪个先没影响：

  1.CSS顺序是第一类、第二类时，由于没有第二类的操作，即使第二类优先级最高，也没法覆盖第一类的样式；

  2.CSS顺序是第二类、第一类时，本身第一类优先级就是最高，肯定也没问题。

由于不可能没有第一类的操作，所以就不讨论这个了。

有第二类操作的时候，第一类和第二类哪个先就有影响了：

  1.CSS顺序是第一类、第二类时。此时不管是看过链接还是没看过链接，都可以在第二类情况出现时改变样式——因为第二类优先级最高。

  2.CSS顺序是第二类、第一类时。此时不管处于第二类中的哪一个状态，都必定被第一类的样式覆盖——因为链接肯定是看过或者没看过中的一种，这时候不管用户处于第二类的哪种情况都无法看到交互引起的改变。

综上所述，必须顺序是第一类、第二类。

第一类中具体的顺序，之前想的没错，即浏览记录要么有要么没有，所以不管是link、visited还是visited、link，其实都一样，没有谁覆盖谁一说——因为可以认为状态是不可逆的（清除浏览器记录=重新判断≠状态可逆）。

最后看第二类中具体的顺序。

 用户在实际交互中，需要：

区分是悬停还是点击（也就是我有没有点到链接——其实我觉得这就是一瞬间的事情，谁会在意.....）：所以我们要做到用户悬停时是黄色，点击时是蓝色——此时点击优先级要高于悬停，如果是悬停优先于点击，就会造成点击时还是黄色，因为必定是悬停的情况下才能点击。由此我们有顺序：hover、active。

区分焦点目标是哪一个：所以我们要做到焦点目标变成紫色——光从这看，看不出来优先级，因为焦点目标是靠键盘选择，不是靠鼠标.....呵呵，搞了半天分类有问题！应该把焦点单独分一类，因为焦点是靠键盘确定的！

所以重新来把...

分三类，第一类靠浏览记录判断的link、visited；第二类靠鼠标行为判断的hover（悬停）、active（点击）；第三类靠按键选择的位置判断的focus（焦点）。

由于我们要让用户清楚的知道在交互过程中自己处于哪一类，所以第一类是必须放在开始的——如果第一类放在后面，其优先级则是最高的，而浏览记录只要用户不进行数据清理是不会改变的（相对于第二类和第三类，用户可以轻易的决定是否是这两类状态，比如移开鼠标，不用按键选择等），这样就会造成不管用户在不在第二类、第三类状态，链接的样式都会是第一类的样式。所以，第一类必须放在最开始的位置；

又因为第一类中的link、visited是靠浏览器记录判断的，所以谁先谁后都可以，不存在覆盖一说——浏览器记录要么有，要么没有，不存在两者皆true的情况。

现在来考虑第二类和第三类。我们先这样想：用户用焦点选择链接，还会用鼠标去点么？既然是用键盘选择链接了，那么顺手用enter键就可以进入链接了，基本上不会再用鼠标去点了，用户是很懒的。还有一种可能，也许用户的鼠标放在某个链接上，而用户刚好就要进入这个链接且是用键盘在选择，这时候focus的样式就必须优先于hover，不然用户就不知道焦点在哪个链接上，从这里看，为了满足上述两种正常的情况，都必须是hover、focus这样的顺序。

可能会奇怪，为什么是单独拿出hover来考虑，active呢？这时候这个分类又有问题了，因为实际上hover、active虽然都是鼠标行为判断，但是还是有不同的，hover是悬停，active是点击没松开的时候，因为焦点状态只能与悬停共存，不能与active共存（当你进去active状态，焦点状态实际上是没了，反而变成了悬停和active共存了），基于以上讨论，你会发现，active状态主要是用来区分悬停的，也就是说，用户主要是要区分自己是没点链接（悬停）还是点了链接松开就要进入新页面了（active）。

也就是说，active必须优先级高于hover，否则无法区分这两个状态（active结束后没有悬停，已经进入下个页面了，所以不需要区分是否从active进入hover状态！）。

基于以上讨论，我们有了顺序link、visited、hover，现在要考虑的就只剩下active和focus哪个优先于哪个了。这两个就简单了，要想区分焦点和是否点击，肯定是要点击优于焦点，即focus、active的顺序，否则用户无法知道自己有没有点击这个链接——如果是焦点优先级高于点击，那么点击的时候还是焦点的样式，用户没办法知道自己有没有点击这个链接。

还剩最后一个问题——为什么是link、visited，而不是visited、link？

试想一下，如果你看某个网页看了一半，有事出去，过一会来看时，你会希望从之前停止的地方开始看，尤其是刚好看到某个链接处的时候。这时候，你重新回到网页，你可能就忘记自己看到哪个链接了，这时候就需要区分哪些是看过的，哪些没看过，也就是区分link、visited。从这个角度看怎么写都可以区分......所以我觉得这可能就是一种约定俗成吧.....也有可能是什么用户交互的原则在里面，以后知道了再回来填坑，先当作是一种习惯吧。

最后总结，顺序就是link、visited、hover、focus、active，正好和推荐的顺序一样。

以上思考，受到了官方关于伪类顺序是link、visited、hover、active。但visited、link、hover、active的顺序是否也可以呢？中小火柴和陈晟的启发。

 

伪类

1.上面讨论a元素链接色中其实用到了伪类。

 

2.Pseudo（伪）加上class，中文称伪类。

 

3.

问：既然它（a：link、a：hover等）表现得像一个类，又为什么叫伪类？

答：不管怎么样，a：link这种选择器都允许你指定样式，就好像她们都是类一样，但是没人能在HTML中真正输入这些类（类选择器是可以在HTML中找到这个类的，比如某个标签属于这个类，且在标签里有清楚地写出这个类名）。

问：那么究竟是怎么工作的？

答：这要归功于你的浏览器。浏览器会仔细检查所有a元素，把它们增加到正确的伪类中。如果一个链接已经访问过，没问题，它会放在：visited伪类里.....etc。这些类确实存在，浏览器会在后台向这些类增加和删除元素（以后要了解究竟是怎么增加和删除的）。一定要知道这一点，这很重要。

伪类不止能处理链接，还能处理其它元素，比如伪类：first-child对应元素的第一个子元素，比如<blockquote>中的第一个段落....etc。

总结起来就是：伪类允许你根据浏览器的决定（确定元素属于哪些类）来指定这些元素的样式，比如：link等；伪类可以根据访问者使用页面时发生的情况来对元素指定样式。

（伪类要触发后，才能在开发者模式下看到触发的样式，比如hover，如果不是悬停时查看元素，看不到其继承的hover样式。）

有些元素有不同的状态，a元素就是这样一个例子，他的主要状态包括未访问、已访问和悬停。我们可以用伪类单独地为各个状态指定样式。如果可以，以后我想自己制造伪类，目地是让网页的交互性方式增多。