Define el color de primer plano, osea del texto mismo. También define el currentcolorz un valor que luego puede ser usado de manera indirecta sobre otras propiedades tales como: border-color. Valores posible son: nombre color | #hex | RGB | HSL, ademas de los valores globales initial | unset | inherit.
color: nombre color | #hex | RGB() | HSL();
Para saber mas de colores y ver el juego completo de nombre de colores clic aqui.
color: red; color: #0f0; color: #00ff00; color: rgb(34, 12, 64); color: rgba(34, 12, 64, 0.3); color: hsl(30, 100%, 50%, 0.3);
Propiedad CSS es una forma rápida para establecer los valores de referencia individuales en un solo lugar en la hoja de estilo. background puede ser usado para establecer los valores para uno o más de
background: valor;
background: green; background: url("test.jpg") repeat-y; background: border-box red; background: no-repeat center/80% url("image.png"); background: rgba(34, 12, 64, 0.3);
Parametro | Descripción |
---|---|
backgroud-attachment | establece si una imagen de fondo se desplaza con el resto de la página o si es fija. scroll|fixed|local|initial|inherit |
backgroud-blend-mode | define el modo de fusión de cada capa de fondo (color y / o imagen). normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity. |
backgroud-clip | define qué tan lejos debe extenderse el fondo (color o imagen) dentro de un elemento. border-box|padding-box|content-box|initial|inherit |
backgroud-color | Establece el color de fondo. color|transparent|initial|inherit |
backgroud-image | URL de la imagen.URL|linear-gradient()|radial-gradient()|repeating-linear-gradient()|repeating-radial-gradient() |
backgroud-origen | especifica la posición de origen (el área de posicionamiento de fondo) de una imagen de fondo. background-origin |
backgroud-position | establece la posición inicial de una imagen de fondo. left top|left center|left bottom|right top|right center|right bottom|center top|center center|center bottom |
backgroud-repeat | propiedad establece si / cómo se repetirá una imagen de fondo. repeat|repeat-x|repeat-y|space|round|initial|inherit |
backgroud-size | especifica el tamaño de las imágenes de fondo. auto|length|percentage|cover|contain|initial|inherit |
Para saber mas de colores y ver el juego completo de nombre de colores clic aqui.
Puede ser usada para ocultar un elemento, dejando el espacio en el que habría sido. También puede ocultar filas o columnas de una tabla. Posibles valores son: visible | hidden | collapse, ademas de los valores globales: initial | unset | inherit.
visibility: visible | hidden | collapse | initial | unset | inherit;
Los elementos ocultos ocupan espacio en la página. Use la propiedad de visualización para ocultar y eliminar un elemento del diseño del documento.
Parámetro | Descripción |
---|---|
visible | Elemento es visita, Valor default |
hidden | Elemento oculto, pero ocupando su espacio. |
collapse | Solo para filas de tabla <tr>, grupos de filas <tbody>, columnas <col>, grupos de columnas <colgroup>. Este valor elimina una fila o columna, pero no afecta el diseño de la tabla. El espacio ocupado por la fila o columna estará disponible para otro contenido. Si el colapso se usa en otros elementos, no se muestra (se oculta). |
initial | Establece esta propiedad en su valor predeterminado. |
inherit | Hereda esta propiedad de su elemento padre. |
Establece el nivel de opacidad de un elemento. El nivel de opacidad describe el nivel de transparencia, donde 1 no es transparente en absoluto, 0.5 es transparente al 50% y 0 es completamente transparente.
opacity: valor | inicial | inherir;
Al usar la propiedad opacity para agregar transparencia al fondo de un elemento, todos sus elementos secundarios también se vuelven transparentes. Esto puede hacer que el texto dentro de un elemento totalmente transparente sea difícil de leer. Si no desea aplicar opacidad a elementos secundarios, use valores de color RGBA en su lugar.
Establezca el nivel de opacidad para los elementos img.
img { opacity: 0.5; }
Especifica el comportamiento de visualización (el tipo de cuadro de representación) de un elemento. En HTML, el valor de propiedad de visualización predeterminado se toma de las especificaciones HTML o de la hoja de estilo predeterminada del navegador/usuario. El valor predeterminado en XML es en línea, incluidos los elementos SVG.
display: block | inline | grid | flex | contens | table | none;
Parámetro | Descripción |
---|---|
block | |
inline | |
inline-block | |
inline-flex | |
inline-grid | |
inline-item | |
contents | |
flex | |
grid | |
run-in | |
table | |
table-caption | |
table-column-group | |
table-header-group | |
table-cel | |
table-column | |
table-row | |
none | Ninguno, se oculta. |
initial | |
inherit |
Es una propiedad muy importante en CSS para controlar el diseño. Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento que sea. El valor de visualización predeterminado para la mayoría de los elementos es block|inline.
Los elementos tipo block son: <h1>..<h6>, <p>, <div>, <li>, <form>, <header>, <footer> y <session>.
Los elementos tipo inline son: <a>, <img> y <span>.
También tenemos elementos especiales como <table>.
div{ display: flex; flex-direccion: row-reverse; }
Un elemento en línea con display: block; no tiene permitido tener otros elementos de bloque dentro de él.
Se puede ocultar un elemento estableciendo con display: none. El elemento estará oculto y la página se mostrará como si el elemento no estuviera allí.
La propiedad es ignorada si esta presente float.