Creación de páginas web desde cero (5 Más sobre los estilos)
En el tutorial anterior se vio muy por encima los estilos CSS y cómo utilizarlos con el atributo "style" sobre cualquier etiqueta.
Hoy crearemos nuestro primer documento CSS, y dejaremos el atributo "style" de lado para empezar a probar los atributos "id" y "class" ya que con ellos podemos utilizar estilos definidos en un archivo CSS a parte.
Pero antes de nada necesitamos aprender un poco sobre selectores CSS, que son y cómo utilizarlos correctamente en nuestras hojas de estilos.
Para empezar vamos a crear un archivo CSS con nuestro editor de texto al que llamaremos "Tutorial_HTML5_5_Ejemplo.css" y al que introduciremos el siguiente código :
body {background-color:green; /* Color de fondo verde */color:white; /* Color del texto blanco */}
Que es lo que acabamos de hacer? pues es muy simple, acabamos de crear un archivo css el cual establece que la etiqueta "body" tendrá el color de fondo de color verde, y el texto de color blanco por defecto.
Ahora vamos a enlazar este archivo CSS a nuestro documento HTML, por ello vamos a crear un documento HTML nuevo para este ejemplo que se llamara "Tutorial_HTML5_5_Ejemplo.html"
En el introduciremos las etiquetas típicas que necesitamos para cualquier documento HTML : "!DOCTYPE HTML", "html", "head", "body". Además vamos a introducir una nueva etiqueta dentro del head que indicara al documento que debe buscar sus estilos CSS en un archivo a parte.
Fijaros en el siguiente ejemplo :
<!DOCTYPE HTML> <!-- Documento HTML 5 --><html> <!-- Inicio del documento HTML --><head> <!-- Inicio del head --><title>Ejemplo del tutorial 5</title><link href='Tutorial_HTML5_5_Ejemplo.css' rel='stylesheet' type='text/css' /></head> <!-- Final del head --><body> <!-- Inicio del cuerpo para el documento HTML --><header> <!-- Inicio de la cabecera con el titulo --><h1>Tutorial 5 : Creación de páginas web desde cero (5 Mas sobre estilos)</h1></header> <!-- Inicio de la cabecera con el titulo --></body> <!-- Final del cuerpo para el documento HTML --></html> <!-- Final del documento HTML -->
En la línea 5 podéis observar que se ha utilizado la etiqueta "link" dentro de la etiqueta "head". Además se ha utilizado especificando los siguientes atributos : "href", "rel", y "type".
-
El atributo "href" indica la localización del archivo que queremos enlazar con la etiqueta "link".
-
El atributo "rel" viene del ingles relationship, y indica la relación que tiene el archivo especificado con el documento HTML, de momento solo nos interesa relacionarlo como "stylesheet" (hoja de estilos).
-
El atributo "type" indica que tipo de archivo le estamos enlazando, en este caso el tipo es "text/css" un archivo de texto plano que contiene estilos css.
Ahora si probáis el documento HTML podréis ver que la etiqueta "body" ha adquirido un fondo de color verde, y que muestra el texto de color blanco, sin necesidad de especificarle el atributo style.
Además pensad que si tenemos diez documentos html podemos aprovechar la misma hoja de estilos css para poner todas las etiquetas "body" con las mismas propiedades. Esto a la larga es mucho más cómodo y profesional que ir escribiendo la etiqueta style para cada etiqueta.
Al igual que hemos declarado "body" en la hoja de estilos podemos hacer lo mismo para cualquier etiqueta básica, de todas formas el css no es solo eso, también podemos crear "clases" o "ids".
El concepto de las clases y las ids es un poco complicado de asimilar así que mejor empezaremos con un ejemplo de código css mostrando cómo debemos crear una clase :
.TextoSombreado {text-shadow:1px 1px 1px rgb(255, 0, 0);}.Texto18px {font-size:18px;}
En este ejemplo podéis ver que he creado dos estilos nuevos ".TextoSombreado" y ".Texto18px" fijaros que los dos estilos empiezan con un punto, esto es para especificar que se tratan de clases. Además he utilizado dos propiedades css que aun no habíais visto, que son "text-shadow" y "font-size", primero veamos para que sirve cada una de las propiedades :
-
La propiedad "text-shadow" como indica su nombre añade una sombra al texto, en este caso especificamos "1px 1px 1px rgb(255,0,0);" que traducido para que nos entendamos seria : X = 1 pixel, Y = 1 pixel, Difusión = 1 pixel, Color = rojo. O en otras palabras el texto tendrá una sombra roja que se verá en la parte inferior izquierda del texto.
En Internet Explorer la propiedad "text-shadow" no funciona (Así vais viendo porque tanto odio de los desarrolladores hacia Internet Explorer) -
La propiedad "font-size" indica que se utilizara una fuente de 18 pixeles (que es algo más grande de lo normal).
Bien pero como hay que utilizar estas clases?, pues es bastante sencillo, para ello utilizaremos el atributo "class" de las etiquetas que queramos modificar, por ejemplo :
<p><span>Texto normal</span><span class='TextoSombreado'>Texto sombreado</span><span class='Texto18px'>Texto de 18 pixeles</span><span class='TextoSombreado Texto18px'>Texto sombreado de 18 pixeles</span></p>
Texto normal Texto sombreado Texto de 18 pixeles Texto sombreado de 18 pixeles
Fijaros en que a la hora de especificar el nombre de la clase dentro del atributo class no incluimos el punto. También observad que en la última línea del ejemplo se utilizan dos clases en la misma etiqueta por lo que esa etiqueta adquiere las propiedades de las dos clases.
Esto es una gran ventaja ya que podemos crear clases con estilos simples e ir mezclándolas a medida que sea necesario.
Pero que hay acerca de las ids? bueno es un concepto algo más complicado de explicar ya que se suelen utilizar para identificar una etiqueta en concreto y utilizar código JavaScript en ellas. Por el momento solo deberíais saber que se declaran igual que las clases pero con la diferencia de que en vez de utilizar un punto "." al principio se utiliza una parrilla "#".
Y a la hora de utilizarlas dentro de una etiqueta en vez de utilizar el atributo "class" hay que utilizar el atributo "id". De todas formas por el momento quedaros con las clases y dejad las ids para más adelante.
Por el momento solo habéis arañado la superficie de lo que son los estilos CSS, así que vamos a ver un poco más. Ahora veremos un selector que personalmente utilizo mucho ":hover".
El selector ":hover" debe especificarse junto a un nombre de etiqueta o un nombre de clase o un nombre de id, y lo que hace es asignar sus atributos cuando estamos encima de la etiqueta/clase/id con el mouse. Para que quede más claro veamos un ejemplo :
.MovimientoDerecha {position:relative;color:green;}.MovimientoDerecha:hover {left:10px;}
Para este ejemplo hemos declarado una nueva clase llamada ".MovimientoDerecha" en la que utilizamos dos nuevas propiedades, que son : "position" y "left".
-
La propiedad "position" es algo complicada de explicar, lo primero que debeis saber es que hay varias formas de trabajar con posiciones : usando la ventana del navegador (fixed), usando la posicion del objeto padre no estatico (absolute), y usando la posicion por defecto (static/relative).
Por defecto todas las etiquetas tienen la propiedad position con el valor "static" asignado, esto significa que no utilizan ningún tipo de coordenadas que podamos modificar y que se irán situando en la posición que les toque.
Si asignamos la propiedad "position" a "fixed" la etiqueta se colocara SIEMPRE en la misma posición de la ventana sin importar el scroll. Para entender mejor el valor fixed, vamos a suponer que tenemos un documento que hace 2000 pixeles de altura, pero la ventana del navegador solo puede mostrar 700 pixeles porque la pantalla no da para mas, por lo tanto si queremos acceder a los datos de abajo del todo tenemos que recurrir al scroll. Pues bien en este caso si colocamos un objeto con la position:fixed en las coordenadas left y top 0, siempre veremos ese objeto en la esquina superior izquierda de nuestro navegador, por mucho que utilizemos el scroll.
Si asignamos la propiedad "position" a "absolute" la etiqueta se colocara al principio de la etiqueta inmediatamente superior (que no sea static), y nos permitirá modificar su posición. Estas coordenadas serán relativas a la primera etiqueta que no sea "static" inmediatamente superior.
Si asignamos la propiedad "position" a "relative" la etiqueta se colocara igual que siempre pero con la diferencia de que podremos modificar su posición. Estas coordenadas serán relativas la posición que debería tomar el elemento normnalmente.
-
La propiedad "left" nos permite modificar la posición del objeto por donde empieza por la izquierda.
-
La propiedad "right" nos permite modificar la posición del objeto por donde termina por la derecha.
-
La propiedad "top" nos permite modificar la posición del objeto por donde empieza por arriba.
-
La propiedad "bottom" nos permite modificar la posición del objeto por donde termina por abajo.
Las propiedades "left", "right", "top", y "bottom" solo funcionaran si asignamos la propiedad "position" a cualquier valor válido que no sea "static".
Además de explicar el funcionamiento de la propiedad "left" he añadido una explicación para las propiedades "right", "top" y "bottom". Es posible que no haya quedado muy claro, sobre todo para aquellos que no habéis tocado nunca un lenguaje de programación, así que echad un vistazo a la imagen de la derecha a ver si os aclara mejor el tema.
Imaginaros que la imagen de la derecha es un documento html completo, y que en un momento dado abrimos una etiqueta <p> (que es la porción blanca) y dentro le añadimos una etiqueta con la propiedad "position:absolute" (azul), y una etiqueta con la propiedad "position:relative" (rojo).
Si quisiéramos modificar la posición "left" de la etiqueta azul (absolute) deberíamos tener en cuenta el margen que va desde la izquierda del documento a la etiqueta "p", y la posición dentro de la etiqueta "p". En cambio si quisiéramos modificar la posición "left" de la etiqueta roja (relative) solo deberíamos tener en cuenta la posición dentro de la etiqueta "p".
Espero que de esta forma haya quedado más claro. Por último podéis observar el ejemplo del selector ":hover" que hemos utilizado en la clase "MovimientoDerecha" en el siguiente texto en verde :
Pasa el mouse por este texto.
Cuando el mouse esta encima la propiedad "left" pasa a ser "10px", y cuando el mouse ya no está encima la propiedad left vuelve a su valor por defecto.
Y con esto terminamos la quinta parte del tutorial, si lo deseáis podéis ver el ejemplo online o descargar el ejemplo para poder editarlo en vuestro ordenador.
| Ver Ejemplo | Descargar Ejemplo |
Podéis seguir con el siguiente tutorial HTML5 : Creación de páginas web desde cero (6 Diseño).