CSS | HOJA DE REFERENCIA

SINTAXIS
Sintaxis
selector {propiedad: valor;}
Hoja de estilos externa
<link rel="stylesheet" type="text/css" href="style.css" />
CSS dentro de XHTML
<style type="text/css">
selector {propiedad: valor;}
</style>
Estilo en línea
<tag estilo="propiedad: valor; propiedad2:valor2;">
GENERAL
Class String precedido por punto (.nombre-clase)
ID String precedido por almohadilla (
div Elementos en bloque
span Elementos en linea
color Color frontal (color de fuente, p.e)
cursor Apariencia del cursor
display
block; inline; list-item; none
overflow Cómo serán tratados los contenidos desbordados
visible, hidden, scroll, auto
visibility
visible, hidden
FUENTES
font-style
Italic, normal
font-variant
normal, small-caps
font-weight
bold, normal, lighter, bolder, integer (100-900)
font-size Tamaño de la fuente
font-family Listado de fuente(s) a aplicar
TEXTO
letter-spacing Espacio entre letras
line-height Distancia entre líneas
text-align Alineación horizontal
text-decoration
blink, line-through, none, overline, underline
text-indent Indentación de la primera línea
text-transform
capitalize, lowercase, uppercase
vertical-align Alineación vertical
word-spacing Espaciado entre palabras
BOX MODEL
CSS Box Model height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;
BORDES
border-width Ancho del borde
border-style
dashed; dotted; double; groove; inset; outset; ridge; solid; none
border-color Color del borde
POSICIÓN
clear ¿Elementos flotantes que rodee al elemento?
both, left, right, none
float Flotar a una dirección
left, right, none
left Posición izquierda de un elemento
auto, length values (pt, in, cm, px)
top Posición top de un elemento
auto, length values (pt, in, cm, px)
position
static, relative, absolute
z-index Superposción de elementos
auto, integer (higher numbers on top)
BACKGROUND | FONDOS
background-color Color de fondo
background-image imagen de fondo
background-repeat
repeat, no-repeat, repeat-x, repeat-y
background-attachment ¿Imagen de fondo con scroll para el elemento?
scroll, fixed
background-position
(x y), top, center, bottom, left, right
LISTAS
list-style-type Tipo de bullet o número para la lista
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
list-style-position Posición del bullet en la lista
inside; outside
list-style-image Imagen a utilizar como bullet
* Las propiedades para cada selector están en el orden en que deberían aparecer usando la instrucción shorthand.

Atajos *


background
border
border-bottom
border-left
border-right
border-top
font
list-style
margin
padding

Comments


/* Comment */

Pseudo Selectores


:hover
:active
:focus
:link
:visited
:first-line
:first-letter



Unidades


Longitud %
em
pt
px
Keywords bolder
lighter
larger