在前文《生成输出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>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />通过这句话使用了一个外部层叠样式表文件，位置在"~/Content/Site.css"。所以，如果要自定义层叠样式，就可以在Site.css中文件添加定义，这样也方便统一管理。

打开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

生成输出url时，使用CSS来控制超链接的格式的更多相关文章

  1. 生成输出url

    继续使用前面的例子11-3URLTestDemo,修改Global.asax中的RegisterRoutes方法如下: public static void RegisterRoutes(RouteC ...

  2. 生成输出 URL（16.2）

    1.在视图中生成输出 URL 几乎在每一个 MVC 框架应用程序中,你都会希望让用户能够从一个视图导航到另一个视图 —— 通常的做法是在第一个视图中生成一个指向第二个视图的链接,该链接以第二个视图的动 ...

  3. yii2.0 输出url 注册js css文件

    //输出url <a href="<?=  Url::to(['/users/login/login','id'=>5,'mark'=>true]) ?>&qu ...

  4. mvc 生成输出url

    最近一直在学习mvc,其中对于 Url.Action生成的url感到很困惑.官方的解释的基于路由方案生成的url.问题是,怎样基于,怎样选择,没有过多的解释.网上找了很多资料,也看不懂,最后还是在pr ...

  5. 生成链接中的全限定URL（Generating Fully Qualified URLs in Links） | 在视图中生成输出URL | 高级路由特性

    结果:<a class="myCSSClass"href="https://myserver.mydomain.com/Home/Index/MyId#myFrag ...

  6. 指定HTML标签属性 |Specifying HTML Attributes| 在视图中生成输出URL |高级路由特性 | 精通ASP-NET-MVC-5-弗瑞曼

    结果呢: <a class="myCSSClass" href="/" id="myAnchorID">This is an o ...

  7. 传递额外的值 Passing Extra Values |在视图中生成输出URL | 高级路由特性 | 精通ASP-NET-MVC-5-弗瑞曼

    结果呢 <a href="/App/DoCustomVariable?id=Hello">This is an outgoing URL</a> 理解片段变 ...

  8. 用路由系统生成输出URL 在视图中生成输出URL 高级路由特性 精通ASP-NET-MVC-5-弗瑞曼

    Using the Routing System to Generate an Outgoing URL 结果呢:<a href="/Home/CustomVariable" ...

  9. 根据指定路由生成URL |Generating a URL from a Specific Route | 在视图中生成输出URL|高级路由特性

    后面Length=5 是怎么出现的?

随机推荐

  1. git https连接方式，记住密码

    Git使用https方式进行连接时,默认每次推送时都要输入用户名和密码. 可以使用命令 $git config credential.helper store 为当前仓库设置记住密码,设置后,只要在推 ...

  2. (跨平台)cocos2d-x C++ or Object-C(前端)调用C# webservices(后台)，实现交叉编译到Android/IOS/WinPhone等移动终端设备

    1.2014年4月2号算是正式找到自己的实习工作-杭州美迪软件有限公司(移动物联事业部)合作于:四川管家婆总部移动终端代理,由于在校选编程专业语言C#和在浙大网新培训课程(C#.Asp.net开发)缘 ...

  3. C语言版推箱子

    推箱子源代码初步: #include<stdio.h> #include<conio.h> #include<stdlib.h> #define boolean i ...

  4. centos6安装vncserver实现图形化访问

    一.配置163的yum源 1.导入CentOS-6的GPG证书 #rpm --import http://mirrors.163.com/centos/RPM-GPG-KEY-CentOS-6 2.让 ...

  5. Eclipse 完全 设置UTF-8 环境

    当开始一个新的Java项目时,最好将整个环境设置为UTF-8 一般通过如下几步来设置: 1: 设置工作空间的编码格式:Window -> Preferences -> General -& ...

  6. Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理

    看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...

  7. java设计模式之 工厂模式Factory

    好比某种套路,经过不断实践,证明对项目结构非常有利 如果需要获取某种对象,如同获取不同的产品 需要由工厂来提供,工厂模式 可能的类或者对象:工厂类  产品:Cat  Dog  Fish ... //动 ...

  8. 用C语言制作小型商品信息管理系统过程中的问题

    大神请默默飘过... 以下是第一次制作时的源码: // 商品信息管理.cpp : 定义控制台应用程序的入口点. // // 小型商品信息管理系统.cpp : 定义控制台应用程序的入口点. // #in ...

  9. PHP面向对象编程学习之对象基础

    php虽然是一门学习起来非常简单的语言,但是这门语言也包含了对面向对象编程的支持.尤其是随着php5的发布,php对面向对象的支持有了很大的进步.最近学习了一下php的面向对象编程,不禁感慨,面向对象 ...

  10. 点击按钮改变标签内容（采用lambda函数方式）

    from Tkinter import* window=Tk() counter=IntVar() counter.set(0) def click(variable,value): variable ...