Css

PROPIEDADES DE FONDOS DE LA PAGINA

background: Una propiedad abreviada para todas las propiedades background-* 


Background-color: Especifica el color de fondo de un elemento.

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

background-image: Especifica una o más imágenes de fondo para un elemento

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

background-attachment: Establece si una imagen de fondo se desplaza con el resto de la página o si es fija

color----------------PROPIEDAD COLOR:  Establece el color del texto.

rgb------VALOR PARA ROJO VERDE AZUL: Un valor de color RGB se especifica con: RGB (rojo, verde, azul). Cada parámetro define la intensidad de ese color y puede ser un número entero entre 0 y 255 o un valor de porcentaje (de 0% a 100%).

hex------VALOR EN HEXADECIMAL: Un color hexadecimal se especifica con: #RRGGBB.

RR (rojo), GG (verde) y BB (azul) son números enteros hexadecimales entre 00 y FF que especifican la intensidad del color.

hsl-------BRILLO Y SATURACION: valores de color HSL son compatibles con IE9 +, Firefox, Chrome, Safari y Opera en 10+.

HSL significa matiz, saturación y luminosidad.

Valores de color HSL se especifican con: .hsl(hue, saturation, lightness).

rgba-------RGB CON DOMINIO DE TRANSPARENCIA: La función RGBA () definir colores utilizando el modelo de rojo-verde-azul-alfa (RGBA).

valores de color RGBA son una extensión de valores de color RGB con un canal alfa - que especifica la opacidad del color.

hsla------HSL CON DOMINIO DE TRANSPARENCIA: La función HSLA () definir colores utilizando el modelo Hue-saturación-ligereza-alfa (HSLA).

valores de color HSLA son una extensión de los valores de color HSL con un canal alfa - que especifica la opacidad del color.

DOMINIO DE BORDES

border: Una propiedad abreviada para ancho de borde, estilo de borde y color de borde.

border-bottom: Una propiedad abreviada para border-bottom-width, border-bottom-style y border-bottom-color.

border-bottom-color: Establece el color del borde inferior.

border-bottom-style: Establece el estilo del borde inferior.

border-bottom-width: Ajusta el ancho del borde inferior.

border-color: Establece el color de los cuatro bordes.

border-left: Una propiedad abreviada para todas las propiedades border-left- * .

border-left-color: Establece el color del borde izquierdo.

border-left-style: Establece el estilo del borde izquierdo.

border-left-width: Especifica el ancho de la imagen del borde.

border-radius: Una propiedad abreviada para las cuatro propiedades de borde - * - radio.

border-right: Una propiedad abreviada para todas las propiedades border-right- *.

border-right-color: Establece el color del borde derecho.

border-right-style: Establece el estilo del borde derecho.

border-right-width: Establece el ancho del borde derecho.

border-style: Establece el estilo de los cuatro bordes.

border-top: Una propiedad abreviada para border-top-width, border-top-style y border-top-color.

border-top-color: Establece el color del borde superior.

border-top-style: Establece el estilo del borde superior.

border-top-width: Establece el ancho del borde superior.

border-width: Establece el ancho de los cuatro bordes.

LOS MARGENES Y PADDING

margin: Establece todas las propiedades de margen en una declaración

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

margin-top: Establece el margen superior de un elemento.

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

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

padding: Una propiedad abreviada para todas las propiedades padding- *.

padding-bottom: Establece el relleno inferior de un elemento.

padding-left: Establece el relleno izquierdo de un elemento.

padding-right: Establece el relleno derecho de un elemento.

padding-top: Establece el relleno 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 el ancho máximo de un elemento.

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

min-width: Establece el ancho mínimo de un elemento.

width: Establece el ancho de un elemento.

MODELOS DE CAJAS DE CSS

outline: Una propiedad abreviada para el ancho del contorno, el estilo del contorno y las propiedades del color del contorno.

outline-width: Establece el ancho de un contorno.

outline-color: Establece el color de un contorno.

outline-offset: Desplaza un contorno y lo dibuja más allá del borde del borde.

outline-style: Establece el estilo de un esquema.

outline-width: Establece el ancho de un contorno.

direction: Especifica la dirección del texto / dirección de escritura.

letter-spacing: Aumenta o disminuye el espacio entre caracteres en un texto.

line-height: Establece la altura de la línea.

MANEJO DE TEXTO Y ESTILO A TRAVES DE CSS

text-align: Especifica la alineación horizontal del texto.

text-decoration: Especifica la decoración añadida al texto.

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

text-shadow: Agrega sombra al texto.

text-transform: Controla la capitalización del texto.

text-overflow: Especifica qué debe suceder cuando el texto desborda el elemento contenedor.

unicode-bidi: Se utiliza junto con la propiedad de dirección para establecer o devolver si el texto debe anularse para admitir varios idiomas en el mismo documento.

vertical-align: Establece la alineación vertical de un elemento.

white-space: Especifica cómo se maneja el espacio en blanco dentro de un elemento.

word-spacing: Aumenta o disminuye el espacio entre palabras en un texto.

font: Una propiedad abreviada para el estilo de fuente, variante de fuente, peso de fuente, tamaño de fuente / altura de línea y las propiedades de familia de fuentes.

font-family: Especifica la familia de fuentes para el texto.

font-size: Especifica el tamaño de fuente del texto.

font-style: Especifica el tamaño de fuente del texto.

font-variant: Especifica si un texto debe mostrarse o no en una fuente de minúsculas.

font-weight: Especifica el peso de una fuente.

COMO AGREGAR ICONOS

DIMENSIONES O TAMAÑOS DE LOS ICONOS

Para cambiar el tamaño del icono simplemente hay que añadir la regla de CSS font-size a la etiqueta <i>:

.novedades_size i{

   font-size: 100px;

}

Resultado

LOS LINK EN CSS

a:link: un enlace normal no visitado.

a:visited: un enlace que el usuario ha visitado.

a:hover: un enlace cuando el usuario pasa el mouse sobre él.

a:active: un enlace en el momento en que se hace clic.

LAS LISTAS

list-style-type: Especifica el tipo de marcador de elemento de lista.

list-style-position: Especifica la posición de los marcadores de elementos de lista (viñetas).

list-style-image: Especifica una imagen como marcador de elemento de lista.

LAS TABLAS EN CSS

border-collapse: Establece si los bordes de la tabla deben contraerse en un solo borde o estar separados.

border-spacing: Establece la distancia entre los bordes de las celdas adyacentes.

caption-side: Especifica la ubicación de un título de tabla.

empty-cells: Especifica si se muestran o no los bordes y el fondo en las celdas vacías de una tabla.

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

nth-child(even): Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc.

nth-child(ODD):  Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc. 

OPCIONES DE FORMATO EN CSS INTERMEDIAS

DISPLAY: Especifica cómo se debe mostrar un determinado elemento HTML.

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

position:static: Valor por defecto. Los elementos se procesan en orden, tal como aparecen en el flujo de documentos.

position:relative: El elemento se coloca en relación con su posición normal, por lo que "left: 20px" agrega 20 píxeles a la posición IZQUIERDA del elemento.

position:fixed: El elemento se coloca en relación con la ventana del navegador.

position:absolute: El elemento se coloca en relación con su primer elemento ancestro (no estático) posicionado.

position:sticky: Un elemento adhesivo alterna entre relativo y fijo, dependiendo de la posición de desplazamiento. Se posiciona en forma relativa hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica, luego se "pega" en su lugar (como posición: fija).

Nota: No es compatible con IE / Edge 15 o versiones anteriores. Compatible con Safari desde la versión 6.1 con un prefijo -webkit-.

bottom: Establece la posición de los elementos, desde la parte inferior de su elemento padre.

left: Especifica la posición izquierda de un elemento posicionado.

right: Especifica la posición correcta de un elemento posicionado.

top: Especifica la posición superior de un elemento posicionado.

z-index: Establece el orden de apilamiento de un elemento posicionado.

overflow: Especifica qué sucede si el contenido desborda el cuadro de un elemento.

overflow-x: Especifica si se recortan o no los bordes izquierdo / derecho del contenido, si desborda el área de contenido del elemento.

overflow-y: Especifica si se deben recortar o no los bordes superior / inferior del contenido, si desborda el área de contenido del elemento.

overflow:VISIBLE: El desbordamiento no está recortado. Se procesa fuera del cuadro del elemento.

overflow:HIDDEN: El desbordamiento se recorta y el resto del contenido será invisible.

overflow: SCROLL: El desbordamiento se recorta, pero se agrega una barra de desplazamiento para ver el resto del contenido.

overflow: AUTO: Si se recorta el desbordamiento, se debe agregar una barra de desplazamiento para ver el resto del contenido.

box-sizing: Define cómo se calculan el ancho y el alto de un elemento: si deben incluir relleno y bordes, o no.

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

float: Especifica si una caja debe flotar o no.

FLOAT:LEFT: El elemento flota a la izquierda de su contenedor.

FLOAT:RIGHT: El elemento flota a la derecha de su contenedor.

FLOAT: NONE: El elemento no flota, (se mostrará justo donde aparece en el texto).

FLOAT: INHERIT: Hereda esta propiedad de su elemento padre.

PROPIEDAD FOCUS

Se utiliza para seleccionar el elemento que tiene el foco.

Consejo: El selector de enfoque está permitido en los elementos que aceptan eventos de teclado u otras entradas del usuario.

Sintaxis: :focus {

  css declarations;

}