La tabla siguiente resume las propiedades definidas en la recomendación Hojas de Estilo en Cascada, nivel 2. Al hacer clic en los nombres de las propiedades, podrás leer las explicaciones correspondientes.
Tipo de letra - Texto - Bordes - Márgenes - Relleno - Listas - Fondos - Pseudo-elementos - Pseudo-clases - Tablas - Posicionamiento - Tamaño - Interface de usuario
Tipo de letra (fuente) | ||
Propiedad | Descripción | Valores |
font | propiedad compuesta | |
font-family | tipo de letra (fuente) | serif | sans-serif | cursive | fantasy | monospace |
font-size | tamaño | xx-small | x-small | medium | large | x-large | xx-large | larger | smaller | longitud | % |
font-size-adjust | ||
font-stretch | anchura | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal | wider | narrower |
font-style | inclinación | normal | oblique | italic |
font-variant | versalitas | normal | small-caps |
font-weight | grosor del trazo | 100 | 200 | 300 |
400 | 500 | 600 |
700 | 800 | 900 |
normal | bold | bolder
| lighter |
Texto | ||
Propiedad | Descripción | Valores |
color | color del texto | |
direction | dirección del texto | |
letter-spacing | espacio entre carácteres | |
text-align | alineación del texto | left | right | center | justify |
text-decoration | decoración del texto | none | underline | overline | line-through | blink |
text-indent | sangría de la primera línea | longitud | % |
text-shadow | ||
text-transform | mayúsculas / minúsculas | none | capitalize | uppercase | lowercase |
unicode-bidi | ||
white-space | manejo de los espacios en blanco | |
word-spacing | espacio entre palabras | |
Bordes | ||
Propiedad | Descripción | Valores |
border | cuatro bordes simultáneamente | border-color border-width border-style |
border-top | borde superior | |
border-right | borde derecho | |
border-bottom | borde inferior | |
border-left | borde izquierdo | |
border-color | color de los bordes | |
border-width | grosor de los bordes | thin | medium | thick | longitud |
border-style | estilos de los bordes | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
border-top-color | color del borde superior | |
border-top-width | grosor del borde superior | thin | medium | thick | longitud |
border-top-style | estilo del borde superior | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
border-right-color | color del borde derecho | |
border-right-width | grosor del borde derecho | thin | medium | thick | longitud |
border-right-style | estilo del borde derecho | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
border-bottom-color | color del borde inferior | |
border-bottom-width | grosor del borde inferior | thin | medium | thick | longitud |
border-bottom-style | estilo del borde inferior | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
border-left-color | color del borde izquierdo | |
border-left-width | grosor del borde izquierdo | thin | medium | thick | longitud |
border-left-style | estilo del borde izquierdo | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
Márgenes | ||
Propiedad | Descripción | Valores |
margin | cuatro márgenes simultáneamente | longitud | % (de 1 a 4 valores) |
margin-top | margen superior | longitud | % |
margin-right | margen derecho | longitud | % |
margin-bottom | margen inferior | longitud | % |
margin-left | margen izquierdo | longitud | % |
Relleno | ||
Propiedad | Descripción | Valores |
padding | cuatro rellenos simultáneamente | longitud | % (de 1 a 4 valores) |
padding-top | relleno superior | longitud | % |
padding-right | relleno derecho | longitud | % |
padding-bottom | relleno inferior | longitud | % |
padding-left | relleno izquierdo | longitud | % |
Listas | ||
Propiedad | Descripción | Valores |
list-style | propiedad compuesta | |
list-style-type | tipo de marcador | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana- iroha | katakana-iroha | none | inherit |
list-style-position | posición del marcador | inside | outside | inherit |
list-style-image | imagen del marcador | url ("ruta_y_nombre_de_archivo") |
marker-offset | distancia entre marcador y elemento | longitud |
Fondos | ||
Propiedad | Descripción | Valores |
background | propiedad compuesta | |
background-color | color de fondo | |
background-image | imagen de fondo | url ("ruta_y_nombre_de_archivo") |
background-position | posición de la imagen de fondo | 2 valores: longitud, %, top | center | bottom , left | center | right |
background-repeat | repetición de la imagen de fondo | no-repeat | repeat-x | repeat-y | repeat |
background-attachment | atadura de la imagen | scroll | fixed |
Pseudo-elementos | ||
Nombre | Descripción | Valores |
:first-letter | primera letra | |
:first:line | primera línea de texto | |
:before | inserta contenido antes del elemento | |
:after | inserta contenido después del elemento | |
Pseudo-clases | ||
Nombre | Descripción | Valores |
:first-child | primer elemento hijo | |
:link | enlaces no visitados | |
:visited | enlaces ya visitados | |
:hover | cuando el ratón pasa sobre el elemento | |
:active | cuando haces clic sobre el elemento | |
:focus | cuando el elemento tiene el foco | |
:lang | idioma | :lang(en) | :lang(es) | :lang(fr) etc. |
Tablas | ||
Propiedad | Descripción | Valores |
caption-side | posición de la leyenda | top | bottom | left | right |
empty-cells | borde de casillas vacías | show | hide |
Posicionamiento | ||
Propiedad | Descripción | Valores |
display | tipo de caja | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none |
float | modo de posicionamiento flotante | left | right |
clear | lado en el que no puede haber elementos flotantes | none | left | right | both |
position | modo de posicionamiento | static | relative | absolute | fixed |
top | posición del borde superior del elemento | longitud | % |
right | posición del borde derecho del elemento | longitud | % |
bottom | posición del borde inferior del elemento | longitud | % |
left | posición del borde izquierdo del elemento | longitud | % |
overflow | si el contenido desborda al elemento | visible | hidden | scroll | auto |
z-index | apilamiento | valor (número entero) |
Tamaño | ||
Propiedad | Descripción | Valores |
width | anchura | longitud | % | auto |
min-width | anchura mínima | longitud | % |
max-width | anchura máxima | longitud | % |
height | altura | longitud | % | auto |
min-height | altura mínima | longitud | % |
max-height | anchura máxima | longitud | % |
line-height | espaciado | normal | número | longitud | % |
vertical-align | alineación vertical | baseline | sub | super | top | text-top | middle | bottom | text-bottom | longitud | % |
Interface de usuario | ||
Propiedad | Descripción | Valores |
cursor | tipo de cursor | <uri> | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help |