标记语言

绝笔斓姗 2015-06-10

展开全文

不需要多余的代码

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

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

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

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

以<fieldset>制作表单元素群组

使用<fieldset>是个为表单元素分组的便利方法.除此之外,加上叙述用的<legend>则会在大多数浏览器内,为你做好的表单元素群组加上一个漂亮的边框.我刚刚有说"漂亮"吗?嗯,我的确喜欢这种边框.而我们只需要用上一点CSS,就能使它变得更加迷人.

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

<form action="/path/to/script" id="thisform" method="post">
<fieldset>
    <legend>Sign In</legend>
    <p><label for="name" accesskey="9" >Name:</label><br />
    <input type="text" id="name" name="name" tabindex="1" /></p>
    <p><label for="email">Email:</label><br />
    <input type="text" id="email" name="email" tabindex="2" /></p>
    <p><input type="checkbox" id="remember" name="remember" tabindex="3" />
    <label for="remember">Remember this info?</label></p>
    <p><input type="submit" value="submit" tabindex="4" /></p>
</fieldset>
</form>

图5-12是浏览器显示这个群组的效果图,包含刚加上的<fieldset>与<legend>标签,以及刚为<label>设定的CSS样式.或许你已发现有条漂亮的边线围绕在<fieldset>里面的所有表单元素之外,同时<legend>的内容断开了左上方的边线.

图5-12.加上<fieldset>与<legend>之后的表单

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

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

为<fieldset>和<legend>加上样式

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

为了使<fieldset>的边线变得更加细致,我们使用以下的CSS:

接着为左右两边指定20像素的外补丁,并且去掉上下外补丁,为什么要去掉这些外补丁?因为我们的表单说明文字,表单元素都放在<p>标签内,因此他们在上下方向上已经留足了边界空白.

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

图5-13.为<fieldset>指定样式之后的效果

立体的<legend>

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

#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;
}

如你所见,这里做了几件事,首先,调整了<legend>的字体,粗细与大小,接着产生了立体效果,把背景设为浅灰色,然后在整个<legend>的外面加上配合<fieldset>边线颜色的单像素边线,为了达成阴影效果,我们还把底部与右侧的边线颜色换成深一点的灰色.

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

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