Usando Estilos en Cascada en Aplicaciones Web

Sres. Desarrolladores, se que me extrañaron mucho, pero estuve y aun estoy algo ocupado con unos proyectos pero definitivamente la fuerza y las ganas por colaborar con sus conocimientos es mayor. Sin mas preámbulos vamor con lo nuestro.

Definición de Hoja de Estilos

Una hoja de estilos en cascada (CSS) contiene definiciones de estilos que se aplican a los elementos de un documento HTML. Los estilos CSS definen la forma de mostrar los elementos y su posición en la página. En lugar de asignar individualmente atributos a cada elemento de la página, puede crear una regla general que aplique atributos específicos siempre que un explorador Web encuentre una instancia de un elemento o un elemento asignado a un cierto estilo CLASS.

Puede aplicar estilos CSS en línea a un elemento HTML individual, agrupados en un bloque <STYLE> de la parte HEAD de una página Web o importado desde un archivo de hoja de estilos en cascada (CSS). Es posible vincular un mismo archivo externo de hoja de estilos en cascada a muchas páginas Web, con el fin de proporcionar una apariencia uniforme a todo un sitio Web.

Para utilizar las reglas de estilo CSS en el Diseñador HTML, la propiedad targetSchema del documento HTML se debe establecer en un explorador Web compatible con HTML 4.0 o superior. Los exploradores más antiguos, compatibles sólo con HTML 3.2 o anteriores, ignorarán los estilos CSS. Cuando la propiedad targetSchema está establecida en un explorador Web más antiguo, el entorno de desarrollo integrado (IDE) oculta las opciones y propiedades de CSS que sólo están disponibles en exploradores más recientes. Si se establece la propiedad targetSchema en un explorador compatible con HTML 4.0, las reglas de estilo CSS constituyen el mejor método para especificar la apariencia y la posición deseadas de los elementos HTML.

Cascada

Las reglas de estilo CSS se aplican "en cascada", es decir, las reglas de estilo globales se seguirán aplicando a todos los elementos HTML a menos que sean sustituidas por las reglas de estilo locales. En general, las reglas de estilo locales tienen prioridad sobre las reglas de estilo globales. Esto significa que un estilo definido en un bloque STYLE de una página Web, por ejemplo, puede modificar desde una página concreta el estilo de todo el sitio Web definido en una hoja de estilos CSS externa. De forma similar, un estilo en línea definido dentro de una etiqueta HTML individual de la página puede modificar en una línea los estilos definidos para este tipo de elemento en todo el sitio.

Las partes de las reglas de estilo globales que no sean modificadas por las reglas de estilo CSS locales seguirán aplicándose a los elementos HTML incluso después de que se hayan aplicado los estilos locales. En el ejemplo anterior, los estilos CSS locales que se aplican al texto escrito entre etiquetas <H1> reemplazan algunas reglas de estilo globales del explorador Web para el texto de las etiquetas <H1> (centrar el texto de las etiquetas <H1> y cambiar el color a rojo), pero no modifican las otras reglas (mostrar todo el texto de las etiquetas <H1> en una fuente más grande y en negrita). Las reglas de estilo globales y locales se aplican (en ese orden), y se muestra el texto de las etiquetas <H1> de la página con una fuente grande, en negrita, y centrado y de color rojo.

La siguiente tabla muestra como trabajan los estilos:

Nivel	Definido en	Aplica en
Global	El archivo de hoja de estilo	Toda la página donde se hace referencia
Page	El elemento Head de la página	Todos los elementos en la página actual
InLine	Un elemento HTML	Sólo el elemento correspondiente

Nuestro Web Form por defecto, sin estilos

El archivo de Estilos

Un documento de hoja de estilos CSS externa es un archivo de texto sin formato con una extensión .css que sólo contiene reglas de estilo. La instrucción

<LINK REL=stylesheet Type="text/css" HREF="MiEstilo.css">

aplica a la página las reglas de estilo de la hoja de estilos CSS externa "MiEstilo.css".

La imagen siguiente muestra el archivo Style.css

En la imagen anterior se muestra que se ha asignado al elemento BODY los siguientes formatos: Negrita (bold), tamaño de 1.5 cm, espaciado normal, color rojo (red), letra Itálica, fuente Verdana, espaciado de letras normal, color de fondo antiquewhite y  alineación derecha.

Crear los estilos
Para crear los estilos debemos seleccionar el elemento correspondiente de la ventana Esquema CSS que se muestra en la parte izquierda. Una vez seleccionado se puede pulsar clic en el botón Generar Estilo, presente en la barra de herramientas Hoja de Estilos, tambien usando el menú Estilo y luego seleccionar Generar Estilo. La ventana para generar el estilo se muestra asi:

Especificar el formato para cada elemento presente como: Fuente, Fondo, Texto, etc y pulsar click en Aceptar

Otra forma
Se pueden asignar los formatos al estilo directamente usando la ventana de edición, la imagen siguiente muestra el Intelissence que se despliega.

Seleccione el adecuado y especifique el formato, obviamente es mas complicado esta forma.

Agregar Reglas de Estilo
Se puede agregar reglas para aplicar los estilos de acuerdo a las preferencias del diseñador, para esto debemos seleccionar la opción Agregar regla de Estilo del menú Estilos, la ventana se muestra de la siguiente manera

Nótese que para esta regla de estilo se ha incluído tres  elementos (A:link, A:active y A:visited) en una jerarquía definida, al final pulsar clic en Aceptar, después de agregar se muestra:

Luego de agregar la Regla de estilo debe definirse el estilo de este, la forma mas sencilla la he descrito lineas arriba, una vez definido el estilo puede quedar así:

 

Uso de los estilos
Cuando crea una aplicación en Visual Basic .Net automáticamente se crea un archivo de estilo Style.css (para aplicaciones en C# debe insertarse) pero para utilizar los estilos definidos en este debemos insertar el enlace de este en el HEAD de la página. La imagen muestra resaltada la línea que debemos incluir:

Una vez asignada la Hoja de Estilos nuestro Web Form se muestra como sigue, je,je,je...decidi cambiar algunas líneas de texto:

Crear estilo para un elemento específico
Se puede crear un estilo para un elemento específico, para esto debemos incluir su definición utilizando el ID del elemento (Nombre) precedido del símbolo #.  La siguiente imagen muestra un estilo definido para el elemento con ID lblTitulo

Después de creado el estilo en la definición de la etiqueta debemos añadir el atributo CssClass, la definición de la etiqueta es como sigue:

<asp:label id="lblTitulo" runat="server" CssClass="lblTitulo>

Y la presentación de la etiqueta lo muestra la siguiente imagen:

Después de asignar o cambiar algunos estilos para los elementos presentes para asignar al texto presente basta seleccionarlo y utilizar el botón Formato de Bloque presente en la barra de herramientas de Formato, después de jugar un poco hice esto bien feo...je,je,je.

Recuerden votar por este artículo, sus votos me animan a seguir publicando, además que son un premio a mi esfuerzo.

Una cosilla que esta de mas: Crea un directorio Virtual y copias los archivos del empaquetado que puedes bajarlo en el enlace al final del artículo... ya sé que sabías hacerlo... no te enojes.

Espero que les sea útil, en las siguientes entregas veremos como:

• Crear estilos para listados
• Cambiar estilos en tiempo de ejecución
• Definir comportamientos de los estilos (behaviors)
• Manejo de varias hojas de estilo en mi sitio Web.

Reciban un fuerte abrazo (aunque un poquito atrazado) por Navidad y que todos sus sueños y proyectos se cumplan y que el próximo año sea mucho mejor del que se termina.

Feliz  año 2006 y como siempre A SEGUIR DESARROLLANDO

Ing. Fernando Luque Sánchez
De Trujillo - Perú para el mundo

---

Fichero con el código de ejemplo:   FernandoLuque_ASPStyles.zip - (10) KB