当前位置：首页 > 实用文档 > 其他范文> 标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 3 邪恶的表格网页设计

标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 3 邪恶的表格网页设计

时间：2022-11-02 08:23:34 其他范文收藏本文下载本文

标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 3 邪恶的表格网页设计（精选6篇）由网友“木林林森森森”投稿提供，以下是小编精心整理的标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 3 邪恶的表格网页设计，供大家阅读参考。

篇1：标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 3 邪恶的表格网页设计

标准化设计解决方案 - 标记语言和样式手册

Web Standards Solutions The Markup and Style. Handbook

Part 1: Get Down With Markup 从标记语法谈起

Chapter 3 邪恶的表格

前文回顾：

标准化设计解决方案 Part 1: 从标记语法谈起 - Chapter 1 清单

标准化设计解决方案 Part 1: 从标记语法谈起 - Chapter 2 标题

你知道吗?不知何时开始,使用表格居然变成充满罪恶的举动了?的确,以web标准编写网页的最大迷思就是“不要再使用表格了,永远不要!” 听起来表格就和瘟疫一样必须躲开,必须密封起来丢进满是灰尘的柜子里,当成是网络发展时代早期流传下来的古董保存起来.

如此的厌恶从何而来呢? 或许一开始十分单纯,至少拥有一个好的理由.很多人会理直气壮的宣扬抛弃传统的表格嵌套与补空gif图片的布局方式,改用灵活的结构化的css布局方式的好处.我们可能就开始抽丝剥茧的去掉所有的表格,甚至开始顽固的坚持把所有的表格驱逐出去 — 根本不分场合.

书中稍后我们会看到css布局的方法和这样做带来的所有好处.但是现在我们还是先来看看如何在适当的场合—也就是标记数据列表的时候使用表格.我们会研究几个简单的方法是我们的数据列表变得更容易使用,更漂亮.

完全就是表格

在标记列表数据时,我们绝对没有理由不去用表格标签.但是等等,什么才是列表数据?这边有一些例子:

日历

电子数据表

图表

时间行程表

对这些例子以及许多其他情况来说,必须使用非常复杂严格的css特效才能让资料看起来像表格,或许你能想象,用巧妙的css浮动,定位所有项目之后得到的是不兼容的矛盾的结果,更别提拿掉css之后,准确读出每笔资料大概会成为不可能完成的任务.事实上,我们不必畏惧表格—我们应该用他们设计之初的目标来使用它们.

适合所有人的表格

表格找来谩骂的原因之一是如果没有小心使用的话会存在可用性缺陷.举例来说:屏幕阅读程序难以正确读出内容,而小屏幕设备经常被用来布局的表格扰乱,但是我们有一些简单的方法增加列表数据表格的可用性.同时建立灵活的结构,方便未来以css设定样式.

让我们看看图3-1 中的简单示例,这是美国棒球联赛的联盟记录:

图 3-1:典型的资料表示例

也许对红袜队球迷来说这是非常郁闷的统计资料,不过图3-1的却是列表资料的完美示范.它有三个表头(year,opponent,season record(w-l)),跟着是四年份的资料.在表格上面的是表格标题,说明了表格的内容.

标记这个资料表格的方式十分直观,我们或许会以这样的代码完成这个工作:

Boston Red Sox World Series Championships

Year

Opponent

Season Record (W-L)

1918

Chicago Cubs

75-51

1916

Brooklyn Robins

91-63

1915

Philadelphia Phillies

101-50

1912

New York Giants

105-47

这样显示的结果应该和图3-1十分相似,但是,我们可以在这个基础上加上一些改进.

首先,我们能用更加语义化的标签来存放“Boston Red Sox World Series Championships”.标签需要紧跟在起始标签后面,通常用来存放表格的标题或者表格资料的说明.

看上去,它更容易让使用者看出表格的主题,同时也能够帮助以其他方式得知网页内容的人.

让我们拿掉开头的那个段落,并加入正确的:

Boston Red Sox World Series Championships

Year

Opponent

Season Record (W-L)

1918

Chicago Cubs

75-51

1916

Brooklyn Robins

91-63

1915

Philadelphia Phillies

101-50

1912

New York Giants

105-47

重要的是,标题必须快速传达后面资料的主题,根据默认设置,大多数可视化浏览器将标签内的文字居中显示在表格的最上面,当然,我们稍后可以使用css来改变默认设置的样式 — 本章的技巧延伸中会讨论这个问题.事实上,现在标题位于独特的标签内,正好让我们之后的修改工作变得轻松简单.

加上摘要

另外,我们也能为标签加上summary属性,进一步解释这个表格的目的和内容,摘要属性对非可视化浏览器尤为重要,这能帮助它们解说表格的内容.

以下是为示例表格加上摘要属性的代码:

Boston Red Sox World Series Championships

Year

Opponent

Season Record (W-L)

1918

Chicago Cubs

75-51

1916

Brooklyn Robins

91-63

1915

Philadelphia Phillies

101-50

1912

New York Giants

105-47

表格的表头

在建立数据表格时,善用表头是件很重要的工作.在标记重要单元格时,我们可以发挥标签的作用,而不是使用之类在显示上暗示用户这个单元格是重要的的显示效果标签.就像我们在第二章中使用标题标签标记段落标题一样.

可视化浏览器或许会以粗体居中的效果显示标签中的内容,但是我们依然可以用标签的独特性,稍后再给这些重要的内容加上不同的样式,以便于存放在内的一般资料及进行区别.

除显示效果的优势外,使用标签也能帮助非可视化浏览器 — 这部分我们稍后进行深入讨论.

示例表格中的表头是最上面的那一行: Year,Opponent和Season Record(W-L).我们来把刚才的显示效果标签替换成正确的表头标签:

Boston Red Sox World Series Championships

Year

Opponent

Season Record (W-L)

1918

Chicago Cubs

75-51

1916

Brooklyn Robins

91-63

1915

Philadelphia Phillies

101-50

1912

New York Giants

105-47

使用标签来标记表头单元格和图3-1中的效果是一样的,让我们来看看为什么这个方法比较好:

我们不必使用额外的显示效果标签让表头突出显示在资料内容之外.

根据默认设置,大部分可视化浏览器都会以粗体居中的效果展示标签中的内容.让使用者轻易分辨出表头和表格内容的区别.

由于它和标签是相对独立的,因此我们能为表头加上与资料内容不同的样式.

使用表头标签的其他好处我们在接下去的章节中继续讨论.

表头与数据的关系

我们可以利用headers属性把表头和对应的中的数据关联起来,使屏幕阅读器能更容易为需要的人们组织表格内容.在使用了这个属性之后,屏幕阅读器将能更符合逻辑的读出表格内容,而不是像平常一样死板的从每列最左边读到最右边.

我们继续使用红袜队战绩表当作例子来示范使用方法.首先,我们需要为<表格中的每个>加上一个唯一的id,接着再为每个资料单元格加上headers属性,对应正确的表头.

为每个表头加上id很简单,就是这样:

Boston Red Sox World Series Championships

Year

Opponent

Season Record (W-L)

1918

Chicago Cubs

75-51

1916

Brooklyn Robins

91-63

1915

Philadelphia Phillies

101-50

1912

New York Giants

105-47

我们为每个表头id选择简短的有描述意义的名称,接着我们再为每个资料单元格加上适当的headers属性,让内容匹配正确的表头id:

Boston Red Sox World Series Championships

Year

Opponent

Season Record (W-L)

1918

Chicago Cubs

75-51

1916

Brooklyn Robins

91-63

1915

Philadelphia Phillies

101-50

1912

New York Giants

105-47

在为表头和内容之间建立对应关系后,屏幕阅读器可能会议这样的方式读出表格的每一行内容: “Year:1918,Opponent:Chicago Cubs,Season Record(W-L):75-51”,比起从左到右读出每格内容的方法来说,这样就有意义多了.

让每个具有唯一的id还有其他的好处,我们可以使用这个辨别依据,设定特殊的css规则,在本章最后的技巧延伸终究会讨论这个方法.

使用abbr属性

在之前的示例中,或许你会觉得表头中“Season Record (W-L)”用语音合成器来念实在太长了一些,此时,只要加上abbr属性,我们就能缩短发音时的内容,同时又为可视化浏览器保留了单元格中的原始文字.

Boston Red Sox World Series Championships

Year

Opponent

Season Record (W-L)

1918

Chicago Cubs

75-51

1916

Brooklyn Robins

91-63

1915

Philadelphia Phillies

101-50

1912

New York Giants

105-47

我们加上了 abbr=“Record” 后,屏幕阅读器会读出表头使用简短的版本后的“Record”.

,和

在这里我还想提一下三个与表格相关的标签.它们不仅能为表格结构提供更精确的语义,同时也为css提供额外的标签,让你在设计表格行的样式时不用为标签设计那么多的class.

引用一段W3C在HTML4.01规格中对这些标签的说明(www.w3.org/TR/html4/struct/tables.html#h-11.2.3):

引用:

表格行能够以thead,tfoot和tbody标签分成表头,表尾以及数目不限的表格主体.这种分类法让浏览器支持独立卷动表格主体的功能.打印长表格时,表头和表尾也能在包含表格资料的每一页上重复出现.

因此,使用使用这种分类方式也能让支持独立表格主体的浏览器使用者更容易阅读表格内容,特别是长表格.

与必须出现在之前,让浏览器与其他设备能够先载入这些内容,以这种表格行分类方式标记表格看起来是这样的:

...table header content...

...table footer content...

...table data row...

你会发现,表头和表尾资料以和标签包围,放在表格数据行之前.

就像我之前所说的那样,这些标签不仅能为表格提供更精确的语义,还能给css提供样式锚点让你为这些特定内容设置css规则,而不必为每个设计那么多的class.

举例来说,如果我们只想给数据区块(以标记)设定与其他区块不同的背景色.那么我们只需要写这样一段css就能达到目的:

tbody {

background-color: gray;

}

如果没有tbody标签的话,我们需要为每个想要加上灰色背景的标签添加class属性.有意义的标记方式经常能使之后用css设定样式的工作变得十分轻松.这就是个好例子.

表格邪恶吗?

我想,如果我们根据表格标签设计之初的目的好好使用的话,那么答案就肯定是“不!”.滥用表格创建复杂嵌套的布局的行为理所当然会遭到谴责,但是表格的确会给资料区块提供它需要的良好的结构.

我们不能在整本书里都叙述创建完美表格所需要的各种技巧,因此就此打住,希望你已经开始知道如何创建简单的又具有可用性的方便css修饰的简单表格.

谈到样式,让我们用几种不同的css技巧修饰一下之前的示例.

技巧延伸

与之前章节一样,我们用灵活的语义化的结构化的标记为基础,然后用css给他加上一些样式

首先,我们先来看看简单的边框技巧,在示例上创建单线边框,然后我们再为表格标题和表头加上独特的样式

建立边框

已经对border默认属性的3维效果感到厌倦了么?我也是.一般来说,为table标签加上border=“1”就会与图3-1的效果类似,当然你也能换个方法,这边有一个用css做出漂亮整洁边框的诀窍.首先,我们给每个单元格两侧(右侧和底部)加上一像素的边框:

th, td {

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

只加上两侧边框,是建立各处边框等宽又同时让大部分流行的浏览器能够正确显示的关键所在.如果我在四周都加上边框,那么边框的顶部和左侧会在单元格排列时造成重叠,在稍后的示例中,我会给出一种只用一条border规则就达成小童效果的方法.

你会发现图3-2中的整个表格只缺少了最顶部和最左侧的边线,为了补齐边框,我们给元素加上样式相同的border-top和border-left属性

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

}

th, td {

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

图3-2:为th和td加上两侧边线的表格示例

图3-3 补齐边线后的表格示例

去掉间隙

现在我们已经有了个完整的表格了,但是边框之间的间隔是怎么回事?不幸的是,由于大多数浏览器会默认设置一点外补丁,因此就会露出这些令人讨厌的间隙了.

我们能做的是为表格元素加上border-collapse属性来去掉这些间隙,得到我们想要的样式.

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

border-collapse: collapse;

}

th, td {

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

在为border-collapse加上collapse属性后,我们就能看到精确的单线边框样式了,如图3-4

图3-4:使用了border-collapse属性后的表格示例

不支持IE for Mac的版本

除了Internet Explorer for Mac之外,其他的浏览器都支持把css简写成这样:

table {

border-collapse: collapse;

}

th, td {

border: 1px solid #999;

}

要用哪一种方法,这当然由你来决定了,现在仍然有一些人再使用IE for Mac,而使用这个替代方法的话,会让他们看到一些边线的重复,如果你并不在意这件事情,那就使用简化的办法吧.严格来说,这只是个显示上的问题,表格功能丝毫不受影响.

由于我无法弃Mac狂热者于不顾(任何称职的网页设计师都应该这样),因此再往后的示例中,我还是会用IE for Mac也能正确显示的版本.

扩大空间

现在我们手上有了一个完美的表格,不过它看上去有点局促...让我们为手边的th,td规则加上一点内补丁,给它们呼吸的空间(图3-5)

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

border-collapse: collapse;

}

th, td {

padding: 10px;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

图3-5:加上10像素内补丁的表格示例

你知道吗?如果用单一数值设定内补丁的话(比如之前的例子的10px),就需要给元素的四边都加上相同的设定值,你也可以按照顺时针顺序(上右下左)分别指定每一边的设定值.如果你把内部定设定为10px 5px 2px 10px的话,就会在顶部加上10px的内补丁,右侧加上5px的内补丁,底部加上2px的内补丁,左侧加上10px的内补丁.

另一条捷径:如果上下的设定值相同,左右的设定值也相同的话,你就只需要分别设定一次就可以了,如果设定了padding:10px 5px的话,就会在上下部加上10px的内补丁,在左右侧加上5px的内补丁.

图3-6:顺时针设定内补丁和外边界的顺序

调整表头的显示效果

我们可以轻松的给表头加上背景色，选用不同的字体，让表头更加的明显，由于我们是使用了标签而不是直接在行内将内容设为粗体,因此我们不必加上任何其他的标签,就能直接为表头内容设定样式.

我们在标题下面也加上一点内补丁,同时还用不同的字体,颜色(当然是红色)以突出标题内容(图3-7)

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

}

caption {

font-family: Arial, sans-serif;

color: #993333;

padding-bottom: 6px;

}

th, td {

padding: 10px;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

th {

font-family: Verdana, sans-serif;

background: #ccc;

}

图3-7:加上样式的标题和

为表头加上背景图片

刚才我们为表格里的元素加上了灰色背景,但是我们其实可以更进一步,用背景图平铺在格子里来作出漂亮的效果,举例来说,我们能用细致的灰色条纹模拟出许多Mac OS X中的窗口样式

小图片

首先我们用photoshop(或者其它你熟悉的绘图工具)建立一个小图片,在这个例子中,我们要制作一个2像素灰色和2像素白色交替出现的效果,因此图片只需要4像素高,宽度多款都无所谓,因为它会在里平铺开来,做出我们想要的条纹效果.为了节省带宽,我们只做1像素宽(图3-8)

图3-8:1X4的像素条纹图片(放大后)

CSS

沿用刚才示例中的代码,我们需要修改的地方只有把背景颜色换成刚制作好的小图片路径,除非另外制定,否则根据默认设置,背景图会自动超每个方向平铺.

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

}

caption {

font-family: Arial, sans-serif;

color: #993333;

padding-bottom: 6px;

}

th, td {

padding: 10px;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

th {

font-family: Verdana, sans-serif;

background: url(th_stripe.gif);

}

图3 -9是套用这个样式后的表格,表头部分分线了条纹背景,要实验其他的平铺背景图也很方便,你可以试试怎样才能为表头或资料做出最好看的效果,好好享受这个实验的过程吧.

图3-9:在表头使用平铺背景的示例

为ID指定图标

记得本章开始的时候我们为表格里的每一个加上唯一的ID吗?那时我们把这些id与数据列表中的headers属性匹配起来,帮助非可视化浏览器的使用者了解表格的内容,现在我们能在另一个地方发挥这个id的功能了,那就是为每个指定不同的图标.

图标路径会完全记录在css文件中,让你能够在网站重构,更新时轻易的替换,完全不必修改标签部分.

图标

我用photoshop做了三个独特的图标,分别用在示例中每个表头上:Year, Opponent与Season Record(W-L).图3-10就是这三个图标:

图3-10hotoshop制作的三个表头图标

CSS

加上css并不困难,因为我们为每个都制定了独特的id,因此我们能直接用background属性来指定正确的图标.

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

}

caption {

font-family: Arial, sans-serif;

color: #993333;

padding-bottom: 6px;

}

th, td {

padding: 10px;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

th {

font-family: Verdana, sans-serif;

}

#year {

padding-left: 26px;

background: #ccc url(icon_year.gif) no-repeat 10px 50%;

}

#opponent {

padding-left: 26px;

background: #ccc url(icon_opp.gif) no-repeat 10px 50%;

}

#record {

padding-left: 26px;

background: #ccc url(icon_rec.gif) no-repeat 10px 50%;

}

你应该注意到了,我们改用简写方式定义了背景样式,我们从th的定义中取出background:#ccc规则,并把它放到每个表头的图标名称旁边,这会使得我们的图标“坐”在我们指定的灰色背景上面,我们也在每个表头内容的左边留够图标的空间,不让文字覆盖上去,图3-11就是我们想要的效果:

图3-11:为每个制定独特图标的效果

使用简写语法有明显的优点,然而,如果我们只以background属性定义图片,不定义背景色的话,就应该先取消掉先前在中以background定义的背景色.

组合规则,简化内容

能够达到相同功能的另一种写法,是把每个表头里反复出现的规则(在这个例子中是背景图片,内补丁和位置)拿出来写在定义一次就好了(因为它们的设定在每个中的确都一样),然后只在#year,#opponent,#record定义内保留各自不同的设定值(也就是图片路径)

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

}

caption {

font-family: Arial, sans-serif;

color: #993333;

padding-bottom: 6px;

}

th, td {

padding: 10px;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

th {

font-family: Verdana, sans-serif;

padding-left: 26px;

background-color: #ccc;

background-repeat: no-repeat;

background-position: 10px 50%;

}

#year {

background-image: url(icon_year.gif);

}

#opponent {

background-image: url(icon_opp.gif);

}

#record {

background: url(icon_rec.gif);

}

这样稍微简洁一些了吧?借着整合相同规则,我们能够省下每次重复定义修改的时间和精力,以这个例子来说,看起来只差六个,半打而已,但是对大一些的样式表来说,节省的量就很可观了.

总结

在本章,我们不仅发现了表格并不邪恶,同时还深入了解表格之后,我们发现,他们很适合用来标记例表数据,而且仍然易于使用

我们更发现,只要加上一些样式,就能控制列表数据的显示方式,让他们变得十分具有吸引力,别再为使用表格而感到恐惧了.

来自：www.blueidea.com/tech/web//5710.asp译者：zhaozy 小宁

点击看大图

篇2：标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 1 清单网页设计

标准化设计解决方案 - 标记语言和样式手册

Web Standards Solutions The Markup and Style. Handbook

Part 1: Get Down With Markup 从标记语法谈起

Chapter 1 清单

在网络上几乎每个页面都能找到清单. 超链接清单;购物车物品清单;你中意的电影清单...甚至是整个网站的导航清单.可能在某些人看来,清单的建立是随心所欲的,但是我们要去探索发现的正是如何建立清单以及集中几种常用方法的优缺点.稍后,我们会列出几个如何美化普通清单一集他们的优缺点的示例来.

咱们去购物吧

最初,我打算用一个细目清单(洗衣清单)来作为本章的示例,但是很快的,我就意识到,我根本不知道这种清单中应该包括那些细目,所以...看在示例的份上,就用食物来举例吧!

让我们设想,你需要把一个食品清单放到你自己的网站上去,你可能会为为什么要把食物清单放到网站上去而感到不解,厄,这个可能就离题了,我们只是需要一个可以开始为清单思考的理由罢了...

在页面上,假设我们想让清单看起来像......好吧,看起来就像一个清单 — 也就是一长串垂直的列表,里面的每项内容独占一行:

Apples

Spaghetti

Green Beans

Milk

看起来非常简单,不是吗?和页面设计开发的许多方面类似,我们能够通过很多不同的方法达成相同(或者类似)的效果.与这本书后面所有的示例相同的,我将以eXtensilble HyperText Markup Language(XHTML)的观点来展现所有示例 — 并且确认选用的方法都使用正确的标记语法,遵照World Wild Web Consortium (W3C)所制定的各种标准.

我们可以轻松的在每个项目后面加上个

标签就搞定了,或者也能使用各种清单项目标签来完成这个工作,现在我们就来看3种完全不同的方法,以及每种方法的特点.

提问时间

下面哪种方法最适合建立食品清单?

方法 A: 用

换行

Apples

Spaghetti

Green Beans

Milk

方法A的确是一种被广为传用的方法,可能有数百万个页面使用过,事实上,我相信我们中的每个人都会偶尔因为使用了这种方法而感到内疚,对吧?我们希望在清单中的每一项都独占一行,而加入了换行标签(在这里使用的是符合xhtml标准的自关闭标签

)就会在每个项目后面生成断行,这就是他所有的效果了,看起来,挺管用的.

但是,如果我们想要给这个食品清单加上与其他页面元素不同的样式的时候该怎么办呢?比方说:如果想让清单的所有链接的颜色变成红色而不同于默认的蓝色,或者想要改变字体的大小时该怎么办呢?真的我们什么都做不了,我们被为整份html文档设定的字体风格(如果有设定的话)限制住了.同时,如果在清单外面没有任何标签围绕,我们就没办法为清单制定一个独特的css规则.

折行

如果我们在清单中加入一个类似“Five Foot Loaf of Anthony”s Italian Bread“.根据这个清单在页面里摆放的位置,在水平空间不足或者浏览者的浏览器视窗比较窄的情况下,过长的项目就会冒着折到下一行的风险.

同时我们也要考虑到视力不佳的用户可能会把预设的字体大小改大以便增加可读性,我们认为能够像图1 - 1 一样把项目轻松的布置在窄栏里,但是很有可能会像图 1 - 2 这样在意料之外的地方发生断行,读者调大字体时,设计的样式就完全变样了.

图 1 - 1 预设文字大小的范围

图 1 - 2 调大文字大小后的相同内容

唔......现在,我想我应该要买面包是没错,但是在图 1 - 2 里,面包上面的两行字实在感到疑惑.

在使用小屏幕装置像是移动电话或者PDA阅读长行时,类似的换行问题就会展露它丑恶的嘴脸,骨灰级的科技爱好者可能会随手带着记录购物清单的Palm Pilot(而不是传统意义上的纸和笔)当他在超级市场里面闲逛的时候,最后却在货架中寻找一种叫”Anthony“s Italian”的东西.

在这里我要在本质上阐明一个观点 - 使用方法A ,并没有把阅读网页时的这些设计师们所无法控制的变数考虑在内.

方法 B: 会咬人的小圆点

Apples

Spaghetti

Green Beans

Milk

大多数成熟的浏览器在解析

标签时都会在清单项目的左侧加上圆点符号,你能通过方法B来达到这个效果,在需要圆点符号时加入

标签.但是如果

标签没有被包含在适当的父标签中时,那有些浏览器不会显示出圆点符号,适当的父标签包括强大的以及

的另一个父标签

(有序清单),这个会在稍后有更多的讨论.

圆点符号的出现在某种程度上的确能够帮助解决换行问题,每个食品项目在左边会有小圆点符号,如果某个项目过长折行的话,旁边没有小圆点符号应该就可以很明显的看出这并不是全新的项目,但是方法B仍然有显示结果意外的问题:它并不符合标准.

麻烦检查一下

根据W3C的XHTML 1.0规范,所有的标签最后都必须要闭合起来 — 如果我们还是继续使用上面示例中的写法,让所有的

保持开放状态的话,那就太丢脸了!

在行末使用

标签来模拟正确的无序清单自动换行的显示效果,但其实我们有更好的方法.

一向以来,养成编写正确的标签语法的习惯非常重要,正确的编写标签语法,我们可以不必在未来担心由于没有闭合标签或者不正确的嵌套元素所带来的问题.如果有人阅读这些源代码的话,也可以使他们更加深入的理解源代码想要达成的效果.

记得善用W3C的在线检测工具(validator.w3.org/)来检查你提交的URI或者上传的文档,最终你会觉得这样做非常值得.

方法 C: 接近了

Apples

Spaghetti

Green Beans

Milk

方法C更加的接近完美的解决方案了,但是还是悲惨的失败了,原因还是非常明显:这仍然不符合标准的标记语法.

我们已经把

标签关闭了,因为

是块级元素(block-level),因此在使用上可以去掉

标签,这样每个项目都独占一行,但是,我们却漏了它的外层结构,缺少了一个表示“这群项目是一个清单!”的元素.

从语义化的角度看这个问题也非常重要 — 清单是一组项目归属在一起,因此我们应该为它们加上这样的标签,此外,使用正确的清单标签能清楚告诉浏览器,软件或者显示设备“这组项目是个清单!”,语义化标签的意义就在于将内容根据他们所属的类别进行结构性的搭建.

块级(block-level)与行内(inline): HTML元素可以分为块级与行内两大类型,块级元素会从新行开始,最后接着一个断行,而行内元素则会与其他的行内元素显示在同一行内,块级元素可以包括其他块级元素和行内元素,而行内元素里面不能包含块级元素.

块级元素包括:,

-

,等等,行内元素包括:,
如果以纯XML的角度来看我们的食品清单,或许我们会使用这样的方式进行标注:
,,等等.
Apples
Spaghetti
Green Beans
Milk
整个清单有一个容器元素,所有的食品项目都包含在里面,以这种方式归类项目,可以基于XML的应用轻松的从清单里面抽取出所有的项目.
举例来说,一个开发者需要编写一份XSLT样式表,将这个清单转成xhtml,纯文字,甚至是pdf文件,因为列表项目的结构表现的非常清晰,所以程序可以轻松的获取信息并作出一些有用的处理.
虽然在这本书里我并不直接处理XML,但是这些原则也适用于XHTML世界,如果文档使用非常语义化的标签结构,将可以提升文档今后的灵活度,不管是为结构清晰的文档加上css样式表还是修改容易理解的文档 — 只要提供正确的结构,就能节省许多今后在维护时可能浪费掉的时间.
接着,我们仔细的看看方法D,看看这些怎么样结合在一起 — 一个能被大多数浏览器和屏幕阅读器识别并显示的文档,同时又允许我们使用各种不同的方法为文档加上样式.
方法 D: 愉快的包装者
Apples
Spaghetti
Green Beans
Milk
是什么让方法D变得如此特别?首先,它的语法完全正确,正确的无序清单具备了容器元素,同时每个项目都已
元素闭合起来.到这里你会想问,我们花费了那么多力气只来示范为了正确而正确?我们来看看这样做能带来的好处:
由于我们正确的标记了我们的食品清单,每个项目都会独占一行(因为块级元素
的关系),而且大多数浏览器会给每个项目的左边增加一个小圆点符号,并且进行正确的行内缩进换行.(见图 1 - 3)
图1 - 3
PDA,移动电话,或者其他的小屏幕设备的用户也可以看到清楚的,关系明确的组织方式,由于我们告诉了这些设备这些资料的类型(在这个示例里是清单),因此这些设备能够根据自己的能力决定怎样显示才能达到最好的效果.
如果因为放大字号或者缩小浏览器视窗宽度等原因造成换行,那么被换行的文字会行内缩进到与第一行文字对齐的位置,所以不管浏览器环境如何,都可以轻松的识别每个清单项目.
概要
我们已经针对每种可能的方法进行讨论了,现在让我们快速的回顾一下刚才讨论过的东西:
方法A:
无法为清单加上独特的样式
在狭窄的列里或者小屏幕设备上,较长的内容可能会因为换行而造成误解
缺乏语义性
方法B:
增加小圆点符号来帮助识别每个项目,但是一些浏览器会在缺失父级标签时可能不显示小圆点符号
没有放在中,缺少闭合标签
意味着难于加上样式
不标准
方法C:
加上了闭合标签
后就不需要
标签了
省略了元素使得我们难于为这个清单添加特定的样式
不标准
方法D:
符合标准!
使文档语义化,结构性
大多数浏览器都会在每个项目左边显示小圆点符号
在大多数浏览器上都会在换行后行内缩进
很容易就可以定义特定的css样式
正如你所见,你可以从一个看起来很简单的问题上获得不少知识.就算是你已经在你所有的页面上都是用了方法D,还是可以你为什么这样做比较好,我们会在这本书里一直探索“为什么”的问题,让你在各种情况下选用最恰当的方法.
技巧延伸
让我们利用我们构造出来的食品清单来试看看几种用定义css样式的方法,我们将抛开预设样式,加入自定义的圆点符号,接着把它转成横向,把它变作一个导航条.
扔掉圆点
“我真的不喜欢食品清单里的那些个小圆点,我想我还是用回
吧.”
不需要回到***惯 — 我们仍然可以使用我们结构化的无序清单,然后使用css关闭掉小圆点符号和行内缩进,关键在于我们保留了清单的结构,然后以css具体的呈现出来.
首先,加上一段去掉圆点符号的css规则:
ul{
list-style.:none;
}
显示的结果见图1 - 4
图 1 - 4 去掉小圆点符号
接着我们来去掉行内缩进,根据预设值,所有无序清单左边都会留有一些内补丁(padding),但是不用担心,我们可以随心所欲的裁掉:
ul{
list-style.:none;
padding-left:0;
}
显示结果可见图1 - 5
图 1 - 5
虽然图 1 - 5 看起来和使用了几个
标签的效果几乎一样,但是它还是符合标准的,结构化的无序列表 — 不管什么浏览器,设备都能正常显示,如果必要的话只需要更新几条css规则就能换上不同的样式了.
使用自定义圆点符号来完成自己的想象
或许你想要在清单里保留小圆点符号,但是不想用浏览器无趣的默认设置,更像用自己的小圆点图案.有两种方法可以达成你想要的 — 而我更推崇第二种方法,因为它可以在各种浏览器之间更好的兼容.
第一种方法是用 list-style-image 属性来指定用来替代默认小圆点的图片名称.
ul{
list-style-image:url(i_hot.gif)
}
这是最简单的方法,但是它会在不同浏览器之间的图片垂直对齐位置上有所不同,有些浏览器会把图片和项目文字中线对齐,也有的会把图片放得稍微高一点,它们之间有一点不一致.
为了避免 list-style-image 造成的几个流行浏览器之间的对齐问题,我比较喜欢用一种替代方法:把图片作为每个
元素的背景.
首先,我们要去掉默认的圆点,然后再加上我们自己的背景图片:
ul{
list-style.:none;
}
li{
background-image:url(i_hot.gif) no-repeat 0 50%;
padding-left:25px;
}
no-repeat 会告诉浏览器不把背景图片进行平铺操作(默认会平铺),而0 50%会告诉浏览器把背景图片放置在距离左边 0 像素,距离上面 50% 的地方,让背景图片 i_hot.gif 根据中线对齐.我们也可以用精确的像素来指定位置,比如说 0 6px 会让图片放置在距离左边0像素,距离上面 6 像素的位置上.
我们还要在清单项目的左边加上17像素的内补丁(padding),以便我们把宽20像素高11像素的图片能够完整显示出来,同时又留有一点空白,而不会和文字有重叠.这些数据应该根据你所使用的图片尺寸进行调整( 图 1 - 6 )
图 1 - 6 自定义圆点图片的清单
来自：www.blueidea.com/tech/web/2008/5284.asp译者：zhaozy 小宁
点击看大图

篇3：标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 5 表单网页设计

标准化设计解决方案 - 标记语言和样式手册

Web Standards Solutions The Markup and Style. Handbook

Part 1: Get Down With Markup 从标记语法谈起

Chapter 5 表单

前文回顾：

标准化设计解决方案 Part 1: 从标记语法谈起 - Chapter 1 清单

标准化设计解决方案 Part 1: 从标记语法谈起 - Chapter 2 标题

标准化设计解决方案 Part 1: 从标记语法谈起 - Chapter 3 邪恶的表格

标准化设计解决方案 Part 1: 从标记语法谈起 - Chapter 4 引用

互动性一直是互联网的重点,让使用者与网站能够交换信息,彼此沟通.表单使我们能够有组织的,使用同一方式的从使用者那里收集资料,因此在设计网站时总是属于“任何状况都能拿来用”的那一类,举例来说,我们发现大概有10000种标记表单的不同方式.好吧,或许没有那么多,但是我们仍能思考几种状况,让使用者易于使用表单结构,同时也便于让网站所有者进行管理，

记表单的方法

方法A:使用表格

Name:

Email:

长久以来许多人都以表格来标记表单,由于使用频率很高的缘故,我们已经习惯于见到表单以这种方式进行排版:左列是向右对齐的文字说明,右列则是相左对齐的表单元素.使用单纯的两列表格,是完成易用表单排版的简单方法之一.

有些人认为不需要表格,也有其他人认为应该把表单视为表状资料.我们不打算支持任何一种说法,但是在某些情况下,使用表格时达成特定表单排版的最佳方法,特别是包含许多种不同元素的复杂表单(使用了单选框,下拉选框等等的表单).完全依赖CSS处理这种表单的排版可能会让人感到挫折,而且经常需要加上额外的与,会比表格耗上更多的标签.

接着看图5-1,这是一般可视化浏览器显示方法A的效果:

图5-1:浏览器显示的方法A的效果

你会发现,使用表格可以把文字说明表单元素排列的十分整齐.然而,对这样简单的表单来说,或许我会避免选择使用表格,并且换用其他不需要使用这么多标签的方法.除非表单的视觉设计十分需要这种排版,否者未必需要使用表格.同时我们也要考虑几个易用性问题,在研究下面两个方法的时候,我们就会接触到这个部分.

方法B:不用表格,但挤在一起

Name:

Email:

使用单一段落和几个

标签隔开所有元素是个可行方法,但视觉上可能会被描绘的有点挤.图5-2十一版浏览器的显示效果:

图5-2:浏览器显示方法B的效果

虽然我们不用表格就能完成排版,但是它看起来有点挤,有点丑.同时我们也遇上表单元素无法完美对齐的问题.

我们能够以CSS为元素加上一个外补丁,以便减轻拥挤的感觉.像是这样:

input{

margin:6px 0;

}

前面这段为每个元素的上下分别加上6像素的外补丁(包含了Name,Email的输入框,以及submit按钮),在元素之间加上额外的空间.就像图5-3一样:

图5-3.方法B在为input元素加上外补丁之后的效果

方法B本身没什么大问题,但是还能进行一些微调,以便把表单做得更好.方法C里头也运用了这些微调技巧,所以一起来看看吧.

方法C:朴素,更容易使用

Name:

Email:

我喜欢方法C的几个地方.首先,对于类似本示例的单纯表单来说,我发现把每个说明与表单元素放在单独的段落比较方便,不加上样式显示时,段落之间的预设距离应该足以让你轻松阅读内容.稍后我们还能以CSS为表单内包含的

标签设定间隔.

我们甚至更进一步,为表单设定了唯一的id=“thisform”.因此,刚才我提到的精确间隔大致上可以写成这样:

#thisform. p{

margin:6px 0;

}

这代表将这个表单内的

标签的上下外补丁设定为6个像素,覆盖浏览器为一般段落选用的预设值.

方法C与前两种方法的另一个不同之处在于:尽管每个群组(说明和输入框)都放在

里头,我们仍以

把他们放在独立的一行.使用

分开每个元素,就能绕过文字长短不一,造成输入项无法完美对齐的问题.

图5-4是一般浏览器显示方法C的效果,这边有使用先前为

标签设定的样式.

图5-4.浏览器显示方法C的效果,有对P标签使用CSS

除了方法C的视觉效果之外,最重要的优点:也就是提升易用性的部分.

标签

使用标签提升表单的易用性需要两个步骤,而方法C已经完成这两个步骤了.首先是以将文字说明与相关的表单元素连接在一起,不管是文字输入框(text field),文字区块输入框(text area),单选框(radio),多选框(checkbox)等等都好.方法C在“Name:”与“Email:”标题上使用了标签,把它们与输入资料的元素连接在一起.

第二步则是为标签加上for属性,填上对应输入框的id.

举例来说.在方法C里面,以标签把“Name:”包了起来,并且在for属性里填入与其后面的输入框id相同的值.

Name:

Email:

为什么要用?

或许听过其他人说你应该在表单内加上标签.而最重要的问题在于为什么应该要用标签.

建立label / ID的关联能让屏幕阅读器为每个表单元素读出正确的标签,而不收版面排列方法的影响,这是件好事.同时,标签正是为了标记表单栏标签而生,使用这个标签的时候,我们就是在为每个元素说明意义,强化表单的结构.

在处理单选,多选框时使用标签还有个额外的好处,那就是大多数浏览器在使用者点击内文字时也会改变元素的值.这样能为输入元素造成更大的点击区域,让行动不便的使用者更容易填写表单(Mark Pilgrim, “Dive Into Accessibility,” diveintoaccessibility.org/day_28_labeling_form_elements.html).

举例来说,如果为表单加上一个多选框,让使用者能够选择“记下这些信息”,那么我们就能像这样的使用标签了:

Name:

Email:

Remember this info?

借着以这种方式标记多选框,可以获得两个好处:屏幕阅读器能读出正确的说明文字(就像这个例子一样,文字出现在输入框之后也行),而且能切换多选框的范围变大了,现在切换范围除了多选框本身之外,文字部分也包含在内(大多数浏览器都支持).

图5-5就是这个表单在浏览器中的显示效果.我们特别标示了加大之后的多选框切换范围:

图5-5.把文字包含在切换范围内的多选框

除了表单与段落之外,最后我还想展示另一个标记表单的方式,使用定义清单.

方法D:定义一个表单

Name: Email: Remember this info?

最后讨论的表单排版方法,是以定义清单定义每一组说明文字与输入框.这是有点争议的方法.我们在定义清单的原始设计目的的边缘游走,不过这是在近期逐渐普及的方法,同时也只得本书一提.

本书稍后在第8章回深入讨论定义清单.事实上,它们能应用的范围远超过大多是设计师的认知:以

排版表单就是个很棒的例子. 你应该发现了这个范围里面的每组表单说明文字都放在定义名词标签之内,随后跟着放在定义描述标签中的表单元素.这么做能将说明文字与表单元素对配起来,并且在不使用任何样式时以浏览器显示的效果见图5-6:

图5-6.以清单定义排版表单的显示效果

根据预设值,大多数可视化浏览器会把缩进显示在单独一行之内.太棒了,因为这样便不必使用任何多余的

或

标签了就能让不支持CSS的浏览器显示出容易使用的表单排版效果.

定义样式

最简单的样式修改,大概是去掉表单内元素的预设缩进:

form. dd{

margin:0;

}

前面这一小段css会使方法D范例显示成图5-7:

图5-7. 去掉缩进效果的定义清单式表单排版

方法A的表格效果,也能借着浮动表单内的元素达成:

form. dd {

margin: 0;

}

form. dt {

float: left;

padding-right: 10px;

}

在把元素浮动到左边之后,包含在之内的表单元素就会排列到右侧,像是图5-8这样.你应该已经发现表单元素不会完美的对齐,但这至少说明了使用标签排版表单时,并不代表必须将每个元素都单独显示在一行里.

图5-8.浮动元件之后的表单排版

事实上,由于多了

和元素,再加上表单内原本就具备的与元素,因此在设计CSS时,你拥有更多可以指定样式的对象,而发挥的空间也变大了.

概要

看完四种标记同一个简单表单的不同方法,同时也讨论了彼此的优缺点,要注意的是,我们为方法C与方法D加上了易用性功能,当然也可以加到头两个方法上,在得到这些改进之后,这两个方法当然也会变得更棒.

这几个方法没有哪一个明显比其他方法要好,或者能当作“最佳解决方案”.不过多知道几种方法很有价值.而你也以组合这四种方法,在你的项目里做出更棒的表单.

方法A:

以视觉效果来说,是个建立表单元素,说明文字的简介方式,在处理复杂,庞大的表单时尤其好用.

然而,为了这样单纯的表单使用表格,似乎太麻烦了.

方法B:

简单的标记法在文字浏览器,小屏幕设备上的显示效果不错.

以视觉效果来说,只用

会让排版变得太拥挤.

方法C:

简单的标记法在文字浏览器,小屏幕设备上显示效果不错.

允许说明文字,表单元素的长度变化,不会有对齐的问题.

包含重要的易用性功能(也能使用在先前的方法内).

方法D:

结构化标记法在文字浏览器,小屏幕设备上显示效果不错.

包含重要的易用性功能(也能应用在先前的方法内).

说明文字与表单元素能以CSS指定要放在同一行之内,或是分行摆放.

当你使用方法A或方法B的时候不必感到内疚,但是学会方法C的优点,并且把它应用到先前的例子里仍然不错.

方法C也有进步的空间,而我们也将在“技巧延伸”这个单元内看到几个我们能加上的额外功能.我们也会讨论一些简单的CSS样式.让我们把表单修饰得更吸引人.

技巧延伸

在这个单元中,我们会先讨论tabindex和accesskey属性,看看它们如何使表单变得更加容易浏览.我们也会研究能帮助组织表单区域的

标签,最后,我们会看一些CSS,因为它能把表单外观修饰得更漂亮.

神奇的tabindex：

我们能轻易加上的功能之一是tabindex属性.加上tabindex,为它指定一个数值之后,使用者就能以键盘切换正在使用的表单元素(通常是Tab键).按下Tab就会依照我们所制定的顺序跳到下一个表单元素.根据预设值,每个能互动的元素都隐含有tabindex,但使用tabindex能收回浏览器指派的顺序,让你完全掌握控制权.

举例来说,让我们为先前的示例(方法C)里面的表单元素加上tabindex属性:

Name:

Email:

Remember this info?

现在,当使用者在表单内切换输入框的时候,我们能确定切换的顺序与我们期望的顺序完全相同:Name,Email,Remenber this info与submit按钮.

在设计复杂,单一行有许多输入框或者其他表单元素的表单时,使用tabindex设定切换顺序的优点就显而易见了.

为何指定切换顺序?

除了在我们表单上实施非常简单之外,还能再次帮助到行动受限的使用者,使其能完全以键盘浏览表单内容.他们不需要抓起鼠标点击每个部分,只需要用Tab键就能依照正确的顺序遍历每个表单元素.请为那些无法同时使用双手浏览网页的人想想,这真的很有帮助.

为频繁使用的表单指定快捷键

与tabindex类似的.accesskey属性是另一个容易加上的功能,不仅能帮助行动受限的使用者,对其他人来说也是方便极了.

举例来说,如果为表单内包围着Name:的标签上加上accesskey属性,那么在使用者按下指定的按键时,光标就会自动跳到与说明文字相关的输入框.

我们来看看达成这个效果所需要的代码:

Name:

Email:

Remember this info?

使用者必须在按下9这个按键的时候同时按下Alt或Ctrl键,根据系统而定,之后光标就会立刻移到Name:的输入框里头.

容易使用的搜索框

在设计会经常使用的表单时(比如搜索框,用户登录等等),加上accesskey属性格外有用,使用者不必伸手去拿鼠标,就能使用键盘立刻切换到适合的位置,开始进行输入.

有件事必须留意,虽然不是所有浏览器都支持accesskey,但是加上这个属性对支持的浏览器使用这很有帮助,举例来说,要是我们加上accesskey=“9”的搜索位置时,windows使用者可以按Alt+9,而Mac使用者则能以Command+9直接切换到搜索输入框内了.

为表单加上样式

现在有了结构完善的表单,接着让我们研究一些能够用来自定显示效果的CSS技巧吧!

设定文字输入框的宽度：

处理表单元素需要技巧,因为它们的宽度,高度与浏览器种类有关.在表单示例中,我们没有指定文字输入框的宽度,让浏览器自动使用预设值,一般来说,设计者或许会以size属性为元素指定宽度,像这样:

把大小指定为20代表将文字输入框的宽度设置为20字元(而不是像素).根据浏览器的预设表单字体,实际的输入框像素宽度可能会有差异.这使得精确指定表单排版变得有点困难.

如果需要的话,我们能借着CSS以像素为单位控制输入框(以及其他表单元素)的宽度.举例来说,让我们把示例表单中的所有元素宽度设定成200像素,我们会利用为表单指定id属性,在这个示例中是thisform.

#thisform. input {

width: 200px;

}

这时,所有在#thisform内的元素都会变成200像素宽.图5-9是可视化浏览器的显示效果.

图5-9 把所有元件宽度设置成200像素之后的效果

哦喔~多选框和submit按钮也是元素,因此得到了相同的设定值,让我们改以id指定Name和Email输入框,而不是一次设定所有的元素的宽度:

#name, #email {

width: 200px;

}

图5-10是以浏览器检查修正后成果的效果,这时只有两个文字输入框是200像素宽的了.

图5-10.只有文字输入框是200像素宽的效果

使用自定字体：

我们有几种不同的方法能够调整表单内文字的大小,字体与色彩,我们再度奉行“利用你使用的标签”哲学,直接以元素为文字设定样式.

我喜欢以元素指定文字样式,主要是因为,在不少情况下,我们都会希望为说明文字指定独特的样式,使它们容易与表单内可能出现的其他文字区分开来,举例来说,我们可以为表单内的所有段落标签制定独特的样式:

#thisform. p {

font-family: Verdana, sans-serif;

font-size: 12px;

font-weight: bold;

color: #66000;

}

这会使表单内的所有段落文字使用粗糙,酒红色的Verdana 12像素大小的字体.但是同样的结果也能借着为表单内的元素指定相同样式来达成,像这样:

#thisform. label {

font-family: Verdana, sans-serif;

font-size: 12px;

font-weight: bold;

color: #66000;

}

这个样式的显示效果见图5-11.

图5-11.为label指定样式的效果

为什么我比较喜欢这个方法?假设除了说明文字之外,表单还有其他放在

当中的指示或文字内容.那么在前一种方法内,这些文字就会使用和

相同的样式设定了.

也能先为表单中的所有文字制定一种样式,接着再为特别指定样式,以便做出独特的表单元素显示效果.

使用的CSS大概类似这样:

#thisform. {

font-family: Georgia, serif;

font-size: 12px;

color: #999;

}

#thisform. label {

font-family: Verdana, sans-serif;

font-weight: bold;

color: #660000;

}

不需要多余的代码

或许你或发现,在#thisform. label 的定义中没有重复font-size:12px;由于元素包含在#thisform之内,因此他们会继承这个属性.在较高层级设定共享规则,接着在元素树底层覆盖有需要的设定值是个好习惯.这能节省不少代码.除了显而易见好处之外,也能让往后的维护工作轻松不少.如果你想改变整个表单的font-family,那么只需要修改一条规则,而不必修改所有重复设定字体的规则.

想象你设计了一个网站,全部使用了Georgia字体,最初你在20个不同的规则中分别加上相同的font-face:Georgia,serif;规则,过了一星期后,老板跑来找你并且对你说“CEO现在讨厌serif字体了,把网站内容改用Verdana”.这时你的钻进这20条规则里,慢慢修改了.

或者是,你也能在更高层级设定一次这条规则,比如说指定在元素里,此时整份文档都汇继承Georgia字体,除非以其他规则指定另外的设定值.现在,当老板要求你进行修改时,你就能回答“没问题,两分钟之后搞定”;或者是能把简易性留给自己,告诉他这需要耗上两个小时,然后用这些额外的时间上eBay标东西.

OK,当然,你应该告诉老板真相,他们应该知道你的价值,为公司节省时间并且善用你找到的新解法.

以

制作表单元素群组

使用

是个为表单元素分组的便利方法.除此之外,加上叙述用的

则会在大多数浏览器内,为你做好的表单元素群组加上一个漂亮的边框.我刚刚有说“漂亮”吗?嗯,我的确喜欢这种边框.而我们只需要用上一点CSS,就能使它变得更加迷人.

首先,来看看建立群组是需要哪些标签.接着为示例表单加上一个群组:

Name:

Email:

Remember this info?

图5-12是浏览器显示这个群组的效果图,包含刚加上的

与

标签,以及刚为设定的CSS样式.或许你已发现有条漂亮的边线围绕在里面的所有表单元素之外,同时的内容断开了左上方的边线.

图5-12.加上

与之后的表单

我说这个效果“漂亮”的原因是:完全不加上CSS,使用它们的预设样式,它的显示效果的确让人相当感动.同时还能加上一些自定属性,使它变得更有趣,我们马上动手.

你应该也能看出

在为表单隔出不同区块的时候十分有用,举例来说,如果我们的示例是个大表单的第一部分,那么以从视觉上隔开这些区块的话,不仅语义更清楚,还能使表单结构更明显,更容易阅读使用.

为

和加上样式

我们能使用CSS改写

预设边框与文字的样式,与定义其他元素的样式一样简单,首先,我们来修改边框的颜色和宽度,接着再修改文字本身.

为了使

的边线变得更加细致,我们使用以下的CSS:

#thisform. {

font-family: Georgia, serif;

font-size: 12px;

color: #999;

}

#thisform. label {

font-family: Verdana, sans-serif;

font-weight: bold;

color: #660000;

}

#thisform. fieldset {

border: 1px solid #ccc;

padding: 0 20px;

}

接着为左右两边指定20像素的外补丁,并且去掉上下外补丁,为什么要去掉这些外补丁?因为我们的表单说明文字,表单元素都放在

标签内,因此他们在上下方向上已经留足了边界空白.

图5-13是指定这些样式之后的表单显示效果.

图5-13.为

指定样式之后的效果

立体的

最后,为

标签指定一些样式,做出立体的边线效果,让它看起来像是与元素的边线连在一起.

#thisform. {

font-family: Georgia, serif;

font-size: 12px;

color: #999;

}

#thisform. label {

font-family: Verdana, sans-serif;

font-weight: bold;

color: #660000;

}

#thisform. fieldset {

border: 1px solid #ccc;

padding: 0 20px;

}

#thisform. legend {

font-family: arial, sans-serif;

font-weight: bold;

font-size: 90%;

color: #666;

background: #eee;

border: 1px solid #ccc;

border-bottom-color: #999;

border-right-color: #999;

padding: 4px 8px;

}

如你所见,这里做了几件事,首先,调整了

的字体,粗细与大小,接着产生了立体效果,把背景设为浅灰色,然后在整个的外面加上配合边线颜色的单像素边线,为了达成阴影效果,我们还把底部与右侧的边线颜色换成深一点的灰色.

字体大小百分比: 由于我们之前为整个#thisform. 的字体设置为font-size:12px;因此要缩小文字时,我们直接用百分比,在较高层级指定字体大小,接着在底层使用百分比,能够减轻未来的维护负担.要调大整个网站的字体大小么?只要修改一个地方,所有百分比都会随之改变.事实上,最理想的状况下,我们可以设定的初始字型大小,然后在其他所有地方使用百分比.然而在这个示例中,我们选择在层级指定字体大小.

然后调整内部定,以便文字与边线之间留下一点空间.就是这样了!图5-14显示的是最后结果,加上本章内的所有CSS代码,同时仍然使用最简洁,灵活的表单结构.

图5-14 完成的表单示例,以CSS设定样式.

结论

标记表单有许多方法,不管你使用表格,定义清单,还是最基本的段落标签进行说明,表单元素的排版,都要记住,本章讨论的易用性功能,可以轻易加到任何方法里面.

像是tabindex与accesskey这种属性可以提升浏览效率,而元素与对应的id属性能确保互助设备可以正确辨识你的表单内容.

基于短小简介的修改,就能得到更好的结果.

来自：www.blueidea.com/tech/web//5831.asp译者：zhaozy 小宁

点击看大图

篇4：标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 2 标题网页设计

未必一定是占据了半块屏幕的庞然大物,稍后,我会示范如何简单的用css样式来定义标题标签,以此来帮助你克服对

的恐惧.
对搜索引擎的友好
这是最大的优点.搜索引擎十分喜欢标题标签,标签或者段落中的粗体对搜索引擎来说并没有多大意义,使用正确的

~

标记标题花不了多少时间,但是却能帮助搜索引擎为你的页面建立索引,让用户更容易找到你的网页.
搜索引擎的机器人非常重视标题标签中的内容,或许,你会想要在里面堆上几个关键字,在他们处理完和标签之后,紧接着就会处理页面内容中的标题标签,如果你的页面上没有使用标题标签的话,那这些在你的标题中的关键字不会引起他们的重视,被他们忽略.
所以,只需要花少少的时间,就能让其他人更容易通过内容找到你的网页,听起来不错,对吧?
附带一提的标签顺序
在上面的示例中,在页面中最重要的就是标题,因为他是整个文档的标题,因此,我们将使用最重要的标题标签

,根据W3C,有些人认为跳过标题层并不是什么好习惯,举例说明,假设我们有下面这么一份网页:

Super Cool Page Title

那么下一个标题(如果不是另一个

的话),就应该是

篇5：标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 2 标题网页设计

等等,你也许不会跳过某级标题,比如说在

之后直接使用

.我比较赞同,并且认为结构和纲要相同,应该按照顺序使用每个级层,这能让你为已经存在的页面方便的添加标题,样式.同时这样也比较不会出现用完所有标题级层的情况.

如同先前所述,设计者可能会使用

代表页面里最重要的标题,只因为它的预设字体大小不如

那样大的恐怖.但是要记住,先写结构,再调整样式,我们可以在任何时候根据我们自己的喜好通过css改变标题标签的字体大小.
概要
让我们大致上回顾一下,为什么使用标题标签(

到

)来标记页面内的标题会比较好.
方法A:
可视化浏览器会在禁用或不支持css功能时,以一般文字相同的样式显示标题,非视觉浏览器则完全不知道标题和内文文字之间的差别.
搜索引擎不会特别重视以标记的标题
我们能制定独特的样式,但是我们在新增标题时,却会被heading类困死.
方法B:
可视化浏览器只会用粗体显示内容,继续使用预设的字体大小.
我们无法为标题加上和内文不同的独特样式
搜索引擎同样不会特别重视以
创建的标题的内容.
方法C:
传达了标题标签中的文字确切的含义.
不管是可视化还是非可视化浏览器不管读到什么样式都会正确的处理标题内容
搜索引擎会重视标题标签中的关键字.
技巧延伸
这里我们将采用方法C,并用它来实验一些简单的css样式.我们将完全发挥标题标签独特性的优势.我们可以非常安心的使用标题标签,因为不管在什么浏览器和设备上,都能正确的处理标题内容.接下来我们来给他装扮装扮,然后带它上街(如果你能够带着一个html标签上街的话....)
简单的样式
使用css,最简单最容易实现的效果就是为标题设置不同的字型.我们可以编写一个css规则,然后套用到页面中所有的

标签上(如果你用到了外部样式表,那就可以把样式套用到整个网站上).如果在稍后的时间里想要改变整个网站里每个

的颜色,大小或者字体,那么只需要修改几条css规则就行了,而且修改之后的效果能够马上看到!这听起来很诱人,对吧?
让我们超级酷的标题来告诉我们自己吧:

Super Cool Page Title

让我们用css来改变它的颜色,字体和大小吧:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
}
就像我们刚才所说的,非常简单,整个页面的所有

都被设置成24像素大小,蓝色的Arial(或者默认的sans-serif)字体,如图 2-2:
图 2-2: 标题样式示例
接下来我们继续在标题文字下面加上1像素宽的灰色边框(如图 2-3):
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}
图 2-3:加上灰色底边的标题样式示例
我们在文字底部多留了些内补丁,使得下面的边线不至于呼吸困难.因为标题标签是块级元素,因此边框会不止填满文字底部,还会继续向右边延伸,直到填满整个页面宽度.
另外值得一提的是,我们使用了边框的简写法 — 就是在一条声明中同时定义了宽度,样式,颜色.你可以试试看其他的设定值,看看有什么别的效果.
加上背景
背景能给标题加上精巧的效果.只要加上背景色与一些留白,不需要用到图片我们就可以创造出清新的标题风格.举例来说:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding: 4px;
background-color: #696;
}
我们把标题中的文字变成白色,周围留出4像素的内补丁空间,同时把背景改成绿色.如图2-4那样,会有一条宽大的,颜色如同撞球桌的绿带贯穿整个页面,分割两个段落.
图2-4:设定了内补丁和背景色的标题示例
背景和边框
只要在标题下面加上一条细边框,再配上浅色背景,你就能不用一张图片的情况下做出三维的效果.
这份css与上面的十分类似,只改了几个颜色,在底部加上了2像素的边框
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #666;
padding: 4px;
background-color: #ddd;
border-bottom: 2px solid #ccc;
}
借着使用不同亮度的相同颜色,就能做出如图2-5般逼真的三维效果:
图2-5:设定背景和底边的标题
平铺背景
用上图片的话,就能发挥更多的创意了.就让我们用photoshop创建一个10X10的小图片,最上面是黑色的边框,然后下面是从上到下的灰色梯度(如图2-6):
图2-6 用Photoshop创建的小图片
我们可以用css把这个小图片放到我们的

底部去:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: url(10x10.gif) repeat-x bottom;
}
设定 repeat-x 使浏览器在平铺背景图的时候只在水平方向上排列(相对的repeat-y就是在垂直方向上排列),同时我们设定了将图片放置在标题的底部,并加上一些下部内补丁,以便调整图片和标图文字之间的距离(如图2-7)
图2-7:设定平铺背景的标题示例
方便替换的图标
我们也可以使用cssdebackground属性来设定放在文字左边的小图标以此来代替写死图片标签的方法,为标题加上装饰用的小图标.这个方法能使在未来的日子里改变网站显示效果的工作变得十分轻松—只需要替换那么一个css规则,就能同时改变整个网站的显示效果.
代码和上面的平铺背景大致相同:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-left: 30px;
background: url(icon.gif) no-repeat 0 50%;
}
我们在文字的左边多留出一块空间以便防止我们想要的图标,然后设定no-repeat指定背景图片不进行平铺(如图2-8),同时我们希望图标的位置在据左边0像素,并且对起垂直中线.
图2-8:设定了图标的标题示例
容易更新
让我们设想这样一个场景:在一个包含了100个页面的网站里,我们没有使用上面的方法,而使用标签写死每个标题旁边的图标,图标和网站风格是相融合的,几个星期后,网站的主人打算换掉网站风格,而新的图标大小和旧的并不一样,哎呦!这下我们就得回去修改整整100份页面里面的标签以更新新图标的路径,真讨厌!想想这些事件会对项目预算造成怎样的影响,对完工期限带来多大的压力?时间就是金钱啊!
如果把这些并不十分重要的,装饰性的图标整合到一个css文件中,只要花上几分钟就能够一次性换掉整站的所有图标,带来崭新的外观!由此你应该可以渐渐明白到结构标记和显示效果分离的好处了吧.
变色龙效果
下来的技巧和我刚才所说的有一些矛盾,但是我认为这个技巧在某些情况下是十分有用的.这是我在4月为Fast Company杂志的网站(www.fastcompany.com)做标准重构时大量使用的技巧.
那时我们在网站里的

标签旁边用了许多13X13的小图标,就像这样:

FIRST IMPRESSION

有两个让我们决定要这样把图标写死在网页里面.首先,根据标题种类的不同,我们会使用到不同的图标(图书俱乐部是一本书,每日引言则是引号等等),第二个理由则是我们每个月会更换一次整个网站的配色,以配合当期杂志的封面主题.当然,这种替换工作因为使用了css而变得十分简单.

为了让图标跟着其他页面元素一起变色(这样才不必一直为了新色彩而重新制作图标),我们只用两种颜色做了一组图标:白色和透明(会显示除每次更改的背景颜色).图2-9就是放在首页引言之前的图标:

图2-9: 13X13的透明图标(放大后)

为了在透明部分填进颜色,我们使用了简单的css的background属性设定颜色,我们希望只希望这个颜色出现在图表的后面而不出现在标题文字后面,我们用到了css选择器只对

标签内的图片使用这条规则,以便达到我们想要的效果:

h3 img {

background: #696;

}

这段css代码表示

标签内的所有标签都把背景设为绿色,背景色会透过透明像素显示出来,但是白色部分仍然还是白色,如此一来,每个月只需要修改这条css规则,换上不同的颜色,就能瞬间改变网站上每个图标的色彩了,就像变魔术一样.

对齐标签

为了使图标和文字正确的对齐(我们希望垂直居中),因此我们加上了这条css规则:

h3 img {

background: #696;

vertical-align: middle;

}

这条规则会使图标和

文字内容垂直居中,图2-20就是设定玩的标题:

图2-10:以css为图标加上背景色的示例

这个例子还能说明另一个重要的概念—以css指定背景色彩会出现在任何页面内指定的图标或是css图标后面.

举例来说,我们回头看看“方便更新的图标”这个示例,为它加上背景色看看:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #fff;

padding-left: 30px;

background: #696 url(transparent_icon.gif) no-repeat 0 50%;

}

如此以来 transparent_icon.gif 会显示在相同规则中稍早定义的背景色之上(如图2-11) —在这个例子中,背景色是#696,也就是撞球桌的绿色.

图2-11 设定了背景图,背景色的标题示例

当你为了考虑色彩为主的页面上加小圆角,装饰图标时,这个小技巧就十分好用了.这些不重的图片可以完全放进css文件里面,未来打算更新的时候也就可以轻松替换.现在多用点心思.就能节省未来许多的工作.

总结

我希望通过比较集中常用的方法后,你能发觉正确使用标题标签的好处.不管是视觉,非视觉浏览器或者其他设备,都能正确的历届标题的含义,并且以适当的方法展现它们,搜索引擎也会为他们建立索引,你也可以轻松的以css应用和修改需要显示的效果.

来自：www.blueidea.com/tech/web//5666.asp译者：zhaozy 小宁

点击看大图

篇6：标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 8 再谈清单网页设计

系列文章索引：《标准化设计解决方案 Part 1: 从标记语法谈起》

标准化设计解决方案 - 标记语言和样式手册

Web Standards Solutions The Markup and Style. Handbook

Part 1: Get Down With Markup 从标记语法谈起

Chapter 8 再谈清单

先前在第一章,我们讨论过几种标记清单的做法,研究以和

将它们标记成无序清单的好处.这个方法能标识清单的结构,确保所有浏览器与设备都能正确显示它的内容,同时也让我们能以CSS为它加上各种样式.

而在各种环境下,处理个别问题时标记清单的所有做法写出来的话塞满整本书都不难,我不打算塞满整本书,但是我的确打算以独立一章讨论除了无序清单之外的其他几种清单类别.研究几种适合使用清单的状况.

清单是个组织页面结构的强大工具,为每个独立的项目加上意义,让你能在稍后以css加上独立的样式.

让我们先来看看编了号的项目清单,以及两种标记这类清单的做法.或许你一眼就能看出哪种方法比较有益,但是我仍会再度详细说明这个例子,以便强调结构化标记,使用正确工具解决问题的重要性.

编号项目清单的标记法,哪种最好?

假设你打算标记一个步骤清单,每个项目之前都有编号,我们将会研究两种能够达成这个目标的不同方法,同时说明为何某个方法比较适用.

方法A:乱中有序

1. Chop the onions.

2. Saute the onions for 3 minutes.

3. Add 3 cloves of garlic.

4. Cook for another 3 minutes.

5. Eat.

前面这份清单可能是烹饪历史上最糟糕的食谱之一.但是拿来当简单的例子还蛮合适的,加点盐和鸡蛋可能好些,或是...不管,回到正题.

方法A我们选择以无序清单标记这些步骤,以便获得我们在第一章提过的所有好处,我们为内容加上结构,同时知道大多数浏览器,屏幕阅读器以及其他设备都能正确处理这部分内容,稍侯我们也能用css轻易为它指定样式,很棒!但是...

数字游戏

由于这是个有编号的清单,因此我们在每个项目之前加上编号,编号之后跟着句号,以便标识每个步骤的顺序,但是如果稍侯需要在第2步,第3步之间加上新步骤的话该怎么办呢?这下我们需要(手动)为新增步骤之后的所有项目重新编号.对这个清单来说,不是什么麻烦事,但是如果你正在修改某个具有100个项目的清单时,修改过程就会变得非常冗长乏味了.

出现小圆点符号

由于我们以无序清单标记这个示例中的结构,因此在每个编了号的项目之前都会看到一个小圆点符号(就像图8-1),你或许会喜欢小圆点符号,如果不喜欢的话当然可以通过CSS把它去掉,但是不使用CSS浏览这个清单的时候一定会再看到这些小圆点符号.

图8-1,浏览器关闭CSS阅读方法A的结果

有个更简单,更具意义,更容易维护的方法,让我们看看方法B.

方法B:有序清单

Chop the onions.

Saute the onions for 3 minutes.

Add 3 cloves of garlic.

Cook for another 3 minutes.

Eat.

我确信这是大多数人选用的做法,但是这并不代表我们都没有在某些情况下,因为某种原因使用方法A.

代表“有序清单”(ordered list),因此语义上我们使用了正确的元素解决手上的问题.方法B还有什么特别之处?

自动编号

或许你发现我们不必手动为每个清单项目加上编号了,在使用了

时,会自动依照顺序产生编号,如果我们的步骤清单内包含了超过100个项目,而我们需要在中间插入几个新步骤时,我们只需要简单的在正确的位置插入新的

项目就行了,浏览器会自动重新编号,简直就跟魔术一样.

如果使用方法A的话,我们就需要在插入每个项目的时候手动修正所有编号,我随便都能想到比这更有趣的工作可以做...

图8-2,十一版浏览器显示方法B的效果,在每个步骤之前都自动加上编号.

图8-2 浏览器显示方法B的效果

愉快的包装者,第二部

方法B的另一个好处是,很长的清单项目在换行的时候,会缩进到产生的编号后面,而方法A则会折到编号下面(图8-3)

图8-3 比较方法A和方法B换行效果

清单种类

虽然有序清单的预设编号样式通常是阿拉伯数字(1,2,3,4,5等),但是我们能通过使用CSS的list-style-type属性换掉编号样式.而list-style-type能在以下几种任选其一:

decimal: 1,2,3,4,...(通常是预设值)

upper-alpha: A,B,C,D...

lower-alpha: a,b,c,d...

upper-roman: I,II,III,IV...

lower-roman: i,ii,iii,iv...

none: 不加上编号

因此,举例来说,如果我们想让方法B产生大写罗马编号的话,我们就能够以下的CSS达成目的:

ol li {

list-style-type: upper-roman;

}

图8-4就是方法B配上这份CSS在浏览器内的显示效果,我们的步骤列表现在不再是预设的阿拉伯数字,而是改用罗马数字编号了.当然,标记的部分仍然完全相同.改变主意了吗?只要做点小小的修改,换上先前列出的其他样式,就能马上把清单的编号方式改成你喜欢的样子.

图8-4 换用罗马数字的有序清单

HTML的type属性:之前可能有些人会直接在

标签中使用type属性,把清单的编号方式换成罗马数字,英文字母等等,然而,为了支持稍早所述的CSS规则,从HTML 4.01标准开始就不建议使用type属性了,因此,你不应该再使用type属性,应该改用CSS.

稍后,在技巧延伸中,我们会以CSS为这个有序清单加上样式.但现在让我们先看看另一个清单种类的例子.

一群名词与解释的标记法,哪种更好?

OK,这个问题已经提供够多线索,本身差不多就是答案了.在我们看完下面两种方式之后,你就会知道刚才这句话的意义了.比问题本身更重要的是:方法A是个在标记名词与解释时经常使用的做法,而方法B其实是一种很少人会使用的清单,但是它能应用在许多情况下,结构也更灵活.

首先,让我们很快的看看你可能十分熟悉的名词 / 解释标记法,特别是W3C定下的几个标准:

方法A

CSS

A simple mechanism for adding style. (e.g. fonts, colors, spacing) to Web documents.

XHTML

A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.

XML

A simple, very flexible text format derived from SGML.

这个方法看起来有点道理,使用无序清单,并且以

标签隔开名词与定义内容.

然而,如果我们想为每个名词(CSS,XHTML和XML)与定义内容指定不同的样式,那么要怎么做呢?使用方法A时的唯一选项,是加上某些可以指定样式的标签,像是额外的或.从维护的角度来看,这不是个理想的做法.

图8-5是方法A在一般浏览器中的显示效果,名词与定义分别处于单独一行.

图8-5 以一般浏览器显示方法A的效果

除了不能为每行制定特殊的样式外,方法A并没有什么缺点,但是已经足够当成接口,让我凸显方法B使用的清单种类 -- 定义清单.

方法B

CSS A simple mechanism for adding style. (e.g. fonts, colors, spacing) to Web documents. XHTML A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XML A simple, very flexible text format derived from SGML.

定义清单(

)内容由两种额外标签组成:(定义名词)以及(定义描述).对我们的例子来说,定义清单完美符合内容代表的意义 -- 因为我们就是在定义一系列名词,解释.

根据预设值,大多数可视化浏览器会将定义描述显示在独立的一行内,并且稍微缩进(图8-6),当然我们可以利用CSS视需要修改缩进设定.

图8-6 一般浏览器显示方法B的效果

由结构引导样式

语义上来说,方法B十分完整,让我们能为清单的每一个元素使用独立标签,这让我们能分别为名词,揭示内容制定特定样式.

举例来说,我们能做个简单修改,以CSS把变成粗体.只要几行声明就能达成这个目的.完全不必修改标签内容.

dt {

font-weight: bold;

}

只要这样就够了,不必为清单内容加上,甚至是标签,现在所有的都会变成粗体,与图8-7一样.

图8-7 方法B为加上font-weight:bold的效果

加上图片

或许你发现我喜欢用CSS为标签加上小图标,我喜欢这个做法的理由,是因为我能使用CSS的background属性打扮页面,同时把属于装饰性,不重要的图片与页面内容,结构分开.

更换,增加或移除这些图片的动作十分简单,因为我不需要修改标签内容就能完成这些变动.

对定义清单来说,如果加上小箭头图标,从名词指向定义内容的话,应该很有意思.我们能以下面这段CSS轻松加上这个效果:

dt {

font-weight: bold;

}

dd {

margin-left: 15px;

padding-left: 15px;

color: #999;

background: url(dd_arrow.gif) no-repeat 0 2px;

}

我们所做的修改,首先是以margin-left:15px稍微拿掉一些标签预设的外补丁,接着,我们把定义描述的颜色换成灰色,使其与的区别更大.同时在描述文字的左边,理顶端2像素的地方放上一个小巧的橘色箭头图标,并且在描述文字的左边留下15像素的内部定,让图标不会与文字重叠,图8-8就是完成的效果.

图8-8 加上图标,凸显文字关联性的定义清单

如你所见,使用定义清单结构,我们就能轻易地为每个构成项目指定独特的样式,让版面更丰富,而完全不必修改标签内容,我们也能确信不支持样式的浏览器仍会以有组织,容易阅读的方式显示这个清单.

其他应用

又见很重要的事情必须指出:那就是定义清单的用途不仅限于标注名词,定义内容.定义清单还能用来标注对话,导航条,甚至是表单排版.

我们甚至可以引用W3C在HTML 4.01规范中对于定义清单的定义www.w3.org/TR/html4/struct/lists.html)

“以

Chop the onions.

Saute the onions for 3 minutes.

Add 3 cloves of garlic.

Cook for another 3 minutes.

Eat.

标签建立的定义清单,通常包含一系列名词,定义内容(虽然定义清单也能应用在其他地方)” 所以,别害怕把定义清单用在名词,解释内容之外的地方! 概要本章到目前为止,我们看了另外的两种清单:有序清单,定义清单.我们发现借着使用这些清单结构,代替无序清单加上额外标签的做法,能够让我们更容易控制样式,同时也让清单变得更容易维护. 接着以我们本章最初的步骤清单当作例子,用CSS为他调整一下样式. 技巧延伸让我们复习一下本章最初的有序步骤清单:

没有加上任何CSS的话,浏览器的显示效果与图8-2差不多,就与本书其他的结构化标记语法示例一样,在导入CSS的时候,有序清单是一组容易指定样式的标签组.

我们知道,由于使用了正确的结构,因此不支持CSS或把CSS关闭的浏览器也能正确显示出清单的内容.

让我们装饰的花俏一些,先来自定每个项目之前的编号吧.

识别每个项目

为了让我们能存取每个清单项目,把它的编号换成更华丽的样式,我们需要为每个

标签加上id,我们也会为整个有序清单加上id,让我们能为这个清单指定特定样式,而不影响其他所有的

.Chop the onions.Saute the onions for 3 minutes.Add 3 cloves of garlic. Cook for another 3 minutes.Eat.

现在我们能识别每个项目了,因此我们对清单内每个元素的样式都进行完整控制.值得一提的是,在此为每个项目加上独特的id之后,我们就无法依赖有序清单的“自动编号”功能了.如果稍侯在中间插入新步骤的话,我们就得自己变更往后步骤的id值,在此事先提醒一下.

自定数字

为清单建立自定数字的第一个步骤是用list-style-type属性去掉#recipe元素预设的自动产生数字的效果:

#recipe {

list-style-type: none;