NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Referéncia CSS : Propiedades

27 de Junio del 2013 por Josep Antoni Bover, 5496 visitas, 4 comentarios, 10 votos con una media de 4.7 sobre 5.
Categorías : CSS, HTML, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Referéncia CSS : Propiedades

El corazón que hace funcionar el CSS son sin duda sus propiedades, las cuales nos permiten modificar tanto el comportamiento como el aspecto gráfico de cualquier etiqueta.

A partir de CSS3 la lista de propiedades ha crecido de forma significativa, y aunque no hay ningún navegador que las soporte todas, la mayoría de navegadores actuales empiezan a soportar una gran cantidad de ellas.

Es posible que esta lista no abarque todas las propiedades existentes, ya que a día de hoy aun se siguen añadiendo nuevas propiedades, por lo que voy a intentar mantener la lista actualizada, y tener cada propiedad que funcione en algún navegador documentada y con algún ejemplo.

Las propiedades tachadas no están soportadas en ningún navegador.

Animación

PropiedadDescripciónNavegadoresCSS
animationPropiedad corta para todas las propiedades de la animación, excepto para "animation-play-state".3
animation-delayEspecifica un retraso para empezar la animación.3
animation-directionEspecifica si la animación es unicamente lineal, o se debe invertir al terminar.3
animation-durationEspecifica el tiempo que se invertirá en la animación desde el 0% hasta el 100%.3
animation-fill-modeEspecifica como se trataran los estilos al iniciar y terminar la animación.3
animation-iteration-countEspecifica el numero de veces que se repetirá la animación.3
animation-nameEspecifica el nombre de la animación.3
animation-play-stateEspecifica si la animación está activa o no.3
animation-timing-functionEspecifica la curva de velocidad que se usara para la animación.3

Bordes

PropiedadDescripciónNavegadoresCSS
borderPropiedad corta que nos permite asignar el tamaño, color y tipo de borde.1
border-bottomPropiedad corta que nos permite asignar el tamaño, color y tipo del borde inferior.1
border-bottom-colorEspecifica el color del borde de la parte inferior.2
border-bottom-left-radiusDefine la figura del borde inferior izquierdo.3
border-bottom-right-radiusDefine la figura del borde inferior derecho.3
border-bottom-styleEspecifica el estilo del borde de la parte inferior.2
border-bottom-widthEspecifica el tamaño del borde de la parte inferior.1
border-colorEspecifica el color del borde.1
border-imagePropiedad corta que nos permite especificar las propiedades url, slice, y repeat de border-image.3
border-image-outsetEspecifica el tamaño del borde exterior del borde con imagen.3
border-image-repeatEspecifica como se va a adaptar la imagen origen al borde.3
border-image-sliceEspecifica la porción de la imagen origen que se va a utilizar para el borde.3
border-image-sourceEspecifica la ruta de la imagen que se utilizará para el borde.3
border-image-widthEspecifica el tamaño en el que se dividirá la imagen origen.3
border-leftPropiedad corta que nos permite asignar el tamaño, color y tipo del borde inferior.1
border-left-colorEspecifica el color del borde de la parte izquierda.2
border-left-styleEspecifica el estilo del borde de la parte izquierda.2
border-left-widthEspecifica el tamaño del borde de la parte izquierda.1
border-radiusPropiedad corta que nos permite definir como redondear los bordes del objeto.3
border-rightPropiedad corta que nos permite asignar el tamaño, color y tipo del borde inferior.1
border-right-colorEspecifica el color del borde de la parte derecha.2
border-right-styleEspecifica el estilo del borde de la parte derecha.2
border-right-widthEspecifica el tamaño del borde de la parte derecha.1
border-topPropiedad corta que nos permite asignar el tamaño, color y tipo del borde superior.1
border-top-colorEspecifica el color del borde de la parte superior.2
border-top-left-radiusDefine la figura del borde superior izquierdo.3
border-top-right-radiusDefine la figura del borde superior derecho.3
border-top-styleEspecifica el estilo del borde de la parte superior.2
border-top-widthEspecifica el tamaño del borde de la parte superior.1
border-widthEspecifica el tamaño del borde.1

Cajas / Contenedores

PropiedadDescripciónNavegadoresCSS
box-shadowDefine una o más sombras para la caja / contenedor.3
break-after
3
break-before
3
break-inside
3
overflowDefine como se debe tratar el contenido que sobresale del contenedor.2
overflow-xDefine como se debe tratar el contenido que sobresale por la derecha o izquierda del contenedor.2
overflow-yDefine como se debe tratar el contenido que sobresale por la arriba o abajo del contenedor.2

Cajas Flexibles

PropiedadDescripciónNavegadoresCSS
align-content
3
align-items3
align-self
3
box-decoration-breakEspecifica como tratar un contenedor cuando este no cabe por completo en su contenedor padre.
3
flexPropiedad corta para las propiedades flex-grow, flex-shrink, y flex-basis.3
flex-basisEspecifica el tamaño base de un flex-item.3
flex-directionEspecifica el eje y la dirección de un contenedor flex.
3
flex-flowPropiedad corta para flex-direction y flex-wrap.3
flex-growEspecifica el factor de crecimiento para un flex-item.3
flex-shrinkEspecifica el factor de contracción para un flex-item.
3
flex-wrapEspecifica si los objetos hijos deben permanecer en la misma línea.3
justify-content
3
orderEspecifica el orden de un flex-item dentro de un contenedor flex.
3

Color

PropiedadDescripciónNavegadoresCSS
opacityEspecifica la altura maxima para el objeto.3

Columnas

PropiedadDescripciónNavegadoresCSS
columns3
columns-count3
columns-fill3
columns-gap3
columns-rule3
columns-rule-color3
columns-rule-style3
columns-rule-width3
columns-span3
columns-width3

Contenido de paginas

PropiedadDescripciónNavegadoresCSS
hyphens
3
marks
3

Contenido generado

PropiedadDescripciónNavegadoresCSS
content2
counter-increment2
counter-reset2
quotes
2

Contorno

PropiedadDescripciónNavegadoresCSS
outlinePropiedad corta que nos permite asignar el tamaño, el color, y el estilo del contorno / borde exterior.2
outline-colorEspecifica el color del contorno / borde exterior.2
outline-offsetEspecifica la distancia entre el borde interior y el contorno / borde exterior.
2
outline-styleEspecifica el estilo del contorno / borde exterior.2
outline-widthEspecifica la distancia entre el borde interior y el contorno / borde exterior.2

Fondo

PropiedadDescripciónNavegadoresCSS
backgroundPropiedad corta que permite asignar todas las propiedades del fondo en una declaración.1
background-attachmentEspecifica como tratar el fondo al hacer scroll.1
background-clipEspecifica el area de pintado para el fondo.3
background-colorEspecifica el color del fondo.1
background-imageEspecifica la url para la imagen de fondo.1
background-originEspecifica la posición donde empezara la imagen de fondo.3
background-positionEspecifica la posición inicial para la imagen de fondo.1
background-repeatEspecifica si la imagen del fondo debe repetirse.1
background-sizeEspecifica el tamaño de la imagen de fondo.3

Fuentes

PropiedadDescripciónNavegadoresCSS
fontPropiedad corta que permite especificar las propiedades font-family, font-size, font-style, font-weight, y line-height.1
font-familyEspecifica el nombre de la fuente.1
font-feature-settings
3
font-sizeEspecifica el tamaño del texto.1
font-size-adjustEspecifica un tamaño de ajuste por si no es posible cargar la fuente por defecto.
3
font-stretchEspecifica una font-family normal, condensada o expandida.
3
font-styleEspecifica el estilo con el que se mostrará el texto.1
font-variantEspecifica si se usaran caracteres en mayusculas y minusculas normalmente, o solo mayusculas con un tamaño distinto.1
font-weightEspecifica el grosor con el que se pintara el texto.1

Imagen

PropiedadDescripciónNavegadoresCSS
image-rendering
4
image-orientation
3

Impresión

PropiedadDescripciónNavegadoresCSS
orphans
3
page-break-after2
page-break-before2
page-break-inside2
widows
3

Interfaz

PropiedadDescripciónNavegadoresCSS
box-sizingEspecifica si el pading y el borde están incluidos en el calculo final de width y height3
cursor2
filter
3
icon
3
ime-mode
3
resize
3
user-selectPropiedad que permite evitar la selección con el mouse.3

Margen

PropiedadDescripciónNavegadoresCSS
marginPropiedad corta que permite especificar todos los margenes.1
margin-bottomEspecifica el margen inferior.1
margin-leftEspecifica el margen izquierdo.1
margin-rightEspecifica el margen derecho.1
margin-topEspecifica el margen superior.1

Lista

PropiedadDescripciónNavegadoresCSS
list-stylePropiedad corta que permite especificar todos los estilos de la lista.2
list-style-imageEspecifica una imagen externa para el marcador de los items.2
list-style-positionEspecifica la posición donde se insertará el marcador de los items.2
list-style-typeEspecifica el tipo de marcador que se utilizara para los items.2

Posición

PropiedadDescripciónNavegadoresCSS
bottomEspecifica la posición partiendo desde la parte inferior.2
clearEspecifica que elementos flotantes son permitidos a continuación.1
clipEspecifica que área debe mostrarse en elementos con posición absoluta.2
displayEspecifica como se muestra el objeto.1
floatEspecifica si el elemento es flotante, y hacia que lado se decanta.1
leftEspecifica la posición partiendo desde la parte izquierda.2
positionEspecifica el tipo de posicionamiento para el objeto.2
rightEspecifica la posición partiendo desde la parte derecha.2
topEspecifica la posición partiendo desde la parte superior.2
visibilityEspecifica si el objeto es visible, y reserva su espacio aunque no sea visible.2

Relleno

PropiedadDescripciónNavegadoresCSS
paddingPropiedad corta que permite especificar todas las propiedades del relleno.1
padding-bottomEspecifica el relleno inferior.1
padding-leftEspecifica el relleno de la parte izquierda.1
padding-rightEspecifica el relleno de la parte derecha.1
padding-topEspecifica el relleno superior.1

SVG

PropiedadDescripciónNavegadoresCSS
mask
3
mask-type
3
pointer-events3
text-rendering
3

Tabla

PropiedadDescripciónNavegadoresCSS
border-collapseEspecifica si se pintara el borde unido con todas las celdas, o si se pintara para cada celda.2
border-spacingEspecifica el espacio entre celdas.2
border-styleEspecifica el estilo del borde.1
caption-sideEspecifica donde se posicionará el titulo de la tabla.3
empty-cellsEspecifica si se deben pintar los bordes y fondos de las celdas vacias.1
table-layoutEspecifica el algoritmo que se usará para calcular el tamaño de las columnas.3

Tamaño

PropiedadDescripciónNavegadoresCSS
heightEspecifica la altura para el objeto.1
max-heightEspecifica la altura maxima para el objeto.2
max-widthEspecifica el ancho maximo para el objeto.2
min-heightEspecifica la altura minima para el objeto.2
min-widthEspecifica el ancho minimo para el objeto.2
widthEspecifica la altura para el objeto.1

Texto

PropiedadDescripciónNavegadoresCSS
colorEspecifica el color para el texto.1
directionEspecifica la dirección hacia donde se escribirá el texto.2
letter-spacingEspecifica la separación entre cada caracter de un texto.1
line-heightEspecifica la separación entre las líneas de un texto.1
tab-sizeEspecifica los espacios que tiene cada tabulación en el objeto.
3
text-alignEspecifica la alineación del texto.3
text-align-lastEspecifica la alineación para la última línea.
3
text-decorationEspecifica la decoración del texto.1
text-decoration-colorEspecifica el color para la decoración del texto.
3
text-decoration-lineEspecifica que tipo de lineas se muestran en la decoración.
3
text-decoration-styleEspecifica el estilo de las lineas que se muestran en la decoración.
3
text-indentEspecifica el tamaño de la sangría dentro de un bloque de texto.1
text-justifyEspecifica el método que se utilizará para justificar el texto.
3
text-overflowEspecifica como se tratara el texto si está parcialmente oculto.1
text-shadowEspecifica la sombra para el texto.3
text-transformEspecifica la transformación para el texto : Mayúsculas, Minúsculas, Primera letra de cada palabra mayúscula.1
text-underline-position
3
unicode-bidiEspecifica junto con la propiedad direction hacia donde se escribe el texto. (para páginas con multiples idiomas)2
unicode-range
3
vertical-alignEspecifica como debe alinearse verticalmente el objeto.1
white-spaceEspecifica como se tratan los espacios en blanco del texto.2
word-breakEspecifica como se deben cortar las lineas de texto (al final de la palabra o al final de una letra).3
word-spacingEspecifica el espacio entre palabras.1
word-wrapEspecifica si se deben cortar forzosamente las palabras que excedan el ancho del objeto.1
z-indexEspecifica el orden en el que aparecen las capas / objetos que se sobreponen entre ellos.2

Transformaciones

PropiedadDescripciónNavegadoresCSS
backface-visibilityEstablece si la parte trasera de un objeto 3D debe ser visible.3
perspectiveEspecifica la perspectiva 3D con la que se mostrarán sus hijos.3
perspective-originEspecifica la posición 3D de la perspectiva con la que se mostrarán sus hijos.3
transformEspecifica una o varias transformaciones en 2d y en 3d.3
transform-originEspecifica la posición del elemento transformado.3
transform-styleEspecifica el estilo del elemento transformado.
3

Transición

PropiedadDescripciónNavegadoresCSS
transitionPropiedad corta que nos permite especificar en una sola linea las cuatro propiedades de la transición.3
transition-delayEspecifica el tiempo que tardará en arrancar la transición.3
transition-durationEspecifica el tiempo que durará la transición.3
transition-propertyEspecifica que propiedades intervienen en la transición.3
transition-timing-functionEspecifica la curva de velocidad que se usara para la transición.3

Propiedades documentadas : 142/189
Modificado por última vez : 03/06/2016.


[#4] devildrey33 24 Febrero del 2014 a las 15:45, votos 0 de 0.
3 Bueno pues sobre java la verdad es que se mas bien poco/nada. Se dice que los que porgraman en C/C++ suelen odiar Java (y viceversa), y bueno no es que lo odie, pero nunca me ha llamado la atención. Sobre el papel programar un solo código que pueda funcionar en todos los sistemas operativos suena muy bien, el problema de esto es que también suelen funcionar los agujeros de seguridad en todos los sistemas operativos. 

Sobre el captcha, es de las pocas cosas que he hecho y no he explicado como hacer en mi web, si que he hecho varios artículos explicando un poco como hacer captchas, pero nunca he revelado como hice este, entre otras cosas por razones de seguridad. Lo malo es que solo tengo un puzzle, y como tiene "sensibilidad" es un poco tedioso de hacer. Por "sensibilidad" me refiero a que al colocar la pieza del puzzle permito un margen de error de no se si eran 4 o 6 pixeles, ya que si lo tienes que arrastrar a la posición exacta se vuelve mucho mas complicado de resolver.

Saludos!
[#3] gnomo 22 Febrero del 2014 a las 19:15, votos 1 de 1.
2 No, no, me refiero a Java. Pero bueno...
también me interesa JavaScript. a pesar de que me parece muy complicado.
Y en cuanto a la pereza,  pues eso, por aquí andaré.

Ah! me encanta tu capcha, muy original.
Saludos!
[#2] devildrey33 20 Febrero del 2014 a las 8:07, votos 0 de 0.
1 Buenas, en primer lugar gracias por comentar.

A ver cuando hablas de Java presupongo que estas hablando de JavaScript, que es el único que se utilizar. La verdad es que ya tenia algo planeado para hacer una referencia de JavaScript, pero primero de todo me gustaría terminar la referencia del CSS, ya que a decir verdad tengo demasiadas cosas a medias, y solo me falta empezar mas...

Ya para la referencia del CSS hay ciertas propiedades que de solo pensarlo me dan una pereza increíble de documentar.

Saludos!
[#1] gnomo 19 Febrero del 2014 a las 17:22, votos 1 de 1.
¿Te atreves con un cursito de Java para principiantes?
Sí se que hay algunos por la red, pero no me parecen tan bien explicaos como lo haces tu.
Y yo tengo la mollera un poco dura y como no me pongan ejemplos prácticos, no le encuentro la utilidad a la terminología de los lenguajes.
De todas maneras te agradezco las molestias que te tomas en pasarnos algunos de tus conocimientos.
De verdad, gracias y ANIMO.