一:认识CSS 属性
二:认识文本
2.1 控制文本
2.2 文本格式化
三:选择器
7.8.1通用选择器
“通用选择器”(universal selector)由一个“星号”(*)表示,作用类似于匹配文档中全 部元素类型的通配符。
*{}
如果需要将某个规则应用于全部元素,则可以使用此选择器。某些时候它还被用于设 置应用于整个文档的默认值(如font-family和font-size),除非使用更为具体的选择器指定某 •元素中对应的相同属性应使用其他值。
这种做法与对<body>元素应用默认样式稍有不同,因为通用选择器应用于每一个元 素,而不依赖从应用于<body>元素的规则中继承的属性。
7.8.2类型选择器
“类型选择器”(type selector)匹配所有在由逗号分隔的列表中指定的元素。它使你能 够将相同的规则应用于多个元素。例如,如果需要将相同的规则应用于不同尺寸的标题元 素,下面的规则将匹配所有hl、h2以及h3元素:
hl, h2, h3 {}
7.8.3类选择器
“类选择器"(class selector)能够将规则与一个(或多个)包含class特性的元素相匹配, 该特性的值匹配你在类选择器中指定的值。例如,假设你拥有一个<aside>元素,其class 特性的值为BackgroundNote,如卜所示:
〈aside class=“BackgroundNote”>This paragraph contains an aside.</aside>
可以通过两种方式之一使用类选择器。一种是简单指定一条可以应用于任何class特性 值为BackgroundNote的元素的规则。如下所示,在class特性的值之前有一个句号或完全 停止符前缀:
.BackgroundNote {}
另一种方式是创建一个选择器,仅匹配带有值为BackgroundNote的class特性的<aside> 元素(而非其他元素),例如:
aside.BackgroundNote {)
如果有多种元素,都带有class特性并且值相同(例如,一个<aside>元素与一个<div> 元素可能都使用带有相同值的class特性),并且你希望这些元素的内容都以相同的方式显 示,则应该使用第一种标记方式。而如果定义的样式是专门用于class特性值为 BackgroundNote的<aside>元素的,则应该使用第二种标记方式。
class特性还可以包含多个以空格分隔的值,例如:
<p class=“important code"〉
可以使用如下语法指定某个class特性值同时包含important及code的元素(不过,IE7 是IE浏览器中第一个支持该语法的版本)。
p , important.code ()
7.8.4 id选择器
“id选择器”(id selector)与类选择器的工作方式很类似,只是它作用于id特性。相比 于在id特性值前添加一个句号,这一次需要使用一个“#”号。因此,一个id特性值为abstract 的元素,可以使用如下选择器进行标识。
#abstract
因为id特性的值在文档中应该保持唯一,所以该选择器应该仅应用于一个元素的内容 (而且应该不必指定元素的名称)。
7.8.5子选择器
“子选择器M(child selector)匹配某一元素的直接子元素。在下面的例子中,它匹配<td> 元素中的任何作为其直接子元素的<b>元素。两个元素的名称使用一个“大于号”(>)分隔, 指明b是td的子元素,此处该符号称为“连接符”(combinator):
td>b {}
它将使你能够对于作为<td>元素的直接子元素的<b>元素,设置一种区别于文档中其 他位置出现的<b>元素的样式。
作为<td>元素的一个直接子元素,在<td>开标签与<b>元素之间不应存在任何其他标 签。例如,下面的选择器毫无意义,因为<b>元素不应该成为<table>元素的一个直接子元 素(相反,<tr>元素则更可能成为<table>元素的直接子元素)。
table>b {)
IE7是IE浏览器中第一个支持子选择器的版本。
7.8.6后代选择器
“后代选择器” (descendant selector)匹配一种元素类型,该元素为另一指定元素的后代 元素(或者说嵌套于另一指定元素内),而并非仅仅是直接子元素。尽管大于号被用于作为 子选择器的连接符,但是后代选择器的连接符却是空格。查看以下示例:
table b (}
在本例中,选择器匹配<table>元素中的任何<b>子元素,这意味着该规则将应用于<td> 及<th>元素二者中的全部<b>元素。
这与子选择器形成了对比,因为它应用于<table>元素的全部子元素,而非仅有直接子 元素。
7.8.7相邻兄弟选择器
“相邻兄弟选择器n(adjacent sibling selector)K配一种作为其他元素相邻兄弟的兀素类 型。例如,如果希望使任何一级标题后的第一个段落与其他<P>元素采用不同样式,可以 通过类似如下方式使用相邻兄弟选择器,仅为<hl>元素后出现的第一个<p>元素指定规则:
hl+p {}
IE7是IE浏览器中第一•个支持相邻兄弟选择器的版本。
7.8.8 一般兄弟选择器
“—般兄弟选择器”(general sibling selector)匹配其他元素的兄弟元素类型。不过,该 兀素不必是直接前方相邻的兀素。因此,假设有两个<p>元素同时都是<h 1 >元素的兄弟元 素,则都会使用如下选择器指定的规则。
hl~p {}
一般兄弟选择器是CSS3的一部分,你将在第9章中进行了解。IE7是IE浏览器中第 一个支持一般兄弟选择器的版本,而Firefox2则是Firefox浏览器中第一个支持的版本。
7.8.9使用子选择器与兄弟选择器减少对于标记中类型的依赖
子选择器与相邻兄弟选择器都很重要,因为它们能够减少在HTML文档中需要添加的 class特性的数量。
为所有种类的可能性都添加类型(Glass)很容易做到。例如,如果希望<hl>元素后的第 一个段落以粗体显示,你可能会尝试为每一个<hl>元素后的第一个<p>元素都添加一个 class特性。尽管这样也可以工作,但是你的标记会被各种类型弄得非常凌乱,而设置这些 类型的初衷却仅仅是为了简化对于页面呈现的控制。
如果你后来又决定将每个<hl>元素后的前两个<p>元素以粗体显示,就需要回过头为 每个<hl>元素后的第二个<p>元素添加一个新的class特性。因此,子元素选择器与相邻兄 弟选择器为设置文档样式以及使标记更加简洁,增加了很大的灵活性。
7.8.10特性选择器
特性选择器能够在选择器中使用元素所包含的特性及其取值。有多种特性选择器可供 使用,它们使以复杂方式选择文档中的元素成为可能。
对于特性选择器的使用受到了很大限制,因为只有在最新版本的浏览器中才实现了对 它们的支持。表7-11中列出的其中一部分特性选择器来自CSS3,你将在第9章中了解更 多信息。
四:关于单位
如你所见,一些CSS属性的值是以“长度” (length)形式赋予的(如字体的尺寸、文本 行的高度以及单词与字符间的间距等),而在本章关于CSS的内容中,你还会遇到更多值 使用长度表达的属性。因此,现在就来花一些时间了解CSS中可用于指定长度的三种方式:
•相对单位
•绝对单位
•百分比
4.1相对单位
相对单位共有三种:像素(px),与屏幕的分辨率相关联;以及em和ex,二者都与字 体的大小相关联。
1.px
“像素”(pixel),在代码中以px表示,是目前为止在CSS中最常用的长度单位。一个 像素即是屏幕分辨率中最小的单位。如果靠近查看显示其屏幕,就可能会看到方形的像素 点。
从技术上说,以像素作为测量单位的布局尺寸,可能依赖于观察媒介,这就是为什么 像素被归类为相对单位。
大多数计算机屏幕拥有72像素点每英寸(dpi)的分辨率,但激光与喷墨打印机则通常设 置为更高的分辨率——例如,300dpi。与此形成对比的是,移动设备则可能拥有比计算机 屏幕较低或(对于某些智能手机,如iPhone而言)较高的分辨率。
因此,一个500像素宽的表格,在72dpi的屏幕上可能是9.9444英寸宽,300dpi时则 是1.666英寸宽,而在32dpi的'屏幕上则是13.888英寸宽(而一个只有32dpi分辨率的屏幕, 不太可能比13英寸宽太多)。
在现实中,当在浏览器中打印一个网页时,它会调整像素,以呈现一个可读的文档版 本。CSS建议在这种情况下,用户代理应调节像素单位,从而当文档以平均1像素为单位 读取时,对应于大约0.28mm或1/90英寸。
2.em
1单位em与当前字体的高度等价,而因为字体的尺寸可能在文档中不断变化,em单 位的高度可能在文档的不同部分中也不相同。除此之外,因为用户能够改变浏览器中文本 的尺寸,em单位的尺寸可能因为用户选择文本尺寸的变化而变化。
这意味着em单位是最常用于测量包含文本的元素以及控制文本间距的长度单位(例 如,可将其用于line-height属性,以设置文本行间相对于其自身高度的行间距)。
尽管em单位与字体的高度等价,但通常认为该值是从小写字母m的宽度得出。你可 能还听说过en,其等价于em的一半。
3.ex
ex应为小写字母x的高度。因为不同字体的比例也不尽相同,ex依赖于字体的尺寸以 及字体的类型。
4.新的相对单位:rem、vh以及vw
你可能在 CSS Values 与 Units Candidate Recommendation(http://www.w3.org/TR/css3- values/)中,遇到三个新的相对单位:rem、vh以及vw。
- rem单位与根元素的字体尺寸等价——即一个“根em”。与传统的em单位方式以 及基于百分比的高度与宽度方式相比,使用rem能够以更小的复杂度进行文本相关 的尺寸设置。
- vh单位等价于百分之一的视野高度。vw等价于百分之一的视野宽度。这些单位允 许你进行视野相关的布局。如果视野发生变化(例如,当平板电脑从纵向变为横向 显示时),这些单位会按比例进行调整。
IE9十以及其他桌面主流浏览器的最新版本都支持rem单位。在本书编写时,vh及vw 仅在 IE10+、Chrome20+> Firefox 19+> Safari6+ 中提供支持,在 0peral2.5 中提供了部分 支持。
4.2绝对单位
总体而言,“绝对单位”(absolute unit)的使用要远少于相对单位(而你也很少会有机会 遇到使用其作为测量单位的设计)。表7-12中展示了一些CSS属性中使用的绝对单位。
对于英寸、毫米或厘米,应该不需要进一步解释。但另外两个单位则比较有趣。1磅 是1英寸的1/72(与多数计算机屏幕分辨率中的1像素相同),而1 pica则为1/12英寸(6磅)。 印刷商通常使用“磅”衡量字体尺寸与行距,而使用pica衡量行的长度。
4.3百分比
百分比方式给出一个与另一值相关的值。例如,如果页面中仅包含了两个段落,而你 希望其中每一个都占据页面的一半宽度,则可以给段落的Width属性一个50%的值。然而, 如果<p>元素位于另一个元素内部,并且其宽度已知为500像素,则每个段落会占据该包 含元素宽度的50%(即250像素)。