CODIFICACIÓN DE CSS

 Formas de insertar código de CSS en HTML--en línea, etiqueta style, archivo externo:

PROPIEDADES DE FONDOS DE LA PÁGINA 

background:La propiedad background es un atajo para definir los valores individuales del fondo en una única regla CSS.

Background-color: Background-color es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra " transparent e".

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

background-image: La propiedad background - image se emplea para establecer la imagen de fondo de cada elemento. La imagen se muestra en la zona que ocupaba el contenido y el relleno del elemento, justo hasta su borde. 

background-img:La propiedad background - img se emplea para establecer la imagen de fondo de cada elemento. La imagen se muestra en la zona que ocupaba el contenido y el relleno del elemento, justo hasta su borde.

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

background-image
background-repeat:La propiedad de CSS background-repeat define como se repiten los fondos del documento. Un fondo de imagen puede ser repetido sobre el eje horizontal, el eje vertical, ambos ejes, o no estar repetido.

background-position: La propiedad background - position controla la posición en la que se muestra la imagen de fondo de un elemento. Por defecto, las imágenes de fondo que no se repiten se muestran en la esquina superior izquierda del elemento.

background-attachment: La propiedad CSS background-attachment determina si la posición de la imagen de fondo será fija dentro de la pantalla o se desplazará con su bloque contenedor.

color----------------PROPIEDAD COLOR:La propiedad de CSS color selecciona el valor de color de primer plano del contenido de elemento de texto y decoraciones de texto. ... Para obtener una descripción general del uso del color en HTML, consulte Aplicando color a los elementos HTML mediante CSS.

rgb------VALOR PARA ROJO VERDE AZUL:rgb(rojo, verde, azul), donde rojo, verde y azul son números enteros desde 0 a 255. rgb(rojo, verde, azul), donde rojo, verde y azul son porcentajes desde 0% hasta 100%. #RRGGBB, donde RR, GG y BB son números hexadecimales desde 00 hasta FF.

hex------VALOR EN HEXADECIMAL: Un color hex siempre empieza con # ( la almohadilla ). Los primeros dos dígitos representan el rojo, los dos siguientes, el verde, y los últimos dos, el azul.

rgba-------RGB CON DOMINIO DE TRANSPARENCIA: La notación RGBA es una manera de especificar colores en la que se definen cuatro valores. Los tres primeros son los bien conocidos canales RGB (rojo, verde y azul) y el cuarto parámetro es el canal Alpha, que no es más que el grado de transparencia u opacidad del color.

hsla------HSL CON DOMINIO DE TRANSPARENCIA:La propiedad opacity permite hacer que un elemento sea parcialmente transparente. El valor de esta propiedad debe ser un valor decimal entre 0 y 1 (el valor 0 hace que el elemento sea completamente transparente y el valor 1 hace que el elemento sea completamente opaco).


DOMINIO DE BORDES

border:La propiedad border permite definir de golpe todos los bordes en una única regla de la hoja de estilos.

border-bottom:La propiedad border-bottom permite de definir de una vez todas las propiedades individuales border-bottom-color , border-bottom-style , y border-bottom-width , las cuales describen el color, estilo y ancho del borde inferior de un elementos.

border-bottom-color:La propiedad border - bottom - color define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave transparent e. valor calculado : como se especifica o si proviene de la propiedad color , sera el valor color .

border-bottom-style:La propiedad border-bottom permite de definir de una vez todas las propiedades individuales border-bottom-color , border-bottom-style , y border-bottom-width , las cuales describen el color, estilo y ancho del borde inferior de un elementos.

border-bottom-width: border-bottom-width define el ancho del borde inferior de una caja. valor calculado : largo absoluto o '0' si el estilo es none o hidden .

border-color:la propiedad border-color es un atajo para definir el color de los cuatro bordes de un elemento. valor calculada : el valor del color por defecto, o lo que se especificó.

border-left:La propiedad border-left-style permite establecer el estilo del borde izquierdo de un elemento. 

border-left-color: border-left-color pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo transparente .
border-left-style:La propiedad border-left-style permite establecer el estilo del borde izquierdo de un elemento.

border-left-width:es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. 

border-radius:La propiedad border-radius de CSS3 nos permite redondear los bordes de las cajas. Se usa principalmente en el diseño de las cajas que muestran el contenido de una web y para hacer algunas figuras sencilla, como los círculos.

border-right:es un a propiedad rápida para dar valores al border-right-width (en-US), border-right-style (en-US) y border-right-color (en-US).

border-right-color:es una propiedad rápida para dar valores al border - right - width (en-US), border - right -style (en-US) y border - right - color (en-US). 

border-right-style:permite establecer el estilo del borde derecho de un elemento. 

border-right-width:es una de las "propiedades shorthand" que define CSS y que se utiliza para establecer de forma abreviada el valor de una o más propiedades individuales.

border-style:es una propiedad abreviada que establece el estilo de línea para los cuatro lados del borde de un elemento.

border-top:s una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.

border-top-color: establece el color superior de un elemento border .

border-top-style: permite establecer el estilo del borde superior de un elemento.

border-top-width:es una de las "propiedades shorthand" que define CSS y que se utiliza para establecer de forma abreviada el valor de una o más propiedades individuales.

border-width:es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.

LOS MARGENES Y PADDING 

margin: margin establece el margen para los cuatro lados. 

margin-left:  establece el margen izquierdo de un elemento especificando una longitud o un porcentaje. 

margin-top:establece el margen superior de un elemento especificando una longitud o un porcentaje.

margin-right:  establece el margen derecho de un elemento especificando una longitud o un porcentaje.

margin-bottom: es la propiedad de un elemento que establece el espacio requerido en la parte inferior de un elemento.

padding: establece el espacio de relleno requerido por todos los lados de un elemento. 

padding-bottom:  establece el espacio de relleno requerido en la parte inferior del elemento. 

padding-left: describe cuanto espacio colocar entre el borde izquierdo y el contenido del selector.

padding-right:establece el espacio de relleno requerido por todos los lados de un elemento. 

padding-top:establece el espacio de relleno requerido en la parte superior del elemento. 

ALTURA Y ANCHO DE LAS PAGINAS WEB

height: especifica la altura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

max-height:se utiliza para definir la altura máxima de un elemento dado.

max-width: coloca el máximo ancho a un elemento.
min-height: se utiliza para definir la altura mínima de un elemento dado.

min-width: se usa para determinar la anchura mínima de un elemento.

width:especifica la anchura del área de contenido de un elemento. El área de contenido está dentro del relleno, borde y margen del elemento.

MODELOS DE CAJAS DE CSS

outline:es usada para establecer el estilo del contorno de un elemento. 

outline-width: establece el grosor del perfil de los elementos. 

outline-color:  establece el color del contorno de un elemento. 

outline-offset: es usada para establecer el espacio entre un contorno outline y el límite o borde de un elemento. 

outline-style: es usada para establecer el estilo del contorno de un elemento. 

outline-width: establece el grosor del perfil de los elementos. 

direction: se utiliza para indicar en que dirección fluye el texto: rtl para hebreo o árabe y ltr para otros tipos de escritura.

letter-spacing: Se trata de dos propiedades de uso no habituales que permiten establecer una separación entre letras específicas o una separación entre palabras específicas.

line-height: establece la altura de una casilla remarcada por líneas.

MANEJO DE TEXTO Y ESTILO A TRAVES DE CSS

text-align: define cuatro valores para alinear los contenidos a la izquierda ( left ), a la derecha ( right ), centrados ( center ) o justificados ( justify ).

text-decoration: se usa para establecer el formato de texto a subrayado ( underline ) y suprarrayado ( overline ), tachado ( line-through ) o parpadeo ( blink ). 

text-indent: indica la tabulación o indentación que se aplica a la primera línea de texto de un elemento.

text-shadow: agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad text-decorations del elemento. 

text-transform: especifica el cambio entre mayúsculas y minúsculas del texto de un elemento.

text-overflow: especifica el cambio entre mayúsculas y minúsculas del texto de un elemento.

unicode-bidi: consiste en crear nuevos niveles de anidamiento cada vez que cambia la dirección del contenido de un elemento.

vertical-align: 
white-spaceSirve para establecer la posición vertical de un elemento con respecto a la línea en la que se encuentra.

word-spacing: define una cantidad adicional de espacio entre palabras.

font: Permite definir el estilo de una fuente, su familia tipográfica, tamaño o peso, y las variantes que puede tener la fuente. 

font-family: define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado. 

font-size: especifica la dimensión de la letra. 

font-style: permite definir el aspecto de una familia tipográfica entre los valores: normal , italic (cursiva) y oblique .

font-variant: permite elegir la variante con la que se muestra el tipo de letra seleccionada mediante la propiedad font -family.

font-weight: especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en normal y bold.

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: coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa.
a:active:representa un elemento (como un botón) que el usuario está activando.

LAS LISTAS

list-style-type:es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.

list-style-position:establece la posición del marcador de un elemento de lista respecto al contenido de ese mismo elemento.

list-style-image: especifica la imagen que se usará como marcador de ítems de lista cuando se active la carga de imágenes, reemplazando al marcador especificado en la propiedad list-style-type.

LAS TABLAS EN CSS

border-collapse: se utiliza para fusionar los bordes.
border-spacing: establece la separación entre las celdas de la tabla.

caption-side:dispone de dos valores para controlar la posición vertical del título de la tabla: top es el valor por defecto y muestra el título antes de la tabla, mientras que bottom muestra el título después de la tabla.

empty-cells:no muestran ningún borde, ni color de fondo ni contenido, pero siguen ocupando sitio. 

table-layout:indica el algoritmo que debe utilizar el navegador para mostrar la tabla. 

nth-child(even):Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón An+B , para cada entero positivo o valor cero de n .

nth-child(ODD):Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón An+B , para cada entero positivo o valor cero de n .

OPCIONES DE FORMATO EN CSS INTERMEDIAS 

DISPLAY: Formalmente la propiedad display establece los tipos de visualización interna y externa de un elemento.

position: especifica cómo un elemento es posicionado en el documento. 

position:static: Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la página.

position:relative:El valor relative en el atributo position indica que la capa sí forma parte del flujo normal de elementos de la página, por lo que su posición dependerá del lugar donde esté en el código y el flujo HTML.

position:fixed:está posicionado en relación con la ventana gráfica, lo que significa que siempre permanece en el mismo lugar incluso si se desplaza la página.

position:absolute: El valor absolute en el atributo position permite posicionar elementos de manera absoluta, esto es de manera definida por valores de los atributos top, left, bottom y right, que indican la distancia con respecto a un punto.

position:sticky: puede considerarse un híbrido de los posicionamientos relativo y fijo.

bottom: especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

left: especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

right: especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

top:permite desplazar un elemento respecto a su posición original tomando como referencia el borde superior del elemento. 

z-index:  indica el orden de un elemento posicionado y sus descendientes. 

overflow:especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.

overflow-x: especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.

overflow-y: especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.

overflow:VISIBLE:Usando la propiedad overflow con un valor distinto a visible , valor por defecto, creará un nuevo contexto de formatos de bloques.

overflow:HIDDEN:Permite regular si los contenidos que sobresalen se seguirán viendo, si se ocultarán o si aparecerá una barra de scroll en el documento.

overflow: AUTO: especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.

box-sizing: indica cómo se deben calcular las medidas de un elemento. 

clear:especifica si un elemento puede estar al lado de elementos flotantes que lo preceden o si debe ser movido (cleared) debajo de ellos.

float:ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado.

FLOAT:LEFT: posiciona una caja moviéndola todo lo posible a la izquierda o derecha de su posición original. 

FLOAT:RIGHT: ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado.

FLOAT: NONE: Lo que hace la propiedad es quitar al elemento del flujo normal de la página y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado).

FLOAT: INHERIT:  El elemento es eliminado del flujo normal de la página, aunque aún sigue siendo parte del flujo (a diferencia del posicionamiento absoluto).

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.