Referencia CSS3
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 |