CSS 基础初探

一：认识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像素）。