CSS: Hojas de estilo

Octubre 2017

Propiedades de fuente

Propiedad Valor Descripción
font-family Fuente 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-style normal, italic, oblique Define el estilo de la escritura
font-weight lighter, normal, bold o bolder.
Valor numérico (100, 200, 300, 400, 500, 600, 700, 800, 900)
Define el grosor de la fuente
font-size xx-small, x-small, small, medium, large, x-large, xx-large
Tamaño en puntos (pt), cm, %
Define el tamaño de la fuente
font-variant normal, small-caps Define una variante (mayúsculas chicas)
font font: Verdana, Arial, bold italic 8px; Acceso directo a todas las propiedades

Textos y párrafos

Propiedad Valor Descripción
color "#RRGGBB" Define el color del texto
line-height line-height: 12pt; Define el espacio entre las líneas
text-align left, center, right o justify Define la alineación del texto
text-indent text-indent: 5px; Define la sangría
text-decoration blink (parpadeo), underline (subrayado), line-through (tachado), overline (línea sobre el texto) o none (sin decoración) Define la decoración
text-shadow 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.
text-transform uppercase (mayúscula), lowercase (minúscula) o capitalize (primea letra en mayúscula) Define la capitalización del texto
white-space normal (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-spacing word-spacing: 6px; Define cuánto espacio insertar entre las palabras
width en puntos (pts), pulgadas ("), centímetros, píxeles (px) o en % Define el ancho de un texto o una imagen
height en puntos (pts), pulgadas ("), centímetros, píxeles (px) o en % Define la altura de un texto o una imagen

Colores de fondo

Propiedad Valor Descripción
background-color "#RRGGBB" Define el color de fondo
background-image url(http://url) Define la imagen de fondo
background-repeat repeat, repeat-x, repeat-y, no-repeat Define cómo se repite la imagen de fondo
background-attachment scroll, fixed Especifica si la imagen de fondo se quedará en su lugar cuando la pantalla se desplace
background-position 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

Márgenes

Propiedad Ejemplo Descripción
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 márgenes

Bordes

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

Relleno

Propiedad Valor Descripción
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 Descripción
border-collapse separate o collapse Combina los bordes de las celdas (collapse), no los combina (separate)
border-spacing border-spacing: 4px; Espacio de las celdas
caption-side top, bottom, left o right Ubica la leyenda de la tabla
empty-cells show o collapse Muestra (show) u oculta (collapse) las celdas vacías
table-layout fixed (independiente del contenido de la celda) o auto (depende del contenido de la celda) Ancho fijo o variable
speak-headers always (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

Propiedad Valor Descripción
list-style-type decimal, upper-roman, lower-latin, disc, circle, square o none Tipo de viñetas y numeración
list-style-image list-style-image: url(image.png); Personaliza las viñetas con una imagen
list-style-position inside o outside Especifica la sangría de las viñetas
list-style   Acceso directo a las propiedades de lista

Presentación de la página

Propiedad Valor Descripción
@page @page(size: portrait) Define la presentación de impresión
size auto, landscape o portrait Formato de impresión
margin-top margin-top: 3 cm; Margen superior
margin-right margin-right: 1,5 cm; Margen derecho
margin-bottom 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
page-break-before Always, avoid Inserta un salto de página antes de un elemento
page-break-after Always, avoid Inserta un salto de página después de un elemento
orphans orphans: 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.
widows widows: 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.

Consulta también


Les feuilles de style
Les feuilles de style
I fogli di stile
I fogli di stile
As folhas de estilo
As folhas de estilo
Última actualización: 16 de octubre de 2008 a las 15:43 por Jeff.
El documento «CSS: Hojas de estilo» se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.