Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 49

CSS define básicamente cómo se van a mostrar en la pantalla los elementos HTML. Para aplicar los estilos, CSS utiliza propiedades y valores. Esta construcción se llama declaración y la sintaxis incluye dos puntos después del nombre de la propiedad y un punto y coma para cerrar la línea.

Código 2-1

Declaración de propiedades CSS.

En el ejemplo del Código 2-1, el nombre de la propiedad es color y el valor asignado a esta propiedad es #FF0000. Si esta propiedad se aplica posteriormente a un elemento HTML, el elemento se mostrará en la pantalla en color rojo.

Importante

Algunos de los conceptos explicados en los párrafos siguientes son para introducir a principiantes en el lenguaje CSS y los conceptos básicos de diseño. Si está familiarizado con esta información, por favor siéntase libre de saltar los apartados que ya conoce.

Conceptos básicos

En CSS, los colores se definen por la combinación de tres colores básicos: rojo, verde y azul. Para representar los colores, podemos utilizar números hexadecimales (de 00 a FF) o números decimales (de 0 a 255). Si decidimos utilizar números hexadecimales, tenemos que expresar el color con una almohadilla (#) al comienzo, como en el ejemplo del Código 2-1. Para los números decimales hay una función disponible llamada rgb y los colores se declaran usando la sintaxis rgb(255, 0, 0). Vamos a estudiar la función rgb() y otras funciones similares más adelante en este libro.

Las propiedades pueden ser agrupadas usando llaves ({}). Este grupo de una o más propiedades se denomina regla y es identificado por un nombre o un selector, que representa el elemento o grupo de elementos que se verán afectados por la regla. Podemos crear tantas reglas como queramos.

Código 2-2

Declaración de reglas CSS.

En el Código 2-2 usamos dos propiedades con sus correspondientes valores entre llaves (color y font-size). Esta regla se identifica con el nombre p. En este caso, el nombre de la regla es una referencia a los elementos <p> del documento. Si aplicamos esta regla a nuestro documento, el contenido de cada elemento <p> será de color rojo y con un tamaño de 24 px. Es posible declarar tantos selectores como se desee en una regla CSS, solo se necesita escribir sus nombres separados por una coma:

Código 2-3

Declaración de reglas CSS.

En el ejemplo del Código 2-3, la norma afecta a todos los elementos <p> y <span> encontrados en el documento

De modo similar, también podemos mencionar solo los elementos que estén dentro de un elemento en particular enumerando los selectores separados por un espacio. Por ejemplo, los elementos <span> contenidos dentro de elementos <p>:

Código 2-4

Declaración de reglas CSS.

Existen diferentes métodos para hacer referencia a elementos HTML desde CSS. La que se aplica en los ejemplos anteriores simplemente utiliza el nombre del tipo de elementos que deseamos ser afectados. Ésta es una referencia general, pero hay otras más específicas que estudiaremos en breve.