生成输出url时，使用CSS来控制超链接的格式

在前文《生成输出url》中的第5点，介绍了使用ActionLink生成输出url中指定html标签属性。

例如，

假设Global.asax中的路由定义为：

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.MapRoute("MyRoute", "{controller}/{action}/{id}",
                new { Controller = "Home", Action = "Index", id = UrlParameter.Optional },
                new[] { "_11_3URLTestDemo.Controllers" });
        }

在Views/Home/Index.cshtml里有如下对ActionLink的使用，来生成输出url：

<p>
@Html.ActionLink("HomePage", "Index", "Home")
</p>

<p>
@Html.ActionLink("HyperLink with attribute", "Index", "Home", null, new { id="myAnchorID", @class = "redlink" })
</p>

根据路由，反向推导出两个ActionLink生成的url。

第一个ActionLink生成的html为：

<p>
<a href="/">HomePage</a>
</p>

第二个ActionLink生成的html为：

<p>
<a class="redlink" href="/" id="myAnchorID">HyperLink with attribute</a>
</p>

显然，生成的第一个html中标签<a>使用的样式为默认的标签a的样式。

生成的第二个html中标签<a>使用的样式，就指定类名为"redlink"的样式。

这些层叠样式定义在什么地方？因为MVC中Views/Shared/_Layout.cshtml是所有视图的公共文件：

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

打开Site.css，在文件最后面添加如下定义：

/*自定义测试例子
-----------------------------------------------------------*/
p{ font-size: 22px;}

a:link{
 color: #000000;
 text-decoration: none;
}
a:visited {
 color: #000000;
 text-decoration: none;
}
a:hover {
 color: #ff7f24;
 text-decoration: underline;
}
a:active {
 color: #ff7f24;  
 text-decoration: underline;
}

.redlink{
    color:#FF0000;
    text-decoration:none;
}
    
.redlink:visited{
    color:#FF0000;
    text-decoration:none;
}

.redlink:hover{
    color:#000000;
    text-decoration:underline;
    background:#FFFFFF;
}

新添加的样式中，定义了标签p，指定了<p></p>中字体为22px。

定义了标签<a>的默认样式，a:link{}、a:visited{}、a:hover{}、a:active{}。因为这个定义是放在文件末尾，只要没有使用其它类，那么在使用标签a时，<a></a>里面的样式就由这个默认样式决定。注意它们的顺序不是任意的，一般要遵循LoVe HAte（爱与恨）的顺序。

在<a>的默认样式后面，定义了指定类别的超链接样式，这里定义的类别名字叫redlink，注意格式，是用点号开头，而且link这个伪类名可以不写出来。

这样，在使用<a>标签时，指定了class="redlink"的，就使用redlink中定义的样式。

没有指定类别的，就用默认样式。

-lyj