Lista de propiedades CSS estables

Propiedades CSS estables

Tipos
 Tipo de letra
 Texto
 Bordes
 Margen exterior
 Margen interior
 Fondos
 Listas
 Tablas
 Tamaño
 Posicionamiento
 Impresora
 Interface de usuario
 Pseudo-elementos
 Pseudo-clases
 No incluidas en CSS 2.1
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 (-).
 Algunas 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 cursive | fantasy | monospace | serif | sans-serif

genérica de
genérica fuente

forma Forma rect(top, right, bottom, left)

tamaño- Tamaño xx-small | x-small | medium | large | x-large | xx-large

absoluto absoluto de
fuente

tamaño- Tamaño larger | smaller

relativo relativo de
fuente

uri Dirección url("ruta_y_nombre_de_archivo")

(para image absoluta o
n de relativa
fondo o fuen
tes web)

Tipo de letra (fuente)

Propiedad Descripción Valores

font propiedad [ [ font-style || font-variant || font-weight ]? font-size [ / line-

compuesta height ]? font-family ] | caption | icon | menu | message-
box | small-caption | status-bar

font-family tipo de letra [ nombre-fuente | familia-genérica ] [, nombre-fuente | familia-

(fuente) genérica ]*
define el tipo de fuente de a utilizar o su familia genérica

font-size tamaño tamaño-absoluto | tamaño-relativo | distancia | porcentaje

Se determina el tamaño de la fuente.

font-style inclinación normal | italic | oblique

(cursiva)
se determina el estilo de letra

font-variant versalitas normal | small-caps

font-weight grosor del normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 7
trazo 00 | 800 | 900
(negrita)
Se determina el grosor de la fuente.
Texto
Propiedad Descripción Valores

color color del color

texto
Se determina el color de la fuente

direction dirección del ltr | rtl

texto

letter- espacio entre normal | distancia

spacing caracteres

line-height espaciado normal | número | distancia | porcentaje

entre líneas

text-align alineación del center | justify | left | right

texto

text- decoración none | blink | line-through | overline | underline

decoration del texto

text-indent sangría de la distancia | porcentaje

primera línea

text- mayúsculas / none | capitalize | lowercase | uppercase

transform minúsculas

text- sombreado desplazamiento horizontal, desplazamiento vertical, tamaño

shadow(3) desenfoque, color

unicode-bidi dirección del normal | embed | bidi-override

texto

vertical- alineación baseline | bottom | middle | sub | super | text-bottom | text-

align vertical top | top | distancia | porcentaje

white-space espacios en normal | nowrap | pre | pre-line(+) | pre-wrap(+)

blanco, saltos
de línea y
wrap
word- espacio entre normal | distancia
spacing palabras

Bordes
Propiedad Descripción Valores

border cuatro bordes border-color || border-width || border-style

simultáneame
se determina el borde
nte

border-top borde border-color || border-width || border-style

superior

border-right borde border-color || border-width || border-style

derecho

border- borde inferior border-color || border-width || border-style

bottom

border-left borde border-color || border-width || border-style

izquierdo

border- esquinas [ distancia | porcentaje ] {1, 4}

radius(3) redondeadas

border-top- esquina distancia | porcentaje

right- superior
radius(3) derecha
redondeada

border- esquina distancia | porcentaje

bottom- inferior
right- derecha
radius(3) redondeada

border- esquina distancia | porcentaje

bottom-left- inferior
radius(3) izquierda
redondeada

border-top- esquina distancia | porcentaje

left-radius(3) superior
izquierda
 redondeada

border-color color de los [ color | transparent ] {1, 4}

bordes

border- grosor de los [ medium | thick | thin | distancia ] {1, 4}

width bordes

border-style estilos de los [ none | hidden | dashed | dotted | double | groove | inset | outset | r
bordes idge | solid ] {1, 4}

border-top- color del [ color | transparent ] {1, 4}

color borde
superior

border-top- grosor del [ medium | thick | thin | distancia ] {1, 4}

width borde
superior

border-top- estilo del [ none | hidden | dashed | dotted | double | groove | inset | outset | r
style borde idge | solid ] {1, 4}
superior

border-right- color del [ color | transparent ] {1, 4}

color borde
derecho

border-right- grosor del [ medium | thick | thin | distancia ] {1, 4}

width borde
derecho

border-right- estilo del [ none | hidden | dashed | dotted | double | groove | inset | outset | r
style borde idge | solid ] {1, 4}
derecho

border- color del [ color | transparent ] {1, 4}

bottom- borde inferior
color

border- grosor del [ medium | thick | thin | distancia ] {1, 4}

bottom- borde inferior
width

border- estilo del [ none | hidden | dashed | dotted | double | groove | inset | outset | r
bottom-style borde inferior idge | solid ] {1, 4}

border-left- color del [ color | transparent ] {1, 4}

color borde
izquierdo

border-left- grosor del [ medium | thick | thin | distancia ] {1, 4}

width borde
izquierdo

border-left- estilo del [ none | hidden | dashed | dotted | double | groove | inset | outset | r
style borde idge | solid ] {1, 4}
izquierdo

Margen exterior
Propiedad Descripción Valores

margin cuatro [ auto | distancia | porcentaje ] {1, 4}

márgenes
exterior
simultáneame
nte

margin-top margen auto | distancia | porcentaje

exterior
superior

margin-right margen auto | distancia | porcentaje

exterior
derecho

margin- margen auto | distancia | porcentaje

bottom exterior
inferior

margin-left margen auto | distancia | porcentaje

exterior
izquierdo

Margen interior
Propiedad Descripción Valores
padding cuatro [ distancia | porcentaje ] {1, 4}
márgenes
interiores
simultáneame
nte

padding-top margen distancia | porcentaje

interior
superior

padding- margen distancia | porcentaje

right interior
derecho

padding- margen distancia | porcentaje

bottom interior
inferior

padding-left margen distancia | porcentaje

interior
izquierdo

Fondos
Propiedad Descripción Valores

background propiedad background-attachment || background-color || background-image

compuesta || background-position || background-repeat

background( fondos separados por comas

3)
múltiples

background- ligadura de la fixed | scroll

attachment imagen

background- color de transparent | color

color fondo

background- imagen de none | uri

image fondo

background- posición de la [ [ left | center | right | distancia | porcentaje]

position imagen de [ top | center | bottom | distancia | porcentaje] ]? | [
 fondo [ left | center | right ] || [ top | center | bottom ] ]

background- repetición de no-repeat | repeat | repeat-x | repeat-y | space(3) | round(3)

repeat la imagen de
fondo

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

list-style propiedad 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

list-style- tipo de none | circle | disc | square | decimal | decimal-leading-

type marcador zero | lower-alpha | upper-alpha | lower-greek | lower-
latin | upper-latin | lower-roman | upper-
roman | armenian | georgian | hebrew(-) | cjk-ideographic(-
)
| hiragana (-) | katakana (-) | hiragana-iroha(-) | katakana-iroha(-)

Tablas
Propiedad Descripción Valores

border- modo de collapse | separate

collapse bordes
border- separación distancia distancia?
spacing entre celdas

caption-side posición de la top | bottom | left(-) | right(-)

leyenda

empty-cells borde de hide | show

casillas
vacías

table-layout algoritmo auto | fixed

ancho de
tabla

Tamaño
Propiedad Descripción Valores

width anchura auto | distancia | porcentaje

min-width anchura distancia | porcentaje

mínima

max-width anchura distancia | porcentaje

máxima

height altura auto | distancia | porcentaje

min-height altura mínima distancia | porcentaje

max-height anchura distancia | porcentaje

máxima

overflow si el auto | hidden | scroll | visible

contenido
desborda al
elemento

Posicionamiento
Propiedad Descripción Valores
display tipo de caja none | block | compact(-) | inline | inline-block(+) | inline-
table | list-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

float modo de none | left | right

posicionamie
nto flotante

clear lado en el que none | both | left | right

no puede
haber
elementos
flotantes

position modo de absolute | fixed | relative | static

posicionamie
nto

top posición del auto | distancia | porcentaje

borde
superior del
elemento

right posición del auto | distancia | porcentaje

borde
derecho del
elemento

bottom posición del auto | distancia | porcentaje

borde inferior
del elemento

left posición del auto | distancia | porcentaje

borde
izquierdo del
elemento

Clip recorta el auto | forma

elemento

visibility visibilidad hidden | collapse | visible

z-index apilamiento auto | número-entero

Impresora
Propiedad Descripción Valores

page-break- salto de auto | always | avoid | left | right

after página
después de

page-break- salto de auto | always | avoid | left | right

before página antes
de

page-break- salto de auto | avoid

inside página dentro
de

orphans número de número-entero

líneas al final
de página

widows número de número-entero

líneas al
principio de
la página

Interface de usuario
Propiedad Descripción Valores

cursor tipo de cursor [uri,]* | auto | crosshair | default | help | move | pointer | progress |
n-resize | ne-resize | e-resize | se-resize | s-resize | sw-resize | w-
resize | nw-resize | text | wait

outline cuatro bordes outline-color || outline-width || outline-style

simultáneame
nte

outline-color color de los color

bordes

outline- grosor de los border-width

width bordes
outline-style estilos de los border-style
bordes

Pseudo-elementos
Nombre Descripción Valores

:after inserta content: contenido

contenido
después del
elemento

:before inserta content: contenido

contenido
antes del
elemento

:first-letter primera letra

:first: line primera línea

de texto

content contenido normal(+) | none(+) | [ texto | uri | contador | attr(atributo) | open-

generado quote | close-quote | no-open-quote | no-close-quote ]+

counter- incremento none | [ identificador número-entero? ]+

increment de contador

counter- puesto a cero none | [ identificador número-entero? ]+

reset de contador

quotes comillas none | [ texto-apertura texto-cierre ]+

Pseudo-clases
Nombre Descripción Valores

:active cuando se
hace clic
sobre el
elemento
:first-child primer
elemento hijo

:focus cuando el
elemento
tiene el foco

:hover cuando el
ratón pasa
sobre el
elemento

:lang idioma :lang(en) | :lang(es) | :lang(fr) etc.

:link enlaces no
visitados

:visited enlaces ya
visitados

Propiedades no incluidas en CSS 2.1

Propiedad Descripción Valores

font-size- ajuste de número-decimal

adjust tamaño

font-stretch anchura ultra-condensed | extra-condensed | condensed | semi-

condensed | semi-expanded | expanded | extra-expanded | ultra-
expanded normal | wider | narrower

marker- distancia distancia

offset entre
marcador y
elemento

marks marcas de crop | cross

corte de papel

Última modificación de esta página: 2 de diciembre de 2016

Esta página forma parte del curso Páginas web HTML y hojas de estilo CSS por
Link para consultar la estructura de cada propiedad de CSS
http://www.mclibre.org/consultar/amaya/css/css_propiedades.html#bordes/

Link de video tutoriales de desarrollo web

https://www.youtube.com/channel/UCmDf9N7w6itVWFK-TKRhLaw

Guía de las propiedades de CSS

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Diseño web responsive

https://aukera.es/blog/diseno-responsive/
Introducción a las medias queris
https://www.youtube.com/watch?v=DJv98UaxGb8
Propiedad box-zising de CSS
https://www.youtube.com/watch?v=eMV8NS7qtzs
HTML y CSS Esencial #19 - Overflow (desbordamiento)

https://www.youtube.com/watch?v=_uCDCpD2IYE

Guía de empresarios características de poliéster, algodón y rayón

http://www.contactopyme.gob.mx/guiasempresariales/guias.asp?s=14&guia=81&giro=6&ins=331

Como ser desarrollador web en 7 pasos

https://www.youtube.com/watch?v=nl2rusv9i8Q

Guía Completa de Flexbox desde 0

https://ruvid.net/video/gu%C3%ADa-completa-de-flexbox-desde-0-F-KCncXMPk0.html

PROPIEDADES de FLEX-BOX
https://lenguajecss.com/p/css/propiedades/flexbox
Ejercicio de flexbox
https://ruvid.net/video/css-flexbox-espa%C3%B1ol-1-%F0%9F%92%AA-TtgkU8LMGAc.html

♦ Flexboxgrid:
http://flexboxgrid.com/

Barra de menú responsivo con html5 y css3

https://www.youtube.com/watch?v=T9WVOHukbYM

PROPIEDADES DE CSS3
http://w3.unpocodetodo.info/css3/selectores-before-
after.php