再谈css--如何针对不同位置的元素使用不同的风格

很多人已经开始逐渐的习惯于全面使用css排版，尽量做到展现与内容的分离。但在此习惯的过程中一定会遇到各种棘手的问题。我的一个经验就是：多查css手册，多尝试，多琢磨专家们的网页，可以将一些页面另存一下，慢慢分析。

好，说正题。经常有这样一种情况：我想在同一个页面的不同位置对超链接的风格进行定义，比如，在页面的导航部分，我不希望有下划线，而在其他地方则需要下划线。

实现的方式总的来说有两种：

1。对在不同的地方的超链接直接使用css内嵌指定，如：。这种方式很明显，最为强大和灵活。可以做到页面上的任意一个超链接的风格都不一样。但是，我们并不需要这么灵活，而且，对每个超链接都实行这个定义，太繁琐。

2。利用css本身的对象层级的支持，分批地制定超链接的风格。比如，普通情况下，我把整个页面里的超链接都定义成带下划线，而只有菜单不使用。那么，可以使用如下方式：

a
{
color:Black;
font-size:12px;
text-decoration:underline;
}

而菜单如果是使用 ul 定义，像我上一篇 blog里描述的那种风格，我就可以这样定义：

.Menu a
{
color:Black;
font-size:12px;
text-decoration:none;
}

这里的 .Menu是指菜单的外边界使用的css 。这样，只要是在这个菜单内的超链接都会使用这个风格。

当然，这种指定方法也可以有很多种。如：

#MyMenu a {....} 表示在ID为MyMenu的元素内部所有超链接样式；

#MyMenu li a{...}表示在ID 为MyMenu的元素内部的 li 元素内部的 超链接样式；

*************************************************************************************
当css遇到xhtml--从display:inline到float:left

几天前，写了一个tab control ，风格如下：



我使用了css来描述这个风格，html和css代码如下：

<ul>
<li><a href="#" class="selected">文件</a></li>
<li><a href="#">编辑</a></li>
<li><a href="#">视图</a></li>
<li><a href="#">站点</a></li>
<li><a href="#">编译</a></li>
<li><a href="#">工具</a></li>
</ul>

ul
{
border-bottom:solid 1px #999999;
border-left:solid 1px #999999;
height:30px;
width:100%;
margin-left:0px;
}
li
{
border-top:solid 1px #999999;
border-bottom:solid 0px #999999;
border-left:solid 1px #999999;
border-right:solid 1px #999999;
background-color:#cccccc;
width:100px;
height:30px;
display:inline;
list-style-type:none;
margin-left:-1px;
margin-bottom:-2px;
text-align:center;
padding-top:10px;
}
.selected
{border-top:solid 1px #999999;
border-bottom:solid 0px #999999;
border-left:solid 1px #999999;
border-right:solid 1px #999999;
background-color:#eaeaea;
width:100px;
height:30px;
display:inline;
list-style-type:none;
margin-left:-1px;
margin-bottom:-2px;
text-align:center;
padding-top:10px;
}

在一个master page上使用没有任何问题。下午，在将这个tab control 拖到一个vs2005生成的页面上，运行的时候，发现效果竟然变成这个样子：



同样一段代码，同样的浏览器，怎么会出现不同的效果？ 仔细检查后，发现原来在master page里之所以正常是因为master page使用的是html4.0，而现在的新的页面是使用xhtml1.0来定义，难道是由于xhtml的严格定义要求引起的？ 赶快去w3c以及其他资源网站查资料，最后终于发现根本的原因。

原来，以前的写法一直都是错误的。由于默认情况下，“li” 元素一直是竖直排列的，所以，我就使用了 display:inline 强制让它在行的方向排列，以达到我想要的效果，但是，在xhtml里，这种不严谨的写法是不被支持的，所以，这里设置高度、宽度都没有任何作用。在格式化xhtml标签时，更加强化了 “box”的概念，要想使用一些margin,padding等填充效果，就必须先将元素转变成 box 元素，然后就可以设置想要的效果了。那么，如何将一个元素转变成 box 元素？ 答案是: 可以使用 float:left/right 的方式来把元素漂浮起来，变成一个个的box，这样就可以任意使用 box 元素支持的css属性了。

基于以上的思路，我将上面css里的display:inline修改掉，变成float:left，一切都ok了！

以上只是一个特例，在html4.0转到xhtml的过程中，会有不少的css效果都会发生转变，不过，这种转变是有规律和准则的，只要掌握了这种思想，应该能解决大部分问题。