روش اضافه کردن CSS، تغییر CSS و Style درASP.NET

مهمترین قابلیت زبان HTML نمایش متن و المانهای یک صفحه بر روی مرورگر است ولي برای طراحی یک صفحه و صفحه آرایی و زیباسازی یک صفحه ، امکانات خوبی را در اختیار طراح سایت قرار نمی دهد.اما Cascading Style Sheets یا به اختصار css نحوه ی نمایش عناصر را در صفحه مشخص می کند و به شما این امکان را می دهد که تمام قسمت ها و عناصر موجود در یک صفحه را کنترل کنید. در این مقاله می خواهیم چگونگی تغییر CSS و Style در ASP.NET را بیاموزیم.

برای نشان دادن این مثال فرمی را به صورت زیر طراحی کرده ایم که به سه قسمت تقسیم می شود:

قسمت اول متنی را روی صفحه نشان می دهد که به همراه یک دکمه می باشد، مانند زیر:

در تصویر بالا Class ضمیمه شده، LabelBlue روی دکمه "تغییر CSS Class" می باشد که با کلیک بر روی آن CSS Class تغییر کرده و به کلاس LabelGrey تبدیل می شود. مانند زیر:

برای درک جزییات بیشتر کد مورد نظر را بررسی کنید:

lblMessage.CssClass = "LabelGrey";

مثالی برای تغییر Style

در تصویر زیر به طور پیش فرض کلاسی اختصاص نیافته است و استایل آن با کلیک بر روی دکمه "تغییر Style" تغییر می کند:

خروجی آن به صورت زیر می شود:

و کد مربوط به آن به صورت زیر است:

lblWithoutStyle.Style.Add("font-size", "50px");

مثالی برای CSS اضافه شده

در تصویر زیر نیز هیچ کلاسی به متن چاپ شده اضافه نشده است و با کلیک بر روی دکمه "اضافه کردن کلاس"، کلاس ClassJoined به آن اضافه می شود:

خروجی به صورت زیر است:

کد مربوط به آن به صورت زیر است:

lblWithoutClass.Attributes.Add("class", "ClassJoined");

کد زیر موارد گفته شده در بالا را به صورت یک جا در یک صفحه HTML آورده است:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChangeCSSClass.aspx.cs" Inherits="ChangeCSSClass" %>    
    
    <!DOCTYPE html>    
    
    <html xmlns="http://www.w3.org/1999/xhtml">    
    
    <head runat="server">    
        <style>    
            .LabelGrey     
            {    
                font-weight: bold;    
                color: darkgray;    
            }    
                
            .LabelBlue     
            {    
                font-weight: normal;    
                color: darkblue;    
            }    
                
            .ClassJoined     
            {    
                font-weight: normal;    
                font-size: 50px;    
                color: darkcyan;    
            }    
        </style>    
        <title></title>    
    </head>    
    
    <body>    
        <form id="form1" runat="server">    
            <div>    
                <asp:Label ID="lblMessage" runat="server" Font-Size="25px" Text="Hello, CSharpCorner Users" CssClass="LabelBlue"></asp:Label>    
                <br />    
                <asp:Button ID="btnChangeCSS" runat="server" Text="Change CSS Class" OnClick="btnChangeCSS_Click" />    
                <br />    
                <br />    
                <asp:Label ID="lblWithoutStyle" runat="server" Text="Text without any style" />    
                <br />    
                <asp:Button ID="btnChangeStyle" runat="server" Text="Change Style on Click" OnClick="btnChangeStyle_Click" />    
                <br />    
                <br />    
                <asp:Label ID="lblWithoutClass" runat="server" Text="Text without any default class" />    
                <br />    
                <asp:Button ID="btnWithoutClass" runat="server" Text="Class Attached on Click" OnClick="btnWithoutClass_Click" />    
            </div>    
        </form>    
    </body>    
    
    </html>

و CodeBehind آن به صورت زیر است:

using System;    
using System.Collections.Generic;    
using System.Linq;    
using System.Web;    
using System.Web.UI;    
using System.Web.UI.WebControls;    
    
public partial class ChangeCSSClass: System.Web.UI.Page     
{    
    protected void Page_Load(object sender, EventArgs e)     
    {    
    
    }    
    protected void btnChangeCSS_Click(object sender, EventArgs e)     
    {    
        lblMessage.CssClass = "LabelGrey";    
    }    
    protected void btnChangeStyle_Click(object sender, EventArgs e)     
    {    
        lblWithoutStyle.Text = "Text with Style";    
        lblWithoutStyle.Style.Add("font-size", "50px");    
    }    
    
    
    protected void btnWithoutClass_Click(object sender, EventArgs e)     
    {    
        lblWithoutClass.Attributes.Add("class", "ClassJoined");    
    }    
}

فایل های ضمیمه

4278_CssClassChange.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

روش اضافه کردن CSS، تغییر CSS و Style درASP.NET

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید