Unidad 3. Aspecto de la página. Estilos básicos (II)


3.1. Estilos

La forma en que se ven todos los elementos de nuestra página web depende del estilo.

El estilo se compone de distintas propiedades y sus valores correspondientes. Las propiedades pueden ser el color de la fuente, el tamaño, la alineación, los márgenes, etc... Los valores dependen de cada propiedad, por ejemplo, a la propiedad color le podemos asignar valores como red (rojo), blue (azul), ... y a la propiedad tamaño fuente le podemos asignar un valor en porcentaje 100%, 120%, ... o en pixels 12px, 15px, ....

El formato a seguir para definir una propiedad es: propiedad: valor; o propiedad: valor1 valor2 valor3; si puede tener varios valores.

Por ejemplo, si queremos que el texto sea de color rojo y un tamaño de fuente de 120%, escribiriamos el siguiente estilo:

color:red; font-size:120%

y obtendríamos el siguiente resultado:

Texto rojo a 120%

¿Dónde escribimos el estilo? Hay varias formas de hacerlo, como vamos a ir viendo a lo largo del curso, pero lo más recomendable es agrupar todas las declaraciones de estilos en un solo lugar, definiendo un bloque dentro de la etiqueta Head que contega la definición de estilos. Para ello, tenemos que incluir en la etiqueta <style type="text/css"> ... </style> y definir dentro los estilos correspondientes a cada elemento de nuestra página, como puedes ver al principio de esta página.

Si queremos que un estilo afecte a todos los elementos de la página, debemos definir un estilo para la etiqueta body. En esta etiqueta se suele definir el color de fondo y los valores genéricos de color y tamaño del tipo de letra. En nuestro ejemplo hemos definido el estilo del body así:

body {font-family: Verdana,Arial,sans-serif;
font-size: 15px;
color: #735846;
text-align: justify;
background-color: #3d2e2a;}

Que quiere decir que, el tipo de letra o fuente, será Verdana, ( o Arial si no existe Verdana, o sans-serif si no existen las anteriores); el tamaño será 15 pixels, el color será el definido por el valor #735846 (en este tema básico sobre colores Básico puedes ver qué quiere decir esto), la alienación del texto será justificada y el color de fondo de la página será el #3d2e2a.

A continuación vamos a definir el estilo de la etiqueta H1, de la siguiente forma:

h1{ margin-left: 80px;
margin-top: 20px;
font-size: 180%;
color: #d38451;}

Que quiere decir que todas las cabeceras H1 tendrán un margen izquierdo de 80 pixels (si no se pone la unidad, se toman pixels), un margen superior de 20 pixels, un tamaño de letra de 180% y el color #d38451 , como puedes comprobar en la imagen del principio de este punto, la cabecera "Bienvenido a Floramics" queda así:

Es decir, el color y tamaño de este estilo han prevalecido sobre los ya definidos en la etiqueta Body.

Siguiendo con nuestro ejemplo, a continuación definimos un mismo estilo para las cabeceras H2 y H3, pero como queremos que la cabecera H3 tenga un color diferente, volvemos a definir otro estilo a continuación para H3 con el valor del color deseado. Es decir, el valor válido es el último valor definido, por esto los estilos se llaman CSS (Cascade Style Sheet. Hojas de estilo en cascada). Más adelante hablaremos más sobre el orden de aplicación de los estilos.

A continuación definimos el estilo de los párrafos (etiqueta p) con un line-height (interlineado) de 1.5em (en este tema básico sobre unidades de medida Básico puedes ver qué quiere decir em) , una identación de 15 pixels y un margen de 35 pixels.

Con lo definido hasta ahora el texto que escribamos en los párrafos tomará las propiedades definidas en los estilos de la etiqueta Body y de la etiqueta p, pero ¿Cómo podemos cambiar el color de una palabra concreta dentro de un párrafo? Para hacer esto tenemos que definir un nuevo tipo de estilo: las clases. Definir un estilo de clase es muy sencillo, basta escribir un punto y un nombre elegido por nosotros, por ejemplo:

.azul { font-weight: bold;
color: #6C6CCA;}

Así hemos definido un estilo para la clase azul con tipo de fuente negrita y color #6C6CCA.

Una vez definida la clase, para aplicársela a una palabra basta utilizar la etiqueta span enmarcando la palabra. Por ejempo, para asignarle la clase azul a la palabra información (que esta dentro de un párrafo), escribiriamos:

<p>En esta web encontrarás <span class="azul">información </span> sobre la 
asociación y nuestra colección de fotografías de
flores.</p>

Lo cual, haría que el párrafo se viese así:

Puedes observar que la clase azul ha "añadido" las propiedades color azul y negrita a la palabra información, manteniendo las otras propiedades que ya tenía por pertenecer a un párrafo. Es decir, los estilos van sumando propiedades sin eliminar las que ya se tienen.

Independencia entre el contenido y el formato.

Con los estilos CSS conseguimos dar formato a las páginas web de una forma que no existía hasta que aparecieron ellos: separando el formato del contenido. Por un lado tenemos la definición de estilos y por otro lado el propio texto de la página. Este concepto es muy importante porque hace que el trabajo de creación y mantenimiento de una página web sea más sencillo.

Hasta que aparecieron los estilos CSS el formato y el texto estaban mezclados. Ahora se pueden separar y los estilos CSS nos proporcionan las herramientas para hacerlo, aunque también es posible mezclarlo todo. En este curso procuraremos hacerlo bien.

Siguiendo esta forma de hacer las cosas obtendremos páginas web en las que cambiar su aspecto sea algo sencillo, simplemente habrá que modificar un estilo en un solo lugar.

 Aún es posible aplicar  formato sin separarlo  del contenido, si quieres ver lo que no hay que hacer, mira este tema básico.


Enero-2010
Pág. 3.2

Atrás  Inicio  Adelante




.