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

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 <h1> 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;).

text-align: esta propiedad alinea el elemento dentro del elemento que lo contiene. Los valores posibles son left, right, center, justify o inherit.

Importante

Estas no son las únicas propiedades disponibles de CSS. En este libro vamos a aplicar solo algunas de las propiedades tradicionales y, además, estudiaremos las nuevas propiedades incorporadas en CSS3. Para aprender más sobre este lenguaje, por favor visite nuestro sitio web y siga los enlaces de este capítulo.