1/3/2018 Lista de propiedades CSS estables. CSS. Páginas web HTML y hojas de estilo CSS.
Bartolomé Sintes Marco
Lista de propiedades CSS estables
La tabla siguiente resume las propiedades definidas en las recomendaciones de Hojas de Estilo en
Cascada (CSS) y admitidas correctamente por los navegadores más utilizados:
Se incluyen las propiedades CSS 2, excepto las propiedades relacionadas con las hojas de estilo
auditivas (aural).
Las propiedades que han sido eliminadas en la recomendación CSS 2.1 se listan al final.
Los valores de las propiedades añadidos o eliminados en la recomendación CSS 2.1 se indican
con los símbolos (+) o (-).
Las propiedades o los valores de las propiedades definidas en recomendaciones CSS 3 en
elaboración que los navegadores actuales admiten correctamente se indican con el símbolo (3).
Tipos
Propiedad Descripción Valores
contador Contador counter(nombre, estilo)
familia- Familia genérica
cursive | fantasy | monospace | serif | sans-serif
genérica de fuente
forma Forma rect(top, right, bottom, left)
tamaño- Tamaño absoluto
xx-small | x-small | medium | large | x-large | xx-large
absoluto de fuente
tamaño- Tamaño relativo
larger | smaller
relativo de fuente
uri (para
Dirección
imagen de
absoluta o url("ruta_y_nombre_de_archivo")
fondo o
relativa
fuentes web)
Reglas arroba
Propiedad Descripción Descriptores / Características
@import Importar recurso url(...)
font-family, src, font-style, font-weight, font-stretch, unicode-range,
@font-face Fuente web
font-variant, font-feature-settings
Características
@media width | height | orientation | aspect-ratio | resolution | etc.
del dispositivo
Tipo de letra (fuente)
Propiedad Descripción Valores
[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]?
propiedad
font font-family ] | caption | icon | menu | message-box | small-caption |
compuesta
status-bar
tipo de letra [ nombre-fuente | familia-genérica ] [, nombre-fuente | familia-
font-family
(fuente) genérica ]*
font-size tamaño tamaño-absoluto | tamaño-relativo | distancia | porcentaje
inclinación
font-style normal | italic | oblique
(cursiva)
font-variant versalitas normal | small-caps
http://www.mclibre.org/consultar/amaya/css/css-propiedades.html 1/8
1/3/2018 Lista de propiedades CSS estables. CSS. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco
grosor del trazo normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700
font-weight
(negrita) | 800 | 900
Texto
Propiedad Descripción Valores
color color del texto color
dirección del
direction ltr | rtl
texto
espacio entre
letter-spacing normal | distancia
caracteres
espaciado entre
line-height normal | número | distancia | porcentaje
líneas
alineación del
text-align center | justify | left | right
texto
text- decoración del
none | blink | line-through | overline | underline
decoration texto
sangría de la
text-indent distancia | porcentaje
primera línea
mayúsculas /
text-transform none | capitalize | lowercase | uppercase
minúsculas
text- desplazamiento horizontal, desplazamiento vertical, tamaño
(3) sombreado
shadow desenfoque, color
dirección del
unicode-bidi normal | embed | bidi-override
texto
alineación baseline | bottom | middle | sub | super | text-bottom | text-top | top |
vertical-align
vertical distancia | porcentaje
espacios en
white-space blanco, saltos de normal | nowrap | pre | pre-line(+) | pre-wrap(+)
línea y wrap
espacio entre
word-spacing normal | distancia
palabras
Bordes
Propiedad Descripción Valores
cuatro bordes
border border-color || border-width || border-style
simultáneamente
border-top borde superior border-color || border-width || border-style
border-right borde derecho border-color || border-width || border-style
border-
borde inferior border-color || border-width || border-style
bottom
border-left borde izquierdo border-color || border-width || border-style
border- esquinas
[ distancia | porcentaje ] {1, 4}
radius(3) redondeadas
border-top- esquina superior
derecha distancia | porcentaje
right-radius(3) redondeada
border- esquina inferior
bottom-right- derecha distancia | porcentaje
radius(3) redondeada
http://www.mclibre.org/consultar/amaya/css/css-propiedades.html 2/8
1/3/2018 Lista de propiedades CSS estables. CSS. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco
border- esquina inferior
bottom-left- izquierda distancia | porcentaje
radius(3) redondeada
border-top- esquina superior
izquierda distancia | porcentaje
left-radius(3) redondeada
color de los
border-color [ color | transparent ] {1, 4}
bordes
grosor de los
border-width [ medium | thick | thin | distancia ] {1, 4}
bordes
estilos de los [ none | hidden | dashed | dotted | double | groove | inset | outset |
border-style
bordes ridge | solid ] {1, 4}
border-top- color del borde
[ color | transparent ] {1, 4}
color superior
border-top- grosor del borde
[ medium | thick | thin | distancia ] {1, 4}
width superior
border-top- estilo del borde [ none | hidden | dashed | dotted | double | groove | inset | outset |
style superior ridge | solid ] {1, 4}
border-right- color del borde
[ color | transparent ] {1, 4}
color derecho
border-right- grosor del borde
[ medium | thick | thin | distancia ] {1, 4}
width derecho
border-right- estilo del borde [ none | hidden | dashed | dotted | double | groove | inset | outset |
style derecho ridge | solid ] {1, 4}
border- color del borde
[ color | transparent ] {1, 4}
bottom-color inferior
border- grosor del borde
[ medium | thick | thin | distancia ] {1, 4}
bottom-width inferior
border- estilo del borde [ none | hidden | dashed | dotted | double | groove | inset | outset |
bottom-style inferior ridge | solid ] {1, 4}
border-left- color del borde
[ color | transparent ] {1, 4}
color izquierdo
border-left- grosor del borde
[ medium | thick | thin | distancia ] {1, 4}
width izquierdo
border-left- estilo del borde [ none | hidden | dashed | dotted | double | groove | inset | outset |
style izquierdo ridge | solid ] {1, 4}
Margen exterior
Propiedad Descripción Valores
cuatro márgenes
margin exterior [ auto | distancia | porcentaje ] {1, 4}
simultáneamente
margen exterior
margin-top auto | distancia | porcentaje
superior
margen exterior
margin-right auto | distancia | porcentaje
derecho
margin- margen exterior
auto | distancia | porcentaje
bottom inferior
margen exterior
margin-left auto | distancia | porcentaje
izquierdo
http://www.mclibre.org/consultar/amaya/css/css-propiedades.html 3/8
1/3/2018 Lista de propiedades CSS estables. CSS. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco
Margen interior
Propiedad Descripción Valores
cuatro márgenes
padding interiores [ distancia | porcentaje ] {1, 4}
simultáneamente
margen interior
padding-top distancia | porcentaje
superior
margen interior
padding-right distancia | porcentaje
derecho
padding- margen interior
distancia | porcentaje
bottom inferior
margen interior
padding-left distancia | porcentaje
izquierdo
Fondos
Propiedad Descripción Valores
propiedad background-attachment || background-color || background-image ||
background
compuesta background-position || background-repeat
(3)
background fondos múltiples separados por comas
background- ligadura de la
fixed | scroll
attachment imagen
background-
color de fondo transparent | color
color
background-
imagen de fondo none | uri
image
[ [ left | center | right | distancia | porcentaje] [ top | center | bottom |
background- posición de la
distancia | porcentaje] ]? | [ [ left | center | right ] || [ top | center |
position imagen de fondo
bottom ] ]
background- repetición de la (3) (3)
repeat imagen de fondo no-repeat | repeat | repeat-x | repeat-y | space | round
background- límite de la
border-box | padding-box | content-box
clip(3) imagen de fondo
background- tamaño de la
auto | [ distancia | porcentaje ] {2} | contain | cover
size(3) imagen de fondo
background- origen de la
border-box | padding-box | content-box
origin(3) imagen de fondo
Listas
Propiedad Descripción Valores
propiedad
list-style list-style-image || list-style-position || list-style-type
compuesta
list-style- imagen del
none | uri
image marcador
list-style- posición del
inside | outside
position marcador
http://www.mclibre.org/consultar/amaya/css/css-propiedades.html 4/8
1/3/2018 Lista de propiedades CSS estables. CSS. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco
none | circle | disc | square | decimal | decimal-leading-zero | lower-
alpha | upper-alpha | lower-greek | lower-latin | upper-latin | lower-
list-style-type tipo de marcador roman | upper-roman | armenian | georgian | hebrew(-) | cjk-
ideographic(-) | hiragana (-) | katakana (-) | hiragana-iroha(-) |
katakana-iroha(-)
Tablas
Propiedad Descripción Valores
border-
modo de bordes collapse | separate
collapse
border- separación entre
distancia distancia?
spacing celdas
posición de la
caption-side
leyenda top | bottom | left(-) | right(-)
borde de casillas
empty-cells hide | show
vacías
algoritmo ancho
table-layout auto | fixed
de tabla
Tamaño
Propiedad Descripción Valores
width anchura auto | distancia | porcentaje
min-width anchura mínima distancia | porcentaje
max-width anchura máxima distancia | porcentaje
height altura auto | distancia | porcentaje
min-height altura mínima distancia | porcentaje
max-height anchura máxima distancia | porcentaje
si el contenido
overflow desborda al auto | hidden | scroll | visible
elemento
Posicionamiento
Propiedad Descripción Valores
none | block | compact(-) | inline | inline-block(+) | inline-table | list-
display tipo de caja item | marker(-) | run-in | table | table-caption | table-cell | table-
column | table-column-group | table-footer-group | table-header-
group | table-row | table-row-group | flex(3) | inline-flex(3)
modo de
float posicionamiento none | left | right
flotante
lado en el que
no puede haber
clear none | both | left | right
elementos
flotantes
modo de
position absolute | fixed | relative | static
posicionamiento
posición del
top borde superior auto | distancia | porcentaje
del elemento
http://www.mclibre.org/consultar/amaya/css/css-propiedades.html 5/8
1/3/2018 Lista de propiedades CSS estables. CSS. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco
posición del
right borde derecho auto | distancia | porcentaje
del elemento
posición del
bottom borde inferior del auto | distancia | porcentaje
elemento
posición del
left borde izquierdo auto | distancia | porcentaje
del elemento
recorta el
clip auto | forma
elemento
visibility visibilidad hidden | collapse | visible
z-index apilamiento auto | número-entero
Cajas flexibles
Propiedad Descripción Valores
display tipo de caja flex(3) || inline-flex(3)
propiedad
flex-flow(3) compuesta
flex-direction || flex-wrap
flex-
dirección row || row-reverse || column || column-reverse
direction(3)
flex-wrap(3) ajuste de línea wrap || no-wrap || wrap-reverse
order(3) número de orden número
propiedad
flex(3) compuesta
[ flex-grow || flex-shrink || flex-basis ] || initial || auto || none || número
factor de
flex-grow(3) expansión número
factor de
flex-shrink(3) compresión número
flex-basis(3) tamaño inicial distancia || auto || content || width
justify- alineación en la
dirección flex-start || flex-end || center || space-between || space-around
content(3) principal
alineación en la
dirección
align-items(3) secundaria (una flex-start || flex-end || center || baseline || stretch
línea)
alineación
individual en la
align-self(3) dirección auto || flex-start || flex-end || center || baseline || stretch
secundaria
alineación en la
align- dirección flex-start || flex-end || center || space-between || space-around ||
content(3) secundaria stretch
(varias líneas)
Impresora
Propiedad Descripción Valores
http://www.mclibre.org/consultar/amaya/css/css-propiedades.html 6/8
1/3/2018 Lista de propiedades CSS estables. CSS. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco
page-break- salto de página
auto | always | avoid | left | right
after después de
page-break- salto de página
auto | always | avoid | left | right
before antes de
page-break- salto de página
auto | avoid
inside dentro de
número de
orphans líneas al final de número-entero
página
número de
líneas al
widows número-entero
principio de la
página
Interface de usuario
Propiedad Descripción Valores
[uri,]* | auto | crosshair | default | help | move | pointer | progress | n-
cursor tipo de cursor resize | ne-resize | e-resize | se-resize | s-resize | sw-resize | w-
resize | nw-resize | text | wait
cuatro bordes
outline outline-color || outline-width || outline-style
simultáneamente
color de los
outline-color color
bordes
grosor de los
outline-width border-width
bordes
estilos de los
outline-style border-style
bordes
Pseudo-elementos
Nombre Descripción Valores
inserta contenido
::after después del content: contenido
elemento
inserta contenido
::before antes del content: contenido
elemento
::first-letter primera letra
primera línea de
:first:line
texto
content
contenido normal(+) | none(+) | [ texto | uri | contador | attr(atributo) | open-quote
generado | close-quote | no-open-quote | no-close-quote ]+
counter- incremento de
none | [ identificador número-entero? ]+
increment contador
puesto a cero de
counter-reset none | [ identificador número-entero? ]+
contador
quotes comillas none | [ texto-apertura texto-cierre ]+
Pseudo-clases
Nombre Descripción Valores
http://www.mclibre.org/consultar/amaya/css/css-propiedades.html 7/8
1/3/2018 Lista de propiedades CSS estables. CSS. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco
cuando se hace
:active clic sobre el
elemento
primer elemento
:first-child
hijo
cuando el
:focus elemento tiene el
foco
cuando el ratón
:hover pasa sobre el
elemento
:lang idioma :lang(en) | :lang(es) | :lang(fr) etc.
enlaces no
:link
visitados
enlaces ya
:visited
visitados
Propiedades no incluidas en CSS 2.1
Propiedad Descripción Valores
font-size- ajuste de
número-decimal
adjust tamaño
ultra-condensed | extra-condensed | condensed | semi-condensed |
font-stretch anchura semi-expanded | expanded | extra-expanded | ultra-expanded normal
| wider | narrower
distancia entre
marker-offset marcador y distancia
elemento
marcas de corte
marks crop | cross
de papel
Última modificación de esta página: 5 de enero de 2018
Esta página forma parte del curso Páginas web HTML y hojas de estilo CSS por Bartolomé Sintes
Marco
que se distribuye bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 4.0
Internacional (CC BY-SA 4.0).
http://www.mclibre.org/consultar/amaya/css/css-propiedades.html 8/8