Las diferentes propiedades
 |
A continuación, veremos las diferentes propiedades que afectarán al comportamiento de las distintas hojas de estilo que queramos implementar en nuestras páginas web.
Propiedades de bloque: sirven para definir los márgenes o la situación de los diferentes bloques de contenido dentro de la página.
| Propiedad | Descripción | Valores aplicables |
|---|---|---|
| margin-top, margin-right, margin-bottom, margin-left, margin: top right bottom left |
Distancia mínima entre un bloque y el resto de los elementos. Tanto margin como margins() se utilizan para cambiar todos estos atributos al mismo tiempo. | tamaño, porcentaje o auto. Por defecto es cero. |
| padding-top, padding-right, padding-bottom, padding-left, padding: top right bottom left |
Distancia entre el borde y el contenido de un bloque. | tamaño, porcentaje o auto. Por defecto es cero. |
| border-top-width, border-right-width, border-bottom-width, border-left-width, border-width: top right bottom left |
Anchura del borde de un bloque. | numérico |
| border-style | Estilo del borde de un bloque. | none, solid o 3D, por defecto ninguno (none). |
| border-color | Color del borde de un bloque. | cualquier color |
| width, height | Tamaño de un bloque. Su mejor potencialidad está encaminada a dar apoyo a cualquier elemento gráfico. | tamaño, porcentaje o auto, automático por defecto. |
| float | Justificación del contenido de un bloque. | left, right o none, por defecto ninguno. |
| clear | Permiso para que otro elemento pueda situarse a su derecha o izquierda. | left, right, both o none, por defecto ninguno. |
Propiedades del tipo de letra: estas propiedades afectarán al comportamiento de la tipografía que verá el usuario y se pueden cambiar.
| Propiedad | Descripción | Valores aplicables |
|---|---|---|
| font-family | Tipo de letra (puede ser genérica) que utilizaremos. | lista de tipos, genéricos o no, separados por comas. |
| font-size | Tamaño del tipo de letra. | xx-small, x-small, small, medium, large, x-large, xx-large, tamaño relativo o tamaño absoluto. Por defecto medium. |
| font-weight | Grosor del tipo de letra (negrita). | normal, bold, bolder, lighter o 100-900 (900 como la negrita más gruesa). Por defecto normal. |
| font-style | Estilo del tipo de letra (cursiva). | normal, italic, italic small-caps, oblique, oblique small-caps o small-caps. Por defecto normal. |
Propiedades del formato del texto: definiremos cualquier propiedad que ya conocemos de los procesadores de texto habituales.
| Propiedad | Descripción | Valores aplicables |
|---|---|---|
| line-height | Interlineado. | número o porcentaje |
| text-decoration | Efectos varios sobre el texto. | none, underline (subrayado), overline (como subrayado, pero por encima), line-through (tachado) o blink (parpadeo); por defecto ninguno. |
| vertical-align | Posicionamiento vertical del texto. | baseline (normal), sub (subíndice), super (superíndice), top, text-top, middle, bottom, text-bottom o un porcentaje. Por defecto baseline. |
| text-transform | Transforma el texto en mayúsculas o minúsculas. | capitalize (coloca la primera letra en mayúsculas), uppercase (convierte todo en mayúsculas), lowecase (en minúsculas) o none, por defecto no hace nada. |
| text-align | Justificación del texto. | left, right, center o justify |
| text-indent | Tabulación con la que aparece la primera línea del texto. | tamaño o porcentaje, por defecto cero. |
Propiedades relativas al color y al fondo: se pueden definir diferentes colores y gráficos de fondo de cualquier elemento.
| Propiedad | Descripción | Valores aplicables |
|---|---|---|
| color | Color del texto. | un color (en el formato habitual) |
| background | Modifica tanto el gráfico como el color de fondo. | dirección del fichero que contiene la imagen o un color. La forma de expresar esto es: background: url(nombre_imagen.gif); |
Propiedades de clasificación: especifican las modificaciones que se pueden hacer en los propios bloques como tal propiedad, así como en otros elementos.
| Propiedad | Descripción | Valores aplicables |
|---|---|---|
| display | Decide si un elemento es interior (como por ejemplo <I>), un bloque (<P>) o un elemento de una lista (<LI>). | inline, block, list y none (que "apaga" el elemento) |
| list-style | Estilo de un elemento de una lista, que puede incluir un gráfico en su inicio. | disco, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none o la dirección de un gráfico |
| white-space | Decide cómo se tratan los espacios: de forma normal o como sucede dentro de la etiqueta <PRE>. |
