CSS Básico

Font-Family

(Algunas fuentes pueden no estar disponibles en su dispositivo, y se mostrarán como su familia genérica)

Familia Serif

Times New Roman

Georgia

Familia Sans-Serif

Arial

Verdana

Familia Monospace

Courier New

Lucida Console

Familia Cursive

Florence

Caflisch Script Web

Familia Fantasy

Blippo

Impact

Font-Size

Palabras Clave

Xx-Small

X-Small

Smaller

Small

Medium

Large

Larger

X-large

Pixeles

20px

11px

Em

0.8em

2em

Font-Style

Normal

Italic

Oblique

Font-Weight

Palabras Clave

Lighter

Bold

Bolder

Números

100

400

900

Font-Variant

Normal

Small-Caps

Color

Palabras Clave

(son nombres de colores)

Red

Green

Blue

Por defecto

Valores Hexadecimales

#FF0000

#00FF00

#0000FF

#FFFFFF

Valores RGB

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,255)

Text-Align

Aineación "left"

Alineación "right"

Alineación "center"

Vertical-Align

En una Tabla

Arriba
(Top)

Al medio
(Middle)

Abajo
(Bottom)

En el texto

Texto "in-line"

Texto "sub-line"

Texto "super-line"

Texto a -15px

Text-Decoration

Overline

Underline

Line-Trough

Text-Indent

Sangría de 60px

Sangría de 2cm

Sangría de 4em

Text-Shadow

Texto con sombra (5px 5px 5px grey)

Texto con efecto de sombra (rgba(50,0,50,0.8) -5px -5px 5px)

Text-Transform

La palabra clave capitalize hace mayúscula la primer letra de cada palabra

La palabra clave uppercase hace mayúscula toda la palabra

La palabra clave lowercase hace minúscula toda la palabra

Letter-Sapacing

Espacio entre letras de 5px

Espacio entre letras de -2px

Word-Spacing

Espacio entre palabras de 10px

Espacio entre palabras de -5px

Border

Border-Style

Párrafo con borde "dotted"

Párrafo con borde "dashed"

Párrafo con borde "double"

Párrafo con borde "groove"

Párrafo con borde "ridged"

Párrafo con borde "inset"

Párrafo con borde "outset"

Párrafo con borde "solid"

Border-Width

Párrafo con borde de 10px

Párrafo con borde de 2px

Border-color

Párrafo con borde de color #FF1000

Párrafo con borde de color rgb(0,250,0)

Párrafo con borde de color "blue"

Ancho y alto

Este es un elemento div con 140px width, 100px height y 5px en border

Background-color

Este párrafo tiene un color de fondo naranja

Este párrafo tiene un color de fondo #00000

Este párrafo tiene un color de fondo rgb(150,20,10)

Background-Image

Esta imagen de fondo esta en el elemento p

Background-repeat

Repeat-Y

La imagen de fondo se repite en el eje y

Repeat-X

La imagen de fondo se repite en el eje x

Background-Attachment

(Deslicen hacia arriba y abajo los siguientes textos)

(Es posible que no funcionen)

El valor "fixed" hace que la imagen no se mueva junto con el resto de la pagina

El valor "scroll" hace que la imagen se mueva junto con el resto de la pagina

Estilos de listas

List-Style-Type

Listas ordenadas

Primer ítem
Segundo ítem
Tercer ítem

Primer ítem
Segundo ítem
Tercer ítem

Primer ítem
Segundo ítem
Tercer ítem

Primer ítem
Segundo ítem
Tercer ítem

Listas sin ordenar

Primer ítem
Segundo ítem
Tercer ítem

Primer ítem
Segundo ítem
Tercer ítem

Primer ítem
Segundo ítem
Tercer ítem

List-Style-Image

Primer ítem
Segundo ítem
Tercer ítem

Estilos de Tablas

Sin estilos

Uno	Dos
Tres	Cuatro

Border-Collapse

Collapse
Uno	Dos
Tres	Cuatro

Separate
Uno	Dos
Tres	Cuatro

Border-Spacing

40px
Uno	Dos
Tres	Cuatro

Caption-side

"Top"
Uno	Dos
Tres	Cuatro

"Bottom"
Uno	Dos
Tres	Cuatro

Empty-Cels

Hide
Uno	Dos
Tres

Show
Uno	Dos
Tres

Table-Layout

Auto
5.000.000.000	7.000.000.000

Fixed
5.000.000.000	7.000.000.000

Estilos de links

Link normal

No tengo línea

Me pongo verde cuando me apoyan el mouse

Me hago negro cuando me hacen click

Me covierto en violeta si me visitan

Yo soy así

Estilos de cursores

(Exclusivo para usuarios que tienen)

¿Ayuda?

¡Intenta atraparme!

Esperame un momento...

¡Uno!