web标准化 用CSS定义标题的几个实例(3)

图2-8：A： 带有图标的标题

　　轻松升级

　　设想这样一个情景来代替前面的例子，我们已经在一个包含100个文档的站点中用<img>标签编码了这些图标。这些图标匹配着整个站点各个的题目。几个星期后，站点的所有者决定更改这个站点的look and feel。新的图标和老的图标有着不同的规格。天哪！我们将需要回到所有的100个文档里面，去改变每一个<img>标签，来更新它的image路径。对于一个项目的预算，这额外所需的时间就会推迟原先的期限。时间就是金钱。

　　把那些非必须的，装饰性的图片保持在CSS文件中，就可以使得更改背景图片只需几分钟，而不再需要几天，整个站点可以立刻得到升级。你应该开始明白把结构层和表现层的标记分离开的力量了吧。

　　可变换的效果

　　下面的技巧在某些情况下会很有用。这是我在2003年4月，用标准重构Fast Company magazine（www.fastcompany.com）站点时大量采用的方法。

　　我们在整个站点的大多数<h3>标题中使用了13*13点的小图标，就象这样：

<h3><img src="/info/upimg/allimg/080225/1048020.gif"
width="13" height="13" alt="*" /> FIRST IMPRESSION</h3>

　　我们用这种方法编码有两个原因。一个原因是，有各种各样的图标，它取决于标题的主题（读书俱乐部的一本书，引号标记着每天的引用，等等）。第二个原因是，当时，我们每个月都会根据当前发行的杂志封面来更换整个站点的配色方案。这种更换要成为可能，当然要用CSS。

　　要让这些图标随着页面上其它元素一起变换颜色，并不需要每次都创建新的图标。我们创建一个仅使用两种色彩的图标：白色和透明色（变换的色彩将被透出来）。图2-9显示了这些图标中的一个例子，它们被使用在首页上的每日引言中。

图2-9：A 13×13 点大小的透明图标（放大的）

　　透过图标中透明的部分，我们再次使用简便的CSS中background属性设置想让它透出来的颜色。另外我们还想让色彩仅仅出现在图标的后面，而不影响到标题的文字，因此我们又用下面的方法将规则仅施加于包含在<h3>内的<img>标签。

h3 img {
background: #696;
}

　　前面的代码确定了所有包含在<h3>内的<img>标签都有一个绿色的背景。色彩透过图片的透明部分显示出来，而白色的部分仍然保持白色。每个月，我们都能用一个不同的色彩值来升级CSS规则，从而改变整个站点中的每个标题以及相关联的图标的色彩。这就象变魔术！

　　对齐<img>标签

　　为了让图标和文本正确的排齐（我们想让它垂直居中），我们加入了以下CSS规则：

h3 img {
background: #696;
vertical-align: middle;
}

　　这样保证了包含于<h3>标签中的图片对齐于它的文本中点。图2-10显示了标题的效果。

图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文件中，如果将来要升级，那将可以非常容易的改换。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有