Página inicial

Unidad 17. Estilos CSS Avanzado (II)

 

Estructura CSS

 

Un archivo CSS (por suerte) tiene una estructura muy bien definida, por lo que bastará con que nos aprendamos unas cuantas reglas para poder empezar a familiarizarnos con su creación.

Su estructura siempre es la siguiente:

selector { propiedad:valor; }

 

Esto es lo que podríamos llamar una regla CSS. Podemos escribir tantas reglas CSS como queramos, siempre una después de otra.

Entre llaves se encierra la definición del estilo, que viene dada por una lista de propiedades y sus valores separados por puntos y comas.

 

Los selectores son aquellos sobre los que se aplica la definición del estilo CSS.

Hay 3 tipos de selectores:

Etiqueta HTML

Clase

Identidad

Cualquier etiqueta HTML es un selector (eliminando los < y >). Por lo que cualquier elemento de una página puede ser modificado genéricamente para que tome un mismo aspecto, por ejemplo:

p {font: 13px bold Arial;}

Hace que todos los párrafos (la etiqueta P) tendrán la fuente de un tamaño de 13 píxeles, estará en negrita y será del tipo Arial.

 

Una clase es un selector que afectará sólo a aquellas etiquetas que nosotros decidamos, por ejemplo:

.rojo {color: red;}

Hemos creado una clase que hace que el color de la letra que tenga asociada esta clase sea rojo. Como puedes ver, la clase se define porque tiene un punto delante.

Ahora podríamos aplicar este estilo sobre cualquier etiqueta que queramos.

<p class="rojo">Este es un texto en rojo</p>

<div class="rojo">Este es un bloque con el texto rojo</div>

En este ejemplo estaríamos creando un párrafo o un bloque y ambos tendrían el texto de color rojo por habérseles aplicado la misma regla CSS.

Los selectores de clase deben estar siempre escritos con carácteres alfanuméricos y sin utilizar espacios (utiliza el subrayado _ para separar palabras).

 

Por último encontraríamos los selectores de identidad. Estos sólo se aplican una vez y se asocian a una etiqueta.

#contenedor {width: 600px;}

Más tarde en el código podremos encontrar:

<div id="contenedor">Este es un bloque que contiene texto</div>

Las clases de identidad se identifican por empezar el selector con un signo #. En el código deberá establecerse la regla CSS asociándosela al atributo ID.

Este atribudo (id) recoge el nombre del elemento que se ha creado con la etiqueta HTML.

A partir de ese momento se podría referenciar a ese cuadro de texto como contenedor utilizando JavaScript.

 




  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 17.2

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.