• 生成输出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>

    <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

  • 相关阅读:
    如何书写bat文件?(转)
    Bogon
    recursive
    ssh
    verbose
    mii-tool
    ExtJs 中的ext.date
    一个打包机~~~
    图标库--宝藏
    几种常用的控件(下拉框 可选框 起止日期 在HTML页面直接读取当前时间)
  • 原文地址:https://www.cnblogs.com/brown-birds/p/3763247.html
Copyright © 2020-2023  润新知