Controle de Servidor Web do ASP.NET e Estilos CSS
Você pode controlar a aparência dos controles de servidor ASP.NET definindo várias propriedades de aparência como ForeColor, BackColor, Height e Width.Além disso, alguns controles oferecem suporte de estilo a objetos que expõem configurações adicionais relacionadas a estilo.
.gif "Observação") Observação: |
|---|
Páginas Web ASP.NET funcionam como páginas HTML em tempo de execução.Portanto, você pode usar folhas de estilo em cascata (CSS) para definir a aparência de qualquer elemento na página que não sejam controles do servidor Web.Além disso, você pode definir temas ASP.NET que incluem configurações da folha de estilos em cascata e então aplicar temas a páginas ou ao seu site.Para obter detalhes, consulte:Temas e Aparências do ASP.NET. |
As seções a seguir fornecem informações sobre como definir estilos diretamente, incluindo como trabalhar com estilos em dois tempos de design e programaticamente.
Propriedades de Aparência de Processamento para o Navegador
Quando a página é executada, propriedades de aparência são processadas de acordo com os recursos do navegador do usuário.Se o navegador do usuário suporta folhas de estilos em cascata (CSS), as propriedades de aparência são reproduzidas como atributos de estilo dos elementos HTML que compõem o controle.Por exemplo, se você definir um controle de servidor Web HyperLink e definir sua propriedade ForeColor como Red, sua propriedade Bold como true e sua propriedade Size como xx-small, o controle é processado como o seguinte se o navegador do usuário suportar as folhas de estilos:
<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>
<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>
Por outro lado, se o navegador do usuário não tiver suporte para estilos, o controle é disposto usando outros meios, como um elemento <font>.A seguir, mostra-se o processamento para o exemplo de cima, mas para um navegador que não oferece suporte de estilos:
<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>
<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>
Outros exemplos de propriedades que são processados de maneira diferente dependendo do navegador são BorderWidth e BorderColor.
Algumas propriedades de aparência, como BorderStyle, não podem ser processadas sem o uso de estilos.Portanto essas propriedades são ignoradas em navegadores que não ofereçam suporte a estilos.Para obter mais informações, consulte Controles de Servidor Web do ASP.NET e Recursos do Navegador.
Objetos de Estilo de Controle
Além disso, para propriedades de aparência como ForeColor e BackColor, controles expõem um ou mais objetos de estilo que encapsulam propriedades adicionais de aparência.Um exemplo é a propriedade Font de estilo, que expõe um objeto do tipo FontInfo contendo propriedades individuais referentes à fonte, como Size, Name, e Bold.
Alguns controles expõe objetos de estilo que você pode utilizar para definir a aparência de partes específicas do controle.Por exemplo, o controle de servidor Web Calendar contém objetos de estilo como DayStyle (dias individuais), SelectedDayStyle (um dia, semana ou mês selecionado pelo usuário) e WeekendDayStyle.Usando o objeto de estilo SelectedDayStyle, por exemplo, você pode definir as propriedades BackColor e ForeColor do dia selecionado pelo usuário.
A maioria dos objetos de estilo são do tipo Style ou TableItemStyle, porque eles são a definição dos atributos de células da tabela.A propriedade Font é do tipo FontInfo.
Precedência e Herança de Objetos de Estilo
Em controles complexos, objetos de estilo frequentemente herdam características de outros objetos de estilo.Por exemplo, no controle Calendar, o objeto SelectedDayStyle é baseado no objeto DayStyle.Se você não definir explicitamente as propriedades de SelectedDayStyle, ela herda suas características do objeto DayStyle.
Essa herança significa que propriedades do objeto-estilo que você define tem uma ordem de prioridade.Por exemplo, a lista a seguir mostra a ordem das propriedades do objeto-estilo para o controle Calendar, com a prioridade mais alta dada às configurações no último objeto da lista.
Propriedades de aparência do controle base Calendar.
DayStyle objeto de estilo.
WeekendDayStyle objeto de estilo.
OtherMonthDayStyle objeto de estilo.
TodayDayStyle objeto de estilo.
SelectedDayStyle objeto de estilo.
Pode haver dificuldades com estilos quando eles são divididos entre um elemento de recipiente e um elemento de texto.Por exemplo, suponha que você tenha uma folha de estilos de um controle e quiser que as propriedades de estilo de texto sejam aplicadas a um link e o restante do estilo a ser aplicado a um recipiente.Isso é viável se você definir os estilos usando as propriedades do controle, como MenuItemStyle para um controle de menu ou TodayDayStyle para um controle de calendário.Mas é mais difícil usando estilos definidos por uma propriedade CssClass, porque o ASP.NET não tem como saber o conteúdo da classe no servidor.ASP.NET aplica os estilos definidos na propriedade CssClass para o texto e elementos de recipiente e adiciona um estilo em linha para eliminar os efeitos deste aplicativo duplo (bordas duplas, multiplicação proporcional da fonte e assim por diante).
A melhor maneira de estilizar um controle é usar as propriedades de estilo definidas pelo controle e usar uma folha de estilos ou estilos em linha para fazer pequenos ajustes para elementos individuais se necessário.Para substituir um estilo definido pelas propriedades de um controle do estilo, use a regra CSS !important em uma folha de estilos ou estilos em linha.
O exemplo de código a seguir usa a propriedade CssClass no elemento hovernodestyle.Essa classe é definida duas vezes como myclass e como a.myclass:visited para que ele substitua a definição a:visited.
<%@ Page Language="C#" %>
<html>
<head >
<asp:sitemapdatasource id="SiteMapSource" />
<style type="text/css">
a:visited
{
color: #000066
}
myclass, a.myclass:visited {
color: #FF0000
}
</style>
</head>
<body>
<form >
<a href="https://www.Contoso.com">Contoso</a>
<asp:treeview id="treeview1"
initialexpanddepth="1"
datasourceid="SiteMapSource"
forecolor="#444444"
font-names="Verdana"
font-size="0.8em">
<nodestyle font-bold="true" />
<hovernodestyle cssclass=myclass />
</asp:treeview>
</form>
</body>
</html>
Se você usar folhas de estilos em cascata (CSS) para personalizar a aparência de um controle, use estilos em linha ou um arquivo separado CSS, mas não ambos.Usar estilos em linha e um arquivo separado CSS pode causar resultados inesperados.
Controlando Estilos e Classes CSS Diretamente
As propriedades de aparência além dos objetos de estilo, controles expõe duas propriedades que permitem que você manipule estilos CSS mais diretamente: CssClass e Style.A propriedade CssClass permite que você atribuia uma classe de folha de estilos ao controle.A propriedade Style permite que você defina uma string de atributos estilo a serem gravados como se fossem o controle.Usar a propriedade Style permite que você defina atributos de estilo que não são expostos por outras propriedades.A propriedade Style expõe uma coleção cujos métodos, como Add e Remove, você pode chamar para definir os estilos diretamente.
Configurações feitas na propriedade Style não serão refletidas na propriedade individual de aparência correspondente.Por exemplo, se você definir uma string background-color:red na propriedade Style, a propriedade BackColor não é também definida como vermelho, mesmo que o controle processe com um plano de fundo vermelho.Se você definir as propriedades aparência e a propriedade Style, as propriedades individuais de aparência têm precedência sobre a propriedade Style.
Consulte também
Conceitos
Controles de Servidor Web do ASP.NET e Recursos do Navegador