Lista de propiedades CSS 3
Tipos
Propiedad Descripción Valores
contador Contador counter(nombre, estilo)
Familia genérica de
familia-genérica cursive | fantasy | monospace | serif | sans-serif
fuente
forma Forma rect(top, right, bottom, left)
Tamaño absoluto de
tamaño-absoluto xx-small | x-small | medium | large | x-large | xx-large
fuente
Tamaño relativo de
tamaño-relativo larger | smaller
fuente
uri (para imagen de Dirección absoluta o
url("ruta_y_nombre_de_archivo")
fondo o fuentes web) relativa
Tipo de letra (fuente)
Propiedad Descripción Valores
[ [ font-style || font-variant || font-weight ]? font-size [ /
font propiedad compuesta line-height ]? font-family ] | caption | icon | menu |
message-box | small-caption | status-bar
[ nombre-fuente | familia-genérica ] [, nombre-fuente |
font-family tipo de letra (fuente)
familia-genérica ]*
font-size tamaño tamaño-absoluto | tamaño-relativo | distancia | porcentaje
font-style inclinación (cursiva) normal | italic | oblique
font-variant versalitas normal | small-caps
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500
font-weight grosor del trazo (negrita)
| 600 | 700 | 800 | 900
Texto
Propiedad Descripción Valores
color color del texto color
direction dirección del texto ltr | rtl
letter-spacing espacio entre caracteres normal | distancia
line-height espaciado entre líneas normal | número | distancia | porcentaje
text-align alineación del texto center | justify | left | right
text-decoration decoración del texto none | blink | line-through | overline | underline
sangría de la primera
text-indent distancia | porcentaje
línea
text-transform mayúsculas / minúsculas none | capitalize | lowercase | uppercase
desplazamiento horizontal, desplazamiento vertical,
text-shadow(3) sombreado
tamaño desenfoque, color
unicode-bidi dirección del texto normal | embed | bidi-override
baseline | bottom | middle | sub | super | text-bottom |
vertical-align alineación vertical
text-top | top | distancia | porcentaje
espacios en blanco,
white-space normal | nowrap | pre | pre-line(+) | pre-wrap(+)
saltos de línea y wrap
word-spacing espacio entre palabras normal | distancia
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-bottom borde inferior border-color || border-width || border-style
border-left borde izquierdo border-color || border-width || border-style
(3)
border-radius esquinas redondeadas [ distancia | porcentaje ] {1, 4}
border-top-right- esquina superior derecha
(3) distancia | porcentaje
radius redondeada
border-bottom-right- esquina inferior derecha
distancia | porcentaje
radius(3) redondeada
border-bottom-left- esquina inferior
distancia | porcentaje
radius(3) izquierda redondeada
border-top-left- esquina superior
(3) distancia | porcentaje
radius izquierda redondeada
border-color color de los bordes [ color | transparent ] {1, 4}
border-width grosor de los bordes [ medium | thick | thin | distancia ] {1, 4}
[ none | hidden | dashed | dotted | double | groove | inset |
border-style estilos de los bordes
outset | ridge | solid ] {1, 4}
border-top-color color del borde superior [ color | transparent ] {1, 4}
border-top-width grosor del borde superior [ medium | thick | thin | distancia ] {1, 4}
[ none | hidden | dashed | dotted | double | groove | inset |
border-top-style estilo del borde superior
outset | ridge | solid ] {1, 4}
border-right-color color del borde derecho [ color | transparent ] {1, 4}
border-right-width grosor del borde derecho [ medium | thick | thin | distancia ] {1, 4}
[ none | hidden | dashed | dotted | double | groove | inset |
border-right-style estilo del borde derecho
outset | ridge | solid ] {1, 4}
border-bottom-color color del borde inferior [ color | transparent ] {1, 4}
border-bottom-width grosor del borde inferior [ medium | thick | thin | distancia ] {1, 4}
[ none | hidden | dashed | dotted | double | groove | inset |
border-bottom-style estilo del borde inferior
outset | ridge | solid ] {1, 4}
border-left-color color del borde izquierdo [ color | transparent ] {1, 4}
grosor del borde
border-left-width [ medium | thick | thin | distancia ] {1, 4}
izquierdo
[ none | hidden | dashed | dotted | double | groove | inset |
border-left-style estilo del borde izquierdo
outset | ridge | solid ] {1, 4}
Margen exterior
Propiedad Descripción Valores
cuatro márgenes exterior
margin [ auto | distancia | porcentaje ] {1, 4}
simultáneamente
margin-top margen exterior superior auto | distancia | porcentaje
margin-right margen exterior derecho auto | distancia | porcentaje
margin-bottom margen exterior inferior auto | distancia | porcentaje
margen exterior
margin-left auto | distancia | porcentaje
izquierdo
Margen interior
Propiedad Descripción Valores
cuatro márgenes
padding interiores [ distancia | porcentaje ] {1, 4}
simultáneamente
padding-top margen interior superior distancia | porcentaje
padding-right margen interior derecho distancia | porcentaje
padding-bottom margen interior inferior distancia | porcentaje
padding-left margen interior izquierdo distancia | porcentaje
Fondos
Propiedad Descripción Valores
background-attachment || background-color ||
background propiedad compuesta background-image || background-position || background-
repeat
background(3) fondos múltiples separados por comas
background-
ligadura de la imagen fixed | scroll
attachment
background-color color de fondo transparent | color
background-image imagen de fondo none | uri
[ [ left | center | right | distancia | porcentaje] [ top |
posición de la imagen de
background-position center | bottom | distancia | porcentaje] ]? | [ [ left | center
fondo
| right ] || [ top | center | bottom ] ]
repetición de la imagen
background-repeat no-repeat | repeat | repeat-x | repeat-y | space(3) | round(3)
de fondo
límite de la imagen de
background-clip(3) border-box | padding-box | content-box
fondo
tamaño de la imagen de
background-size(3) auto | [ distancia | porcentaje ] {2} | contain | cover
fondo
origen de la imagen de
background-origin(3) border-box | padding-box | content-box
fondo
Listas
Propiedad Descripción Valores
list-style propiedad compuesta list-style-image || list-style-position || list-style-type
list-style-image imagen del marcador none | uri
list-style-position posición del marcador inside | outside
none | circle | disc | square | decimal | decimal-leading-
zero | lower-alpha | upper-alpha | lower-greek | lower-
latin | upper-latin | lower-roman | upper-roman |
list-style-type tipo de marcador
armenian | georgian | hebrew(-) | cjk-ideographic(-) |
hiragana (-) | katakana (-) | hiragana-iroha(-) | katakana-
iroha(-)
Tablas
Propiedad Descripción Valores
border-collapse modo de bordes collapse | separate
border-spacing separación entre celdas distancia distancia?
caption-side posición de la leyenda top | bottom | left(-) | right(-)
empty-cells borde de casillas vacías hide | show
table-layout algoritmo ancho de tabla auto | fixed
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 desborda
overflow auto | hidden | scroll | visible
al elemento
Posicionamiento
Propiedad Descripción Valores
none | block | compact(-) | inline | inline-block(+) | inline-
table | list-item | marker(-) | run-in | table | table-caption |
display tipo de caja table-cell | table-column | table-column-group | table-
footer-group | table-header-group | table-row | table-row-
group
modo de
float none | left | right
posicionamiento flotante
lado en el que no puede
clear none | both | left | right
haber elementos flotantes
modo de
position absolute | fixed | relative | static
posicionamiento
posición del borde
top auto | distancia | porcentaje
superior del elemento
posición del borde
right auto | distancia | porcentaje
derecho del elemento
posición del borde
bottom auto | distancia | porcentaje
inferior del elemento
posición del borde
left auto | distancia | porcentaje
izquierdo del elemento
clip recorta el elemento auto | forma
visibility visibilidad hidden | collapse | visible
z-index apilamiento auto | número-entero
Impresora
Propiedad Descripción Valores
salto de página después
page-break-after auto | always | avoid | left | right
de
page-break-before salto de página antes de auto | always | avoid | left | right
page-break-inside salto de página dentro de auto | avoid
número de líneas al final
orphans número-entero
de 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 |
cursor tipo de cursor progress | n-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
outline-color color de los bordes color
outline-width grosor de los bordes border-width
outline-style estilos de los bordes border-style
Pseudo-elementos
Nombre Descripción Valores
inserta contenido
:after content: contenido
después del elemento
inserta contenido antes
:before content: contenido
del elemento
:first-letter primera letra
:first:line primera línea de texto
normal(+) | none(+) | [ texto | uri | contador | attr(atributo) |
content contenido generado open-quote | close-quote | no-open-quote | no-close-
quote ]+
counter-increment incremento de contador none | [ identificador número-entero? ]+
counter-reset puesto a cero de contador none | [ identificador número-entero? ]+
quotes comillas none | [ texto-apertura texto-cierre ]+
Pseudo-clases
Nombre Descripción Valores
cuando se hace clic sobre
:active
el elemento
:first-child primer elemento hijo
cuando el elemento tiene
:focus
el foco
cuando el ratón pasa
:hover
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-adjust ajuste de tamaño número-decimal
ultra-condensed | extra-condensed | condensed | semi-
font-stretch anchura condensed | semi-expanded | expanded | extra-expanded |
ultra-expanded normal | wider | narrower
distancia entre marcador
marker-offset distancia
y elemento
marks marcas de corte de papel crop | cross
Esta lección contiene algunas propiedades de las recomendaciones CSS 3 actualmente en
elaboración, pero únicamente aquellas propiedades que se comentan en alguna de las lecciones
sobre CSS 3 de estos apuntes y que todavía no son admitidas de forma generalizada por los
navegadores actuales.
Las propiedades de recomendaciones CSS 3 en elaboración que ya son admitidas de
forma generalizada por los navegadores actuales se encuentran en la la lista de
propiedades CSS estables.
Tipo de letra (fuente)
Propiedad Descripción Valores
font-size-
ajuste del tamaño número
adjust
ultra-condensed, extra-condensed, condensed,
font-strecth anchura semi-condensed, normal, semi-expanded,
expanded, extra-expanded, ultra-expanded
Decoración de texto
Propiedad Descripción Valores
text- decoraciones de texto text-decoration-line || text-decoration-style ||
decoration adicionales text-decoration-color
text-
símbolos para enfatizar text-emphasis-style || text-emphasis-color
emphasis
Columnas
Propiedad Descripción Valores
columns propiedad compuesta número || distancia
column-
número de columnas número
count
column-
ancho de columnas distancia
width
column-gap espacio entre columnas distancia
column-rule-color || column-rule-width ||
column-rule propiedad compuesta
column-rule-style
column-rule-color del borde entre
color | transparent
color columnas
column-rule-grosor del borde entre
medium | thick | thin | distancia
width columnas
column-rule-estilos del borde entre none | hidden | dashed | dotted | double |
style columnas groove | inset | outset | ridge | solid
extenderse varias
column-span none | all
columnas
Bordes
Propiedad Descripción Valores
border-image-source || border-image-slice ||
border-image propiedad compuesta border-image-width || border-image-outset ||
border-image-repeat
border-
imagen de borde URL
image-source
border- troceado de la imagen de
[ distancia | porcentaje ] {1, 4}
image-slice borde
border-
tamaño de borde [ distancia | porcentaje | número ] {1, 4}
image-width
border-
extensión del borde [ distancia | número ] {1, 4}
image-outset
border-
repetición del borde stretch | repeat | round | space
image-repeat
box-shadow sombra de la caja none | [ distancia ] {2, 4} | color | inset
Cajas flexibles
Propiedad Descripción Valores
display tipo de caja flex || inline-flex
flex-flow propiedad compuesta flex-direction || flex-wrap
flex-
dirección row || row-reverse || column || column-reverse
direction
flex-wrap ajuste de línea wrap || no-wrap || wrap-reverse
order número de orden número
[ flex-grow || flex-shrink || flex-basis ] || initial
flex propiedad compuesta
|| auto || none || número
flex-grow factor de expansión número
flex-shrink factor de compresión número
flex-basis tamaño inicial distancia || auto || content || width
justify- alineación en la dirección flex-start || flex-end || center || space-between ||
content principal space-around
alineación en la dirección flex-start || flex-end || center || baseline ||
align-items
perpendicular (una línea) stretch
alineación individual en
auto || flex-start || flex-end || center || baseline ||
align-self la dirección
stretch
perpendicular
alineación en la dirección
flex-start || flex-end || center || space-between ||
align-content perpendicular (varias
space-around || stretch
líneas)
