NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Creación de páginas web desde cero (5 Más sobre los estilos)

10 de Noviembre del 2011 por Josep Antoni Bover, 6 visitas, 0 comentarios, 0 votos
Categorías : HTML, CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...
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 :

Archivo css básico
1
2
3
4
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.

Dentro de los estilos CSS podemos añadir comentarios al igual que hacemos dentro del HTML, pero en este caso utilizamos los caracteres "/*" para empezar el comentario y "*/" para terminarlo.

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 :

Archivo HTML enlazado al css anterior
1
2
3
4
5
6
7
8
9
10
11
12
<!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".

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 :

Archivo css básico
1
2
3
4
5
6
.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 :

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 :

Utilizando clases css
1
2
3
4
5
6
<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 :

Selector css :hover
1
2
3
4
5
6
7
.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".

position:absolute position:relative

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
Aunque no son parte de este tutorial tambien os recomiendo echar un vistazo a los selectores disponibles para CSS en el siguiente enlace Selectores CSS.

Podéis seguir con el siguiente tutorial HTML5 : Creación de páginas web desde cero (6 Diseño).