Juglar

FUENTES

font-family: Familia de tipografia del texto (si se indica una fuente específica es conveniente respaldarla con la genérica correspondiente, por si el sistema no la reconoce).
serif (por ej., Times)
sans-serif (por ej., Arial o Helvetica)
cursive (por ej., Zapf-Chancery)
fantasy (por ej., Western)
monospace (por ej., Courier)
Ej: font-family: arial, helvetica, sans-serif; font-family: fantasy;

font-size: Tamaño de las fuentes. (ejemplo visual)
Relativos: porcentajes | em | larger | smaller
Exactos: unidades de CSS
Predefinidos: xx-small | x-small | small | medium | large | x-large | xx-large
Ej: font-size:12pt; font-size: x-large;

font-weight: Densidad de los caracteres, es decir, para poner el texto en negrita. Normal = 400, bold = 700.
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Ej: font-weight:bold; font-weight: 200;

font-style: Estilo de la fuente.
normal | italic | oblique
Ej: font-style:normal; font-style: italic;

font-variant: Si los caracteres serán normales o small-caps (las minúsculas son mayusculas de menor tamaño).
normal | small-caps
Ej: font-variant: small-caps;

font: Forma rápida para definir las propiedades de fuentes y line height.
Valores: [font -style || font -variant || font -weight]? font -size [ / line -height ]? font -family
Ej: font: italic bold 12pt/14pt Times, serif ;

TEXTO

line-height: Alto de una línea, es decir, el espaciado entre líneas.
normal y unidades CSS
Ej: line-height: 12px; line-height: normal;

text-decoration: Decoración del texto, es decir, si está subrayado, sobrerayado o tachado.
none | [ underline || overline || line-through || blink
Ej: text-decoration: none; text-decoration: underline;

text-align: Alineación del texto.
left | right | center | justify
Ej: text-align: right; text-align: center;

text-indent: Sangría de la primera línea.
Unidades CSS, o relativas (%, em).
Ej: text-indent: 10px; text-indent: 2in; text-indent: 2em;

text-transform: Que todas las palabras tengan la primera letra en mayúsculas, todo en mayúsculas o minúsculas.
none | capitalize | uppercase | lowercase
Ej: text-transform: none; text-transform: capitalize;

vertical-align: Alineación vertical del texto en relación con la línea base del texto.
baseline | sub | super | top | text-top | middle | bottom | text-bottom | %
Ej: vertical-align: sub;

letter-spacing: Espaciado entre letras.
normal | unidades CSS
Ej: letter-spacing: 0.5pc;

word-spacing: Espaciado entre palabras.
normal | unidades CSS
Ej: word-spacing: 0.5pc;

COLORES Y FONDOS

color: Color del texto.
Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)
Ej: color: #009900; color: red;

background-color: Color de fondo de un elemento de la página.
transparent | Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)
Ej: background-color: green; background-color: #000055;

background-image: Imagen de fondo en un elemento de la página.
none | url(dirección relativa o absoluta)
Ej: background-image: url(mármol.gif) ; background-image: url(http://www.x.com/fondo.gif)

background-repeat: Si la imagen de fondo se repetirá por todo el fondo del elemento, sólo horizontalmente, sólo verticalmente, o no se repetirá.
repeat | repeat-x | repeat-y | no-repeat
Ej: background-repeat: repeat-y;

background-attachment: Si la imagen debe desplazarse o permanecer fija con respecto a la ventana cuando el usuario baja hacia abajo.
scroll | fixed

background-position: Fija la posición de la imagen en el elemento por medio de coordenadas de longitud o porcentaje con respecto a la esquina superior izquierda, o palabras reservadas.
uds CSS | % | top | center | bottom | left | right
background-position: top center;

background: Forma rápida para las propiedades específicas del fondo.
Valores: background -color || background -image || background -repeat || background -attachment || background -position
Ej:
background: white url(http://www.htmlhelp.com/foo.gif);
background: #7fffd4;
background: url(../fondos/peon.png) #f0f8ff fixed;
background: #0c0 url(hojas.jpg) no-repeat bottom right ;

MARGENES Y PADDING

Margin: Tamaño de los márgenes.
unidades CSS | % | auto
margin-left: 1cm; margin-left: 0,5in; margin-right: 5%; margin-right: 1in; margin-top: 10px; margin-bottom: 0pt;

Con “auto” el navegador da un valor adecuado.
Podemos especificar todos los valores de los margenes de una sola vez:

margin: ancho1 ancho2 ancho3 ancho4;

Si sólo especificamos “ancho1″ se refiere a los cuatro margenes. Si se especifican dos valores, “ancho1″ se refiere al superior e inferior, y “ancho2″ al izquierdo y derecho. Si ponemos los tres primeros, “ancho1″ se refiere al superior, “ancho2″ al izquierdo y derecho, y “ancho3″ al inferior.

Padding: Distancia entre el borde superior y el contenido.
unidades CSS | %
padding-left: 0.5in; padding-left: 1px; padding-right: 0.5cm; padding-right: 1pt; padding-top: 10pt; padding-bottom: 0;

padding: valor1 valor2 valor3 valor4;

BORDES

Border-color: Color del borde de un elemento de la página. Se puede poner colores por separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color.
nombre del color | valor HEX | Rgb (R%, G%, B%) | Rgb (R,G,B)
Ej: border-color: red; border-color: #ffccff;

Border-style: Estilo del borde. Los valores significan: none=ningun borde, dotted=punteado, dashed=discontinuo, solid=solido, double=doble borde, y los demás son efectos 3D.
none | dotted | dashed |solid | double | groove | ridge | inset | outset
Ej: border-style: solid; border-style: double;

border-width: Ancho del borde del elemento.
unidades CSS | thin | medium | thick
Ej: border-width: 10px; border-top-width: thin; border-width: thin thick medium

Podemos especificar el ancho de cada borde: border-top-width, border-bottom-width, border-left-width, border-right-width.

border: Especificar todas las propiedades de un borde: anchura, estilo y color. O de cada uno con: border-top, border-bottom, border-left, border-right.
Ej: border: 1px solid #000;

PROPIEDADES DE CLASIFICACION

display: Visualización de un elemento.
* block (un salto de línea antes y después del elemento)
* inline (ningún salto de línea antes ni después del elemento)
* list-item (igual que block, salvo que se agrega un marcador de ítems de lista)
* none (sin visualización)

white-space: Tratamiento de los espacios dentro del elemento.
* normal (contrae múltiples espacios en uno)
* pre (no contrae múltiples espacios)
* nowrap (no permite el ajuste de línea sin una etiqueta
)

list-style-type: Tipo de marcador de ítems de lista.
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Ej: list-style-type: square;

list-style-image: Imagen que se usará como marcador de ítems de lista.
url | none
Ej: list-style-image: url(/LI-marcadores/visto.gif);

list-style-position: Posición de las líneas en relación al ítem de lista.

outside
* Item de lista 1
segunda línea de ítem de la lista

inside
* Item de lista 1
segunda línea de ítem de la lista

list-style: Forma rápida de las propiedades list-style-type, list-style-position y list-style-image.
list-style-type || list -style-position || url
Ej: list-style: square inside;
list-style: url(/LI-marcadores/visto.gif) circle;

FORMATO VISUAL

display: Alineación de los elementos.
block: el elemento se genera en una nueva línea.
inline: el elemento se genera en la misma línea.
list-item: el elemento se genera en nueva línea y como elemento de lista.
marker: el elemento será un marcador.
none: el elemento desaparece por completo.
run-in y compact: el elemento se genera en la misma o en nueva línea según el contexto y se comporta como las listas de definiciones.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell y table-caption: el elemento se comporta como un elemento tabla.

position: Ubicación de los elementos.
static: posición predeterminada.
relative: la posición se ajusta en relación a su posición normal en la página.
absolute: la posición ignora el flujo normal de la página y se especifica con las propiedades ‘left’, ‘right’, ‘top’, y ‘bottom’.
fixed: el elemento no se mueve cuando se realiza un desplazamiento/scroll.
div#menu {position: absolute}

‘top’, ‘right’, ‘bottom’, ‘left’: especifican la distancia que se desplaza el elemento en altura y anchura con respecto al límite de la página.
Valores: medida | porcentaje | auto | inherit
div#menu {position: absolute;
left: 30px;
top: 25% }

z-index: Define el orden en que los elementos son apilados, cuanto más alto el valor, más cercano al lector).
Valores: auto | nº entero | inherit

float: Alinear un elemento a la izquierda o la derecha.
none | left | right
Ej: float: right;

clear: Despejar elementos flotantes a sus lados. Un valor left mueve el elemento debajo de cualquier elemento flotante a su izquierda; right actúa en forma similar para elementos flotantes a la derecha. Both mueve el elemento debajo de los elementos flotantes a ambos lados.
none | left | right | both
Ej: clear: right;

MEDIDAS

width: Anchura de un elemento.
uds CSS | % | auto
Ej: width: 10em;
Anchos mínimo y máximo: min-width y max-width

height: Altura de un elemento.
uds CSS | auto
Ej: height: 40px;
Alturas mínima y máxima: min-height y max-height

EFECTOS VISUALES

overflow: Desbordar o no los límites del elemento, cuando son superados por su tamaño.
visible: el contenido se muestra aunque desborde su contención.
hidden: el elemento será recortado.
scroll: el contenido será recortado, pero se podrá ver con una ventana con scroll
auto: depende del navegador.
Ej: overflow: scroll;

clip: Modificación de la zona de recorte.
auto: la zona de recorte tiene el mismo tamaño y ubicación que la(s) caja(s) del elemento.
rect (v1, v2, v3, v4) : definir tamaño rectangular.

visibility: Indica si el elemento, aunque no se muestre, ocupa espacio.
visible: el elemento es visible.
hidden: el elemento es invisible, pero deja su espacio.

PROPIEDADES DEL CURSOR

cursor: Tipo de cursor para el elemento.
auto: predeterminado para el tipo de elemento.
crosshair: cruz simple.
default: predeterminado para la plataforma (flecha).
pointer: puntero de enlace.
move: indicador de movimiento.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize: indicador de movimiento de borde, según dirección.
text: seleccionador de texto (barra-I).
wait: indica espera (reloj).
help: indica ayuda (interrogación).
(url): archivo .cur propio.

UNIDADES DE MEDIDA

Medidas absolutas:

Pixels (px).
Pulgadas (in).
Centímetros (cm).
Milímetros (mm).
Puntos (pt). Para fuentes.
Picas (pc). Para fuentes.

Medidas relativas:

em. Para fuentes.
ex. Para fuentes.

Equivalencias de las unidades de medida

Chuleta imprimible atributos CSS
CSS Shorthand Guide

Ref:
Desarrollo web
Programacion.com
HTML Help
Manual CSS de Carlos Benavídez
ASPTutor.com
WebEstilo