快速业务通道

英文教程:用CSS控制和操作BODY标记

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-01
for them to be red on your contact page (for some reason). There are a couple ways you could go about this.

  • You could declare a separate stylesheet for your contact page. This isn’t ideal, because it’s redundant. If you make any other changes, you’ll always have to make them both on the main stylesheet and the contact page stylesheet.
  • You could give all those links a unique class on that page. This isn’t ideal, because it isn’t very semantic and it’s also redundant. Why apply a class to every single link on the page when they really aren’t any different from links elsewhere on the site, contextually speaking?
  • The best solution is to give your the body a unique ID. This solves the problem perfectly. You can use the same stylesheet and target just the links you want to with a single CSS selector.

 

How it’s done

Simple, literally just apply the ID to the body tag:

   ...
</head>

<body id="contact-page">
   ...

Now for our example of making all links on the contact page red instead of blue, just use some CSS like this:

a {
color: blue;
}

#contact-page a {
   color: red;
}

 

How about a more practical example?

You got it. One of the most useful implementations of this technique is within navigation. Take a look at this sample navigation:

tabbednav.jpg

See how the forums tab is the “active” tab? Certainly that’s just a slight change in CSS, probably just a shift in the position of a background image. Perhaps the XHTML looks something like this:

...
<li><a href="/fieldtips">Field tips</a></li>
<li class="active"><a href="/forums">Forums</a></li>
...

The “active” class applied to the list item is what shifts the background image. That’ll do the trick, but what about when we move to the Field Tips page? We will have to remove the active class from the forums tab and apply it t

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号