Si quieres manejar como un auténtico experto el lenguaje de hojas de estilo en cascada (CSS), estos son los códigos que necesitas.
¿Cuáles son los códigos CSS para editar textos?
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 |
¿Qué códigos CSS permiten editar los 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 |
¿Cuáles códigos CSS existen para editar las 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 |
¿Con qué códigos CSS se pueden editar los 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 |
¿Cuáles son los códigos CSS para editar el 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 |
¿Qué códigos CSS permiten editar 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 |
¿Cuáles son los códigos CSS para editar 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 |
¿Con qué códigos CSS se puede editar la 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. |
