位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 chapter 5 表单（6）

[翻译]标记语言和样式手册 chapter 5 表单（6）

作者：zhaozy　来源：3user.com　发布时间：2008-01-23 17:20:00　

标签：样式,标记,css,手册,表单

使用<label>自定字体

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

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

#thisform p {
  font-family: Verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #66000;
  }

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

#thisform label {
  font-family: Verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #66000;
  }

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

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

为什么我比较喜欢这个方法?假设除了说明文字之外,表单还有其他放在<p>当中的指示或文字内容.那么在前一种方法内,这些文字就会使用和<p>相同的样式设定了.

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

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

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

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

第一页上一页 4 5

7 8 下一页

投稿

[翻译]标记语言和样式手册 chapter 5 表单（6）

猜你喜欢