Normas básicas de CSS

Para empezar veremos algunas de las normas básica de CSS, y luego redefiniremos el formato de alguna etiqueta HTML y hablaremos de la clase <SPAN>. Luego pasaremos a las clases personalizadas y a las pseudo-clases.

Diseñar hojas de estilo es bastante sencillo, sólo hay que saber cómo escribirlas y seguir algunas normas básicas. Por ejemplo, para marcar el color de la etiqueta <H1> como blanco (#FFFFFF) pondría:

<STYLE>
H1 { color: #FFFFFF }
</STYLE>

Fijaos en que toda definición de estilo tiene 2 partes:
Un selector ( H1 en el ejemplo)
Una declaración (color: #FFFFFF)

El selector le dice al navegador qué etiqueta es a la que tiene que dar formato
La declaración le dice qué formato es el que tiene que aplicar.

La declaración a su vez se divide en dos partes:
Una propiedad (color en el ejemplo)
Un valor (#FFFFFF en el ejemplo)

No está siendo muy dificil de momento, ¿no?. Pues aunque no lo creáis, lo de arriba es una hoja de estilo en su totalidad. Probad a copiar el código en el encabezado de un documento (mejor con fondo negro, claro), escribir algo de texto y aplicad al texto la etiqueta <H1> (Heading1 en Dreamweaver).

A partir de aquí, sólo se trata de añadir más selectores y declaraciones entre las etiquetas <STYLE>...</STYLE>.

Al ser el selector el que indica qué es a lo que vas a aplicar un formato, cualquier etiqueta HTML puede funcionar como selector.

Hay aproximadamente unas 50 propiedades en CSS1 que puede ser aplicadas: para una lista completa de sus declaraciones y propiedades, deberías echar un vistazo a W3C.

Otro sistema para definir CSS es usar clases personalizadas. La norma para una clase personalizada tiene este aspecto:

<STYLE>
.textrojo { FONT-SIZE: 12px; COLOR: red }
</STYLE>

Para aplicar este estilo a una etiqueta, simplemente tendrías que llamarlo desde la etiqeuta en la que lo vayas a aplicar. Por ejemplo, si quisiera usarlo en un encabezado y en el párrafo siguiente, escribiría:

<H1 class="textrojo">este texto sería rojo y de 12 píxeles de altura</H1>
<P class="textrojo">Y lo que fuera en este párrafo, también</P>

El navegador se saltaría el formato por defecto de estas etiquetas y aplicaría tu clase personalizada.

Pero incluso se podría conseguir no tener que declararlo en cada una de las etiquetas. Utilizando la etiqueta <SPAN>...</SPAN>, todo lo que vaya entre su apertura y su cierre tendría el estilo. El ejemplo anterior podría ser:

<SPAN class="textrojo">
<H1>este texto sería rojo y de 12 píxeles de altura</H1>
<P>Y lo que fuera en este párrafo, también</P>
</SPAN>

Usuarios que han visto este tema también han visto...

- Texto 3D con CSS
- Aplicacion directa de etiquetas.
- Herencia de estilos
- Celdas con puntas redondeadas utilizando CSS
- Efecto zoom de imagen utilizando solo CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento