17/2/2017 Referencia CSS3

w3.unpo<code>todo

PUBLICIDAD:
Advertisement

&NBSP;

Referencia CSS3

Color
Fondo (background)
Borde (border)
Caja (box)
Texto

Fuentes
Escribir
Tablas
Listas y Contadores
Animaciones CSS3

Transformaciones
Transiciones
Interfaz de usuario
Columnas múltiples

Color
Propiedad

color
Sintaxis

color:color;
Descripción

Determina el color del texto

⇪ CSS

3
opacity opacity: valor | inherit; Determina el nivel de opacidad de un elemento

Fondo (background)
http://w3.unpocodetodo.info/css3/chuletacss3.php 1/10
17/2/2017 Referencia CSS3

Propiedad Sintaxis Descripción CSS

background: color position / size repeat origin Determina todas las propiedades del fondo en

background 1
clip attachment image; una sola declaración

background- Determina si la imagen de fondo es ²ja (²xed) o

background­attachment: scroll | fixed | local 1
attachment puede desplasarse (scroll) con la página

background-
background­color: color Determina el color de fondo de un elemento 1
color

background-
background­image:"url(img.gif)" | none Determina la imagen de fondo de un elemento 1
image

background- Determina la posición inicial de la imagen de

background­position: x y 1
position fondo

background- background­repeat: repeat | repeat­x | repeat­ Determina si la imagen es repetida y de que

1
repeat y | no­repeat | inherit manera

background- background­clip: border­box | padding­box | Especi²ca el área afectada por el color del 3

clip content­box; fondo

background- background­origin: padding­box | border­box Especi²ca donde posicionar la imagen de fondo 3

origin |content­box; y relativamente a que

background- background­size: length|percentage | cover | 3
Especi²ca el tamaño de la imagen de fondo
size contain;

Borde (border)
Propiedad Sintaxis Descripción CSS

Especi²ca todas las propiedades del borde en

border border:1px solid red; 1
una solo declaración abreviada

border-bottom border­bottom:1px solid red; Especi²ca el estilo del borde inferior. 1

border-bottom-
border­bottom­color: color Especi²ca el color del borde inferior 1
color

border-bottom- Especi²ca el radio (los radios) de curvatura del 3

border­bottom­left­radius: r [r1];
left-radius borde de la esquina inferior izquierda.

border-bottom- Especi²ca el radio (los radios) de curvatura del 3

border­bottom­right­radius: r [r1];
right-radius borde de la esquina inferior derecha.

border­bottom­style: none | hidden | dotted |
border-bottom-
dashed | solid | double | groove | ridge | inset | Especi²ca el tipo de linea del borde inferior. 1
style
outset | inherit

border-bottom- border­bottom­width: thin | medium | thick |
Determina la anchura del borde inferior 1
width length | inherit

border-color   Determina el color del borde 1

border-image border­image:url(border.png) 30 30 round;
* en una solo declaración abreviada ⇪
Especi²ca todas las propiedades border-image- 3

border-image- Especi²ca la desviación de la imagen utilizada 3

border­image­outset: 5px;
outset para el borde, relativamente al limite de la caja

border-image- 3
border­image­repeat: stretch|repeat|round; Especi²ca cómo se repite la imagen de borde
repeat

http://w3.unpocodetodo.info/css3/chuletacss3.php 2/10
17/2/2017 Referencia CSS3

Propiedad Sintaxis Descripción CSS

border-image- Especi²ca el desplazamiento hacia el interior de 3

border­image­slice: 30;
slice la imagen de borde

border-image- Especi²ca una imagen que se utilizará para el 3

border­image­source: url(border.png);
source borde

border-image- Especi²ca la anchura de la imagen utilizada para 3

border­image­width: 10px;
width el borde

Especi²ca todas las propiedades borde

border-left border­left: 1px solid black 1
izquierdo en una solo declaración abreviada

border-left-
border­left­color: valor Especi²ca el color del borde izquierdo 1
color

border­left­style: none | hidden | dotted |
border-left- Especi²ca el tipo de linea para el borde
dashed | solid | double | groove | ridge | inset | 1
style izquierdo
outset | inherit

border-left- border­left­width: : valor | thin | medium |
Determina la anchura del borde izquierdo 1
width thick | inherit

Especi²ca el radio (los radios) de curvatura del

3
border-radius border­radius: valor(es) borde de todas las esquinas en una solo
declaración abreviada

Especi²ca todas las propiedades borde derecho

border-right border­right: 1px solid black 1
en una solo declaración abreviada

border-right-
border­right­color: color Especi²ca el color del borde derecho 1
color

border-right- border­right­style: none | hidden | dotted |
dashed | solid | double | groove | ridge | inset | Especi²ca el tipo de linea del borde derecho 1
style
outset | inherit

border-right- border­right­width: : valor | thin | medium |
Especi²ca la anchura del borde derecho 1
width thick | inherit

border­style: none | hidden | dotted | dashed |
border-style solid | double | groove | ridge | inset | outset | Especi²ca el tipo de linea del borde 1
inherit

Especi²ca todas las propiedades borde superior

border-top border­top: 1px solid black 1
en una solo declaración abreviada

border-top-
border­top­color: color Especi²ca el color del borde superior 1
color

border-top- Especi²ca el radio (los radios) de curvatura del 3

border­top­left­radius: valor(es)
left-radius borde de la esquina superior izquierda

border-top- Especi²ca el radio (los radios) de curvatura del 3

border­top­right­radius: valor(es)
right-radius borde de la esquina superior derecha

⇪
border­top­style: none | hidden | dotted |
border-top-
dashed | solid | double | groove | ridge | inset | Determina the style of the top border 1
style
outset | inherit

border-top- border­top­width: valor | thin | medium | thick
Especi²ca la grosor de linea del borde superior 1
width | inherit

border­width: valor | thin | medium | thick |
border-width Especi²ca la anchura de los bordes 1
inherit

Caja (box)
http://w3.unpocodetodo.info/css3/chuletacss3.php 3/10
17/2/2017 Referencia CSS3

Caja (box)
Propiedad Sintaxis Descripción CSS

box­shadow: h­shadow v­shadow blur spread 3
box-shadow Asigna una o más sombras a la caja
color inset;

Especi²ca la posicion del borde inferior de un

bottom bottom : 5px; elemento posicionado, relativo a su elemento 2
contenedor.

Determina si un elemento puede estar al lado

de otro(s) elemento(s) que lo preceden, o será
clear clear: left | right | both | none | inherit 1
desplazado (cleared) debajo de estos.

clip:rect (arriba, derecha, abajo, izquierda) | Recorta un elemento posicionado con "position

clip 2
auto | inherit : absolute;" No funciona si "over³ow: visible".

display: inline | block | inline­block | inline­
table | list­item | run­in | table | table­caption |
Especi²ca el tipo de caja utilizado para un
display table­column­group | table­header­group | 1
elemento
table­footer­group | table­row­group | table­
cell | table­column | table­row | none | inherit

0oat float: left | right | none | inherit Especi²ca si una caja (un elemento) debe ³otar 1

height height: auto | altura | inherit Determina la altura de una caja 1

Especi²ca la posicion del borde izquierdo de un

left left: auto | posición | inherit elemento posicionado, relativo a su elemento 2
contenedor.

Establece todas las propiedades de los

margin margin: valor(es); 1
márgenes en una declaración abreviada.

margin-bottom margin­bottom: valor; Establece el margen inferior de un elemento 1

margin-left margin­left: valor; Establece el margen izquierdo de un elemento 1

margin-right margin­right: valor; Establece el margen derecho de un elemento 1

margin-top margin­top: valor; Establece el margen superior de un elemento 1

max-height max­height: valor; Determina la altura máxima de un elemento 2

max-width max­width: valor; Determina la anchura máxima de un elemento 2

min-height min­height: valor; Determina la altura mínima de un elemento 2

min-width min­width: valor; Determina la anchura mínima de un elemento 2

overflow: visible | hidden | scroll | auto | Especi²ca qué ocurre si el contenido se sale de

over0ow 2
inherit la caja

Especi²ca si hay que recortar el contenido en x

⇪
overflow­x: visible | hidden | scroll | auto | no­ ( en horizontal o sea: derecha/izquierda) si este 3
over0ow-x
display | no­content; se sale de la caja

Especi²ca si hay que recortar el contenido en y

overflow­y: visible | hidden | scroll | auto | no­ 3
over0ow-y ( en vertical o sea: arriba/abajo) si este se sale
display | no­content;
de la caja

Establece el relleno (padding) de una caja en

padding padding: valor(es) 1
una sola declaración abreviada

http://w3.unpocodetodo.info/css3/chuletacss3.php 4/10
17/2/2017 Referencia CSS3

Propiedad Sintaxis Descripción CSS

padding- Establece el relleno inferior (padding-bottom)

padding­bottom: valor; 1
bottom de un elemento.

Establece el relleno a la izquierda (padding-left)

padding-left padding­left: valor; 1
de una caja.

Establece el relleno a la derecha (padding-right)

padding-right padding­right: valor; 1
de una caja.

Establece el relleno superior (padding-top) de

padding-top padding­top: valor; 1
un elemento.

Especi²ca el método de posicionamiento

position position: static | relative |absolute | fixed utilizado para una caja: static, relative, absolute 2
o ²xed

Especi²ca la posicion del borde derecho de un

right right: valor; elemento posicionado, relativo a su elemento 2
contenedor.

Especi²ca la posicion del borde superior de un

top top: valor; elemento posicionado, relativo a su elemento 2
contenedor.

visibility visibility: visible | hidden | collapse | inherit Especi²ca si un elemento es visible o no 2

width width: valor; Determina la anchura de una caja 1

vertical-align vertical­align: valor | baseline | sub | super | Determina the vertical alignment of an element 1

top | text­top | middle | bottom | text­bottom

Especi²ca el orden de apilamiento de un

z-index z­index: valor; 2
elemento posicionado

Texto
Propiedad Sintaxis Descripción CSS

text­decoration: none | underline | overline |
text-decoration Especi²ca el tipo de decoración del texto 1
line­through | inherit

Especi²ca la sangría de la primera línea en un

text-indent text­indent: valor | inherit 1
bloque de texto

text­shadow: desplazamiento­horizontal 3
text-shadow Aplica una sombra al texto
desplazamiento­vertical desenfoque color;

text­transform: none | capitalize | uppercase | Controla el uso de mayúsculas y minúsculas en

text-transform 1
lowercase | inherit el texto

white­space: normal | nowrap | pre | pre­ Especi²ca cómo gestionar el espacio en blanco

white-space 1
wrap |inherit dentro de un elemento

Especi²ca cuando los saltos de línea para 3

⇪
word-break word­break: normal | break­all | keep­all;
alfabetos no CJK (chino, japonés y coreano)

Aumenta o disminuye el espacio en blanco

word-spacing word­break: normal | valor | inherit 1
entre las palabras

3
word-wrap word­wrap: normal|break­word; Permite el ajuste automático de línea

Fuentes
http://w3.unpocodetodo.info/css3/chuletacss3.php 5/10
17/2/2017 Referencia CSS3

Fuentes
Propiedad Sintaxis Descripción CSS

font: italic small­caps negrita arial 12px, sans­ Establece todas las propiedades de fuente en

font 1
serif; una declaración abreviada

font­family: Georgia, "Times New Roman", Establece la familia de fuentes para un

font-family 1
Times, serif elemento

font­size: tamaño | xx­small | x­small | small |
font-size medium | large | x­large | xx­large | smaller | Establece el tamaño de fuente 1
larger | inherit

font-style font­style: normal | italic | oblique | inherit Especi²ca el estilo de fuente para un texto 1

Especi²ca si un texto se debe mostrar en una

font-variant font­variant: normal | small­caps | inherit 1
fuente small-caps

font­weight: normal | bold | bolder | lighter |
font-weight 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | Establece el grosor de la fuente 1
900 | inherit

@font­face /*ejemplo*/
{
font­family: nuevoTipoDeLetra; Una regla que permite bajar y utilizar otros tipos 3
@font-face
src: url(letra1.woff); de letra además de los "seguros para la Web"
font­weight:bold;
}

Escribir
Propiedad Sintaxis Descripción CSS

direction font­stretch: ltr | rtl | inherit Especi²ca la dirección del texto / escritura. 2

unicode­bidi: normal | embed | bidi­override | Se utiliza junto con la propiedad direction para

unicode-bidi 2
inherit establecer la dirección del texto

Tablas
Propiedad Sintaxis Descripción CSS

Establece si los bordes de la tabla se colapsan o

border-collapse border­collapse: collapse | separate | inherit 2
separan ( como en HTML estándar ).

Especi²ca la distancia entre los bordes de las

border-spacing border­spacing: 10px 20px 2
celdas adyacentes

Especi²ca la ubicación de un título (caption) de

caption-side caption­side: top | bottom | imherit 2
la tabla

Establece si se muestran o no los bordes y

empty-cells empty­cells: hide | show | inherit 2
fondo de celdas vacías.

table-layout table­layout: auto | fixed | inherit ⇪
Establece el algoritmo de diseño de tabla 2

Listas y Contadores
Propiedad Sintaxis Descripción CSS

http://w3.unpocodetodo.info/css3/chuletacss3.php 6/10
17/2/2017 Referencia CSS3

counter- counter­increment : none | id incremento | Incrementauno o más contadores 2

increment inherit

counter-reset counter­reset : none | id incremento | inherit Crea o reinicia uno o más contadores 2

Establece todas las propiedades de la lista en

list-style list­style: tipo posición imagen | inherit 1
una sola declaración abreviada

Especi²ca una imagen como viñeta para los

list-style-image list­style­image:url("img.gif"); 1
elementos de la lista

list-style- Especi²ca si las viñetas deben aparecer dentro

list­style­position: inside | outside | inherit; 1
position o fuera del ³ujo de contenido.

list­style­type: armenian | circle | cjk­
ideographic | decimal | decimal­leading­zero |
disc | georgian | hebrew | hiragana | Especi²ca el tipo de viñeta para los elementos
list-style-type 1
hiragana­iroha | inherit | katakana | de la lista
katakana­iroha | lower­alpha | lower­greek |
lower­latin | lower­roman | none | square | up

Animaciones CSS3
Propiedad Sintaxis Descripción CSS

@keyframes nombre_animacion 3
@keyframes { keyframes­selector {css­styles;} Con @keyframes podemos crear animaciones
}

animation: name duration timing­function Establece todas las propiedades de la 3

animation delay iteration­count direction fill­mode play­ animación en una sola declaración abreviada
state;

animation- animation­delay: tiempo en segundos o 3
De²ne cuando la animación se iniciará
delay milisegundos;

animation- animation­direction: normal | reverse | De²ne si la animación debe reproducirse hacia 3

direction alternate | alternate­reverse; atrás o en ciclos alternos

animation- animation­duration: tiempo en segundos o De²ne el número de segundos o milisegundos 3

duration milisegundos; que la animación tarda en realizarse

animation-zll- animation­fill­mode: Especi²ca what values are applied by the 3

mode none|forwards|backwards|both; animation outside the time it is executing

animation- De²ne cuántas veces hay que reproducir la 3

animation­iteration­count: n veces | infinite;
iteration-count animación.

animation- Especi²ca un nombre para la animación de 3

animation­name: nombre_animacion | none;
name @keyframes

animation- animation­timing­function: linear | ease | Especi²ca la curva de velocidad de la 3

ease­in | ease­out | ease­in­out | cubic­
timing-function animación
bezier(n,n,n,n)

⇪
animation- Especi²ca si la animación está en ejecución o en 3
animation­play­state: paused | running;
play-state pausa

Transformaciones
Propiedad Sintaxis Descripción CSS

http://w3.unpocodetodo.info/css3/chuletacss3.php 7/10
17/2/2017 Referencia CSS3

Utilizado en elementos girados con rotate(),

backface-
backface­visibility: visible|hidden; backface-visibility oculta la cara posterior del 3
visibility
elemento

Especi²ca a que distáncia se encuentra un

perspective perspective: value | none; elemento girado en 3D con rotateX() o rotateY(). 3
Esta propiedad permite cambiar la perspectiva

perspective-
perspective­origin: x­axis y­axis; Der²ne la position de origen de un elemento 3D 3
origin

Aplica una transformación (girar, mover,

3
transform transform: none | transform­functions; redimensionar, sesgar... ) 2D o 3D a un
elemento

transform- Permite cambiar la posición de los elementos 3

transform­origin: x­axis y­axis z­axis;
origin transformados.

Especi²ca how nested elements are rendered in 3

transform-style transform­style: flat|preserve­3d;
3D space

Transiciones
Propiedad Sintaxis Descripción CSS

transition: property duration timing­function Establece todas las propiedades de la transición 3

transition
delay; en una sola declaración abreviada

transition- Especi²ca el nombre de la propiedad CSS que 3

transition­property: none | all | property;
property se verá afectada por la transición

transition- transition­duration: tiempo en segundos o Especi²ca cuántos segundos (s) o milisegundos 3

duration milisegundos; (ms) tarda la transición en realizarse

transition- transition­timing­function: linear | ease | ease­ 3
in | ease­out | ease­in­out | cubic­ Especi²ca la curva de velocidad de la transición
timing-function
bezier(n,n,n,n);

transition­delay: tiempo en segundos o 3
transition-delay Especi²ca when the transition effect will start
milisegundos;

Interfaz de usuario
Propiedad Sintaxis Descripción CSS

Nos permite escoger el modelo de caja que 3

box-sizing box­sizing : content­box | border­box | inherit;
deseamos (content-box o border-box )

content: cadena de texto | none | normal |
counter | attr(atributo) | open­quote | close­ Utilizada con los pseudo-elementos :before y
content 2
quote | no­open­quote | no­close­quote | :after para generar e insertar contenido
url(url) | inherit |

cursor: alias | all­scroll | auto | cell | context­

cursor
menu | col­resize | copy | crosshair | default |
e­resize | ew­resize | help | move | n­resize |
ne­resize | nesw­resize | ns­resize | nw­resize |
⇪
Especi²ca the type of cursor to be displayed 2
nwse­resize | no­drop | none | not­allowed |
pointer | pr

La propiedad outline (contorno) dibuja una línea

outline outline: 1px solid #000; 2
fuera de los bordes para destacar el elemento

http://w3.unpocodetodo.info/css3/chuletacss3.php 8/10
17/2/2017 Referencia CSS3

Propiedad Sintaxis Descripción CSS

outline-color outline­color: color | invert |inherit; Determina el color del contorno (outline) 2

Desplaza (offsets) el contorno (outline) y lo

outline-offset outline­offset: distancia | inherit: 3
dibuja más allá del borde

outline­style: none | hidden | dotted | dashed |
outline-style solid | double | groove | ridge | inset | outset | Determina el estilo de línea del contorno 2
inherit

outline­width: thin | medium | thick | valor |
outline-width Especi²ca la grosor de linea del contorno 2
inherit

Especi²ca si un elemento puede ser 3

resize resize: none | both | horizontal | vertical;
redimensionado por el usuario

Especi²ca what should happen when text 3

text-over0ow text­overflow: clip | ellipsis | cadena de texto
over³ows the containing element

Columnas múltiples
Propiedad Sintaxis Descripción CSS

Especi²ca en cuantas columnas debe dividirse 3

column-count column­count: numero | auto;
un elemento

column-gap column­gap: valor | normal; Especi²ca el espacio entre las columnas. 3

Establece todas las propiedades de la línea

column­rule: column­rule­width column­rule­
column-rule entre columnas (column-rule-*) en una sola 3
style column­rule­color;
declaración abreviada

column-rule-
column­rule­color: color; Especi²ca el color de la línea entre colomnas 3
color

column­rule­style: none | hidden | dotted |
column-rule- Especi²ca el estilo de línea utilizado entre
dashed | solid | double | groove | ridge | inset | 3
style columnas
outset

column-rule- column­rule­width: valor | thin | medium | Especi²ca el ancho de línea utilizado entre

3
width thick ; columnas

Especi²ca a lo largo de cuantas columnas

column-span column­span: 1 | all; 3
tendría que extenderse un elemento

column-width column­width: auto | valor; Especi²ca el ancho de las columnas 3

Establece las propiedades column-width y

3
columns columns: column­width column­count; column-count en una sola declaración
abreviada

Artículos relacionados ⇪
- Referencia CSS3
- Selectores CSS

PUBLICIDAD:

http://w3.unpocodetodo.info/css3/chuletacss3.php 9/10
17/2/2017 Referencia CSS3

w3.unpo<code>todo.info utiliza una estructura generada con foundation

http://w3.unpocodetodo.info/css3/chuletacss3.php 10/10