《CSS设计指南》试读:第1章:HTML标记与文档结构

这是一本讲CSS的书,所以,第1章要先讲讲HTML(Hypertext Markup Language,超文本标记语言)。 之所以从HTML讲起,是因为CSS的用途就是为HTML标记添加样式。所以,你首先得知道怎么编写和构造HTML标记,才能让CSS更方便地为它添加样式。每个网页在呱呱坠地时都只包含HTML标记,因为用HTML来标记内容是做任何网页的头一件事。所谓内容,就是你想要传达给读者的那些东西,比如文字、图片、音频和视频。 用HTML标记内容的目的是为了赋予网页语义(semantic)。换句话说,就是要给你的网页内容赋予某些用户代理(user agent)能够理解的含义。我们平常用的浏览器、给视障用户朗读网页的屏幕阅读器,以及搜索引擎放出的Web爬虫都是用户代理,它们需要显示、朗读和分析网页。HTML规定了一组标签,用来给内容打上不同的标记。每个标签都是对它所包含内容的一种描述。最常用的HTML标签描述的是标题 、段落、链接和图片。目前,HTML一共有114个标签,但按照80/20原则,使用其中25个左右的标签就可以满足80%的标记需要。要想知道和了解HTML标签,可以看看本书网站:http://www.stylinwithcss.com。 在给内容都打上标记之后,就可以使用CSS来给标签添加样式了。添加样式的根据有标签名、标签属性(如id和class),以及标签与其他标签在标记中的相对位置关系,等等。HTML标签也会构成一个层次化的文档,从而可以通过CSS来设置网页的布局,为每个元素应用你想要的样式。 HTML最新的版本HTML5,又新规定了一批结构化标签,用于对相关内容的标签进行分组,从而更好地规范网页的整体结构。这些新标签包括<header>、<nav>(即navigation,导航)、<article>、<section>、<aside>和<footer>。比如,对于一组可以让用户导航到网站中其他页面的链接,就可以使用<nav>标签把它们独立地标记出来。而在<article>里,则可以组织起来一篇既包含多个标题,又包含文本段落的博客文章。 在HTML5标准出现之前,创建页面的结构只能使用一些几乎没有什么语义的标签,比如<div>和<span>。而现在,我们有了一套专门的结构化标签。 为了进一步说明上述思想,接下来我们就看一看到底怎么给内容加标记,并展示怎么用HTML创建出一种标签层次,以便应用CSS和JavaScript。 1.1 HTML标记基础 对于每个包含内容的元素(比如标题、段落和图片),根据它所包含的内容是不是文本,有两种不同的方式给它们加标记,一种是使用闭合标签,另一种是使用自闭合标签。 1.1.1 文本用闭合标签 闭合标签的基本格式如下: <标签名>文本内容</标签名> 可以给这个标签添加一些属性,比如: <标签名 属性_1="属性值" 属性_2="属性值">文本内容</标签名> 标题、段落等文本元素都要求闭合标签,也就是要有一个开标签和一个闭标签,比如: <h1>Words by Dogsworth</h1> <p>I wandered lonely as a dog.</p> 可见,每个标签都由一对包含标签名的尖括号组成。标签名通常是一个(表示内容类型的)英文单词的简写形式或者其中的一个字母。闭标签与开标签的不同之处是标签名前面多一个斜杠。 位于开标签和闭标签之间的,就是将来会显示在浏览器中的内容;标签本身不会显示。 开标签和闭标签明确地标识出了标题和段落的起始位置。注意,前面的标题标签名中有一个数字1,那是因为HTML有6级标题,<h1>表示最高级别的标题。 1.1.2 引用内容用自闭合标签 <标签名 属性_1="属性值" 属性_n="属性值" /> 非文本内容是通过自闭合标签显示的。闭合标签与自闭合标签的区别在于,闭合标签包含的是会显示的实际内容,而自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在HTML页面加载的时候,额外向服务器发送请求,以取得自闭合标签引用的内容。 下面就是使用自闭合标签标记的一张图片。 <img src="images/cisco.jpg" alt="My dog Cisco"> 关闭标签 XHTML标准严格规定所有标签都必须关闭,但HTML5标准在这方面则要宽松得多。换句话说,在HTML5网页里,某些闭标签是可以省略不写的。要了解HTML5语法,可以参考这个链接http://dev.w3.org/html5/html-author/#syntactic-overview。 即使你在标记段落时只写了一个段落的开标签,没有写与之对应的闭标签,仍然可以通过HTML5标准验证。不过,我个人习惯于关闭所有标签,因为这样可以更清楚地知道自己标记的结构,同时也能保证不让自己忘了关闭那些应该关闭的标签。我建议读者也这样做,本书中的代码示例也会关闭所有标签。 对于自闭合标签,XHTML要求必须这样写: <img src="images/cisco.jpg" alt="My dog Cisco" /> 而在HTML5中,可以省略最后那个表示关闭的斜杠,写成: <img src="images/cisco.jpg" alt="My dog Cisco" > 不过,我还是习惯于给自闭合标签的末尾也加上一个空格和斜杠。HTML5会忽略这个斜杠,而我在检查代码结构时,通过它一眼就能知道这个标签已经关闭了,所以它不包含后面的标签。 1.1.3 属性 属性负责为浏览器提供有关标签的额外信息。比如说,前面例子中的<img>标签有两个属性。一个属性是src(source,来源),属性值为cisco.jpg。这个属性定义了图片的来源是一个名为cisco.jpg的文件。另一个属性是alt(alternative,替代内容),定义的是在图片因故未能加载成功时在屏幕上显示的文本。 视障用户使用的屏幕阅读器会大声读出alt属性的内容,因此一定要给<img>标签的这个alt属性添加让人一听(或一看)就能明白的内容。 每个HTML标签都可以添加属性。在稍后的例子中我们会看到,class和id等属性,几乎可以适用于任何标签。而另一些属性,比如src,则只适用于类似<img>这样的引用源文件的标签。 要想了解所有HTML标签和属性,可以参考HTML Dog网站:http://htmldog.com/ reference/htmltags。 本章使用了哪些HTML标签 以下是本章使用的块级(block)和行内(inline)标签。至于什么是块级标签,什么是行内标签,本章稍后再作介绍。 块级标签 <h1>-<h6> :6级标签,<h1>表示最重要 <p>:段落 <ol>:有序列表 <li>:列表项 <blockquote>:独立引用 行内标签 <a>:链接(anchor,锚) <img>:图片 <em>:斜体 <strong>:重要 <abbr>:简写 <cite>:引证 <q>:文本内引用 1.1.4 标题与段落 到现在为止,我们用得最多的还是标题和段落标签。一般来说,网页都会以一个<h1>标签开头,其中的文本用于告诉读者这个网页是干什么的。然后用<h2>标记下一级内容,或许是一个副标题,然后才是<h3>,依此类推。 <h1>不仅是最大最突出的标题(除非你用CSS缩小它的字号),搜索引擎也会将其视为仅次于<title>标签的另一个搜索关键词的来源。 段落用于标记主要的文本内容,是所有文本元素中出场率最高的一个。简言之,只要有不适合放在其他文本标签中的文本,都可以把它放一个段落里面。 接下来,我们会谈一谈文档流(document flow)、行内元素和块级元素的概念,介绍一下每个元素在页面中怎么形成一个方盒子(box)。HTML中的这些基本概念,对于使用CSS快速有效地为文档添加样式,使其变成你期望的布局和外观具有重大意义。 1.1.5 复合元素 HTML不仅规定了标题、图片和段落等基本的内容标记,还规定了用于创建列表、表格和表单等复杂用户界面组件的标记,这些就是所谓的复合元素,即它们是由多个标签共同构成的。 比如,<li>是一个列表项,它只在<ol>(ordered list,有序列表)和<ul>(unordered list,无序列表)这两种列表标签中才有效,在<dl>(definition list,定义列表)中则无效。下面是一个包含三个列表项<li>的有序列表<ol>的例子: <ol> <li>Save HTML file</li> <li>Move file to Web server via FTP</li> <li>Preview in browser</li> </ol> 图1-1展示了这个列表在浏览器中呈现的效果。 图1-1 有序列表示例。浏览器会自动给每个列表项编号 这个例子告诉了我们两个基本知识点。首先,某些标签(如这里的<ol>)要求其他标签(即这里的<li>)与之共同出现。其次,我们说这里的列表项<li>“被嵌套”在有序列表<ol>中,因为有序列表的开标签位于所有列表项之前,闭标签位于所有列表项之后。标签嵌套是我们必须要理解的一个至关重要的概念。 1.1.6 嵌套标签 在上面的例子中,基于<li>标签与<ol>标签的嵌套关系,我们还可以说<li>标签是<ol>标签的子标签(或子元素),或者说<ol>标签是<li>标签的父标签(父元素)。 下面是使用<em>(emphasis,强调)标签来强调段落中一个单词的例子。遗憾的是,其中的<em>子标签嵌套在<p>标签里的方式是错误的。 <p>That car is <em>fast</p>.</em> 正确的写法应该是下面这样的。 <p>That car is <em>fast</em>.</p> 请记住,要在一个标签里嵌套另一个标签(也就是前者的开标签写在后者的开标签之前),必须要先关闭后一个标签再关闭前面那个标签。上面第一个例子搞错了,第二个例子没有问题。 HTML文档的结构正是通过类似这样的标签嵌套,以及就此建立起来标签间的“父-子”关系形成的。下面,我们就通过分析一个HTML文档的结构,来实际地演练一番。 1.2 HTML文档剖析 有几个HTML元素是所有HTML文档(也就是网页)中都必须包含的。这些元素为内容提供了框架,有了这个框架才能正确显示内容。可以把这些必要的元素想象成一个模板页面里必须得有的元素。很多网页编写工具,比如Adobe Dreamweaver,会在每次创建新HTML页面时自动给你生成一个包含这些元素的模板页面。 HTML5标准推出之后,HTML文档的结构一下子得到了极大简化。就算你的Web开发经验不多,估计都会对之前HTML和XHTML复杂的文档类型(doctype),包括过渡型和严格型,以及那些元数据标签(<meta>)记忆犹新。所有这些,在HTML5中都已经被更简单的语法取代,而且虽然语法简单但却能够与之前的HTML版本兼容。 1.2.1 HTML模板 今天,按照HTML5语法编写的最简单的HTML页面的模板可以写成这样: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>An HTML Template</title> </head> <body> <!-- 这里是网页内容 --> </body> </html> 模板的第一行代码是一种新语法,或者说是一种简化的DOCTYPE,这一行就是为了声明:“以下是一个HTML文档。”注意,这个标签不用关闭。 然后是<html>标签,也就是所谓的根级标签,因为页面中所有的其他标签都嵌套在这个标签内部,而且它的闭标签也是整个页面中的最后一个闭标签。<html>标签只有两个直接的子标签:<head>和<body>。 使用HTML注释标签,可以为你自己或者其他将来可能会修改这个页面的人写一些备注。HTML注释以<!--开头,以-->结尾,注释内容就写在它们中间。浏览器在加载页面时,会忽略注释,不会显示其中的内容。 帮助浏览器理解页面的信息都包含在<head>标签中。在这个最简单的例子里,<head>标签里只包含<meta>和<title>两个标签。其中,<meta>标签有一个charset属性,它是在告诉浏览器这个页面使用的是UTF-8编码。而<title> 标签中的文本会在页面显示时,作为整个页面的标题出现在浏览器窗口顶部的标题栏中。上面模板中页面的标题是“An HTML Template”。 关于<title>标签 搜索引擎会给<title>标签中的文字内容赋予很高的权重,而且这些文字也会作为网页标题出现在搜索结果列表中。为此,千万不要让那些“欢迎光临我的网页!”之类的废话占据你的<title>标签。一定要让这些文字简洁明确,而且包含目标读者在搜索你的网页内容时会使用的关键词。 而<body>标签则包含着标记所有内容的HTML元素。接下来,我们先把原来的注释替换成另外两个标签,然后再看看页面在浏览器中显示的效果。 在上面模板的<body>标签中,我们再添加两个标签: <body> <h1>Stylin' with CSS</h1> <p>Great Web pages start with great HTML markup!</p> </body> 图1-2展示了当前页面在浏览器中显示的效果。 图1-2 带有一个标题和一个段落的示例模板页面 浏览器把包含内容的元素在页面中自上而下地一一排列,起点是页面的左上角。仔细看一看,会发现页面中标题和段落文本的字号不一样,但字体都是Times Roman,而且标题与段落之间还有一定的间距。很显然,浏览器已经为页面应用了一些基本的样式。这些初始(默认)的样式,来自浏览器内置的一个CSS样式表,它只会为每个HTML元素添加一些最基本,当然也谈不上美观的样式。 接下来再给模板添加两个比较常用的HTML元素,一个链接,一个图片。 <body> <h1>Stylin' with CSS</h1> <p>Great Web pages start with great HTML markup!</p> My Books <img src="images/cisco.jpg" alt="My dog Cisco" /> </body> 图1-3展示了页面现在的效果。 图1-3 页面中目前包含着标题、段落、链接和图片 链接是使用<a>标签创建的,该标签有一个必需的属性href(hyperlink reference,超链接引用),其中包含着链接指向的页面的URL。 前面我们也提到过<img>标签,而现在你终于看到它的效果了。在这个标签里,同样是给出图片所在位置的URL,要使用src(source,来源)而不是href属性。 有一点你可能注意到了:虽然标题和段落是上下堆叠在一起的,但链接和图片却是并排显示的。为什么会这样呢?因为标题和段落是块级元素,而链接和图片是行内元素。 1.2.2 块级元素和行内元素 图1-3展示了所谓“文档流”的效果,也就是HTML元素会按照它们各自在标记中出现的先后顺序,依次从页面上方“流向”下方。浏览器的样式表之所以提供这种流动式效果,就是为了让那些简单但却正确标记了HTML的内容,能够以朴素但却可用的方式显示出来。CSS的妙处就在于把这种实用主义的默认显示效果,转换成既有吸引力又直观的页面设计。 几乎所有HTML元素的display属性值要么为block,要么为inline。最明显的一个例外是table元素,它有自己特殊的display属性值。 块级元素(比如标题和段落)会相互堆叠在一起沿页面向下排列,每个元素分别占一行。而行内元素(比如链接和图片)则会相互并列,只有在空间不足以并列的情况下才会折到下一行显示。 无论你想了解哪个HTML元素,第一个要问的问题都应该是:它是块级元素,还是行内元素?知道了这一点之后,就可以在编写标记的时候,预想到某个元素在初始状态下是如何定位的,这样才能进一步想好将来怎么用CSS重新定位它。 使用块级元素和行内元素构建页面 这里是一个完全由标题和段落组成的页面。为了保证屏幕截图和代码清晰,我故意把段落都弄得非常短。页面的标记如下。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Block and Inline Elements</title> </head> <body> <h1>Types of Guitars</h1> <p>Guitars come in two main types: electric and acoustic.</p> <h2>Acoustic Guitars</h2> <p>Acoustic guitars have a large hollow body that projects the sound of the strings.</p> <h3>Nylon String Acoustic Guitars</h3> <p>Descendants of the gut-strung instruments of yore, nylon string guitars have a mellow tone.</p> <h3>Steel String Acoustic Guitars</h3> <p>Steel string guitars first appeared in country music and today most acoustic guitars have steel strings.</p> <h2>Electric Guitars</h2> <p>Electric guitars have a solid or hollow body with pickups that capture the string vibration so it can be amplified.</p> <h3>Solid Body Electric Guitars</h3> <p>Solid body electric guitars are commonly used in rock and country music.</p> <h3>Hollow Body Electric Guitars</h3> <p>Hollow body acoustic guitars are commonly used in blues and jazz.</p> </body> </html> 整个页面的内容只有标题和段落。为清晰起见,这里省略了本该有的<article>等标签。 图1-4展示了以上代码在浏览器中显示的效果。 图1-4 由标题和段落构成的页面 在以上代码和屏幕截图中,可以看到三种级别的标题。浏览器为每一级标题分别应用了不同的字号,从而让页面内容的层次显得非常分明。由于标题和段落都是块级元素,所以每个元素各占一行。 还有,页面四周都添加了一定的边距,所以文本才不会碰到浏览器窗口。而且,段落中的行与行之间也有距离。好了,边距的话题回头我们再仔细聊,还是先给页面添几张图片吧。如图1-5所示,当然你已经知道了,图片是行内元素。 图1-5 为页面添加两个行内元素(吉他图片) 标记中的两个<img>标签虽然分别位于两行,但这并不影响图片在浏览器中显示时的效果。图片是行内元素,所以它们显示的时候就会并列出现在一行上;而且,标签之间的空白(包括制表、回车和空格)都会被浏览器忽略[ 根据CSS标准,默认情况下,多个空白会被浏览器叠加为一个。——译者注]。因此,为了让代码的版式布局一目了然,你可以随意在标签之间添加换行和空格。一般推荐的做法都是子标签相对于父标签要有一个缩进。 以下是图1-5中展示的那部分页面对应的代码,其中包含两张图片。图片是行内元素,所以两把吉它会并排显示。 <body> <h1>Types of Guitars</h1> <p>Guitars come in two main types: electric and acoustic</p> <h2>Acoustic Guitars</h2> <img src="images/acoustic_nylon.jpg" alt="nylon string acoustic guitar" /> <img src="images/acoustic_steel.jpg" alt="steel string acoustic guitar" /> <p>Acoustic guitars have a large hollow body that projects the sound of the strings.</p> </body> 现在,为了进一步加深对块级元素和行内元素的理解,我们在这个页面上搞一次小试验。这次试验要用到我最喜欢的一个开发工具,那就是Web Developer扩展。它是Firefox的一个扩展,安装之后它会生成一个菜单,里面包括很多查看HTML、CSS和JavaScript的工具。 要安装Web Developer,在Firefox工具栏中选择“附加组件”,然后在“附加组件管理器”中搜索“Web Developer”。找到之后,点击安装。 图1-6 我在Web Developer工具条中选择了Outline菜单 在图1-6中,可以看到浏览器窗口顶部偏下的Web Developer工具条。这个工具条有很多功能,其中一个就是能让你更清晰地确定每个元素的位置,以及元素之间的嵌套关系。如图所示,我选择了Outline(轮廓)菜单中的Outline Block Level Elements(显示块级元素的轮廓)命令,这个命令可以显示页面中块级元素方盒子的轮廓。 图1-7 选择Outline Block Level Elements命令后,会显示块级元素盒子的实际大小以及相互之间的间距。没有显示行内元素的轮廓 显示块级元素的轮廓之后,通过图1-7就可以发现元素盒子比它们包含的文本要大一些。每个盒子的高度比内容稍微高一点,而宽度跟浏览器窗口一样宽! 块级元素盒子会扩展到与父元素同宽 在我们这个页面中,所有块级元素的父元素都是body,而它的宽度默认与浏览器窗口一样宽(当然有少量边距)。因此,所有块级元素就与浏览器窗口一样宽了。说到这,相信你就能理解为什么块级元素始终会占一行了。对了,就是因为它们始终会保持与浏览器窗口同宽。这样一来,一个块级元素旁边也就没有空间容纳另一个块级元素了。 通过Web Developer工具条不能像显示块级元素轮廓那样,同时显示所有行内元素的轮廓。不过,通过Outline菜单中的Outline Custom Elements(显示自定义元素的轮廓)命令可以显示这些元素的轮廓。行内元素盒子的行为与块级元素盒子的行为正好相反。 行内元素盒子会“收缩包裹”其内容,并且会尽可能包紧 说到这,你就可以理解为什么几个行内元素会并排显示在一行,而每个块级元素都会另起一行了。 1.2.3 嵌套的元素 现在,该看一看在标记中嵌套的HTML元素到了屏幕上是什么效果啦。前面例子中的所有元素都有一个共同的父元素——body。因此,Web Developer通常不显示它。但通过在Outline菜单中选择Outline Custom Elements命令,可以自定义显示body,如图1-8所示。 图1-8 选择Outline Custom Elements命令后,在弹出的窗口中可以指定显示哪个元素以及用什么颜色显示 如图1-9所示,父元素body的盒子(最外面的轮廓),直接嵌套(也就是包裹)着所有子元素盒子(内部的轮廓)。其中,块级子元素扩展到与body元素同宽,后者默认与浏览器窗口同宽(但有一点外边距)。 在标记中嵌套的是HTML标签,而在屏幕上嵌套的则是一个个的盒子 图1-9 父元素body包围着它的子元素 在一个包含很多元素的页面中,盒子套盒子会越套越深,此时合理的HTML布局有助于通过标记看清页面结构,从而保证标签间正确的嵌套关系。我们推荐HTML标签每个层次相对于上一层次都缩进4个空格,如下面代码中的点所示。 在Dreamweaver等HTML编辑器中,每次按Tab键时就会缩进4个空格,从而保证缩进的一致性。 <nav id="toc"> ....<ol> ........<li>Introduction</li> ........<li>Chapter 1</li> ........<li>Chapter 2</li> ........<li>Chapter 3</li> ....</ol> </nav> <!-- end table of contents --> 两个在标记中嵌套的例子 我们再来看一个嵌套的例子,这一次使用blockquote元素。顾名思义,blockqoute元素包含引用内容,而且在页面上看起来是独立的元素。请注意代码中使用的表示弯引号的HTML实例。 <blockquote>&ldquo;Sometimes you want to give up the guitar, you'll hate the guitar. But if you stick with it, you're gonna be rewarded.&rdquo; <cite>Jimi Hendrix</cite> //使用cite元素包含作者姓名 </blockquote> 图1-10展示了这段代码在页面中显示的效果,为两个元素都加了轮廓。 图1-10 blockquote元素默认会缩进 HTML实体 HTML实体常用于生成那些键盘上没有的印刷字符,比如TM、†、©,等等。HTML实体以一个和号(&)开头,一个分号(;)结尾,二者之间是表示实体的字符串。在前面的例子中,两个实体的名字分别是“left-double-quote”(左双引号)和“right-double-quote”(右双引号)的简写。 Peachpit另一位作者Elizabeth Castro(她的书非常赞,在此强烈向大家推荐)在自己的一个网页中列出了常用的HTML实体:http://www.elizabethcastro.com/ html/extras/entities.html。 要注意的是,由于和号表示实体开头,所以在要显示和号的时候不能直接写和号,而要在HTML标签包含的文本中使用&amp; 实体,这样才能显示出&来。比如,写成Johnson &amp; Johnson,才会显示成:Johnson & Johnson。 显然,<blockquote> 标签也是一个块级元素(它名字里就有block)。因为它的目的就是在页面中独立显示一块内容,所以作为块级元素非常合适。 嵌套在blockquote元素中位于引用文本之后的是cite元素,它是一个行内元素。因为文本结束后还有空间,所以它就显示在了段落最后一行上。从图1-10中也可以看到,<cite>标签的内容默认是斜体。 同样是在这个例子中,还可以看到两个HTML实体,&ldquo;和&rdquo;,分别用于生成能够正确打印出来的左、右双引号。使用这两个引号的实体,而不是按键盘上的Shift-'(Shift-引号键),能让页面显示更加专业。 第二个嵌套的例子如下,是一个块级元素包含三个行内元素。 <p>It is <strong>absolutely critical</strong> that <em>everyone</em> does this <abbr title="as soon as possible">ASAP</abbr>!</p> 图1-11展示了Firefox浏览器中显示的效果。 图1-11 一个段落中嵌套着三个分别表示重要性、强调和简写的标签 图1-12与图1-11一样,只不过显示了元素盒子的轮廓。 图1-12 三个行内元素嵌套在一个块级元素中 这个例子除了能让你感到情况紧急之外,还能让你有如下收获。 文本被标记为段落,而其中包含三个行内元素。 <strong>标签表示重要,默认以粗体显示。 <em>标签表示强调,默认以斜体显示。 <abbr>标签表示简写,在Firefox中默认会加上点下划线。 好了,我们已经知道了HTML标记怎么在页面中创建盒子了,也知道了嵌套标记实际上就是嵌套盒子。那么,接下来我们就可以聊一聊文档对象模型(Document Object Model,DOM)了。 1.3 文档对象模型 在开始学习CSS之前,关于HTML我们要介绍的最后一个知识点,就是HTML结构所对应的文档对象模型(以下简称“DOM”)。DOM是从浏览器的视角来观察页面中的元素以及每个元素的属性,由此得出这些元素的一个家族树。通过DOM,可以确定元素之间的相互关系。在CSS中引用DOM中特定的位置,就可以选中相应的HTML元素,并修改其样式属性。 我们就通过下面这个例子来理解DOM吧。 // HTML代码正确缩进,以表明标签的层次关系 <body> <section> <h1>The Document Object Model</h1> <p>The page's HTML markup structure defines the DOM.</p> </section> </body> 图1-13 与标记对应的简单DOM结构图 上面的代码示例和图1-13展示了一个典型的页面结构,即结构化的标签(即<section>)包含着几个子内容标签(这里的<h1>和<p>)。代码中用缩进表示元素间的层次关系。这种层次关系也可以用垂直的、类似家族树的结构图表示。 图1-14展示了标明元素轮廓的HTML元素。 图1-14 从图中可以看出,body元素包含着section元素,后者进而包含一个标题和一个段落 对于这个例子中的DOM层次,我们可以作如下表述。 section是h1和p的父元素,也是直接祖先元素。 h1和p是section的子元素,也是直接后代元素。 h1和p是同胞元素,它们有共同的父元素section。 section、h1和p 是body的后代元素,或者下面的元素(嵌套在后者的内部)。 section和body是h1和p的祖先元素,或者上面的元素(在某一层次上包含后者)。 在本书后面几章里,我们会经常使用子元素、父元素、同胞元素、祖先元素和后代元素这些概念。所以,请读者务必先对HTML创建的DOM的层次有一个清晰的认识,搞明白这些概念的含义,以及它们之间的嵌套关系。 CSS操作DOM的过程是先选择一个或一组元素,然后再修改这些元素的属性。通过CSS修改了元素后,比如修改了宽度或者在标记里插入一个伪元素,这些变化会立即在DOM中发生,并体现在页面上。 简言之,就是通过HTML标记来构建DOM,然后在页面初次加载和用户与页面交互时,使用CSS来修改DOM。 1.4 小结 本章讲解了HTML标签怎么为内容提供结构,以及每个元素会在屏幕上生成什么样的盒子。演示了块级元素和行内元素的区别,以及在元素互相嵌套的情况下,它们之间会存在的一种层次关系。你知道了标记中嵌套的HTML元素会生成屏幕上嵌套的盒子。最后,我们学习了DOM,它是浏览器中文档的模型,而CSS可以修改DOM中元素的样式属性,从而修改页面本身的布局和外观。本章学习的这些基础知识,对于使用CSS为HTML添加样式至关重要。第2章,我们会从CSS的规则和机制入手,讲一讲它是怎么对HTML发生作用的。

>CSS设计指南

CSS设计指南
作者: 史密斯
原作名: Stylin’with CSS:a designer’s guide
isbn: 7115313644
书名: CSS设计指南
页数: 288
译者: 李松峰
定价: 59.00元
出版社: 人民邮电出版社
出版年: 2013-5