Las diferentes propiedades |
| |||
| ||||
A continuación veremos las diferentes propiedades que afectarán al comportamiento de las diferentes 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 poder cambiar todos estos atributos al mismo tiempo. | tamaño, porcentaje o auto. Por defecto, 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, 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 que pueden cambiarse.
| Descripción | Valores aplicables | |
|---|---|---|
| font-family | lista de tipos, genéricos o no, separados por comas | |
| font-size | xx-small, x-small, small, medium, large, x-large, xx-large, tamaño relativo o tamaño absoluto. Por defecto medium |
|
| font-weight | normal, bold, bolder, lighter o 100-900 (900 como la negrita más gruesa). Por defecto normal |
|
| font-style | 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.
| Descripción | Valores aplicables | |
|---|---|---|
| line-height | Interlineado. | número o porcentaje |
| text-decoration | none, underline (subrayado), overline (como subrayado, pero por encima), line-through (tachado) o blink (parpadeo); por defecto ninguno | |
| vertical-align | ||
| text-transform | ||
| text-align | left, right, center o justify | |
| text-indent | tamaño o porcentaje, por defecto cero |
Propiedades relativas al color y al fondo: pueden definirse diferentes colores y gráficos de fondo de cualquier elemento.
| Descripción | Valores aplicables | |
|---|---|---|
| color | un color (en el formato habitual) | |
| background | 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.
| Descripción | Valores aplicables | |
|---|---|---|
| display | inline, block, list y none (que "apaga" el elemento) | |
| list-style | disco, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none o la dirección de un gráfico | |
| white-space | normal y pre |
