css3

Propiedades CSS

css3

Como he tenido que recuperar del baúl de los recuerdos las CSS, me voy a dejar aquí apuntadas algunas propiedades de las hojas de estilo. Sé que lo que se mueve actualmente por internet son las CSS 3, pero como esas propiedades las tengo más frescas, he decidido apuntar, las que menos me suenan (tanto de CSS2 como de CSS3). Por esto poco a poco iré ampliando este post (o esa es mi idea).

La tabla siguiente resume las propiedades definidas en las recomendaciones de Hojas de Estilo en Cascada (CSS):

  • 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 (-) .
  • Se incluyen también propiedades CSS 3 que admiten los navegadores Internet Explorer, Firefox y Google Chrome y que se irán añadiendo al final.

Propiedades de CSS


Tipo de letra (fuente)
PropiedadDescripciónValores
fontpropiedad compuesta[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar
font-familytipo de letra (fuente)[ nombre-fuente | familia-genérica ] [, nombre-fuente | familia-genérica ]*
font-sizetamañotamaño-absoluto | tamaño-relativo | distancia | porcentaje
font-styleinclinación (cursiva)normal | italic | oblique
font-variantversalitasnormal | small-caps
font-weightgrosor del trazo (negrita)normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Texto
PropiedadDescripciónValores
colorcolor del textocolor
directiondirección del textoltr | rtl
letter-spacingespacio entre carácteresnormal | distancia
line-heightespaciado entre líneasnormal | número | distancia | porcentaje
text-alignalineación del textocenter | justify | left | right
text-decorationdecoración del textonone | blink | line-through | overline | underline
text-indentsangría de la primera líneadistancia | porcentaje
text-transformmayúsculas / minúsculasnone | capitalize | lowercase | uppercase
unicode-bididirección del textonormal | embed | bidi-override
vertical-alignalineación verticalbaseline | bottom | middle | sub | super | text-bottom | text-top | top | distancia | porcentaje
white-spaceespacios en blanco, saltos de línea y wrapnormal | nowrap | pre | pre-line(+) | pre-wrap(+)
word-spacingespacio entre palabrasnormal | distancia
Bordes
PropiedadDescripciónValores
bordercuatro bordes simultáneamenteborder-color || border-width || border-style
border-topborde superiorborder-color || border-width || border-style
border-rightborde derechoborder-color || border-width || border-style
border-bottomborde inferiorborder-color || border-width || border-style
border-leftborde izquierdoborder-color || border-width || border-style
border-colorcolor de los bordes[ color | transparent ] {1, 4}
border-widthgrosor de los bordes[ medium | thick | thin | distancia ] {1, 4}
border-styleestilos de los bordes[ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-top-colorcolor del borde superior[ color | transparent ] {1, 4}
border-top-widthgrosor del borde superior[ medium | thick | thin | distancia ] {1, 4}
border-top-styleestilo del borde superior[ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-right-colorcolor del borde derecho[ color | transparent ] {1, 4}
border-right-widthgrosor del borde derecho[ medium | thick | thin | distancia ] {1, 4}
border-right-styleestilo del borde derecho[ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-bottom-colorcolor del borde inferior[ color | transparent ] {1, 4}
border-bottom-widthgrosor del borde inferior[ medium | thick | thin | distancia ] {1, 4}
border-bottom-styleestilo del borde inferior[ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-left-colorcolor del borde izquierdo[ color | transparent ] {1, 4}
border-left-widthgrosor del borde izquierdo[ medium | thick | thin | distancia ] {1, 4}
border-left-styleestilo del borde izquierdo[ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
Margen exterior
PropiedadDescripciónValores
margincuatro márgenes exterior simultáneamente[ auto | distancia | porcentaje ] {1, 4}
margin-topmargen exterior superiorauto | distancia | porcentaje
margin-rightmargen exterior derechoauto | distancia | porcentaje
margin-bottommargen exterior inferiorauto | distancia | porcentaje
margin-leftmargen exterior izquierdoauto | distancia | porcentaje
Margen interior
PropiedadDescripciónValores
paddingcuatro márgenes interiores simultáneamente[ distancia | porcentaje ] {1, 4}
padding-topmargen interior superiordistancia | porcentaje
padding-rightmargen interior derechodistancia | porcentaje
padding-bottommargen interior inferiordistancia | porcentaje
padding-leftmargen interior izquierdodistancia | porcentaje
Fondos
PropiedadDescripciónValores
backgroundpropiedad compuestabackground-attachment || background-color || background-image || background-position || background-repeat
background-attachmentatadura de la imagenfixed | scroll
background-colorcolor de fondotransparent | color
background-imageimagen de fondonone | uri
background-positionposición de la imagen de fondo[ [ left | center | right | distancia | porcentaje] [ top | center | bottom | distancia | porcentaje] ]? | [ [ left | center | right ] || [ top | center | bottom ] ]
background-repeatrepetición de la imagen de fondono-repeat | repeat | repeat-x | repeat-y
Listas
PropiedadDescripciónValores
list-stylepropiedad compuestalist-style-image || list-style-position || list-style-type
list-style-imageimagen del marcadornone | uri
list-style-positionposición del marcadorinside | outside
list-style-typetipo de marcadornone | circle | disc | square | decimal | decimal-leading-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
PropiedadDescripciónValores
border-collapsemodo de bordescollapse | separate
border-spacingseparación entre celdasdistancia distancia?
caption-sideposición de la leyendatop | bottom | left(-) | right(-)
empty-cellsborde de casillas vacíashide | show
table-layoutalgoritmo ancho de tablaauto | fixed
Tamaño
PropiedadDescripciónValores
widthanchuraauto | distancia | porcentaje
min-widthanchura mínimadistancia | porcentaje
max-widthanchura máximadistancia | porcentaje
heightalturaauto | distancia | porcentaje
min-heightaltura mínimadistancia | porcentaje
max-heightanchura máximadistancia | porcentaje
overflowsi el contenido desborda al elementoauto | hidden | scroll | visible
Posicionamiento
PropiedadDescripciónValores
floatmodo de posicionamiento flotantenone | left | right
clearlado en el que no puede haber elementos flotantesnone | both | left | right
positionmodo de posicionamientoabsolute | fixed | relative | static
topposición del borde superior del elementoauto | distancia | porcentaje
rightposición del borde derecho del elementoauto | distancia | porcentaje
bottomposición del borde inferior del elementoauto | distancia | porcentaje
leftposición del borde izquierdo del elementoauto | distancia | porcentaje
cliprecorta el elementoauto | forma
displaytipo de cajanone | 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
visibilityvisibilidadhidden | collapse | visible
z-indexapilamientoauto | número-entero
Impresora
PropiedadDescripciónValores
page-break-aftersalto de página después deauto | always | avoid | left | right
page-break-beforesalto de página antes deauto | always | avoid | left | right
page-break-insidesalto de página dentro deauto | avoid
orphansnúmero de líneas al final de páginanúmero-entero
widowsnúmero de líneas al principio de la páginanúmero-entero
Interface de usuario
PropiedadDescripciónValores
cursortipo 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
outlinecuatro bordes simultáneamenteoutline-color || outline-width || outline-style
outline-colorcolor de los bordescolor
outline-widthgrosor de los bordesborder-width
outline-styleestilos de los bordesborder-style
Pseudo-elementos
NombreDescripciónValores
:afterinserta contenido después del elementocontent: contenido
:beforeinserta contenido antes del elementocontent: contenido
:first-letterprimera letra
:first:lineprimera línea de texto
contentcontenido generadonormal(+) | none(+) | [ texto | uri | contador | attr(atributo) | open-quote | close-quote | no-open-quote | no-close-quote ]+
counter-incrementincremento de contadornone | [ identificador número-entero? ]+
counter-resetpuesto a cero de contadornone | [ identificador número-entero? ]+
quotescomillasnone | [ texto-apertura texto-cierre ]+
Pseudo-clases
NombreDescripciónValores
:activecuando se hace clic sobre el elemento
:first-childprimer elemento hijo
:focuscuando el elemento tiene el foco
:hovercuando el ratón pasa sobre el elemento
:langidioma:lang(en) | :lang(es) | :lang(fr) etc.
:linkenlaces no visitados
:visitedenlaces ya visitados
Propiedades no incluidas en CSS 2.1
PropiedadDescripciónValores
font-size-adjustajuste de tamañonúmero-decimal
font-stretchanchuraultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal | wider | narrower
marker-offsetdistancia entre marcador y elementodistancia
marksmarcas de corte de papelcrop | cross
text-shadowsombreadodesplazamiento horizontal, desplazamiento vertical, tamaño desenfoque, color
Tipos
PropiedadDescripciónValores
contadorContadorcounter(nombre, estilo)
familia-genéricaFamilia genérica de fuentecursive | fantasy | monospace | serif | sans-serif
formaFormarect(top, right, bottom, left)
tamaño-absolutoTamaño absoluto de fuentexx-small | x-small | medium | large | x-large | xx-large
tamaño-relativoTamaño relativo de fuentelarger | smaller
uri (para imagen de fondo o fuentes web)Dirección absoluta o relativaurl(“ruta_y_nombre_de_archivo”)
CSS 3 bordes
PropiedadDescripciónValores
border-radiusbordes redondeados[ distancia | porcentaje ] {1, 4}
border-top-right-radiusborde superior derecho redondeadodistancia | porcentaje
border-bottom-right-radius borde inferior derecho redondeadodistancia | porcentaje
border-bottom-left-radius borde inferior izquierdo redondeadodistancia | porcentaje
border-top-left-radius borde superior izquierdo redondeadodistancia | porcentaje

Deja un comentario