CAPITULO 12
(Introducción a CSS)
| CAPITULO 12 | |
Y este capítulo ya hace el de 12. Demonios, esto empieza a ser muy largo. ¿Acabará algun día este tutorial?
Hoy vamos a hacer una pequeña introducción a las hojas de estilo.
Las hojas de estilo son un sistema práctico y eficiente para controlar la apariencia de las páginas web. Con ellas es posible controlar todo aquello que se refiera a la representación en pantalla, o incluso en otros soportes, como medios impresos, lectores de voz...
Las hojas de estilo están escritas en un lenguaje propio, o sea, independiente al HTML. Por ello aquí nos vamos a ocupar solamente de cómo se insertan en un documento HTML, sin preocuparnos de cómo se escriben. Para aprender a usar la hojas de estilo hará falta un tutorial aparte.
En teoría, existen varios lenguajes en los que se pueden escribir las hojas de estilo, pero en la práctica solo uno está lo suficientemente extendido. Ese lenguaje es el Cascading Style Sheet (Hojas de Estilo en Cascada), más usualmente llamado CSS para ahorrar tiempo. Por lo tanto, en lo que queda de capítulo, vamos a suponer que este es el lenguaje del que hablamos, aunque sería lo mismo para cualquier otro que usemos (si algún día los navegadores soportan otro lenguaje de estilo).
Bueno, esto parece un poco complicado, así que mejor lo vemos sobre la marcha, y verás que no es tan difícil.
Empecemos:
La primera forma de aplicar un estilo a un elemento de tu página Web es por medio del atributo STYLE, que se puede aplicar a casi cualquier etiqueta de HTML.
Por ejemplo, la siguiente línea:
<P STYLE="background-color: #FFFF00;">Hola, amigos, esto solamente es un texto experimental.</P>
Haría que el fondo del párrafo se viera con el color amarillo que le hemos asignado, de este modo:
Hola, amigos, esto solamente es un texto experimental.
La cadena background-color: #FFFF00; que hay entre las comillas es una regla de estilo escrita en CSS.
Se pueden aplicar varias reglas a un mismo elemento. Por ejemplo, la regla de CSS para hacer que un texto aparezca en negrita es font-style: italic;, de modo que, si queremos que un párrafo aparezca en cursiva sobre un fondo de color verde, tenemos que escribir lo siguiente:
<P STYLE="background-color: #00FF00;font-style: italic;">Hola, amigos, esto solamente es otro texto experimental, con la sola idea de demostrar las virtudes de las hojas de estilo en cascada CSS.</P>
Hola, amigos, esto solamente es otro texto experimental, con la sola idea de demostrar las virtudes de las hojas de estilo en cascada CSS.
Aunque hoy día no es necesario, para evitar posibles errores el día que se generalicen varios lenguajes de estilo dustintos, es recomendable poner, dentro de la sección <HEAD></HEAD>, la siguiente directiva:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Esto no es más que una etiqueta de Metainformación (no te asustes, ya veremos más adelante lo que significa eso) que indica el tipo de lenguaje de hojas de estilo que vamos a usar en el documento. Hoy por hoy no es necesaria, porque CSS el el único lenguaje reconocido, pero quizás algún día si sea necesaria.
Supongo que ahora empiezan a parecerte muy interesantes la hojas de estilo, y que ya estás empezando a imaginar la cantidad de posibilidades que tienen. Pues esto solo es el principio, aún queda lo mejor.
Lo que hemos visto hasta ahora se distingue muy poco, en la práctica, del uso de atributos HTML tradicionales. Incluso puede parecer un problema: ¿No teníamos suficiente con aprender todos esos tags y atributos, y ahora tenemos que aprender unas nuevas reglas de estilo? ¿qué ventaja tiene esto?
Veamos qué te parece esto:
¿Que te parecería poder cambiar TODO el formato de una página con solo modificar unas pocas líneas? No estaría mal ¿Verdad? Piensa en todo el trabajo que te podrías ahorrar. Lástima que con el HTML no se pueda. Es una pena que tengas que repasar todo el código solo porque has pensado que el color rojo queda mejor que el verde en esas palabras que querías resaltar. Si las hojas de estilo pudieran facilitarte esa tarea...
Pueden.
Para ello tienes la siguiente construcción:
<STYLE TYPE="text/css">
<!--
(reglas de estilo)
-->
</STYLE>
Que debe ir dentro de la sección HEAD de la página. (Entre las etiquetas <HEAD> y </HEAD>)
Las líneas de comentario ( <!-- y -->) son para evitar que los navegadores más antíguos (que no reconocen CSS) muestren en pantalla las reglas como si fueran texto (lo cual quedaría muy feo y poco elegante, claro). Y, donde pone "reglas de estilo", puedes poner todas las que quieras, siguiendo el formato del tipo de hojas de estilo que hayas especificado en TYPE (en este caso, CSS). Esta forma es, esquematicamente, la siguiente:
ETIQUETA { PROPIEDAD: VALOR;}
Como, por ejemplo, sería:
I {text-decoration: underline;}
Que haría que TODOS los Textos que apareciesen entre <I> y </I> se mostrasen subrayados.
La mejor forma de ver esto es mediante un ejemplo:
<HTML>
<HEAD>
<TITLE>Hoja con CSS</TITLE>
<STYLE TYPE="text/css">
<!--
P {background-color: "#AAAAAA";}
B {text-decoration: underline;}
-->
</STYLE>
</HEAD>
<BODY>
<H1>EJEMPLO</H1>
<P>Ejemplo de una página con una hoja de estilo <B>CSS</B> bastante simple. Con la sola idea de mostrar con un ejemplo elemental algunas de las muchas capacidades de las Hojas de Estilo En Cascada, y nada más.
<P><B>Con textos en NEGRITA</B>
</BODY>
</HTML>
Pulsa aquí para ver la primera versión del ejemplo anterior.
Pero ahora creo que no me gusta como ha quedado el ejemplo anterior, así que voy a hacer unos cambios, para lo cuál solo tengo que modificar las reglas de estilo:
<HTML>
<HEAD>
<TITLE>Hoja con CSS</TITLE>
<STYLE TYPE="text/css">
<!--
H1 {text-align: center;}
P {background-color: "#AA00AA";}
B {color: "#00FF00";}
-->
</STYLE>
</HEAD>
<BODY>
<H1>EJEMPLO</H1>
<P>Ejemplo de una página con una hoja de estilo <B>CSS</B> bastante simple. Con la sola idea de mostrar con un ejemplo elemental algunas de las muchas capacidades de las Hojas de Estilo En Cascada, y nada más.
<P><B>Con textos en NEGRITA</B>
</BODY>
</HTML>
Pulsa aquí para ver la segunda versión del ejemplo anterior.
Como puedes ver, hemos modificado todo el aspecto de la página con solo cambiar unas líneas.
Eso es muy intresante, pero, ¿Y si, po ejemplo, no quiero cambiar la apariencia de todas las negritas, sino solo de algunas?
Puede hacerse, pero primero hace falta conocer un par de nuevos atributos. Estos atributos se pueden aplicar a casi cualquier etiqueta de HTML, y sirven, nada más y nada menos, para ponerles nombre. El primero de ellos es CLASS, y se usa del siguiente modo:
<ETIQUETA CLASS="nombre">
Donde ETIQUETA puede ser cualquier Tag al que le queramos poner un nombre, y nombre es el nombre que le quieras poner.
Por ejemplo, podríamos poner esto para darle el nombre "importante" a una etiqueta de negrita:
<B CLASS="importante">
Muy bién, pero ¿Para qué demonios quiero ponerle un nombre a una etiqueta?
Pues bién, puedes ponerle el mismo nombre a varias etiquetas del mismo tipo, para distinguirlas de las normales, y aplicar una misma regla a todas ellas del siguiente modo:
ETIQUETA.NOMBRE { PROPIEDAD: VALOR;}
Que es igual que hemos visto antes, pero poniendo el nombre que le hemos dado a las etiquetas que queramos, detras del nombre del tag separado por un punto. Por ejemplo:
B.importante {color: #FFFFFF;}
Esto hará que todos las negritas que tengan "importante" en su CLASS se muestren en color rojo, sin afectar en nada al resto.
<HTML>
<HEAD>
<TITLE>Hoja con CSS</TITLE>
<STYLE TYPE="text/css">
<!--
H1 {text-align: center;}
P {background-color: "#AAffAA";}
B.importante {color: "#ff5500";}
-->
</STYLE>
</HEAD>
<BODY>
<H1>EJEMPLO</H1>
<P>Ejemplo de una página con una hoja de estilo <B>CSS</B> bastante simple. Con la sola idea de mostrar con un ejemplo elemental algunas de las muchas capacidades de las Hojas de Estilo En Cascada, y nada más.
<P><B>Con textos en NEGRITA</B>, algunos con <B CLASS="importante"> el atributo CLASS para marcarlos como "importante"</B>
<BR>Recuerda no olvidar las cosas <B CLASS="importante">IMPORTANTES</B></P>
</BODY>
</HTML>
Ya sabes: Pulsa aquí para ver el ejemplo.
Como puedes ver, algo cómodo facil y eficiente.
Por otro lado tenemos otro modificador muy parecido al anterior, ID, que se usa de forma muy parecida, con la salvedad de que este se usa para hacer referencia a UN SOLO ELEMENTO EN TADA LA PÁGINA. Es decir, no puede haber dos elementos con un mismo ID en la misma página.
Como te podrás imaginar, su uso es mucho más restringido que el de CLASS, y se usa de esta forma:
<ETIQUETA ID=nombre>
Donde ETIQUETA es el nombre del tag que estás usando (evidentemente) y nombre es el nombre exclusivo que le quieres dar a esta. Un ejemplo de un párrafo con el nombre "principal" sería:
<P ID="principal">
Como vés, no tiene ninguna complicación.
Cuando, en la sentencia STYLE, le queramos indicar una serie de regla a una de estas etiquetas, lo haremos del siguiente modo:
#nombre {variable: valor;}
Es decir, el signo "almohadilla" (#), seguido del nombre que le hayas puesto, y las reglas que apliques. Para poner el ejemplo anterior del párrafo "principal" subrayado, escrobiríamos lo siguiente:
#principal {text-decoration: underline;}
Así de simple.
¡Vaya! ¡Esto de las hojas de estilo es estupendo! ¡Con solo cambiar unas líneas puedes modificar toda la página! ¿Se puede pedir más?
Pues sí: ¿Que te parecería poder cambiar, con solo unos pequeños retoques, TODA tu Web?
Para eso tenemos las Hojas de Estilo Externas. Esto son unos pequeños archivos de texto que van APARTE de los documentos HTML, en los que se declaran las reglas de estilo. De esta forma pueden aplicarse las mismas reglas a muchas hojas distintas.
Las hojas de estilo externas se situan en un documento HTML en la sección HEAD de la página, con la siguiente etiquteta:
<LINK HREF="URL" REL="stylesheet" TYPE="text/css">
Donde lo único que tienes que cambiar es URL, que es la dirección donde está guardada la hoja de estilo y su nombre.
La hoja de estilo puede llamarse como más te guste, pero lo tradicional es ponerle la extensión .css. De este modo, si queremos usar en una página una hoja de estilo llamada "mihoja.css" que se encuentra en el subdirectorio "estilo", deberíamos hacerlo del siguiente modo:
<LINK HREF="estilo/mihoja.css" REL="stylesheet" TYPE="text/css">
Y, para terminar, aquí tienes dos nuevas etiquetas que pueden serte muy útiles junto con las hojas de estilo:
La rpimera de ellas es <DIV>...</DIV>, que es una etiqueta de formato de bloque (Igual que, por ejemplo <P>...</P> o <CENTER>...</CENTER>), pero que no modifica en nada a su contenido (lo que hace que puedas usarla para separar bloques y asignarles estilos como hemos visto más arriba).
La segunda es <SPAN>...</SPAN>, que se comporta como una etiqueta de formato de línea (Como, por ejemplo, <B>...</B> o <I>...</I>), y que tampoco modifica en nada su contenido, muy útil para dar formato con CSS a palabras o líneas concretas.
Y con esto ya casi hemos terminado este capítulo del maravilloso tutorial de "Edición Extremadamente Simple de HTML. Sé que te ha sabido a poco. Las hojas de estilo son un tema complejo y con posibilidades casi ilimitadas. Pero, precisamente por ello, requieren un tutorial aparte solo para ellas.
Espero que este capítulo te haya resultado muy interesante, y que haya servido para que te imagines la potencia de CSS. Nos vemos en el próximo capítulo de este maravilloso tutorial.
