Lista de códigos de uso frecuente en CSS

Si quieres manejar como un auténtico experto el lenguaje de hojas de estilo en cascada (CSS), estos son los códigos que necesitas:



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.

Foto: ©123RF
Haz una pregunta
Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.
El documento « Lista de códigos de uso frecuente en CSS » 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.

¡Suscríbete a nuestra Newsletter!

Recibe nuestros mejores artículos

¡Suscríbete a nuestra Newsletter!