HOJAS DE ESTILO EN ASP.NET http://www.elguille.info/colabora/NET2005/FernandoLuque_ASPEstilos.

htm
mas

http://www.elguille.info/colabora/NET2005/adol_AplicarCss.htm

Sres. Desarrolladores, se que me extraaron 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 prembulos vamor con lo nuestro.

Definicin 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 posicin en la pgina. En lugar de asignar individualmente atributos a cada elemento de la pgina, puede crear una regla general que aplique atributos especficos 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 lnea a un elemento HTML individual, agrupados en un bloque <STYLE> de la parte HEAD de una pgina 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 pginas Web, con el fin de proporcionar una apariencia uniforme a todo un sitio Web. Para utilizar las reglas de estilo CSS en el Diseador HTML, la propiedad targetSchema del documento HTML se debe establecer en un explorador Web compatible con HTML 4.0 o superior. Los exploradores ms antiguos, compatibles slo con HTML 3.2 o anteriores, ignorarn los estilos CSS. Cuando la propiedad targetSchema est establecida en un explorador Web ms antiguo, el entorno de desarrollo integrado (IDE) oculta las opciones y propiedades de CSS que slo estn disponibles en exploradores ms recientes. Si se establece la propiedad targetSchema en un explorador compatible con HTML 4.0, las reglas de estilo CSS constituyen el mejor mtodo para especificar la apariencia y la posicin deseadas de los elementos HTML.

Cascada
Las reglas de estilo CSS se aplican "en cascada", es decir, las reglas de estilo globales se seguirn 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 pgina Web, por ejemplo, puede modificar desde una pgina concreta el estilo de todo el sitio Web definido en una hoja de estilos CSS externa. De forma similar, un estilo en lnea definido dentro de una etiqueta HTML individual de la pgina puede modificar en una lnea 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 seguirn aplicndose a los elementos HTML incluso despus 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 ms 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 pgina con una fuente grande, en negrita, y centrado y de color rojo. La siguiente tabla muestra como trabajan los estilos: Nivel Global Page InLine Definido en El archivo de hoja de estilo El elemento Head de la pgina Un elemento HTML Aplica en Toda la pgina donde se hace referencia Todos los elementos en la pgina actual Slo 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 extensin .css que slo contiene reglas de estilo. La instruccin <LINK REL=stylesheet Type="text/css" HREF="MiEstilo.css"> aplica a la pgina 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), tamao de 1.5 cm, espaciado normal, color rojo (red), letra Itlica, fuente Verdana, espaciado de letras normal, color de fondo antiquewhite y alineacin 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 botn 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 edicin, 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 diseador, para esto debemos seleccionar la opcin Agregar regla de Estilo del men Estilos, la ventana se muestra de la siguiente manera

Ntese que para esta regla de estilo se ha includo tres elementos (A:link, A:active y A:visited) en una jerarqua definida, al final pulsar clic en Aceptar, despus 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 aplicacin en Visual Basic .Net automticamente 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 pgina. La imagen muestra resaltada la lnea que debemos incluir:

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

Crear estilo para un elemento especfico

Se puede crear un estilo para un elemento especfico, para esto debemos incluir su definicin utilizando el ID del elemento (Nombre) precedido del smbolo #. La siguiente imagen muestra un estilo definido para el elemento con ID lblTitulo

Despus de creado el estilo en la definicin de la etiqueta debemos aadir el atributo CssClass, la definicin de la etiqueta es como sigue: <asp:label id="lblTitulo" runat="server" CssClass="lblTitulo> Y la presentacin de la etiqueta lo muestra la siguiente imagen:

Despus de asignar o cambiar algunos estilos para los elementos presentes para asignar al texto presente basta seleccionarlo y utilizar el botn Formato de Bloque presente en la barra de herramientas de Formato, despus de jugar un poco hice esto bien feo...je,je,je.

Recuerden votar por este artculo, sus votos me animan a seguir publicando, adems 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 artculo... ya s que sabas hacerlo... no te enojes. Espero que les sea til, en las siguientes entregas veremos como:

Crear estilos para listados Cambiar estilos en tiempo de ejecucin 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 sueos y proyectos se cumplan y que el prximo ao sea mucho mejor del que se termina. Feliz ao 2006 y como siempre A SEGUIR DESARROLLANDO

Ing. Fernando Luque Snchez De Trujillo - Per para el mundo