lunes, 18 de julio de 2011

Propiedades de Fuente

PropiedadValorDescripción
font-familyFuente específica (Arial, Times, Verdana)
Familia (serif, sans-serif, fantasy, monospace, cursive)
Define uno o más nombres de fuentes o familias de fuentes. Si se definen múltiples fuentes, se utilizará la primera que se encuentre en el sistema del usuario.
font-stylenormal, italic, obliqueDefine el estilo de la escritura
font-weightlighter, normal, bold o bolder.
Valor numérico (100, 200, 300, 400, 500, 600, 700, 800, 900)
Define el grosor de la fuente
font-sizexx-small, x-small, small, medium, large, x-large, xx-large
Tamaño en puntos (pt), cm, %
Define el tamaño de la fuente
font-variantnormal, small-capsDefine una variante (mayúsculas chicas)
fontfont: Verdana, Arial, bold italic 8px;Acceso directo a todas las propiedades

Textos y párrafos


PropiedadValorDescripción
color"#RRGGBB"Define el color del texto
line-heightline-height: 12pt;Define el espacio entre las líneas
text-alignleft, center, right o justifyDefine la alineación del texto
text-indenttext-indent: 5px;Define la sangría
text-decorationblink (parpadeo), underline (subrayado), line-through (tachado), overline (línea sobre el texto) o none (sin decoración)Define la decoración
text-shadowtext-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.
text-transformuppercase (mayúscula), lowercase (minúscula) o capitalize (primea letra en mayúscula)Define la capitalización del texto
white-spacenormal (el texto continuará en la próxima línea), pre (el texto aparecerá con los espacios en blanco que se ingresaron), nowrap (el texto no continuará)División de palabras
word-spacingword-spacing: 6px;Define cuánto espacio insertar entre las palabras
widthen puntos (pts), pulgadas ("), centímetros, píxeles (px) o en %Define el ancho de un texto o una imagen
heighten puntos (pts), pulgadas ("), centímetros, píxeles (px) o en %Define la altura de un texto o una imagen

Colores de fondo


PropiedadValorDescripción
background-color"#RRGGBB"Define el color de fondo
background-imageurl(http://url)Define la imagen de fondo
background-repeatrepeat, repeat-x, repeat-y, no-repeatDefine cómo se repite la imagen de fondo
background-attachmentscroll, fixedEspecifica si la imagen de fondo se quedará en su lugar cuando la pantalla se desplace
background-positiontop, middle, bottom, left, center o rightPosiciona la imagen con respecto a la esquina superior izquierda
backgroundbackground: url(test.jpg) fixed repeat;Acceso directo a las propiedades de fondo

Márgenes


PropiedadEjemploDescripción
margin-topmargin-top: 5px;Valor del margen superior
margin-rightmargin-right: 0.5em;Valor del margen derecho
margin-bottommargin-bottom: 2pt;Valor del margen inferior
margin-leftmargin-left: 0;Valor del margen izquierdo
marginmargin: 5px 0.5em 2pt 0;Acceso directo a las propiedades de márgenes

Bordes


PropiedadValorDescripción
border[-top -left -bottom -right]-widthen puntos (pts), pulgadas ("), centímetros, píxeles (px) o en %Grosor del borde (para la ubicación dada)
border[-top -left -bottom -right]-colorborder-left-color: #RRGGBB;Color del borde (para la ubicación dada)
border[-top -left -bottom -right]-stylesolid (sólido), dashed (con trazos), dotted (con puntos), double (dos líneas) o ridge (tridimensional)Estilo del borde (para la ubicación dada)
border-collapsecollapse
separate
Agrega o elimina el efecto "3D"
Borderborder: 1px 0 0 2px dotted green;Acceso directo global a las propiedades de bordes

Relleno


PropiedadValorDescripción
padding-toppadding-top: 3px;Relleno entre el elemento y el borde superior
padding-rightpadding-right: 0.25em;Relleno entre el elemento y el borde derecho
padding-bottompadding-bottom: 0;Relleno entre el elemento y el borde inferior
padding-leftpadding-left: 2pt;Relleno entre el elemento y el borde izquierdo
paddingpadding: 3px 0.25em 0 2pt;Acceso directo a las propiedades de relleno

Tablas


PropiedadValorDescripción
border-collapseseparate o collapseCombina los bordes de las celdas (collapse), no los combina (separate)
border-spacingborder-spacing: 4px;Espacio de las celdas
caption-sidetop, bottom, left o rightUbica la leyenda de la tabla
empty-cellsshow o collapseMuestra (show) u oculta (collapse) las celdas vacías
table-layoutfixed (independiente del contenido de la celda) o auto (depende del contenido de la celda)Ancho fijo o variable
speak-headersalways (siempre antes de cada celda) o once (sólo una vez)Propiedad destinada para los ciegos y minusválidos visuales que indica cómo actúa el sonido al leer las celdas de encabezado de las tablas

Listas


PropiedadValorDescripción
list-style-typedecimal, upper-roman, lower-latin, disc, circle, square o noneTipo de viñetas y numeración
list-style-imagelist-style-image: url(image.png);Personaliza las viñetas con una imagen
list-style-positioninside o outsideEspecifica la sangría de las viñetas
list-style Acceso directo a las propiedades de lista

Presentación de la página


PropiedadValorDescripción
@page@page(size: portrait)Define la presentación de impresión
sizeauto, landscape o portraitFormato de impresión
margin-topmargin-top: 3 cm;Margen superior
margin-rightmargin-right: 1,5 cm;Margen derecho
margin-bottommargin-bottom: 1 cm;Margen inferior
margin-leftmargin-left: 2 cm;Margen izquierdo
markscrop (marcas de recorte), cross (marcas cruzadas), none (sin marcas)Marcas de recorte y marcas cruzadas
page-break-beforeAlways, avoidInserta un salto de página antes de un elemento
page-break-afterAlways, avoidInserta un salto de página después de un elemento
orphansorphans: 2;Evita que haya líneas huérfanas al final de una página. Define la cantidad mínima de líneas de un elemento que quedan en la parte inferior de una página antes del salto de página.
widowswidows: 1;Evita que haya líneas viudas al final de una página. Define la cantidad mínima de líneas de un elemento que quedan en la parte superior de una página después de un salto de página.

No hay comentarios:

Publicar un comentario