Propiedades CSS

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.
top feature image

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)
Propiedad Descripción Valores
font propiedad compuesta [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar
font-family tipo de letra (fuente) [ nombre-fuente | familia-genérica ] [, nombre-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
font-weight grosor del trazo (negrita) normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 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 carácteres 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
text-indent sangría de la primera línea distancia | porcentaje
text-transform mayúsculas / minúsculas none | capitalize | lowercase | uppercase
unicode-bidi dirección del texto normal | embed | bidi-override
vertical-align alineación vertical baseline | bottom | middle | sub | super | text-bottom | text-top | top | distancia | porcentaje
white-space espacios en blanco, saltos de línea y wrap normal | nowrap | pre | pre-line(+) | pre-wrap(+)
word-spacing espacio entre palabras normal | distancia
Bordes
Propiedad Descripción Valores
border cuatro bordes simultáneamente border-color || border-width || border-style
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
border-color color de los bordes [ color | transparent ] {1, 4}
border-width grosor de los bordes [ medium | thick | thin | distancia ] {1, 4}
border-style estilos de los bordes [ none | hidden | dashed | dotted | double | groove | inset | 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}
border-top-style estilo del borde superior [ none | hidden | dashed | dotted | double | groove | inset | 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}
border-right-style estilo del borde derecho [ none | hidden | dashed | dotted | double | groove | inset | 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}
border-bottom-style estilo del borde inferior [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-left-color color del borde izquierdo [ color | transparent ] {1, 4}
border-left-width grosor del borde izquierdo [ medium | thick | thin | distancia ] {1, 4}
border-left-style estilo del borde izquierdo [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
Margen exterior
Propiedad Descripción Valores
margin cuatro márgenes exterior simultáneamente [ auto | distancia | porcentaje ] {1, 4}
margin-top margen exterior superior auto | distancia | porcentaje
margin-right margen exterior derecho auto | distancia | porcentaje
margin-bottom margen exterior inferior auto | distancia | porcentaje
margin-left margen exterior izquierdo auto | distancia | porcentaje
Margen interior
Propiedad Descripción Valores
padding cuatro márgenes interiores simultáneamente [ distancia | porcentaje ] {1, 4}
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 propiedad compuesta background-attachment || background-color || background-image || background-position || background-repeat
background-attachment atadura de la imagen fixed | scroll
background-color color de fondo transparent | color
background-image imagen de fondo none | uri
background-position posición de la imagen de fondo [ [ left | center | right | distancia | porcentaje] [ top | center | bottom | distancia | porcentaje] ]? | [ [ left | center | right ] || [ top | center | bottom ] ]
background-repeat repetición de la imagen de fondo no-repeat | repeat | repeat-x | repeat-y
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
list-style-type tipo de marcador none | 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
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
overflow si el contenido desborda al elemento auto | hidden | scroll | visible
Posicionamiento
Propiedad Descripción Valores
float modo de posicionamiento flotante none | left | right
clear lado en el que no puede haber elementos flotantes none | both | left | right
position modo de posicionamiento absolute | fixed | relative | static
top posición del borde superior del elemento auto | distancia | porcentaje
right posición del borde derecho del elemento auto | distancia | porcentaje
bottom posición del borde inferior del elemento auto | distancia | porcentaje
left posición del borde izquierdo del elemento auto | distancia | porcentaje
clip recorta el elemento auto | forma
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
visibility visibilidad hidden | collapse | visible
z-index apilamiento auto | número-entero
Impresora
Propiedad Descripción Valores
page-break-after salto de página después de auto | always | avoid | left | right
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
orphans número de líneas al final de página número-entero
widows número de líneas al principio de la página número-entero
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 simultáneamente outline-color || outline-width || outline-style
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
:after inserta contenido después del elemento content: contenido
:before inserta contenido antes del elemento content: contenido
:first-letter primera letra
:first:line primera línea de texto
content contenido generado normal(+) | none(+) | [ texto | uri | contador | attr(atributo) | 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
: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-adjust ajuste de tamaño número-decimal
font-stretch anchura ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal | wider | narrower
marker-offset distancia entre marcador y elemento distancia
marks marcas de corte de papel crop | cross
text-shadow sombreado desplazamiento horizontal, desplazamiento vertical, tamaño desenfoque, color
Tipos
Propiedad Descripción Valores
contador Contador counter(nombre, estilo)
familia-genérica Familia genérica de fuente cursive | fantasy | monospace | serif | sans-serif
forma Forma rect(top, right, bottom, left)
tamaño-absoluto Tamaño absoluto de fuente xx-small | x-small | medium | large | x-large | xx-large
tamaño-relativo Tamaño relativo de fuente larger | smaller
uri (para imagen de fondo o fuentes web) Dirección absoluta o relativa url(“ruta_y_nombre_de_archivo”)
CSS 3 bordes
Propiedad Descripción Valores
border-radius bordes redondeados [ distancia | porcentaje ] {1, 4}
border-top-right-radius borde superior derecho redondeado distancia | porcentaje
border-bottom-right-radius borde inferior derecho redondeado distancia | porcentaje
border-bottom-left-radius borde inferior izquierdo redondeado distancia | porcentaje
border-top-left-radius borde superior izquierdo redondeado distancia | porcentaje


Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.