⇪

Referencia CSS3

facebook-svg gplus-svg twitter-svg

Color

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
color color:color; color s #000 Determina el color del texto 1
opacity opacity: valor | inherit; opacity n 1 Determina el nivel de opacidad de un elemento 3

Fondo (background)

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
background background: color position / size repeat origin clip attachment image; background n   Determina todas las propiedades del fondo en una sola declaración 1
background-attachment background-attachment: scroll | fixed | local backgroundAttachment n scroll Determina si la imagen de fondo es fija (fixed) o puede desplasarse (scroll) con la página 1
background-color background-color: color backgroundColor n transparent Determina el color de fondo de un elemento 1
background-image background-image:"url(img.gif)" | none backgroundImage n   Determina la imagen de fondo de un elemento 1
background-position background-position: x y backgroundPosition n 0% 0% Determina la posición inicial de la imagen de fondo 1
background-repeat background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit backgroundRepeat n repeat Determina si la imagen es repetida y de que manera 1
background-clip background-clip: border-box | padding-box | content-box; backgroundClip n border-box Especifica el área afectada por el color del fondo 3
background-origin background-origin: padding-box | border-box |content-box; backgroundOrigin n padding-box Especifica donde posicionar la imagen de fondo y relativamente a que 3
background-size background-size: length|percentage | cover | contain; backgroundSize n auto Especifica el tamaño de la imagen de fondo 3

Borde (border)

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
border border:1px solid red; border n   Especifica todas las propiedades del borde en una solo declaración abreviada 1
border-bottom border-bottom:1px solid red; borderBottom n   Especifica el estilo del borde inferior. 1
border-bottom-color border-bottom-color: color borderBottomColor n #000 Especifica el color del borde inferior 1
border-bottom-left-radius border-bottom-left-radius: r [r1]; borderBottomLeftRadius n 0 Especifica el radio (los radios) de curvatura del borde de la esquina inferior izquierda. 3
border-bottom-right-radius border-bottom-right-radius: r [r1]; borderBottomRightRadius n 0 Especifica el radio (los radios) de curvatura del borde de la esquina inferior derecha. 3
border-bottom-style border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit borderBottomStyle n none Especifica el tipo de linea del borde inferior. 1
border-bottom-width border-bottom-width: thin | medium | thick | length | inherit borderBottomWidth n medium Determina la anchura del borde inferior 1
border-color   borderColor n #000 Determina el color del borde 1
border-image border-image:url(border.png) 30 30 round; borderImage n none 100% 1 0 stretch Especifica todas las propiedades border-image-* en una solo declaración abreviada 3
border-image-outset border-image-outset: 5px; borderImageOutset n 0 Especifica la desviación de la imagen utilizada para el borde, relativamente al limite de la caja 3
border-image-repeat border-image-repeat: stretch|repeat|round; borderImageRepeat n stretch Especifica cómo se repite la imagen de borde 3
border-image-slice border-image-slice: 30; borderImageSlice n 100% Especifica el desplazamiento hacia el interior de la imagen de borde 3
border-image-source border-image-source: url(border.png); borderImageSource n none Especifica una imagen que se utilizará para el borde 3
border-image-width border-image-width: 10px; borderImageWidth n 1 Especifica la anchura de la imagen utilizada para el borde 3
border-left border-left: 1px solid black borderLeft n   Especifica todas las propiedades borde izquierdo en una solo declaración abreviada 1
border-left-color border-left-color: valor borderLeftColor n #000 Especifica el color del borde izquierdo 1
border-left-style border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit borderLeftStyle n none Especifica el tipo de linea para el borde izquierdo 1
border-left-width border-left-width: : valor | thin | medium | thick | inherit borderLeftWidth n medium Determina la anchura del borde izquierdo 1
border-radius border-radius: valor(es) borderRadius n 0 Especifica el radio (los radios) de curvatura del borde de todas las esquinas en una solo declaración abreviada 3
border-right border-right: 1px solid black borderRight n   Especifica todas las propiedades borde derecho en una solo declaración abreviada 1
border-right-color border-right-color: color borderRightColor n #000 Especifica el color del borde derecho 1
border-right-style border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit borderRightStyle n none Especifica el tipo de linea del borde derecho 1
border-right-width border-right-width: : valor | thin | medium | thick | inherit borderRightWidth n medium Especifica la anchura del borde derecho 1
border-style border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit borderStyle n none Especifica el tipo de linea del borde 1
border-top border-top: 1px solid black borderTop n   Especifica todas las propiedades borde superior en una solo declaración abreviada 1
border-top-color border-top-color: color borderTopColor n #000 Especifica el color del borde superior 1
border-top-left-radius border-top-left-radius: valor(es) borderTopLeftRadius n 0 Especifica el radio (los radios) de curvatura del borde de la esquina superior izquierda 3
border-top-right-radius border-top-right-radius: valor(es) borderTopRightRadius n 0 Especifica el radio (los radios) de curvatura del borde de la esquina superior derecha 3
border-top-style border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit borderTopStyle n none Determina the style of the top border 1
border-top-width border-top-width: valor | thin | medium | thick | inherit borderTopWidth n medium Especifica la grosor de linea del borde superior 1
border-width border-width: valor | thin | medium | thick | inherit borderWidth n medium Especifica la anchura de los bordes 1

Caja (box)

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
box-shadow box-shadow: h-shadow v-shadow blur spread color inset; boxShadow n ninguno Asigna una o más sombras a la caja 3
bottom bottom : 5px; bottom n auto Especifica la posicion del borde inferior de un elemento posicionado, relativo a su elemento contenedor. 2
clear clear: left | right | both | none | inherit clear n none

Determina si un elemento puede estar al lado de otro(s) elemento(s) que lo preceden, o será desplazado (cleared) debajo de estos.

 1
clip clip:rect (arriba, derecha, abajo, izquierda) | auto | inherit clip n auto Recorta un elemento posicionado con "position : absolute;" No funciona si "overflow: visible". 2
display display: inline | block | inline-block | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | inherit display n inline Especifica el tipo de caja utilizado para un elemento 1
float float: left | right | none | inherit float n none Especifica si una caja (un elemento) debe flotar 1
height height: auto | altura | inherit height n auto Determina la altura de una caja 1
left left: auto | posición | inherit left n auto Especifica la posicion del borde izquierdo de un elemento posicionado, relativo a su elemento contenedor. 2
margin margin: valor(es); margin n 0 Establece todas las propiedades de los márgenes en una declaración abreviada. 1
margin-bottom margin-bottom: valor; marginBottom n   Establece el margen inferior de un elemento 1
margin-left margin-left: valor; marginLeft n   Establece el margen izquierdo de un elemento 1
margin-right margin-right: valor; marginRight n   Establece el margen derecho de un elemento 1
margin-top margin-top: valor; marginTop n   Establece el margen superior de un elemento 1
max-height max-height: valor; maxHeight n   Determina la altura máxima de un elemento 2
max-width max-width: valor; maxWidth n   Determina la anchura máxima de un elemento 2
min-height min-height: valor; minHeight n   Determina la altura mínima de un elemento 2
min-width min-width: valor; minWidth n   Determina la anchura mínima de un elemento 2
overflow
 overflow: visible | hidden | scroll | auto | inherit overflow n visible Especifica qué ocurre si el contenido se sale de la caja 2
overflow-x overflow-x: visible | hidden | scroll | auto | no-display | no-content; overflowX n visible

Especifica si hay que recortar el contenido en x ( en horizontal o sea: derecha/izquierda) si este se sale de la caja

 3
overflow-y overflow-y: visible | hidden | scroll | auto | no-display | no-content; overflowY n visible Especifica si hay que recortar el contenido en y ( en vertical o sea: arriba/abajo) si este se sale de la caja 3
padding padding: valor(es) padding n 0 Establece el relleno (padding) de una caja en una sola declaración abreviada 1
padding-bottom padding-bottom: valor; paddingBottom n 0 Establece el relleno inferior (padding-bottom) de un elemento. 1
padding-left padding-left: valor; paddingLeft n 0 Establece el relleno a la izquierda (padding-left) de una caja. 1
padding-right padding-right: valor; paddingRight n 0 Establece el relleno a la derecha (padding-right) de una caja. 1
padding-top padding-top: valor; paddingTop n 0 Establece el relleno superior (padding-top) de un elemento. 1
position position: static | relative |absolute | fixed position n static Especifica el método de posicionamiento utilizado para una caja: static, relative, absolute o fixed 2
right right: valor; right n auto Especifica la posicion del borde derecho de un elemento posicionado, relativo a su elemento contenedor. 2
top top: valor; top n auto Especifica la posicion del borde superior de un elemento posicionado, relativo a su elemento contenedor. 2
visibility visibility: visible | hidden | collapse | inherit visibility s visible Especifica si un elemento es visible o no 2
width width: valor; width n auto Determina la anchura de una caja 1
vertical-align vertical-align: valor | baseline | sub | super | top | text-top | middle | bottom | text-bottom verticalAlign n baseline Determina the vertical alignment of an element 1
z-index z-index: valor; zIndex n auto Especifica el orden de apilamiento de un elemento posicionado 2

Texto

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
text-decoration text-decoration: none | underline | overline | line-through | inherit textDecoration n none Especifica el tipo de decoración del texto 1
text-indent text-indent: valor | inherit textIndent s 0 Especifica la sangría de la primera línea en un bloque de texto 1
text-shadow text-shadow: desplazamiento-horizontal desplazamiento-vertical desenfoque color; textShadow s none Aplica una sombra al texto 3
text-transform text-transform: none | capitalize | uppercase | lowercase | inherit textTransform s none Controla el uso de mayúsculas y minúsculas en el texto 1
white-space white-space: normal | nowrap | pre | pre-wrap |inherit whiteSpace s normal Especifica cómo gestionar el espacio en blanco dentro de un elemento 1
word-break word-break: normal | break-all | keep-all; wordBreak s normal Especifica cuando los saltos de línea para alfabetos no CJK (chino, japonés y coreano) 3
word-spacing word-break: normal | valor | inherit wordSpacing s normal Aumenta o disminuye el espacio en blanco entre las palabras 1
word-wrap word-wrap: normal|break-word; wordWrap s normal Permite el ajuste automático de línea 3

Fuentes

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
font font: italic small-caps negrita arial 12px, sans-serif; font s   Establece todas las propiedades de fuente en una declaración abreviada 1
font-family font-family: Georgia, "Times New Roman", Times, serif fontFamily s   Establece la familia de fuentes para un elemento 1
font-size font-size: tamaño | xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | inherit fontSize s medium Establece el tamaño de fuente 1
font-style font-style: normal | italic | oblique | inherit fontStyle s normal Especifica el estilo de fuente para un texto 1
font-variant font-variant: normal | small-caps | inherit fontVariant s normal Especifica si un texto se debe mostrar en una fuente small-caps 1
font-weight font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit fontWeight s normal Establece el grosor de la fuente 1
@font-face @font-face /*ejemplo*/
{
font-family: nuevoTipoDeLetra;
src: url(letra1.woff);
font-weight:bold;
}		       Una regla que permite bajar y utilizar otros tipos de letra además de los "seguros para la Web" 3

Escribir

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
direction font-stretch: ltr | rtl | inherit direction s ltr Especifica la dirección del texto / escritura. 2
unicode-bidi unicode-bidi: normal | embed | bidi-override | inherit unicodeBidi s normal Se utiliza junto con la propiedad direction para establecer la dirección del texto 2

Tablas

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
border-collapse border-collapse: collapse | separate | inherit borderCollapse s separate Establece si los bordes de la tabla se colapsan o separan ( como en HTML estándar ). 2
border-spacing border-spacing: 10px 20px borderSpacing s   Especifica la distancia entre los bordes de las celdas adyacentes 2
caption-side caption-side: top | bottom | imherit captionSide s top Especifica la ubicación de un título (caption) de la tabla 2
empty-cells empty-cells: hide | show | inherit emptyCells s show Establece si se muestran o no los bordes y fondo de celdas vacías. 2
table-layout table-layout: auto | fixed | inherit tableLayout n auto Establece el algoritmo de diseño de tabla 2

Listas y Contadores

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
counter-increment counter-increment : none | id incremento | inherit counterIncrement n 1 Incrementauno o más contadores 2
counter-reset counter-reset : none | id incremento | inherit counterReset n none Crea o reinicia uno o más contadores 2
list-style list-style: tipo posición imagen | inherit listStyle s disc outside none Establece todas las propiedades de la lista en una sola declaración abreviada 1
list-style-image list-style-image:url("img.gif"); listStyleImage s   Especifica una imagen como viñeta para los elementos de la lista 1
list-style-position list-style-position: inside | outside | inherit; listStylePosition s outside Especifica si las viñetas deben aparecer dentro o fuera del flujo de contenido. 1
list-style-type list-style-type: armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | disc | georgian | hebrew | hiragana | hiragana-iroha | inherit | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | up listStyleType s disc Especifica el tipo de viñeta para los elementos de la lista 1

Animaciones CSS3

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
@keyframes @keyframes nombre_animacion
{ keyframes-selector {css-styles;}
}		       Con @keyframes podemos crear animaciones 3
animation animation: name duration timing-function delay iteration-count direction fill-mode play-state; animation n none 0 ease 0 1 normal none running Establece todas las propiedades de la animación en una sola declaración abreviada 3
animation-delay animation-delay: tiempo en segundos o milisegundos; animationDelay n 0 Define cuando la animación se iniciará 3
animation-direction animation-direction: normal | reverse | alternate | alternate-reverse; animationDirection n normal Define si la animación debe reproducirse hacia atrás o en ciclos alternos 3
animation-duration animation-duration: tiempo en segundos o milisegundos; animationDuration n 0 Define el número de segundos o milisegundos que la animación tarda en realizarse 3
animation-fill-mode animation-fill-mode: none|forwards|backwards|both; animationFillMode n   Especifica what values are applied by the animation outside the time it is executing 3
animation-iteration-count animation-iteration-count: n veces | infinite; animationIterationCount n 1 Define cuántas veces hay que reproducir la animación. 3
animation-name animation-name: nombre_animacion | none; animationName n   Especifica un nombre para la animación de @keyframes 3
animation-timing-function animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) animationTimingFunction n ease Especifica la curva de velocidad de la animación 3
animation-play-state animation-play-state: paused | running; animationPlayState n running Especifica si la animación está en ejecución o en pausa 3

Transformaciones

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
backface-visibility backface-visibility: visible|hidden; backfaceVisibility n visible Utilizado en elementos girados con rotate(), backface-visibility oculta la cara posterior del elemento 3
perspective perspective: value | none; perspective n none Especifica a que distáncia se encuentra un elemento girado en 3D con rotateX() o rotateY(). Esta propiedad permite cambiar la perspectiva 3
perspective-origin perspective-origin: x-axis y-axis; perspectiveOrigin n 50% 50% Derfine la position de origen de un elemento 3D 3
transform transform: none | transform-functions; transform n none Aplica una transformación (girar, mover, redimensionar, sesgar... ) 2D o 3D a un elemento 3
transform-origin transform-origin: x-axis y-axis z-axis; transformOrigin n 50% 50% 0 Permite cambiar la posición de los elementos transformados. 3
transform-style transform-style: flat|preserve-3d; transformStyle n flat Especifica how nested elements are rendered in 3D space 3

Transiciones

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
transition transition: property duration timing-function delay; transition n all 0 ease 0 Establece todas las propiedades de la transición en una sola declaración abreviada 3
transition-property transition-property: none | all | property; transitionProperty n none Especifica el nombre de la propiedad CSS que se verá afectada por la transición 3
transition-duration transition-duration: tiempo en segundos o milisegundos; transitionDuration n 0 Especifica cuántos segundos (s) o milisegundos (ms) tarda la transición en realizarse 3
transition-timing-function transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n); transitionTimingFunction n ease Especifica la curva de velocidad de la transición 3
transition-delay transition-delay: tiempo en segundos o milisegundos; transitionDelay n 0 Especifica when the transition effect will start 3

Interfaz de usuario

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
box-sizing box-sizing : content-box | border-box | inherit; boxSizing n content-box Nos permite escoger el modelo de caja que deseamos (content-box o border-box ) 3
content content: cadena de texto | none | normal | counter | attr(atributo) | open-quote | close-quote | no-open-quote | no-close-quote | url(url) | inherit | content n normal Utilizada con los pseudo-elementos :before y :after para generar e insertar contenido 2
cursor cursor: alias | all-scroll | auto | cell | context-menu | col-resize | copy | crosshair | default | e-resize | ew-resize | help | move | n-resize | ne-resize | nesw-resize | ns-resize | nw-resize | nwse-resize | no-drop | none | not-allowed | pointer | pr cursor s auto Especifica the type of cursor to be displayed 2
outline outline: 1px solid #000; outline n medium invert none La propiedad outline (contorno) dibuja una línea fuera de los bordes para destacar el elemento 2
outline-color outline-color: color | invert |inherit; outlineColor n invert Determina el color del contorno (outline) 2
outline-offset outline-offset: distancia | inherit: outlineOffset n 0 Desplaza (offsets) el contorno (outline) y lo dibuja más allá del borde 3
outline-style outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit outlineStyle n none Determina el estilo de línea del contorno 2
outline-width outline-width: thin | medium | thick | valor | inherit outlineWidth n medium Especifica la grosor de linea del contorno 2
resize resize: none | both | horizontal | vertical; resize n none Especifica si un elemento puede ser redimensionado por el usuario 3
text-overflow text-overflow: clip | ellipsis | cadena de texto textOverflow n clip Especifica what should happen when text overflows the containing element 3

Columnas múltiples

Propiedad Sintaxis JavaScript heredado defecto Descripción CSS
column-count column-count: numero | auto; columnCount n auto Especifica en cuantas columnas debe dividirse un elemento 3
column-gap column-gap: valor | normal; columnGap n nornal Especifica el espacio entre las columnas. 3
column-rule column-rule: column-rule-width column-rule-style column-rule-color; columnRule n medium none #000 Establece todas las propiedades de la línea entre columnas (column-rule-*) en una sola declaración abreviada 3
column-rule-color column-rule-color: color; columnRuleColor n #000 Especifica el color de la línea entre colomnas 3
column-rule-style column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset columnRuleStyle n none Especifica el estilo de línea utilizado entre columnas 3
column-rule-width column-rule-width: valor | thin | medium | thick ; columnRuleWidth n madium Especifica el ancho de línea utilizado entre columnas 3
column-span column-span: 1 | all; columnSpan n 1 Especifica a lo largo de cuantas columnas tendría que extenderse un elemento 3
column-width column-width: auto | valor; columnWidth n auto Especifica el ancho de las columnas 3
columns columns: column-width column-count; columns n auto auto Establece las propiedades column-width y column-count en una sola declaración abreviada 3