ASP.NET Tutorial/ASP.net Controls/Style

Содержание

1 Bold font
2 Css style
3 Font change
4 set background color programmatically
5 Set style attributes
6 Style asp.net server control
7 Test the border properties
8 This is a test of the color properties
9 Using style
10 Working with the Font properties: Font-Italic, Font-Names,Font-Size

Bold font

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" 
                   runat="server" 
                   Font-Bold="True" 
                   Text="Hello, World!"></asp:Label></div>
    </form>
</body>
</html>

Css style

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="UsingCSS" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Using CSS</title>
   <style type="text/css">
    body { background: #fffafa; margin: 1em; font: small/1.5em verdana, arial, sans-serif;   }
    h1 { background: gold; font: bold 120% verdana, helvetical, sans-serif; color: black; letter-spacing: 0.25em; padding: 0.25em; }
    .controlPanel { 
          padding: 0.5em; border: black 1px solid;
          background: #eee8a; margin: 1.5em; width: 75%; 
    }
    .pullQuoteOne { 
          padding: 0.25em;
            border: solid 7px #908070;
           border-right-width: 0;
           border-left-width: 0;
          background: lightgrey; 
          float: right;  
          margin: 0.25em 1em; 
          font: bold 90% arial, helvetica, verdana, sans-serif;     
          width: 15em; 
    }    
    .pullQuoteTwo { 
          padding: 0.25em;
          background: #adc175; 
          float: left; 
          margin: 1.5em; 
          font: bold 105% times new roman, serif; 
          border: #82a91b 2px solid; 
          width: 10em;
    }
   </style>
</head>
<body>
   <form id="form1" runat="server">
         <asp:Label ID="labTwo" runat="server">
        this is a test.
         </asp:Label>
      <div class="controlPanel">
            Modify styles using drop-down lists below:
            Paragraph Text text-transform style:
            <asp:DropDownList ID="drpParagraph" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drpParagraph_SelectedIndexChanged">
               <asp:ListItem Selected="True">Choose a text-transform style</asp:ListItem>
               <asp:ListItem Value="lowercase">lowercase</asp:ListItem>
               <asp:ListItem Value="uppercase">uppercase</asp:ListItem>
               <asp:ListItem Value="capitalize">capitalize</asp:ListItem>
            </asp:DropDownList>
            Pull Quote CSS class:
            <asp:DropDownList ID="drpPull" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drpPull_SelectedIndexChanged">
               <asp:ListItem Selected="True">Choose a css class</asp:ListItem>
               <asp:ListItem Value="pullQuoteOne">pullQuoteOne</asp:ListItem>
               <asp:ListItem Value="pullQuoteTwo">pullQuoteTwo</asp:ListItem>
            </asp:DropDownList>
      </div>
   </form>
</body>
</html>
File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class UsingCSS : System.Web.UI.Page
{
   protected void drpParagraph_SelectedIndexChanged(object sender, EventArgs e)
   {
      if (drpParagraph.SelectedIndex > 0)
      {
         labOne.Style["text-transform"] = drpParagraph.SelectedValue;
         labTwo.Style["text-transform"] = drpParagraph.SelectedValue;
      }
   }
   protected void drpPull_SelectedIndexChanged(object sender, EventArgs e)
   {
      if (drpPull.SelectedIndex > 0)
         labPullQuote.CssClass = drpPull.SelectedValue; 
   }
}

Font change

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="Default_aspx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>CheckBox Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>CheckBox Control</h1>
     <asp:Label ID="lblTime" runat="server" OnInit="lblTime_Init" />
     <br />
     <br />
     <asp:CheckBox ID="chkUnderLine" runat="server" AutoPostBack="True" Text="Underline?" TextAlign="Left" OnCheckedChanged="chkUnderLine_CheckedChanged" /> 
     <asp:CheckBox ID="chkOverLine" runat="server" AutoPostBack="True" Text="Overline?" OnCheckedChanged="chkOverLine_CheckedChanged" />
     <asp:CheckBox ID="chkStrikeout" runat="server" AutoPostBack="True" Text="Strikeout?" OnCheckedChanged="chkStrikeout_CheckedChanged" />
    
    </div>
    </form>
</body>
</html>
File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default_aspx : System.Web.UI.Page 
{
   protected void lblTime_Init(object sender, EventArgs e)
   {
     lblTime.Font.Name = "Verdana";
     lblTime.Font.Size = 20;
     lblTime.Font.Bold = true;
     lblTime.Font.Italic = true;
     lblTime.Text = DateTime.Now.ToString();
   }
   protected void chkUnderLine_CheckedChanged(object sender, EventArgs e)
   {
     if (chkUnderLine.Checked)
       lblTime.Font.Underline = true;
     else
       lblTime.Font.Underline = false;
   }
   protected void chkOverLine_CheckedChanged(object sender, EventArgs e)
   {
     if (chkOverLine.Checked)
       lblTime.Font.Overline = true;
     else
       lblTime.Font.Overline = false;
   }
   protected void chkStrikeout_CheckedChanged(object sender, EventArgs e)
   {
     if (chkStrikeout.Checked)
       lblTime.Font.Strikeout = true;
     else
       lblTime.Font.Strikeout = false;
   }
 }

set background color programmatically

<%@ Page Language="C#" %>
<script runat="server">
private void Page_Load(object sender, EventArgs e)
{
   TheBody.Style[HtmlTextWriterStyle.BackgroundColor] = "lightblue";    
}
</script>
<html>
<head><title>Background color</title></head>
<body id="TheBody" runat="server">
   <h3>The background color of this page has been set programmatically.</h3>
</body>
</html>

Set style attributes

<%@ Page Language="C#" 
         AutoEventWireup="true" 
         CodeFile="Default.aspx.cs" 
         Inherits="StyleAttributes" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="TextBox1" runat="server" type="text" /></div>
    </form>
</body>
</html>

File: Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class StyleAttributes : System.Web.UI.Page
{
  protected void Page_Load(object sender, System.EventArgs e)
  {
    if (!Page.IsPostBack)
    {
      TextBox1.Style["font-size"] = "20px";
      TextBox1.Style["color"] = "red";
      TextBox1.Style.Add("background-color", "lightyellow");
      TextBox1.Value = "<Enter e-mail address here>";
      TextBox1.Attributes["onfocus"] = "alert(TextBox1.value)";
    }
  }
}

Style asp.net server control

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Testing CSS</title>
  </head>
  <body>
    <form runat="server">
      Please select a product:
      
        <asp:DropDownList id="productsList" 
            CssClass="dropdownmenu" runat="server">
          <asp:ListItem Text="Shirt" selected="true" />
          <asp:ListItem Text="Hat" />
          <asp:Listitem Text="Pants" />
          <asp:ListItem Text="Socks" />
        </asp:DropDownList>
      
            
        <asp:TextBox id="quantityTextBox" CssClass="textbox"
            runat="server" />
      
      
        <asp:Button id="addToCartButton" CssClass="button" 
            Text="Add To Cart" runat="server"  />
      
    </form>
  </body>
</html>

Test the border properties

<%@ Page Language="VB" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" 
                   runat="server" 
                   Text="Testing the border properties" 
                   BorderStyle="Solid"></asp:Label>
    </div>
    </form>
</body>
</html>

This is a test of the color properties

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" 
                   runat="server" 
                   Text="This is a test of the color properties" 
                   BackColor="Navy" 
                   ForeColor="White"></asp:Label>
    </div>
    </form>
</body>
</html>

Using style

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="UsingStyle" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
<table cellPadding="6" border="0">
                <tr>
                    <td>
                        <asp:label id="Label1" 
                            Text="Border Properties Example" Runat="server">
                            <center><br>Label Styles</center>
                        </asp:label>
                    </td>
                    <td>
                        <asp:button id="Button1" runat="server" 
                            Text="Button Styles">
                        </asp:button>
                    </td>
                    <td>
                        <asp:listbox id="ListBox1" Runat="server">
                            <asp:ListItem Value="0" Text="List Item 0">
                            </asp:ListItem>
                            <asp:ListItem Value="1" Text="List Item 1">
                            </asp:ListItem>
                            <asp:ListItem Value="2" Text="List Item 2">
                            </asp:ListItem>
                        </asp:listbox>
                    </td>
                    <td>
                        <asp:textbox id="TextBox1" 
                            Text="TextBox Styles" Runat="server">
                        </asp:textbox>
                    </td>
                    <td>
                        <asp:table id="Table1" Runat="server">
                            <asp:TableRow>
                                <asp:TableCell Text="(0,0)"></asp:TableCell>
                                <asp:TableCell Text="(0,1)"></asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell Text="(1,0)"></asp:TableCell>
                                <asp:TableCell Text="(1,1)"></asp:TableCell>
                            </asp:TableRow>
                        </asp:table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label2" Runat="server" Text="Border Color:">
                        </asp:Label>
                        <asp:dropdownlist id="borderColorList" 
                            Runat="server" AutoPostBack="True" 
                            OnSelectedIndexChanged="ChangeBorderColor">
                        </asp:dropdownlist>
                        <br>
                        <asp:Label ID="Label3" Runat="server" Text="Border Style:">
                        </asp:Label>
                        <asp:dropdownlist id="borderStyleList" 
                            Runat="server" AutoPostBack="True"
                            OnSelectedIndexChanged="ChangeBorderStyle">
                        </asp:dropdownlist>
                        <br>
                        <asp:Label ID="Label4" Runat="server" Text="Border Width">
                        </asp:Label>
                        <asp:dropdownlist id="borderWidthList" 
                            Runat="server" AutoPostBack="True"
                            OnSelectedIndexChanged="ChangeBorderWidth">
                        </asp:dropdownlist>
                    </td>
                    <td>
                        <asp:Label ID="Label5" Runat="server" Text="Back Color:">
                        </asp:Label>
                        <asp:dropdownlist id="backColorList" 
                            Runat="server" AutoPostBack="True"
                            OnSelectedIndexChanged="ChangeBackColor">
                        </asp:dropdownlist>
                        <br>
                        <asp:Label ID="Label6" Runat="server" Text="Foreground Color:">
                        </asp:Label>
                        <asp:dropdownlist id="foreColorList" 
                            Runat="server" AutoPostBack="True"
                            OnSelectedIndexChanged="ChangeForeColor">
                        </asp:dropdownlist>
                    </td>
                    <td>
                        <asp:Label ID="Label7" Runat="server" Text="Font Name:">
                        </asp:Label>
                        <asp:dropdownlist id="fontNameList" 
                            Runat="server" AutoPostBack="True"
                            OnSelectedIndexChanged="ChangeFont">
                        </asp:dropdownlist>
                        <br>
                        <asp:Label ID="Label8" Runat="server" Text="Font Size:">
                        </asp:Label>
                        <asp:dropdownlist id="fontSizeList" 
                            Runat="server" AutoPostBack="True" 
                            OnSelectedIndexChanged="ChangeFontSize">
                        </asp:dropdownlist>
                    </td>
                </tr>
            </table>
    </form>
</body>
</html>

File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
public partial class UsingStyle : System.Web.UI.Page
{
   private Style primaryStyle = new Style();
   protected void Page_Load(object sender, System.EventArgs e)
   {
      if (!Page.IsPostBack)
      {
         ListItemCollection colors = new ListItemCollection();
         colors.Add(Color.Black.Name);
         colors.Add(Color.Blue.Name);
         colors.Add(Color.Green.Name);
         colors.Add(Color.Orange.Name);
         colors.Add(Color.Purple.Name);
         colors.Add(Color.Red.Name);
         colors.Add(Color.White.Name);
         colors.Add(Color.Yellow.Name);
         borderColorList.DataSource = colors;
         borderColorList.DataBind();
         backColorList.DataSource = colors;
         backColorList.DataBind();
         foreColorList.DataSource = colors;
         foreColorList.DataBind();
         ListItemCollection styles = new ListItemCollection();
         Type styleType = typeof(BorderStyle);
         foreach (string s in Enum.GetNames(styleType))
         {
            styles.Add(s);
         }
         borderStyleList.DataSource = styles;
         borderStyleList.DataBind();
         ListItemCollection widths = new ListItemCollection();
         for (int i = 0; i < 11; i++)
         {
            widths.Add(i.ToString() + "px");
         }
         borderWidthList.DataSource = widths;
         borderWidthList.DataBind();
         ListItemCollection names = new ListItemCollection();
         names.Add("Arial");
         names.Add("Courier");
         names.Add("Garamond");
         names.Add("Time New Roman");
         names.Add("Verdana");
         fontNameList.DataSource = names;
         fontNameList.DataBind();
         ListItemCollection fontSizes = new ListItemCollection();
         fontSizes.Add("Small");
         fontSizes.Add("Medium");
         fontSizes.Add("Large");
         fontSizes.Add("10pt");
         fontSizes.Add("14pt");
         fontSizes.Add("20pt");
         fontSizeList.DataSource = fontSizes;
         fontSizeList.DataBind();
         Label1.ApplyStyle(primaryStyle);
         ListBox1.ApplyStyle(primaryStyle);
         Button1.ApplyStyle(primaryStyle);
         Table1.ApplyStyle(primaryStyle);
         TextBox1.ApplyStyle(primaryStyle);
      }
   }
   protected void ChangeBorderColor(object sender, System.EventArgs e)
   {
      primaryStyle.BorderColor = Color.FromName(borderColorList.SelectedItem.Text);
      Label1.ApplyStyle(primaryStyle);
      ListBox1.ApplyStyle(primaryStyle);
      Button1.ApplyStyle(primaryStyle);
      Table1.ApplyStyle(primaryStyle);
      TextBox1.ApplyStyle(primaryStyle);
   }
   protected void ChangeBackColor(object sender, System.EventArgs e)
   {
      primaryStyle.BackColor = Color.FromName(backColorList.SelectedItem.Text);
      Label1.ApplyStyle(primaryStyle);
      ListBox1.ApplyStyle(primaryStyle);
      Button1.ApplyStyle(primaryStyle);
      Table1.ApplyStyle(primaryStyle);
      TextBox1.ApplyStyle(primaryStyle);
   }
   protected void ChangeForeColor(object sender, System.EventArgs e)
   {
      primaryStyle.ForeColor = Color.FromName(foreColorList.SelectedItem.Text);
      Label1.ApplyStyle(primaryStyle);
      ListBox1.ApplyStyle(primaryStyle);
      Button1.ApplyStyle(primaryStyle);
      Table1.ApplyStyle(primaryStyle);
      TextBox1.ApplyStyle(primaryStyle);
   }
   protected void ChangeBorderStyle(object sender, System.EventArgs e)
   {
      primaryStyle.BorderStyle = (BorderStyle)Enum.Parse(typeof(BorderStyle),borderStyleList.SelectedItem.Text);
      Label1.ApplyStyle(primaryStyle);
      ListBox1.ApplyStyle(primaryStyle);
      Button1.ApplyStyle(primaryStyle);
      Table1.ApplyStyle(primaryStyle);
      TextBox1.ApplyStyle(primaryStyle);
   }
   protected void ChangeBorderWidth(object sender, System.EventArgs e)
   {
      primaryStyle.BorderWidth = Unit.Parse(borderWidthList.SelectedItem.Text);
      Label1.ApplyStyle(primaryStyle);
      ListBox1.ApplyStyle(primaryStyle);
      Button1.ApplyStyle(primaryStyle);
      Table1.ApplyStyle(primaryStyle);
      TextBox1.ApplyStyle(primaryStyle);
   }
   protected void ChangeFont(object sender, System.EventArgs e)
   {
      primaryStyle.Font.Name =
          fontNameList.SelectedItem.Text;
      Label1.ApplyStyle(primaryStyle);
      ListBox1.ApplyStyle(primaryStyle);
      Button1.ApplyStyle(primaryStyle);
      Table1.ApplyStyle(primaryStyle);
      TextBox1.ApplyStyle(primaryStyle);
   }
   protected void ChangeFontSize(object sender, System.EventArgs e)
   {
      primaryStyle.Font.Size =
          FontUnit.Parse(fontSizeList.SelectedItem.Text);
      Label1.ApplyStyle(primaryStyle);
      ListBox1.ApplyStyle(primaryStyle);
      Button1.ApplyStyle(primaryStyle);
      Table1.ApplyStyle(primaryStyle);
      TextBox1.ApplyStyle(primaryStyle);
   }
}

Working with the Font properties: Font-Italic, Font-Names,Font-Size

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" 
                   runat="server" 
                   Text="Working with the Font properties" 
                   Font-Italic="True" 
                   Font-Names="Arial" 
                   Font-Size="22pt"></asp:Label>
    </div>
    </form>
</body>
</html>

ASP.NET Tutorial/ASP.net Controls/Style

Содержание

Bold font

Css style

Font change

set background color programmatically

Set style attributes

Style asp.net server control

Test the border properties

This is a test of the color properties

Using style

Working with the Font properties: Font-Italic, Font-Names,Font-Size

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Инструменты

Навигация