Tutorial ASP.NET: Utilización de estilos en ASP.NET (CSS)
ASP.NET nos permite factorizar la información de estilo y diseño en un grupo separado de ficheros. Un Tema se puede aplicar a cualquier sitio de forma que afecte a la apariencia y entorno de las páginas y controles del sitio. Los cambios en el Estilo de un sitio pueden administrarse realizando cambios al Tema, sin tener que editar las páginas de forma individual.
Los Temas también se pueden compartir con otros desarrolladores. Hay varias formas de aplicar ESTILOS a una página web en ASP.NET pero no todas son las más óptimas. Todo control de servidor tiene atributos que nos permiten cambiar su aspecto.
<asp:Label ID="Label1" runat="server" BackColor="#FF6600" BorderColor="#00CC00" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial" Font-Size="10pt" ForeColor="White" Text="Mi label"></asp:Label>
Aplicando este diseño nuestro Label se ve de esta forma.
Aplicar estilos mediante atributos tiene sus ventajas y desventajas.
Por un lado la comodidad y velocidad de aplicar un estilo particular a un control determinado. Pero por el otro, al no estar centralizado, no te permite reutilizar el estilo para aplicar a otros controles y si has aplicado este estilo a varios controles y deseas cambiarlo deberás hacerlo uno por uno.
La mejor opción es utilizar Hojas de estilo “Cascading Style Sheets” (CSS) factorizar los ajustes de estilo de forma separada de las propiedades de los controles. Veamos cómo podemos aplicar el mismo estilo utilizando hojas de estilo CSS. Lo primero que vamos a hacer es crear un archivo con la extensión CSS. (“StyleSheet.css”)
.
En este archivo tendremos la definición del estilo. Agregamos la siguiente definición a nuestro archivo .css:
.MiLabel { border-color: #00CC00; border-style: solid; background-color: #FF6600; color: #FFFFFF; font-family: Arial; font-size: 10pt; font-weight: bold; }
Luego creamos la referencia a la hoja de estilo en nuestro aspx
.
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
Y por último indicamos a nuestro control LABEL
que utilizara la clase MiLabel
.
<asp:Label ID="Label1" runat="server" CssClass="MiLabel" Text="Mi label"></asp:Label>
De esta manera cada control que necesitemos aplicarle el mismo estilo simplemente deberá indicarle a la propiedad CssClass
el nombre del estilo que se desea aplicar.
Capítulos del Tutorial
- Capítulo 1: Tutorial de desarrollo web con ASP.NET
- Capítulo 2: Primera aplicación web en ASP.NET
- Capítulo 3: Ejecutar código JavaScript en ASPNET
- Capítulo 4: Archivos Web.Config y Global.asax
- Capítulo 5: Utilización de Código detrás del modelo o código en línea
- Capítulo 6: Controles de servidor y eventos
- Capítulo 7: Controles de usuarios reutilizables
- Capítulo 8: Crear una página de login, autenticación y seguridad.
- Capítulo 9: Utilización de estilos en ASP.NET (CSS)
En el próximo capítulo que se publica el jueves veremos: Trabajando con XML y Web Services.
Muy básico este artículo. Pensaba que iban a explicar como generar Themes para aplicaciones .Net
El lenguaje ASP.NET es muy parecida alde PHP, esto indica que no abría problemas en usarla, pero como todos dicen, lo nuevo siempra de miedo.
buen manual
Para el que lo sabe es basico y para el que no lo sabe lo acaba de aprender.