PROPIEDADES DE FUENTE
Propiedad | Valor | Resultado |
font-family | serif | Familia serif |
sans-serif | Familia sans-serif | |
cursive | Familia cursive | |
monospace | Familia monospace | |
fantasy | Familia fantasy | |
Nombre de la fuente, p.e. wingdings | Wingdings | |
font-style | normal | Normal |
italic | Itálica | |
oblique | Oblicua | |
font−variant | normal | Normal |
small-caps | Versales | |
font-weight | normal | Normal |
bold | Negrita | |
bolder | Gruesa | |
lighter | Delgada | |
Número de 100 a 900, p.e. 900 | Grueso 900 | |
font-stretch | wider (relativo al espaciado por defecto) | Espaciado más expandido |
narrower (relativo al espaciado por defecto) | Espaciado más condensado | |
ultra-condensed | Espaciado ultra-condensado | |
extra-condensed | Espaciado extra-condensado | |
condensed | Espaciado condensado | |
semi-condensed | Espaciado semi-condensado | |
normal | Normal | |
semi-expanded | Espaciado semi-expandido | |
expanded | Espaciado expandido | |
extra-expanded | Espaciado extra-expandido | |
ultra-expanded | Espaciado ultra-expandido | |
font-size | xx-small | Tamaño extra-pequeño |
x-small | Tamaño muy pequeño | |
small | Tamaño pequeño | |
medium | Tamaño medio | |
large | Tamaño grande | |
x-large | Tamaño muy grande | |
xx-large | Tamaño extra-grande | |
smaller (relativo al tamaño por defecto) | Tamaño más pequeño | |
larger (relativo al tamaño por defecto) | Tamaño más grande | |
Tamaño en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., p.e. 40px | 40 píxels | |
Porcentaje relativo al tamaño por defecto, p.e. 50%, o veces mayor, p.e. 0.5em | La mitad de grande 0.5em | |
font−size−adjust | Valor de ajuste para que una fuente tenga el mismo tamaño relativo que la fuente base, p.e. Times New Roman hay que multiplicar por 1.17 para que tenga el tamaño relativo de Comic Sans MS:font−size−adjust: 1.17; | Fuente Comic Fuente Times Fuente Comic Fuente Times ajustada |
font | Engloba todas las propiedades de fuente excepto font-stretch y font-size-adjust en este orden:
ejemplo:font: italic 75% "Comic Sans MS"; | Comic itálica al 75% |
COLORES Y FONDOS
Propiedad | Valor | Resultado |
color | Nombre del color en inglés, p.e.color: red; | Texto Rojo |
Color en formato RGB | ||
Una cifra hexadecimal para cada color, p.e.color: #FA0; | Texto naranja | |
Dos cifras hexadecimales para cada color, p.e.color: #FFA500; | Texto naranja | |
Un número de 0 a 255 para cada color, p.e.color: rgb(255,165,0); | Texto naranja | |
Un porcentaje de 0% a 100% para cada color, p.e.color: rgb(100%,65%,0%); | Texto naranja | |
background−color | Nombre del color de fondo en inglés, p.e.background−color: red; | Fondo Rojo |
Color en formato RGB | ||
Una cifra hexadecimal para cada color, p.e.background−color: #FA0; | Fondo naranja | |
Dos cifras hexadecimales para cada color, p.e.background−color: #FFA500; | Fondo naranja | |
Un número de 0 a 255 para cada color, p.e.background−color: rgb(255,165,0); | Fondo naranja | |
Un porcentaje de 0% a 100% para cada color, p.e.background−color: rgb(100%,65%,0%); | Fondo naranja | |
background−image | Fichero de imagen, p.e.background−image: url("fondo.gif"); | Imagen |
none, para dejar el fondo vacío cuando por defecto tiene una imagen | Sin imagen | |
background−repeat | repeat la imagen se repite hacia abajo y hacia la derecha. Valor por defecto. | Imagen |
repeat-x la imagen se repite sólo hacia la derecha | Imagen | |
repeat la imagen se repite sólo hacia abajo | Imagen | |
no-repeat la imagen no se repite | Imagen | |
background−attachment | scroll la imagen se desplaza con el contenido de la página al mover las barras de desplazamiento. Valor por defecto. | |
fixed la imagen queda fija al mover las barras de desplazamiento. | ||
background−position | Distancias desde la esquina superior izquierda en píxels (px), centímetros (cm), etc., p.e.background−position: 60px 15px; | Imagen |
Distancias desde la esquina superior izquierda en porcentajes, p.e.background−position: 50% 25%; | Imagen | |
Posición horizontal y vertical. Pueden combinarse: Horizontales: left, center, right Verticales: top, center, bottom | ||
Ejemplo:background−position: top center; | Imagen | |
Ejemplo:background−position: bottom right; | Imagen | |
Ejemplo:background−position: center; | Imagen | |
background | Engloba todas las propiedades de fondo en este orden:
ejemplo:background: #FA0 url("fondo.gif") repeat-y right; | Fondo naranja, imagen a la derecha se repite hacia abajo |
PROPIEDADES DE TEXTO
Propiedad | Valor | Resultado | ||
text-indent | Sangria de primera línea en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., p.e.text-indent: 20px; | Sangria de 20 píxels | ||
Sangria de primera línea en porcentaje relativo al ancho de página (%), o relativo al tamaño de la fuente (em), p.e.text-indent: 2em; | Sangria de 2em | |||
text-align | left (Izquierda, valor por defecto)text-align: left; | Texto alineado a la izquierda | ||
right (Derecha)text-align: right; | Texto alineado a la derecha | |||
center (Centrado)text-align: center; | Texto alineado al centro | |||
justify (Justificado)text-align: justify; | Texto justificado a izquierda y derecha | |||
Cadena de texto, sólo para alinear en las celdas de una tabla, p.e.text-align: "."; |
| |||
text−decoration | none (Sin efecto)text−decoration: none; | Sin efecto | ||
underline (Subrayado)text−decoration: underline; | Subrayado | |||
overline (Super-rayado)text−decoration: overline; | Super-rayado | |||
line-through (Tachado)text−decoration: line-through; | ||||
blink (Parpadeo)text−decoration: blink; | Parpadeo | |||
text-shadow | Especifica uno o varios efectos de sombra separados por comas. Cada efecto lo compone: un color (opcional), distancia a la izquierda, distancia hacia abajo y desenfoque (opcional). p.e.text-shadow: 3px 3px 5px red, 1px 1px | Sombreado | ||
letter-spacing | normal (Espaciado entre caracteres normal)letter-spacing: normal; | Espaciado | ||
Espaciado entre caracteres en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., o relativo al tamaño de la fuente (em), p.e.letter-spacing: .3em; | Espaciado | |||
word-spacing | ||||
word-spacing | normal (Espaciado entre palabras normal)word-spacing: normal; | Entre palabras | ||
Espaciado entre palabras en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., o relativo al tamaño de la fuente (em), p.e.word-spacing: 1em; | Entre palabras | |||
text-transform | none (Sin efecto)text-transform: none; | Texto de ejemplo | ||
capitalize (Primer carácter de cada palabra en mayúscula)text-transform: capitalize; | Texto De Ejemplo | |||
uppercase (Todo en mayúsculas)text-transform: uppercase; | TEXTO DE EJEMPLO | |||
lowercase (Todo en minúsculas)text-transform: lowercase; | texto de ejemplo | |||
white-space | normal (El comportamiento normal de los espacios en html)white-space: normal; | Texto de ejemplo | ||
pre (Los espacios aparecen tal como los escribimos)white-space: pre; | Texto de ejemplo | |||
nowrap (No separa líneas aunque haya espacios)white-space: nowrap; | Texto de ejemplo |
PROPIEDADES DE CAJAS
Para entender las propiedades de cajas es necesario entender el siguiente esquema:
Propiedades de márgenes | ||
Propiedad | Valor | Resultado |
margin-top margin-right margin-bottom margin-left | Margen exterior en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., o relativo al tamaño de la fuente (em), p.e.margin-left: 10px; | Texto de ejemplo |
margin | Engloba las anteriores:
p.e. margin: 10 px; | Texto de ejemplo |
Propiedades de relleno | ||
Propiedad | Valor | Resultado |
padding-top padding-right padding−bottom padding-left | Margen interior en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., o relativo al tamaño de la fuente (em), p.e.padding-left: 10px; | Texto de ejemplo |
padding | Engloba las anteriores:
p.e. padding: 10 px; | Texto de ejemplo |
Propiedades del borde | ||
Propiedad | Valor | Resultado |
border-top-width border-right-width border−bottom−width border-left-width | Borde en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., o relativo al tamaño de la fuente (em), p.e.border-top-width: 3px; | Texto de ejemplo |
thin (borde fino)border-top-width: thin; | Texto de ejemplo | |
medium (borde mediano)border-top-width: medium; | Texto de ejemplo | |
thick (borde grueso)border-top-width: thick; | Texto de ejemplo | |
border-width | Engloba las anteriores:
p.e. border-width: 3px; | Texto de ejemplo |
border-top-color border-right-color border-bottom-color border-left-color | Texto de ejemplo | |
border-color | Engloba las anteriores:
p.e. border-color: blue; | Texto de ejemplo |
border-top-style border-right-style border-bottom-style border-left-style | none (sin borde, valor por defecto)border-top-style: thin; | Texto de ejemplo |
hidden (igual que none)border-top-style: hidden; | Texto de ejemplo | |
dotted (serie de puntos)border-top-style: dotted; | Texto de ejemplo | |
dashed (serie de pequeños trazos)border-top-style: dashed; | Texto de ejemplo | |
solid (borde sólido)border-top-style: solid; | Texto de ejemplo | |
double (dos líneas)border-top-style: double; | Texto de ejemplo | |
groove (como si estuviese tallado en el lienzo)border-style: groove; | Texto de ejemplo | |
ridge (como si estuviera sobresaliendo del lienzo)border-style: ridge; | Texto de ejemplo | |
inset (como si la caja estuviese empotrada en el lienzo)border-style: inset; | Texto de ejemplo | |
outset (como si la caja sobresaliera del lienzo)border-style: outset; | Texto de ejemplo | |
border-style | Engloba las anteriores:
p.e. border-style: double dotted; | Texto de ejemplo |
border-top border-bottom border-right border-left | Engloba las propiedades anteriores para cada borde indicando ancho, estilo y color, p.e.border-top: 8px double blue; | Texto de ejemplo |
border | Engloba todas las propiedades para los bordes indicando ancho, estilo y color, p.e.border: 8px inset red; | Texto de ejemplo |
Propiedades del tamaño de la caja | ||
Propiedad | Valor | Resultado |
width | Ancho de la caja en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., p.e.width: 50px; | Caja de 50 píxels de ancho |
Ancho de la caja en porcentaje, p.e.width: 50%; | Caja de 50% de ancho | |
min-width max-width | Establece las anchuras mínima y máxima posibles. Funciona igual que la propiedad anterior. | |
height | Altura de la caja en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., p.e.height: 30px; | Caja |
Altura de la caja en porcentaje, p.e.height: 50%; | Caja | |
min-height max-height | Establece las alturas mínima y máxima posibles. Funciona igual que la propiedad anterior. | |
Propiedades de línea | ||
Propiedad | Valor | Resultado |
line-height | normal, espaciado interlineal normalline-height: normal; | Texto de ejemplo con espaciado interlineal normal |
Espaciado entre líneas en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., o relativo al tamaño de la fuente (em), p.e.line-height: 12px; | Texto de ejemplo con espaciado interlineal 12px | |
Un número, de modo que el espaciado es este número multiplicado por el tamaño de la fuente, p.e.line-height: 2; | Texto de ejemplo con espaciado interlineal 2 | |
Un porcentaje, de modo que el espaciado es este porcentaje del tamaño de la fuente, p.e.line-height: 150%; | Texto de ejemplo con espaciado interlineal 150% | |
vertical-align | baseline, alineación vertical en la línea basevertical-align: baseline; |  texto |
middle, alineación vertical centradavertical-align: middle; | texto | |
sub, subíndicevertical-align: sub; | texto | |
super, super-índicevertical-align: super; | texto | |
top, superiorvertical-align: top; | texto | |
bottom, inferiorvertical-align: bottom; | texto | |
text-top, superiorvertical-align: text-top; | texto | |
text-bottom, inferiorvertical-align: text-bottom; | texto | |
Un porcentaje a partir de la línea basevertical-align: 100%; | texto | |
Una medida en píxels (px), puntos tipográficos (pt), centímetros (cm), milímetros (mm), pulgadas (in), etc., o relativo al tamaño de la fuente (em), p.e.vertical-align: -6px; | texto | |
PROPIEDADES DE CLASIFICACION
Propiedad | Valor | Resultado |
display |
POSICIONAMIENTO
Propiedad | Valor | Resultado |
Position | ||
top right bottom left | ||
float | ||
clear | ||
z-index | ||
visibility | ||
overflow | ||
clip |
