Ejemplos de uso de CSS y como planear su uso en nuestros sitios
En primer lugar, re-definiremos las etiquetas
html necesarias. Esto consiste en dar ciertos atributos a determinada etiqueta,
digamos, <h2>, que
se mantendrán siempre que la utilicemos. Podemos definir, por ejemplo, que todo
el texto contenido en las etiquetas <h2>
sea de color rojo, en negrita, subrayado, con una fuente arial,
helvetica, sans-serif, de un tamaño de 22 píxeles, y centrado.
Cada vez que incluyamos código como:
html necesarias. Esto consiste en dar ciertos atributos a determinada etiqueta,
digamos, <h2>, que
se mantendrán siempre que la utilicemos. Podemos definir, por ejemplo, que todo
el texto contenido en las etiquetas <h2>
sea de color rojo, en negrita, subrayado, con una fuente arial,
helvetica, sans-serif, de un tamaño de 22 píxeles, y centrado.
Cada vez que incluyamos código como:
<h2>Título aquí</h2>
éste se mostrará de esa forma:
Título aquí
La buena noticia es que no sólo podemos
definir etiquetas de este tipo, sino aquéllas exclusivamente estructurales,
como <body>, que ofrece
la ventaja de que no tendremos que usar atributos propietarios para establecer
los márgenes del documento, por ejemplo. No habrá que recurrir a la conocida
solución “cross-browser” de incluir
los atributos marginwidth y marginheight, propietarios de
Netscape, o leftmargin, rightmargin, bottommargin
o topmargin, propietarios de Internet Explorer.
Esto arrojará los respectivos errores de “etiquetas no válidas” al
utilizar una herramienta de validación del documento, como la de la W3C.
Sencillamente establecemos una regla margin: 0px;
para <body>.
definir etiquetas de este tipo, sino aquéllas exclusivamente estructurales,
como <body>, que ofrece
la ventaja de que no tendremos que usar atributos propietarios para establecer
los márgenes del documento, por ejemplo. No habrá que recurrir a la conocida
solución “cross-browser” de incluir
los atributos marginwidth y marginheight, propietarios de
Netscape, o leftmargin, rightmargin, bottommargin
o topmargin, propietarios de Internet Explorer.
Esto arrojará los respectivos errores de “etiquetas no válidas” al
utilizar una herramienta de validación del documento, como la de la W3C.
Sencillamente establecemos una regla margin: 0px;
para <body>.
Además, no tendremos que escribir una regla de tamaño
de fuente para todos los estilos, siempre y cuando la escribamos una sola vez
para <body>: los demás elementos,
puesto que están subordinados a <body>, lo heredarán. Así,
si hay que especificar un tamaño diferente al de <body>, éste se hará individualmente para cada caso.
de fuente para todos los estilos, siempre y cuando la escribamos una sola vez
para <body>: los demás elementos,
puesto que están subordinados a <body>, lo heredarán. Así,
si hay que especificar un tamaño diferente al de <body>, éste se hará individualmente para cada caso.
He aquí las redefiniciones (notar que no
hace falta incluir una etiqueta de apertura de la hoja de estilo como <style
type:”text/css”>, ni tampoco la etiqueta de comentario
que usualmente le sigue a ésta, como <!–; de hecho, sería un error):
hace falta incluir una etiqueta de apertura de la hoja de estilo como <style
type:”text/css”>, ni tampoco la etiqueta de comentario
que usualmente le sigue a ésta, como <!–; de hecho, sería un error):
body {
font-family: arial, helvetica, sans-serif; font-size: 12px; margin: 0px;
}
a:link {
color: #0000cc; font-weight: bold; text-decoration: none; }
a:visited {
color: #990099; font-weight: bold; text-decoration: none; }
a:active {
color: #ff9900; font-weight: bold; text-decoration: none; }
a:hover {
color: #3333ff; text-decoration: underline; }
u {
color: #ff0000; text-decoration: none;
}
i {
font-size: 11px; text-decoration: oblique;
}
em {
font-weight: bold; color: #666666; text-decoration: none;
}Podríamos dividir estos estilos en tres
grupos. En primer lugar, el ya notado body. En segundo, la serie de a, que apuntan
a los links, los anchors. Estos estilos se llaman “seudoclases” (pseudo-classes). Especifican los colores
de los links, es decir, todas las etiquetas <a href=” “>,
con a:link; los colores de los
links visitados, con a:visited;
los de los activos (al momento de hacerles click) con a:active;
y a:hover es un pequeño truco
que cambia el color del link cuando posamos el mouse sobre él, al modo de las
“imágenes de sustitución” con Javascript. Para todos, notar la regla text-decoration.
Los navegadores suelen tener la opción predeterminada de mostrar los links siempre
subrayados (aunque se lo podemos cambiar). Al especificar text-decoration:
none; obviamos esta opción, y los links se mostrarán sin subrayado,
pero, al posar el mouse sobre ellos, la regla
text-decoration: underline; de a:hover volverá a subrayarlos, dejándolos como antes si sacamos el mouse de ellos. Es
un efecto que se usa mucho en la Web, y lo recomiendo porque queda muy bien.
grupos. En primer lugar, el ya notado body. En segundo, la serie de a, que apuntan
a los links, los anchors. Estos estilos se llaman “seudoclases” (pseudo-classes). Especifican los colores
de los links, es decir, todas las etiquetas <a href=” “>,
con a:link; los colores de los
links visitados, con a:visited;
los de los activos (al momento de hacerles click) con a:active;
y a:hover es un pequeño truco
que cambia el color del link cuando posamos el mouse sobre él, al modo de las
“imágenes de sustitución” con Javascript. Para todos, notar la regla text-decoration.
Los navegadores suelen tener la opción predeterminada de mostrar los links siempre
subrayados (aunque se lo podemos cambiar). Al especificar text-decoration:
none; obviamos esta opción, y los links se mostrarán sin subrayado,
pero, al posar el mouse sobre ellos, la regla
text-decoration: underline; de a:hover volverá a subrayarlos, dejándolos como antes si sacamos el mouse de ellos. Es
un efecto que se usa mucho en la Web, y lo recomiendo porque queda muy bien.
El tercer grupo son las redefiniciones de
las etiquetas HTML de énfasis
de texto, u, i, y em. En este caso, podemos utilizarlas con fines propios.
Por ejemplo, en este caso redefino u para que sirva como énfasis de color, como
en este documento se usa para resaltar los nombres de navegadores y palabras
en inglés. Notar que otra vez text-decoration
se usa para evitar el subrayado predeterminado que por ley le corresponde a
la etiqueta html <u>. A
i la utilizo para una tipografía del tipo “nota al pie”. Notar
que incluye un tamaño menor al general. Finalmente, em la utilizo para una tipografía especial de tono gris y en negrita. La incluyo
como ejemplo del uso que le podemos dar a este tipo de redefiniciones: éstas
son muy útiles para dar variedad a la tipografía sin necesidad de usar elementos
de bloque. u puede ser usada en
cualquier contexto, como elemento “hijo” de otro que tenga cualesquiera tamaño
de fuente: u sólo se aplicará
a aquél fragmento deseado, cambiándole sólo el color y heredando tamaño y otros
atributos del elemento de bloque al que pertenezca. i
y em, al contrario, están pensados
para elementos de bloque (como en este documento pasa con, por ejemplo, la nota
aclaratoria bajo el título principal: ver el principio de este documento), aunque
pueden ser usados de esa forma, o no.
las etiquetas HTML de énfasis
de texto, u, i, y em. En este caso, podemos utilizarlas con fines propios.
Por ejemplo, en este caso redefino u para que sirva como énfasis de color, como
en este documento se usa para resaltar los nombres de navegadores y palabras
en inglés. Notar que otra vez text-decoration
se usa para evitar el subrayado predeterminado que por ley le corresponde a
la etiqueta html <u>. A
i la utilizo para una tipografía del tipo “nota al pie”. Notar
que incluye un tamaño menor al general. Finalmente, em la utilizo para una tipografía especial de tono gris y en negrita. La incluyo
como ejemplo del uso que le podemos dar a este tipo de redefiniciones: éstas
son muy útiles para dar variedad a la tipografía sin necesidad de usar elementos
de bloque. u puede ser usada en
cualquier contexto, como elemento “hijo” de otro que tenga cualesquiera tamaño
de fuente: u sólo se aplicará
a aquél fragmento deseado, cambiándole sólo el color y heredando tamaño y otros
atributos del elemento de bloque al que pertenezca. i
y em, al contrario, están pensados
para elementos de bloque (como en este documento pasa con, por ejemplo, la nota
aclaratoria bajo el título principal: ver el principio de este documento), aunque
pueden ser usados de esa forma, o no.
Ahora, las clases:
.comCuerpoIzq {
margin: 3px; text-align: left; }
.comCuerpoCentr {
margin: 3px; text-align: center; }
.comCuerpoDer {
margin: 3px; text-align: right; } .titulo {
font-size: 13px; font-weight: bold;
}
.subTitulo {
color: #666666; font-weight: bold;
}
.epigrafe {
font-size: 10px;
} .navPie {
font-size: 10px; color: #666666; font-weight: bold;
}
.navTop {
font-size: 10px; color: #ffffff; font-weight: bold;
}
.barrNav {
font-size: 11px; text-align: left; margin: 0px;
} .bloqueAzulOscuro {
font-size: 17px;
font-weight: bold;
color: #ffffff;
background-color: #0066ff;
text-align: center;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
border-color: #ff3300;
border-style: solid;
border-width: 1px;
}
.bloqueAzulClaro {
font-size: 12px;
text-align: right;
background-color: #99ccff;
margin-top: 5px;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 20px;
padding: 10px;
}Las clases podemos dividirlas en dos grupos. Tipográficas,
todas excepto las dos últimas, que son, más bien, gráficas. Para las tipográficas,
invito al lector a que deduzca, de acuerdo al nombre del selector y a las reglas
que contienen, el propósito y el por qué (ver, por ejemplo, por qué algunas
contienen tamaños de fuente y otras no); esto fue explicado más arriba.
todas excepto las dos últimas, que son, más bien, gráficas. Para las tipográficas,
invito al lector a que deduzca, de acuerdo al nombre del selector y a las reglas
que contienen, el propósito y el por qué (ver, por ejemplo, por qué algunas
contienen tamaños de fuente y otras no); esto fue explicado más arriba.
Y, finalmente, las gráficas. Garantizo que estos estilos
son correctamente visualizados en Internet Explorer 4
en adelante, y Netscape 6. Las he escrito con saltos
de línea entre cada regla para facilitar su examen, dado que estas reglas no
las hemos visto aún.
son correctamente visualizados en Internet Explorer 4
en adelante, y Netscape 6. Las he escrito con saltos
de línea entre cada regla para facilitar su examen, dado que estas reglas no
las hemos visto aún.
Estas dos clases han sido pensadas para
aplicar a elementos que soporten características gráficas, como por ejemplo, <div> (no confundir con
<span>;
sus comportamientos gráficos son muy diferentes). El resultado será a algo similar
que especificar colores de fondo y espaciados a las celdas de una tabla, sólo
que esta solución es más flexible y maleable. En una tabla no tendríamos tanto
control sobre los márgenes, no podríamos variar la alineación de texto sin grandes
rodeos, y no podríamos usar bordes. Aún si lo lográramos, lo haríamos a costa
de hacer el código muy pesado, por medio de mucho más trabajo poco gratificante.
aplicar a elementos que soporten características gráficas, como por ejemplo, <div> (no confundir con
<span>;
sus comportamientos gráficos son muy diferentes). El resultado será a algo similar
que especificar colores de fondo y espaciados a las celdas de una tabla, sólo
que esta solución es más flexible y maleable. En una tabla no tendríamos tanto
control sobre los márgenes, no podríamos variar la alineación de texto sin grandes
rodeos, y no podríamos usar bordes. Aún si lo lográramos, lo haríamos a costa
de hacer el código muy pesado, por medio de mucho más trabajo poco gratificante.
Éste sería el resultado con los dos estilos CSS gráficos bloqueAzulOscuro
y bloqueAzulClaro, y la mágica etiqueta <div>
(personalmente, mi preferida) :
y bloqueAzulClaro, y la mágica etiqueta <div>
(personalmente, mi preferida) :
| Encabezado aquí |
| CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el Consortium (W3C) con el fin de separar la estructura de la presentación. A pesar de que la recomendación oficial del grupo de trabajo de la W3C ya había alcanzado la estabilidad requerida para que fuera soportada por los principales navegadores comerciales, como Netscape e Internet Explorer, tan tempranamente como en el año 1998, la situación de entonces, comúnmente conocida como la “guerra de los navegadores”, hacía que los intereses comerciales de las dos compañías en lucha por el mercado de usuarios de Internet se interpusieran en el camino de las CSS. |
Sólo con dos etiquetas <div>,
logramos lo mismo que si hubiésemos tenido que utilizar una tabla entera (con
al menos diez veces más de código), y si hubiésemos tenido que lograr esa
exactitud en los márgenes (que, de hecho, no hubiésemos podido), hubiésemos
tenido que usar o bien cellpadding o cellspacing, atributos no recomendables
(por eso siempre se especifican a “0″) porque no pueden ser usados en el contexto
de un “layout” más complejo. Habría que haber recurrido a utilizar celdas
vacías como márgenes, que es la solución más usual, con lo que el código se
hubiese incrementado aún muchísimo más.
logramos lo mismo que si hubiésemos tenido que utilizar una tabla entera (con
al menos diez veces más de código), y si hubiésemos tenido que lograr esa
exactitud en los márgenes (que, de hecho, no hubiésemos podido), hubiésemos
tenido que usar o bien cellpadding o cellspacing, atributos no recomendables
(por eso siempre se especifican a “0″) porque no pueden ser usados en el contexto
de un “layout” más complejo. Habría que haber recurrido a utilizar celdas
vacías como márgenes, que es la solución más usual, con lo que el código se
hubiese incrementado aún muchísimo más.
Espero que ésta, aunque algo extensa, haya
sido una buena introducción al mundo, por cierto mucho más rico de lo que aquí pudimos ver, de las CSS. Recomiendo
a quienes quieran profundizar más sobre el tema, visiten este sitio sobre las CSS:http://www.sidar.org/recur/desdi/mcss/index.php.
Allí encontrarán un manual sobre las CSS
que nos introduce en el mundo de las especificaciones oficiales de la W3C,
además de una traducción al español de éstas, y un ejemplo de las enormes posiblidades
de las CSS al ser combinadas con
lenguajes de programación: el elegir entre varias hojas de estilo para cambiar
la presentación de un sitio dinámicamente.
sido una buena introducción al mundo, por cierto mucho más rico de lo que aquí pudimos ver, de las CSS. Recomiendo
a quienes quieran profundizar más sobre el tema, visiten este sitio sobre las CSS:http://www.sidar.org/recur/desdi/mcss/index.php.
Allí encontrarán un manual sobre las CSS
que nos introduce en el mundo de las especificaciones oficiales de la W3C,
además de una traducción al español de éstas, y un ejemplo de las enormes posiblidades
de las CSS al ser combinadas con
lenguajes de programación: el elegir entre varias hojas de estilo para cambiar
la presentación de un sitio dinámicamente.
No hay comentarios:
Publicar un comentario