WebControl.CssClass 属性

定义

获取或设置由 Web 服务器控件在客户端呈现的级联样式表 (CSS) 类。Gets or sets the Cascading Style Sheet (CSS) class rendered by the Web server control on the client.

public:
 virtual property System::String ^ CssClass { System::String ^ get(); void set(System::String ^ value); };
[System.ComponentModel.Bindable(true)]
public virtual string CssClass { get; set; }
member this.CssClass : string with get, set
Public Overridable Property CssClass As String

属性值

由 Web 服务器控件在客户端呈现的 CSS 类。The CSS class rendered by the Web server control on the client. 默认值为 EmptyThe default is Empty.

属性

示例

下面的示例演示如何使用CssClass属性来更改HyperLink控件的样式。The following example illustrates how to use the CssClass property to change the style of a HyperLink control.

备注

下面的代码示例使用单文件代码模型,如果直接复制到代码隐藏文件中,则可能无法正常工作。The following code sample uses the single-file code model and may not work correctly if copied directly into a code-behind file. 必须将此代码示例复制到扩展名为 .aspx 的空文本文件中。This code sample must be copied into an empty text file that has an .aspx extension. 有关 Web 窗体代码模型的详细信息,请参阅ASP.NET Web 窗体页代码模型For more information on the Web Forms code model, see ASP.NET Web Forms Page Code Model.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    void Button1_Click(object sender, EventArgs e)
    {
        if (HyperLink1.CssClass == "CssStyle1")
            HyperLink1.CssClass = "CssStyle2";
        else
            HyperLink1.CssClass = "CssStyle1";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head2" runat="server">
    <title>CssClass Property Example</title>
    <style type="text/css">
        .CssStyle1   
        { 
           font: 10pt Verdana; 
           font-weight:700;
           color: Green;
        }

        .CssStyle2
        { 
           font: 15pt Times; 
           font-weight:250;
           color: Blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>CssClass Property of a Web Control</h3>
        <asp:HyperLink id="HyperLink1" 
            NavigateUrl="http://www.microsoft.com" 
            CssClass="CssClass1" 
            Text="Click here to go to the Microsoft site" 
            Target="_new" runat="server" />
        <p><asp:Button id="Button1" 
            Text="Click to change the CSS style of the link"
            OnClick="Button1_Click" runat="server" />
         </p>
    </div>
    </form>
</body>
</html>
<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
        If HyperLink1.CssClass = "CssStyle1" Then
            HyperLink1.CssClass = "CssStyle2"
        Else
            HyperLink1.CssClass = "CssStyle1"
        End If
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head2" runat="server">
    <title>CssClass Property Example</title>
    <style type="text/css">
        .CssStyle1   
        { 
           font: 10pt Verdana; 
           font-weight:700;
           color: Green;
        }

        .CssStyle2
        { 
           font: 15pt Times; 
           font-weight:250;
           color: Blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>CssClass Property of a Web Control</h3>
        <asp:HyperLink id="HyperLink1" 
            NavigateUrl="http://www.microsoft.com" 
            CssClass="CssClass1" 
            Text="Click here to go to the Microsoft site" 
            Target="_new" runat="server" />
        <p><asp:Button id="Button1" 
            Text="Click to change the CSS style of the link"
            OnClick="Button1_Click" runat="server" />
         </p>
    </div>
    </form>
</body>
</html>

<html>
<head>

  <style>

      .CssStyle1   
      { 
          font: 12pt verdana; 
          font-weight:700;
          color:orange;
      }

      .CssStyle2
      { 
          font: 15pt times; 
          font-weight:250;
          color:blue;
      }

  </style>

  <script language="C#" runat="server">

      void Button1_Click(Object sender, EventArgs e) {
    HyperLink1.CssClass=((HyperLink1.CssClass=="CssStyle1")?"CssStyle2":"CssStyle1");
      }

  </script>

</head>
<body>

  <h3><font face="Verdana">CssClass Property of a Web Control</font></h3>

<form runat="server">

  <asp:HyperLink id="HyperLink1" NavigateUrl="http://www.microsoft.com" 
    CssClass="spanstyle" Text="Click here to go to the Microsoft site" 
    Target="_new" runat="server"/>

  <p>

  <asp:Button id="Button1" Text="Click to change the Css style of the above link"
    OnClick="Button1_Click" runat="server"/>

</form>

</body>
</html>

注解

CssClass使用属性来指定要在 Web 服务器控件的客户端上呈现的 CSS 类。Use the CssClass property to specify the CSS class to render on the client for the Web Server control. 此属性将在所有控件的浏览器中呈现。This property will render on browsers for all controls. 它将始终呈现为类属性,而不考虑浏览器。It will always be rendered as the class attribute, regardless of the browser.

重要

此示例具有一个接受用户输入的文本框,这是一个潜在的安全威胁。This example has a text box that accepts user input, which is a potential security threat. 默认情况下,ASP.NET 网页验证用户输入是否不包含脚本或 HTML 元素。By default, ASP.NET Web pages validate that user input does not include script or HTML elements. 有关详细信息,请参阅脚本侵入概述For more information, see Script Exploits Overview.

例如,假设您具有以下 Web 服务器控件声明:For example, suppose you have the following Web server control declaration:

<asp:TextBox id="TextBox1" ForeColor="Red" CssClass="class1" />  

在以前的 Web 服务器控件声明的客户端上呈现以下 HTML:The following HTML is rendered on the client for the previous Web server control declaration:

<input type=text class="class1" style="ForeColor:red">  

如果使用级联样式表(CSS)来自定义控件的外观,则可以使用内联样式或单独的 CSS 文件,但不能同时使用两者。If you use cascading style sheets (CSS) to customize the appearance of a control, use either inline styles or a separate CSS file, but not both. 同时使用内联样式和单独的 CSS 文件可能导致意外的结果。Using both inline styles and a separate CSS file could cause unexpected results.

备注

在不支持 CSS 的浏览器中,设置CssClass属性将不起作用。On browsers that do not support CSS, setting the CssClass property will have no effect.

适用于

另请参阅