WebControl.CssClass 屬性

  • 參考

定義

命名空間:
System.Web.UI.WebControls
組件:
System.Web.dll

取得或設定用戶端上 Web 伺服器控制項所呈現的階層式樣式表 (CSS)。

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 類別。 預設為 Empty。

屬性
BindableAttribute

範例

下列範例說明如何使用 CssClass 屬性來變更控制項的 HyperLink 樣式。

注意

下列程式碼範例會使用單一檔案程式碼模型，如果直接複製到程式碼後置檔案，可能無法正常運作。 此程式碼範例必須複製到副檔名為 .aspx 的空白文字檔。 如需Web Form程式碼模型的詳細資訊，請參閱ASP.NET Web Forms頁碼模型。

<%@ 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使用 屬性來指定 CSS 類別，以在 Web Server 控制項的用戶端上呈現。 此屬性會在瀏覽器上呈現所有控制項。 不論瀏覽器為何，它一律會轉譯為類別屬性。

重要

這個範例有一個可接受使用者輸入的文字方塊，這可能會造成安全性威脅。 根據預設，ASP.NET Web 網頁會驗證使用者輸入未包含指令碼或 HTML 項目。 如需詳細資訊，請參閱 Script Exploits Overview (指令碼攻擊概觀)。

例如，假設您有下列 Web 服務器控制項宣告：

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

下列 HTML 會在用戶端上呈現先前的 Web 服務器控制項宣告：

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

如果您使用級聯樣式表 (CSS) 來自訂控制項的外觀，請使用內嵌樣式或個別的 CSS 檔案，但不能同時使用兩者。 同時使用內嵌樣式和個別 CSS 檔案可能會導致非預期的結果。

注意

在不支援 CSS 的 CssClass 瀏覽器中，設定 屬性將不會有任何作用。

適用於

另請參閱