Controles de servidor Web ASP.NET y estilos de CSS
Actualización: noviembre 2007
Se puede controlar el aspecto de los controles de servidor de ASP.NET estableciendo varias propiedades de aspecto como ForeColor, BackColor, Height y Width. Además, algunos controles admiten objetos de estilo que exponen una configuración relacionada con el estilo adicional.
.gif "Nota") Nota: |
|---|
Las páginas Web ASP.NET funcionan como páginas HTML en tiempo de ejecución. Por consiguiente, puede utilizar hojas de estilo en cascada (CSS) para establecer la apariencia de cualquier elemento en la página que no sea los controles de servidor Web. Además, puede definir temas de ASP.NET que incluyen la configuración de hojas de estilos en cascada y, a continuación, aplicar los temas a las páginas o al sitio. Para obtener información detallada, vea Temas y máscaras de ASP.NET. |
Las secciones siguientes proporcionan información sobre cómo establecer estilos directamente, incluso cómo trabajar con estilos tanto en tiempo de diseño como mediante programación.
Representación de propiedades de apariencia en el explorador
Cuando se ejecuta la página, las propiedades de apariencia se representan según las capacidades del explorador del usuario. Si el explorador del usuario admite hojas de estilos en cascada (CSS), las propiedades de apariencia se representan como atributos de estilo de los elementos HTML que componen el control. Por ejemplo, si define un control de servidor Web HyperLink y establece su propiedad ForeColor en Red, su propiedad Bold en true y su propiedad Size en xx-small, el control se representa como el que se incluye a continuación si el explorador del usuario admite hojas 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 otro lado, si el explorador del usuario no admite estilos, el control se representa por otros medios, como un elemento <font>. A continuación se muestra la representación del ejemplo anterior, pero para un explorador que no admite 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>
Otros ejemplos de propiedades que se representan de forma diferente dependiendo del explorador son BorderWidth y BorderColor.
Algunas propiedades de apariencia, como BorderStyle no se puede representar sin utilizar estilos. Estas propiedades se omiten por consiguiente en exploradores que no admiten estilos. Para obtener más información, vea Controles de servidor Web ASP.NET y funciones del explorador.
Objetos de estilo del control
Además de las propiedades de apariencia como ForeColor y BackColor, los controles exponen uno o varios objetos de estilo que encapsulan propiedades de apariencia adicionales. Un ejemplo lo constituye la propiedad del estilo Font, que expone un objeto de tipo FontInfo que contiene propiedades individuales pertenecientes a la fuente, como Size, Name y Bold.
Algunos controles exponen objetos de estilo que puede utilizar para establecer la apariencia de partes específicas del control. Por ejemplo, el control Calendar de servidor Web contiene objetos de estilo como DayStyle (días individuales), SelectedDayStyle (un día, una semana o un mes seleccionado por el usuario) y WeekendDayStyle. Al utilizar, por ejemplo, el objeto de estilo SelectedDayStyle, se pueden establecer las propiedades BackColor y ForeColor del día seleccionado por el usuario.
La mayor parte de los objetos de estilo son de tipo Style o TableItemStyle porque establecen los atributos de celdas de tabla. La propiedad Font es de tipo FontInfo.
Prioridad y herencia de los objetos de estilo
En controles complejos, los objetos de estilo a menudo heredan características de otros objetos de estilo. Por ejemplo, en el control Calendar, el objeto SelectedDayStyle está basado en el objeto DayStyle. Si no establece explícitamente ninguna propiedad para SelectedDayStyle, hereda las características del objeto DayStyle.
Esta herencia significa que las propiedades del objeto de estilo que ha establecido tienen un orden de prioridad. Por ejemplo, la siguiente lista muestra el orden de las propiedades del objeto de estilo para el control Calendar, con la mayor prioridad dada a la configuración del último objeto de la lista.
Propiedades de apariencia del control Calendar base.
Objeto de estilo DayStyle.
Objeto de estilo WeekendDayStyle.
Objeto de estilo OtherMonthDayStyle.
Objeto de estilo TodayDayStyle.
Objeto de estilo SelectedDayStyle.
Pueden surgir dificultades con los estilos cuando éstos se dividen entre un elemento de contenedor y un elemento de texto. Por ejemplo, suponga que tiene una hoja de estilos para un control, y desea aplicar las propiedades de estilo de texto a un vínculo y aplicar el resto del estilo a un contenedor. Esto es posible si establece los estilos mediante las propiedades de estilo del control, como MenuItemStyle para un control de menú o TodayDayStyle para un control de calendario. Pero es más difícil si se utilizan los estilos definidos por una propiedad CssClass, porque ASP.NET no tiene forma de conocer el contenido de la clase en el servidor. ASP.NET aplica los estilos definidos en la propiedad CssClass a los elementos de texto y de contenedor, y agrega un estilo en línea para suprimir los efectos de esta aplicación doble (bordes dobles, multiplicación de las fuentes proporcionales, etc.).
La mejor manera de aplicar estilo a un control es utilizar las propiedades de estilo definidas por el control y usar un hoja de estilos o estilos en línea para realizar pequeños ajustes en los distintos elementos, si es necesario. Para reemplazar un estilo definido por las propiedades de estilo de un control, utilice la regla de CSS !important en un hoja de estilos o en estilos en línea.
En el ejemplo de código siguiente se utiliza la propiedad CssClass en el elemento hovernodestyle. Esta clase se define dos veces como myclass y como a.myclass:visited para que reemplace la definición de 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>
Si utiliza hojas de estilos en cascada (CSS) para personalizar el aspecto de un control, emplee estilos en línea o un archivo CSS independiente, pero no ambos. El uso de estilos en línea y un archivo CSS independiente puede producir resultados imprevistos.
Controlar clases y estilos CSS directamente
Además de las propiedades de apariencia y objetos de estilo, los controles exponen dos propiedades que permiten manipular estilos CSS de una forma más directa: CssClass y Style. La propiedad CssClass permite asignar una clase de hoja de estilos al control. La propiedad Style permite establecer una cadena de atributos de estilo para que se escriba tal cual en el control. El uso de la propiedad Style permite establecer atributos de estilo que no se exponen a través de otras propiedades. La propiedad Style expone una colección a cuyos métodos, como Add y Remove, puede llamar para establecer directamente los estilos.
La configuración realizada en la propiedad Style no se refleja en la propiedad de apariencia individual correspondiente. Por ejemplo, si establece una cadena background-color:red en la propiedad Style, la propiedad BackColor tampoco se establece en rojo, aunque el control se represente con un fondo rojo. Si establece tanto propiedades de apariencia como la propiedad Style, las propiedades de apariencia individuales tienen precedencia sobre la propiedad Style.
Vea también
Conceptos
Controles de servidor Web ASP.NET y funciones del explorador