Colores en CSS

1. Colores

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);

2. Background

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);

Algunos parámetros de Background
ParametroDescripción
backgroud-attachmentestablece 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-modedefine 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-clipdefine qué tan lejos debe extenderse el fondo (color o imagen) dentro de un elemento. border-box|padding-box|content-box|initial|inherit
backgroud-colorEstablece el color de fondo. color|transparent|initial|inherit
backgroud-imageURL de la imagen.URL|linear-gradient()|radial-gradient()|repeating-linear-gradient()|repeating-radial-gradient()
backgroud-origenespecifica la posición de origen (el área de posicionamiento de fondo) de una imagen de fondo. background-origin
backgroud-positionestablece 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-repeatpropiedad establece si / cómo se repetirá una imagen de fondo. repeat|repeat-x|repeat-y|space|round|initial|inherit
backgroud-sizeespecifica 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.

3. Visibility

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ámetros de Visibility
ParámetroDescripción
visibleElemento es visita, Valor default
hiddenElemento oculto, pero ocupando su espacio.
collapseSolo 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).
initialEstablece esta propiedad en su valor predeterminado.
inheritHereda esta propiedad de su elemento padre.

4. Opacity

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;
}

5. Display

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ámetros de Display
ParámetroDescripció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
noneNinguno, 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.