다음을 통해 공유

WebControl.CssClass 속성

정의

네임스페이스:
System.Web.UI.WebControls
어셈블리:
System.Web.dll

클라이언트의 웹 서버 컨트롤에서 렌더링하는 CSS(Cascading Style Sheet) 클래스를 가져오거나 설정합니다.

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

클라이언트의 웹 서버 컨트롤에 의해 렌더링되는 CSS 클래스입니다. 기본값은 Empty입니다.

특성
BindableAttribute

예제

다음 예제에서는 컨트롤의 CssClass 스타일을 변경 하는 속성을 사용 하는 방법을 보여 줍니다 HyperLink .

메모

다음 코드 샘플에서는 단일 파일 코드 모델을 사용하며 코드 숨김 파일에 직접 복사한 경우 제대로 작동하지 않을 수 있습니다. 이 코드 샘플은 .aspx 확장이 있는 빈 텍스트 파일로 복사해야 합니다. Web Forms 코드 모델에 대한 자세한 내용은 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 클래스를 지정합니다. 이 속성은 모든 컨트롤의 브라우저에서 렌더링됩니다. 브라우저에 관계없이 항상 클래스 특성으로 렌더링됩니다.

중요합니다

이 예제에는 잠재적인 보안 위협인 사용자 입력을 허용하는 텍스트 상자가 있습니다. 기본적으로 ASP.NET 웹 페이지는 사용자 입력에 스크립트 또는 HTML 요소가 포함되지 않는지 확인합니다. 자세한 내용은 스크립트 악용 개요를 참조하세요.

예를 들어 다음과 같은 웹 서버 컨트롤 선언이 있다고 가정합니다.

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

다음 HTML은 이전 웹 서버 컨트롤 선언에 대해 클라이언트에서 렌더링됩니다.

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

CSS(계단식 스타일시트)를 사용하여 컨트롤의 모양을 사용자 지정하는 경우 인라인 스타일 또는 별도의 CSS 파일을 사용하지만 둘 다 사용하지는 않습니다. 인라인 스타일과 별도의 CSS 파일을 모두 사용하면 예기치 않은 결과가 발생할 수 있습니다.

메모

CSS를 지원하지 않는 브라우저에서는 속성 설정이 CssClass 적용되지 않습니다.

적용 대상

추가 정보