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 reglay 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-2usamos 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

del documento. Si aplicamos esta regla a nuestro documento, el contenido de cada elemento

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

y 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 contenidos dentro de elementos

:

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.

Como podrá ver, las propiedades son el núcleo del lenguaje CSS. Hay docenas de propiedades y en cada versión del lenguaje se añaden otras propiedades nuevas. Vamos a aplicar algunas de esas propiedades en situaciones prácticas a lo largo de todo el libro. Mientras tanto, aquí hay una lista de las propiedades más comunes (incluidas desde la primera versión de CSS) que encontrará en nuestros ejemplos:

font: Permite declarar varios estilos de texto, como ancho, tamaño, familia, etc. Los valores deben estar separados por un espacio y declarados en un orden específico (por ejemplo: font: bold 24px arial, sans-serif; ). También podemos declarar todos los estilos de forma independiente utilizando las propiedades asociadas font-style, font-variant, font-weight, font-size, line-height y font-family (por ejemplo, font-size: 24px ).

color: Esta propiedad declara el color de un elemento. El valor se puede expresar en números hexadecimales (por ejemplo, color: #FF0000;) o en números decimales (por ejemplo, color: rgb(255, 0, 0); ).

background: Permite aplicar varios estilos al fondo de un elemento, como el color, imagen, repetición, etc. Los valores indicados deben estar separados por un espacio (por ejemplo, background: #0000FF url(’bricks.jpg’) no-repeat; ). Cada estilo puede ser declarado de forma independiente utilizando propiedades individuales. Vamos a estudiar esta propiedad y todas las propiedades asociadas a ella con mayor detalle en el Capítulo 3.

width: Declara el ancho de un elemento (por ejemplo, width: 200px ).

height: Declara la altura de un elemento (por ejemplo, height: 200px ).

margin: Esta propiedad declara el margen externo de un elemento. El margen es el espacio alrededor del elemento. Puede tener cuatro valores: arriba, derecha, abajo y a la izquierda, en ese orden y separados por un espacio (por ejemplo, margin: 10px 30px 10px 30px; ). Sin embargo, si solo se declaran uno, dos o tres parámetros, los demás tendrán los mismos valores (por ejemplo, margin: 10px 30px; ). Los valores también se pueden declarar de forma independiente utilizando las propiedades asociadas: margin-top (margen superior), margin-right (margen derecho), margin-bottom (margen inferior) y margin-left (margen izquierdo), como en margin-left: 10px;.

padding: Esta propiedad declara el margen interno de un elemento. Se refiere al espacio que rodea el contenido del elemento pero está en el interior de su borde, por ejemplo, el espacio entre el título y el borde de la caja virtual creada por el elemento

que contiene ese título. Los valores se declaran de la misma manera que para la propiedad de margen y, por tanto, también se pueden declarar de forma independiente utilizando las propiedades asociadas padding-top, padding-right, padding-bottom y padding-left (por ejemplo, padding-top: 10px; ).

border: Declara el ancho, estilo y color del borde de un elemento (como por ejemplo, border: 1px solid #990000; ). Los valores posibles para el estilo son: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset o inherit.Esta propiedad también tiene propiedades asociadas para cada parte de un elemento: border-top, border-bottom, border-left and border-right.También podemos asignar valores para el ancho, estilo y color para cada lado de forma independiente añadiendo el nombre al final de la propiedad, pero siempre es necesario declarar la propiedad border antes de hacer cualquier cambio a la misma (por ejemplo, border-style: solid; border-top-width: 10px; ).