ASP.NET Tutorial/ASP.net Controls/Style
Содержание
- 1 Bold font
- 2 Css style
- 3 Font change
- 4 CheckBox Control
Bold font
<source lang="csharp">
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form id="form1" runat="server">
<asp:Label ID="Label1"
runat="server"
Font-Bold="True"
Text="Hello, World!"></asp:Label></form>
</body> </html></source>
Css style
<source lang="csharp">
<%@ 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>
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>
</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;
}
}</source>
Font change
<source lang="csharp">
<%@ 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">
CheckBox Control
<asp:Label ID="lblTime" runat="server" OnInit="lblTime_Init" />
<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" />
</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;
}
}</source>
set background color programmatically
<source lang="csharp">
<%@ 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">
The background color of this page has been set programmatically.
</body> </html></source>
Set style attributes
<source lang="csharp">
<%@ 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">
</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)";
}
}
}</source>
Style asp.net server control
<source lang="csharp">
<!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></source>
Test the border properties
<source lang="csharp">
<%@ 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">
<asp:Label ID="Label1"
runat="server"
Text="Testing the border properties"
BorderStyle="Solid"></asp:Label>
</form>
</body> </html></source>
This is a test of the color properties
<source lang="csharp">
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form id="form1" runat="server">
<asp:Label ID="Label1"
runat="server"
Text="This is a test of the color properties"
BackColor="Navy"
ForeColor="White"></asp:Label>
</form>
</body> </html></source>
Using style
<source lang="csharp">
<%@ 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">
<asp:label id="Label1"
Text="Border Properties Example" Runat="server">
Label Styles </asp:label> |
<asp:button id="Button1" runat="server"
Text="Button Styles">
</asp:button>
|
<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>
|
<asp:textbox id="TextBox1"
Text="TextBox Styles" Runat="server">
</asp:textbox>
|
<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>
|
<asp:Label ID="Label2" Runat="server" Text="Border Color:">
</asp:Label>
<asp:dropdownlist id="borderColorList"
Runat="server" AutoPostBack="True"
OnSelectedIndexChanged="ChangeBorderColor">
</asp:dropdownlist>
|
<asp:Label ID="Label5" Runat="server" Text="Back Color:">
</asp:Label>
<asp:dropdownlist id="backColorList"
Runat="server" AutoPostBack="True"
OnSelectedIndexChanged="ChangeBackColor">
</asp:dropdownlist>
|
<asp:Label ID="Label7" Runat="server" Text="Font Name:">
</asp:Label>
<asp:dropdownlist id="fontNameList"
Runat="server" AutoPostBack="True"
OnSelectedIndexChanged="ChangeFont">
</asp:dropdownlist>
|
</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);
}
}</source>
Working with the Font properties: Font-Italic, Font-Names,Font-Size
<source lang="csharp">
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form id="form1" runat="server">
<asp:Label ID="Label1"
runat="server"
Text="Working with the Font properties"
Font-Italic="True"
Font-Names="Arial"
Font-Size="22pt"></asp:Label>
</form>
</body> </html></source>
