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; }
public virtual string CssClass { get; set; }
[<System.ComponentModel.Bindable(true)>]
member this.CssClass : string with get, set
member this.CssClass : string with get, set
Public Overridable Property CssClass As String

屬性值

String

用戶端上 Web 伺服器控制項所呈現的 CSS 類別。The CSS class rendered by the Web server control on the client. 預設為 EmptyThe default is Empty.

屬性

範例

下列範例說明如何使用 CssClass 屬性來變更控制項的樣式 HyperLinkThe 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 Form 程式碼模型的詳細資訊,請參閱 ASP.NET Web Forms 頁面程式碼模型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 Web 網頁會驗證使用者輸入未包含指令碼或 HTML 項目。By default, ASP.NET Web pages validate that user input does not include script or HTML elements. 如需詳細資訊,請參閱 Script Exploits Overview (指令碼攻擊概觀)。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" />

下列 HTML 會在用戶端上針對先前的 Web 服務器控制項宣告呈現: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.

適用於