繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 英文教程:用CSS控制和操作BODY标记
- CSS样式表
- css：之三行三列等高布局图文教程
- 一些很不错的css技巧,但也常为人们所忽略
- div+css布局必须要知道的css条件注释理论及实践
- 超赞的随机颜色搭配工具
- 应用WEB标准实例：列表页面的制作
- 用CSS给图片打标的方法
- 用css动态生成闪字的代码
- 用滑动门技术设计按钮的图文教程
- 如何实现多风格选择 样式实时切换
- 关于超链接的下划线 使用说明
- 用CSS给图片打标的代码
- 学习样式表CSS参考-常用的CSS知识
- XHTML下用dl,dt,dd标签实现翻页的效果代码
- CSS网页布局入门教程1：一列固定宽度
- CSS网页布局入门教程2：一列自适应宽度
- CSS网页布局入门教程3：一列固定宽度居中
- CSS网页布局入门教程4：二列固定宽度
- CSS网页布局入门教程8：三列浮动中间列宽度自适应
- DIV+CSS 英文命名规范
- 发现四种在网页中使用CSS样式表的方法
CSS样式表 中的 英文教程:用CSS控制和操作BODY标记
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 78 ::
收藏到网摘: n/a
Let’s say you want to change the color of your links on just your contact page to red. They are blue on every other page, but it just makes sense 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:
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 to the the Field Tips tab. That’s not very convenient. That means the code for the navigation block is unique on every single page of the site. So let’s say down the road we want to add a Contact tab, we’ll have to alter the code on every single page. No fun.
Let’s do this a little smarter. First we don’t want to include the navigation block of code on every page, we want to include it, probably with a simple PHP include like this:
<?php include_once("nav.html"); ?>
But then how do we apply the “active” class to the current navigation list element?
This is where apply what we just learned about giving unique ID’s to the body! Instead of applying a class to only the active list element, let’s apply a unique class to each separate list item as well as give our body an unique ID.
...
</head>
<body id="field-tips"> ... <li class="fieldtips"><a href="/fieldtips">Field tips</a></li> <li class="forums"><a href="/forums">Forums</a></li> ...Now we can target specific elements in the navigation with some clever CSS:
#field-tips li.fieldtips, #forums li.forums { background-position: bottom;
}This means that the code for the navigation block can stay the same on every page, yet only the navigation element native to that page will be affected by this CSS and “flip” to the active state.
Let’s get even more dynamic
Reader Brian left an awesome comment on how you can use PHP to apply the unique ID to to the body element:
<body id="<?= basename(Let’s say you want to change the color of your links on just your contact page to red. They are blue on every other page, but it just makes sense 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:
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 to the the Field Tips tab. That’s not very convenient. That means the code for the navigation block is unique on every single page of the site. So let’s say down the road we want to add a Contact tab, we’ll have to alter the code on every single page. No fun.
Let’s do this a little smarter. First we don’t want to include the navigation block of code on every page, we want to include it, probably with a simple PHP include like this:
<?php include_once("nav.html"); ?>
But then how do we apply the “active” class to the current navigation list element?
This is where apply what we just learned about giving unique ID’s to the body! Instead of applying a class to only the active list element, let’s apply a unique class to each separate list item as well as give our body an unique ID.
...
</head>
<body id="field-tips"> ... <li class="fieldtips"><a href="/fieldtips">Field tips</a></li> <li class="forums"><a href="/forums">Forums</a></li> ...
Now we can target specific elements in the navigation with some clever CSS:
#field-tips li.fieldtips, #forums li.forums { background-position: bottom;
}
This means that the code for the navigation block can stay the same on every page, yet only the navigation element native to that page will be affected by this CSS and “flip” to the active state.
Let’s get even more dynamic
Reader Brian left an awesome comment on how you can use PHP to apply the unique ID to to the body element:
___FCKpd___6
This will return the name of the PHP file being executed as the ID (e.g. body id=”index.php”). To leave off the .php part, just remove the “.php” part.
SERVER['PHP_SELF'], ".php")?>">This will return the name of the PHP file being executed as the ID (e.g. body id=”index.php”). To leave off the .php part, just remove the “.php” part.
评论 (0) All
