Propiedades

Descripcion Propiedades de fuentes

valores

Ejemplos

font

La propiedad font puede usarse como una forma rpida para las diferentes propiedades de fuentes.

[<font-style> || <font-variant> || <font-weight>]? <font-size> [ / <line-height> ]? <font-family>

font: italic bold 12pt/14pt Times, serif

font-size

Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor exactitud.

xx-small | x-small | small | medium | large | xlarge | xx-large Unidades de CSS

font-size:12pt; font-size: x-large;

font-family

este atributo indica la familia de tipografia del texto. Los primeros valores son genricos. Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad. Normal y 400 son el mismo valor, as como bold y 700.

serif | sans-serif | cursive | fantasy | monospace Todas las fuentes habituales

font-family:arial,helvetica; font-family: fantasy;

font-weight

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight:bold; font-weight: 200;

font-style

La propiedad font-style define que la fuente se muestre en una de tres formas: normal, itlica u oblicua (inclinada).

normal | italic | oblique

font-style:normal; font-style: italic;

font-weight

se usa para especificar el peso de la fuente.

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight: 800 weight: normal

font-

font-variant

determina si la fuente se muestra en maysculas tipo normal o pequeas small-caps.( se muestran cuando todas las letras de la palabra estn en maysculas, con caracteres ligeramente ms grandes que las minsculas.)

normal | small-caps

font-variant: small-caps

Propiedades background y color

color Sirve para indicar el color del texto. No todos los nombres de colores son admitidos en el estndar, es aconsejable entonces utilizar el valor RGB. valor RGB o nombre de color color: #009900; color: red;

Background Color (Color de fondo)

La propiedad background-color establece el color del fondo de un elemento.

celeste, negro,#000080| transparent

BODY{ background-color: white } H1 { background-color: #000080

Background Image (Imagen de fondo)

La propiedad background-image establece la imagen de fondo de un elemento.

<url> | none

background-image: url(/images/foo.gif) background-image: url(http://www.htmlhelp.com/bg.png)

Background Repeat (Repetir fondo)

La propiedad background-repeat determina como se repite la background image (imagen de fondo) especificada.

repeat | repeat-x | repeat-y | no-repeat

background: white url(candybar.gif); background-repeat: repeat-x

Background La propiedad background-attachment determina si la background Attachment (Fijacin image (imagen de fondo) especificada se desplazar con el contenido de fondo) o ser fija con respecto al lienzo.

scroll | fixed

background: white url(candybar.gif); background-attachment: fixed

Background (Fondo)

La propiedad background es una forma rpida para las propiedades ms especficas relacionadas con background.

<background-color> || <background-image> || <background-repeat> || <backgroundattachment> || <background-position>

background: white url(http://www.htmlhelp.com/foo.gif) background: #7fffd4

Propiedades de texto
Word Spacing (Espaciamiento de palabras) define una cantidad adicional de espacio entre palabras. El valor debe estar en formato de longitud; no se permiten valores negativos. word-spacing: 0.4em word-spacing: -0.2em

normal | <longitud>

Letter Spacing (Espaciamiento de letras)

define una cantidad adicional de espacio entre caracteres. El valor debe estar en formato de longitud.

normal | <longitud>

letter-spacing: 0.1em letter-spacing: -0.1em

permite que el texto sea decorado mediante una de cinco Text Decoration propiedades: subrayado,lnea superior, tachado, parpadeo, o la por (Decoracin de texto) defecto ninguna.

none | [ underline || overline || line-through || A:link, A:visited, A:active { text-decoration: none } blink ]

Vertical Alignment (Alineacin vertical)

La propiedad vertical-align puede usarse para alterar la ubicacin baseline | sub | super | top | text-top | middle | vertical de un elemento en lnea, en relacin a su elemento padre o a bottom | text-bottom | <porcentaje> la lnea del elemento.

vertical-align: middle vertical-align: 50% vertical-align: super

Text Transformation

permite que el texto se transforme en: maysculas el primer carcter de cada palabra maysculas todos los caracteres de cada palabra letras pequeas para todos los caracteres de cada palabra

none | Capitalize | UPPERCASE | lowercase

text-transform: uppercase transform: capitalize

text-

Text Alignment (Alineacin de texto)

La propiedad text-align puede aplicarse a elementos de nivel bloque (P, H1, etc.) para dar la alineacin del texto del elemento.

left | right | center | justify

text-align: center text-align: justify

Text Indentation (Sangra de texto)

La propiedad text-indent puede aplicarse a elementos de nivel bloque (P, H1, etc.) para definir la cantidad de sangra que debera aplicarse a la primera lnea.

<longitud> | <porcentaje>

text-indent: 5em

direccion

Sentido direccional de la escritura

ltr Izquierda a derecha rtl Derecha a izquierda

direction:ltr direction:rtl

bordes
border Define ancho, color y estilo general para los 4 bordes. border-top: define ancho, color y estilo para el borde superior border-right: define ancho, color y estilo para el borde derecho border-bottom: define ancho, color y estilo para el borde inferior border-left: define ancho, color y estilo para el borde izquierdo Ancho general de los 4 bordes. border-top-width: superior. border-right-width: borde derecho. border-bottom-width: borde inferior. border-left-width: borde izquierdo. thin Fino medium Mediano thick Grueso longitud Longitud color Color thin Fino medium Mediano thick Grueso longitud Longitud border:blue double dotted thin border:green border-style:solid;

border-width

border-top-width:thin; border-right-width:medium; border-left-width:10px

border-color

Color general de los 4 bordes.

Color | transparent

border:green #7fffd4

border:

border-style

Estilo general de los 4 bordes.

none Nada hidden Oculto dotted Punteado dashed Lnea de rayas solid Solido double Doble groove Acanalado ridge En relieve inset Recuadro outset Resalte

border-style: outset

Propiedades de clasificacin
Display (Visualizacin) La propiedad display se usa para definir un elemento con uno de cuatro valores block | inline | list-item | none display: list-item

List Style (Estilo de lista)

La propiedad list-style property es una forma rpida de las propiedades list-style-type, list-style-position y list-style-image.

<list-style-type> || <list-style-position> || <url>

list-style: square inside list-style: none list-style: url(/LI-marcadores/visto.gif) circle

<head> <style type="text/css"> .dentro {list-style-position: inside} .fuera {list-style-position: outside} </style> </head>

List Style Position Esta propiedad determina donde se coloca el marcador en relacin al (Posicin de estilo de tem de lista. Si se usa el valor inside, las lneas se ajustarn debajo del lista) marcador en vez de estar con sangra.

inside | outside

List Style Image (Imagen de estilo de lista)

especifica la imagen que se usar como marcador de tems de lista cuando se active la carga de imgenes, reemplazando al marcador especificado en la propiedad list-style-type.

<url> | none

UL.marca { list-style-image: url(/LImarcadores/visto.gif) } UL LI.x { list-style-image: url(x.png) }

list-style-type: square La propiedad list-style-type especifica el tipo de marcador de tems de OL { list-style-type: upper-alpha } /* A B C D E List Style Type (Tipo disc | circle | square | decimal | lower-roman | lista, y se usa si list-style-image es none o si la carga de imgenes est etc. */ de estilo de lista) upper-roman | lower-alpha | upper-alpha | none desactivada. OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */