CSS: Hojas de estilo

Junio 2014

Propiedades de fuente
Propiedad

Valor

Descripcin

font-family

Fuente especfica
(Arial, Times,
Verdana)
Familia (serif, sansserif, fantasy,
monospace, cursive)

font-style

normal, italic, oblique Define el estilo de la escritura

Define uno o ms nombres de fuentes o familias de

fuentes. Si se definen mltiples fuentes, se utilizar la
primera que se encuentre en el sistema del usuario.

lighter, normal, bold o

bolder.
font-weight Valor numrico (100, Define el grosor de la fuente
200, 300, 400, 500,
600, 700, 800, 900)

font-size

xx-small, x-small,
small, medium, large,
x-large, xx-large
Define el tamao de la fuente
Tamao en puntos
(pt), cm, %

font-variant normal, small-caps

font

font: Verdana, Arial,

bold italic 8px;

Define una variante (maysculas chicas)

Acceso directo a todas las propiedades

Textos y prrafos
Propiedad
color

Valor
"#RRGGBB"

Descripcin
Define el color del texto

line-height line-height: 12pt;

Define el espacio entre las lneas

text-align

Define la alineacin del texto

left, center, right o justify

text-indent text-indent: 5px;

Define la sangra

blink (parpadeo), underline (subrayado),

textline-through (tachado), overline (lnea
decoration
sobre el texto) o none (sin decoracin)

Define la decoracin

textshadow

text-shadow: 1px 2px 4px black;

Define una sombra paralela del texto y

representa, respectivamente, la
sombra hacia la derecha, hacia abajo,
radio de desenfoque y color.

texttransform

uppercase (mayscula), lowercase

(minscula) o capitalize (primea letra en
mayscula)

Define la capitalizacin del texto

whitespace

normal (el texto continuar en la prxima

lnea), pre (el texto aparecer con los
espacios en blanco que se ingresaron),
nowrap (el texto no continuar)

Divisin de palabras

wordspacing

word-spacing: 6px;

Define cunto espacio insertar entre

las palabras

width

en puntos (pts), pulgadas ("), centmetros, Define el ancho de un texto o una

pxeles (px) o en %
imagen

height

en puntos (pts), pulgadas ("), centmetros, Define la altura de un texto o una

pxeles (px) o en %
imagen

Colores de fondo
Propiedad

Valor

Descripcin

backgroundcolor

"#RRGGBB"

Define el color de fondo

backgroundimage

url(http://url)

Define la imagen de fondo

backgroundrepeat

repeat, repeat-x,
repeat-y, no-repeat

Define cmo se repite la imagen de fondo

backgroundattachment

scroll, fixed

Especifica si la imagen de fondo se quedar en su

lugar cuando la pantalla se desplace

backgroundposition

top, middle, bottom,

left, center o right

Posiciona la imagen con respecto a la esquina

superior izquierda

background

background:
url(test.jpg) fixed
repeat;

Acceso directo a las propiedades de fondo

Mrgenes

Propiedad

Ejemplo

Descripcin

margin-top

margin-top: 5px;

Valor del margen superior

margin-right

margin-right: 0.5em;

Valor del margen derecho

margin-bottom margin-bottom: 2pt;

Valor del margen inferior

margin-left

margin-left: 0;

Valor del margen izquierdo

margin

margin: 5px 0.5em 2pt 0; Acceso directo a las propiedades de mrgenes

Bordes
Propiedad

Valor

Descripcin

border[-top -left bottom -right]width

en puntos (pts), pulgadas ("), centmetros, pxeles Grosor del borde (para la
(px) o en %
ubicacin dada)

border[-top -left bottom -right]color

border-left-color: #RRGGBB;

Color del borde (para la

ubicacin dada)

border[-top -left bottom -right]style

solid (slido), dashed (con trazos), dotted (con

puntos), double (dos lneas) o ridge
(tridimensional)

Estilo del borde (para la

ubicacin dada)

border-collapse

collapse
separate

Agrega o elimina el
efecto "3D"

border: 1px 0 0 2px dotted green;

Acceso directo global a

las propiedades de
bordes

Border

Relleno
Propiedad

Valor

Descripcin

padding-top

padding-top: 3px;

Relleno entre el elemento y el borde superior

padding-right

padding-right: 0.25em;

Relleno entre el elemento y el borde derecho

padding-bottom padding-bottom: 0;

Relleno entre el elemento y el borde inferior

padding-left

padding-left: 2pt;

Relleno entre el elemento y el borde izquierdo

padding

padding: 3px 0.25em 0 2pt; Acceso directo a las propiedades de relleno

Tablas
Propiedad

Valor

Descripcin

bordercollapse

separate o collapse

Combina los bordes de las celdas (collapse), no

los combina (separate)

borderspacing

border-spacing: 4px;

Espacio de las celdas

captionside

top, bottom, left o right

Ubica la leyenda de la tabla

emptycells

show o collapse

Muestra (show) u oculta (collapse) las celdas

vacas

tablelayout

fixed (independiente del

contenido de la celda) o auto
(depende del contenido de la
celda)

Ancho fijo o variable

speakheaders

Propiedad destinada para los ciegos y

always (siempre antes de cada minusvlidos visuales que indica cmo acta el
celda) o once (slo una vez)
sonido al leer las celdas de encabezado de las
tablas

Listas
Propiedad

Valor

Descripcin

list-styletype

decimal, upper-roman, lower-latin, disc, circle,

square o none

Tipo de vietas y numeracin

list-styleimage

list-style-image: url(image.png);

Personaliza las vietas con una

imagen

list-styleposition

inside o outside

Especifica la sangra de las

vietas
Acceso directo a las
propiedades de lista

list-style

Presentacin de la pgina
Propiedad

Valor

Descripcin

@page

@page(size: portrait) Define la presentacin de impresin

size

auto, landscape o
portrait

Formato de impresin

margin-top margin-top: 3 cm;

Margen superior

marginright

Margen derecho

margin-right: 1,5 cm;

marginbottom

margin-bottom: 1 cm; Margen inferior

margin-left margin-left: 2 cm;

Margen izquierdo

marks

crop (marcas de
recorte), cross
(marcas cruzadas),
none (sin marcas)

Marcas de recorte y marcas cruzadas

pagebreakbefore

Always, avoid

Inserta un salto de pgina antes de un elemento

pageAlways, avoid
break-after

Inserta un salto de pgina despus de un elemento

orphans

orphans: 2;

Evita que haya lneas hurfanas al final de una pgina.

Define la cantidad mnima de lneas de un elemento que
quedan en la parte inferior de una pgina antes del salto
de pgina.

widows: 1;

Evita que haya lneas viudas al final de una pgina. Define

la cantidad mnima de lneas de un elemento que quedan
en la parte superior de una pgina despus de un salto de
pgina.

widows

CSS - Style sheets Stylesheets Les feuilles de style I fogli di stile As folhas de estilo
Este documento intitulado CSS: Hojas de estilo de Kioskea (es.kioskea.net) esta puesto a diposicin bajo la
licencia Creative Commons. Puede copiar, modificar bajo las condiciones puestas por la licencia, siempre que esta
nota sea visible.