CSS

Propiedades de CSS

- PROPIEDADES DE FONDOS DE LA PAGINA

-background: se utiliza para dar estilos al fondo de un elemento.

-background-color: se utiliza para definir el color de fondo de un elemento.

Propiedad establece una o más imágenes de fondo de un elemento

-background-image: se utiliza para definir la imagen de fondo de un elemento.

-background-img: este atributo no exite.

-background: se utiliza para dar estilos al fondo de un elemento.

-background-foto: este atributo no exite.

propiedad establece si una imagen se desplaza fondo con el resto de la página, o es fijo.

-background-image: se utiliza para definir la imagen de fondo de un elemento.

-background-repeat: se utiliza para definir cuantas veces se repetira la imagen de fondo de un elemento.

-background-position: esta propiedad establece la posición de partida una imagen de fondo.

-background-attachment: determina si la imagen de fondo se desplaza con el resto de la página, o es fijo.

color----------------PROPIEDAD COLOR
rgb------VALOR PARA ROJO VERDE AZUL
hex------VALOR EN HEXADECIMAL
hsl-------BRILLO Y SATURACION
rgba-------RGB CON DOMINIO DE TRANSPARENCIA
hsla------HSL CON DOMINIO DE TRANSPARENCIA

- DOMINIO DE BORDES

-border: esta propiedad permite la colocación de bordes en los elementos de la página.

-border-bottom: coloca bordes en la parte inferior del elemento.

-border-bottom-color: permite definir el color del borde inferior del elemento.

-border-bottom-style: permite definir el estilo del borde inferior del elemento.

-border-bottom-width: permite establecer la anchura del borde inferior de un elemento.

-border-color: define el color del borde.

-border-left: coloca un borde a la izquiera del elemento.

-border-left-color: permite definir el estilo del borde izquierdo del elemento.

-border-left-style: permite definir el estilo del borde izquierdo del elemento.

-border-left-width: permite establecer la anchura del borde izquierdo de un elemento.

-border-radius: añade esquinas redondeadas a los bordes del elemento.

-border-right: coloca un borde a la derecha del elemento.

-border-right-color: permite definir el color del borde derecho del elemento.

-border-right-style: permite definir el estilo del borde derecho del elemento.

-border-right-width: permite establecer la anchura del borde derecho de un elemento.

-border-style: se utiliza para definir el estilo del borde (también se puede hacer desde el atributo border).

-border-top: coloca un borde en la parte superior del elemento.

-border-top-color: permite definir el color del borde superior del elemento.

-border-top-style: permite definir el estilo del borde superior del elemento.

-border-top-width: permite establecer la anchura del borde superior de un elemento.

-border-width: permite definir la anchura del borde del elemento.

- LOS MARGENES Y PADDING

-margin: permite agregar un espaciado entre un elemento con respecto al exterior del elemento.

-margin-left: establece el margen izquierdo de un elemento.

-margin-top: establece el margen izquierdo de un elemento.

-margin-right: establece el margen derecho de un elemento.

-margin-bottom: establece el margen inferior de un elemento.

-padding: establece un espaciado entre un elemento y los bordes de su elemento padre.

-padding-bottom: establece el relleno (espacio) inferior de un elemento.

-padding-left: establece el relleno (espacio) izquierdo de un elemento.

-padding-right: establece el relleno (espacio) derecho de un elemento.

-padding-top: establece el relleno (espacio) superior de un elemento.


- ALTURA Y ANCHO DE LAS PAGINAS WEB

-height: establece la altura de un elemento.

-max-height: establece la altura máxima de un elemento.

-max-width: establece la anchura máxima de un elemento.

-min-height: establece la altura mínima de un elemento.

-min-width: establece la anchura mínima de un elemento.

-width: establece la anchura de un elemento.

- MODELOS DE CAJAS DE CSS

-outline: es un forma abreviada de definir el outline-style, outline-color y outline-width.

-outline-width: especifica la anchura de un esquema.

-outline-color: especifica el color de un esquema.

-outline-offset: espacio entre un esquema y el borde o borde de un elemento.

-outline-style: especifica el estilo de un esquema.

-outline-width: especifica la anchura de un esquema.

-direction: especifica la dirección del texto / dirección de escritura dentro de un elemento en bloque.

-letter-spacing: esta propiedad aumenta o disminuye el espacio entre caracteres en un texto.

-line-height: esta propiedad especifica la altura de una línea.

- MANEJO DE TEXTO Y ESTILO A TRAVES DE CSS
 -text-align: permite la alineación de un texto.

-text-decoration: es una abrebiacion de text-decoration-line, text-decoration-color y text-decoration-style.

-text-indent: esta propiedad especifica la sangría de la primera línea en un bloque de texto.

-text-shadow: permite añadir sombras a los textos.

-text-transform: esta propiedad controla la capitalización de texto.

-text-overflow: especifica cómo el contenido de propiedad desbordado que no se muestra deben señalizarse al usuario. Se puede sujetar, muestra unos puntos suspensivos (...), o mostrar una cadena personalizada.

-unicode-bidi: propiedad se utiliza junto con la dirección de la propiedad para establecer o devolver si el texto debe ser anulado para soportar múltiples idiomas en el mismo documento.

-vertical-align: esta propiedad establece la alineación vertical de un elemento.

-white-space: esta propiedad especifica cómo se maneja un espacio en blanco dentro de un elemento.

-word-spacing: propiedad aumenta o disminuye el espacio en blanco entre las palabras.

-font: es una propiedad abreviada de font-style, font-variant, font-weight, font-size, line-height y font-family.

-font-family: establece el tamaño de fuente de un texto.

-font-size: establece el tamaño de fuente de un texto.

-font-style: esta propiedad especifica el estilo de fuente para un texto.

-font-variant: propiedad que especifica si o no un texto debe ser representada en un pequeño-casquillos de fuente.

-font-weight: establece cómo se deben mostrar caracteres gruesas o delgadas en el texto.


**COMO AGREGAR ICONOS
DIMENSIONES O TAMAÑOS DE LOS ICONOS

- LOS LINK EN CSS

-a:link: representa un elemento que aún no se ha visitado.

-a:visited: representa enlaces que el usuario ya ha visitado.

-a:hover: se aplica cuando el usuario pone el cursor sobre el elemento.

-a:active: se aplica cuando el usuario realiza el evento click sobre el elemento.

-Las Listas

-list-style-type: se usa para especificar el tipo de marcador de ítems de lista en una lista.

-list-style-position: esta propiedad especifica la posición de los marcadores list-item (viñetas)

 -list-style-image: permite sustituir el marcador de ítems de lista con una imagen.

- LAS TABLAS EN CSS

-border-collapse: indica si los bordes de tabla deben colapsar en un solo borde o ser separados como en HTML estándar.

-border-spacing: se usa para establecer la distancia entre los bordes de las celdas adyacentes.

-caption-side: se usa para especificar la colocación de una leyenda de la tabla.

-empty-cells: especifica si debe o no mostrar bordes de las celdas vacías en una tabla.

-table-layout: permite definir el algoritmo utilizado para diseñar celdas de la tabla, filas y columnas.

-nth-child(even): coincide con uno o más elementos en función de su posición entre un grupo de hermanos cuando numeración del orden es par.

-nth-child(ODD): coincide con uno o más elementos en función de su posición entre un grupo de hermanos cuando numeración del orden es impar.
 
- OPCIONES DE FORMATO EN CSS INTERMEDIAS

-display: esta propiedad especifica el comportamiento de presentación (el tipo de caja de renderizado) de un elemento.

-position: especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, absoluto, fijo, o pegajosa).

-position:static: no proposiciona de ninguna manera especial, siempre se posiciona con el flujo normal de la página.

-position:relative: se posiciona de manera relativa de su posición normal.

-position:fixed: posiciona el elemento en relación con el área de visualización, lo que significa que siempre permanece en el mismo lugar, incluso si la página se desplaza.

-position:absolute: posiciona el elemento con respecto al antepasado posicionado más cercano (en lugar de posicionado con respecto a la ventana gráfica, como fija).

-position:sticky: posiciona el elemento en función de la posición de desplazamiento del usuario.

-bottom: permite afectar la posición vertical de un elemento de posicionado. 

-left: permite afectar la posición horizontal de un elemento posicionado.

-right: afecta la posición horizontal de un elemento de posicionado (al igual que left).

-top: afecta la posición vertical de un elemento de posicionado (al igual que botto).

-z-index: permite especificar el orden de apilamiento de un elemento.

-overflow: permite especificar lo que debería suceder si el contenido desborda la caja de un elemento.

-overflow-x: permite especificar lo que debería suceder si el contenido desborda la caja de un elemento hacia la izquierda o derecha.

-overflow-y: permite especificar lo que debería suceder si el contenido desborda la caja de un elemento hacia la abajo o hacia arriba.

-overflow:VISIBLE: es el valor por defecto de la propiedad overflow, el contenedor no es recortado.

-overflow:HIDDEN: el contenido es recortado y no se muestran barras de posición.

-overflow: SCROLL: el contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no.

-overflow: AUTO: el valor automático es similar al desplazamiento, pero agrega barras de desplazamiento solo cuando es necesario.

-box-sizing: permite definir cómo se calculan la anchura y la altura de un elemento: en caso de que incluya el relleno y los bordes, o no.

-clear: permite especificar en qué lados de un elemento los elementos flotantes no pueden flotar.

-float: permite especificar si un elemento debe salir del flujo normal y aparecer a la izquierda o a la derecha de su contenedor, donde los elementos de texto y los en línea aparecerán a su alrededor.

-FLOAT:LEFT: el elemento flota a la izquierda de su bloque contenedor.

-FLOAT:RIGHT: el elemento flota a la derecha de su bloque contenedor.

-FLOAT: NONE: el elemento no flota.

-FLOAT: INHERIT: es una propiedad que obliga a cualquier elemento a flotar (derecho, izquierdo, ninguno, heredar) dentro de su cuerpo padre con el resto del elemento para envolverlo.

-PROPIEDAD FOCUS: representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.