Unidad 17. Estilos CSS Avanzados (II)



17.2. Sintaxis CSS

Un archivo CSS 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:

El formato a seguir para definir una propiedad es: selector { propiedad: valor;} o selector {propiedad: valor1 valor2 valor3;} si puede tener varios valores. Aunque como lo habitual es escribir varias propiedades para un selector, se suele emplear la sintaxis:

selector {
   propiedad1: valor;
   propiedad2: valor1 valor2;
   propiedad3: valor;
   propiedad4: 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.

Recordarás que al crear una nueva regla, Dreamweaver nos permitía elegir entre cuatro tipos de selectores:

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.

Hay que tener en cuenta que las etiquetas tiene un estilo por defecto, dependiendo del navegador. Por eso vemos los párrafos con margen, los enlaces subrayados o los encabezados de mayor tamaño. Haciendo esto reescribimos las propiedades de esa etiqueta.

 

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 los elementos a los que se la asignemos muestren el texto de color rojo. Como puedes ver, la clase se define porque tiene un punto delante.

Ahora podríamos aplicar este estilo sobre cualquier etiqueta que queramos. No hay más que emplear el atributo class para indicar la clase asignada.

<p class="rojo">Éste es un texto en rojo.</p>
<div class="rojo">
   <p>Este texto también es rojo.</p>
   <p>Y también éste.</p>
</div>

En este ejemplo estaríamos creando un párrafo y todo su texto sería rojo. En el caso del bloque, todo el texto que contenga será rojo, a no ser que los párrafos tengan definido otro color en la hoja de estilo.

Los selectores de clase deben estar siempre escritos con caracteres alfanuméricos y sin utilizar espacios (utiliza el subrayado _ para separar palabras). Para evitar errores, recomendamos también escribirlos siempre en minúsculas.

 

Por último encontraríamos los selectores de identidad. Estos selectores identifican al elemento por su ID. Por lo tanto, sólo afectarán a un elemento en concreto de la página, por lo que son muy empleados para definir el estilo de las capas PA.

#contenedor {width: 600px;}

Observa que este tipo de selector va precedido por una almohadilla (#).

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

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

En el código deberá establecerse la regla CSS asociándosela al atributo ID.

Este atributo (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.

 

Los selectores compuestos los veremos en el siguiente punto.

Marzo-2012
Atrás Inicio Adelante


Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.