"CODIFICACIÓN DE CSS"
"CODIFICACIÓN DE CSS"
PROPIEDADES DE FONDOS DE LA PÁGINA
background
Es un atajo para definir valores individuales del fondo en una única regla CSS. Se puede usar background para definir los valores de una o de todas las propiedades.
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 " transparente".
Propiedad establece una o más imágenes de fondo de un elemento
background-image
background-image se emplea para establecer la imagen de fondo de cada elemento y se debe utilizar una URL de la imagen, para reconocer la misma.
background-repeat.
background-repeat define si y cómo una imagen de fondo debe repetirse dentro de un elemento si la imagen no cubre completamente el elemento.
background-position
background-position define la posición inicial de la imagen de fondo especificada.
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.
propiedad establece si una imagen se desplaza fondo con el resto de la página, o es fijo.
rgb------VALOR PARA ROJO VERDE AZUL
Significa "Rojo Verde Azul". RGB se refiere a tres tonos de luz que se pueden mezclar para crear diferentes colores.
hex------VALOR EN HEXADECIMAL
Hex de color; tres bytes números hexadecimal (compuesto de seis dígitos), con cada byte, que representa la intensidad de rojo, verde y azul en el color, respectivamente.
hsl-------BRILLO Y SATURACION
HSL significa:Matiz, saturación, luminosidad.
HSL es una representación de los puntos en el modelo de color RGB en un sistema de coordenadas cilíndrico.
rgba-------RGB CON DOMINIO DE TRANSPARENCIA
La función rgba() define colores utilizando el modelo rojo-verde-azul-alfa (RGBA), son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad del color.
hsla------HSL CON DOMINIO DE TRANSPARENCIA
Define colores utilizando el modelo Hue-saturation-lightness-alpha (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
La propiedad border permite definir de golpe todos los bordes en una única regla de la hoja de estilos.
border-bottom
Permite definir de una vez todas las propiedades individuales border-bottom-color , border-bottom-style , y border-bottom-width , describen el color, estilo y ancho del borde inferior de un elementos.
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 transparente.
border-bottom-style
La border-bottom-stylepropiedad establece el estilo del borde inferior de un elemento.
La border-bottom-widthpropiedad establece el ancho del borde inferior de un elemento.
La border-colorpropiedad establece el color de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
El borde_izquierdo es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento.
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 .
La border-left-style propiedad establece el estilo del borde izquierdo de un elemento.
La border-left-widthpropiedad establece el ancho del borde izquierdo de un elemento.
border-radius
Redondea las esquinas del borde exterior de un elemento. Puede establecer un solo radio para hacer esquinas circulares o dos radios para hacer esquinas elípticas border-radius.
border-right
L border-right propiedad es una propiedad abreviada
para (en el siguiente orden):
borde-derecho-ancho
borde-derecho-estilo (obligatorio)
borde-derecho-color
Si se omite border-right-color, el color aplicado será el
color del texto.
border-right-color
La border-right-color propiedad establece el color del borde derecho de un elemento.
border-right-style
La border-right-style propiedad establece el estilo del borde derecho de un elemento.
La border-right-width propiedad establece el ancho del borde derecho de un elemento.
border-style
La border-style propiedad establece el estilo de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
border-top
La border-top propiedad abreviada establece todas las propiedades del borde superior en una declaración.
La border-top-color propiedad establece el color del borde superior de un elemento.
La border-top-style propiedad establece el estilo del borde superior de un elemento.
La border-top-width propiedad establece el ancho del borde superior de un elemento.
La border-width propiedad establece el ancho de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
LOS MARGENES Y PADDING
margin
Las propiedades CSS marginse utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.
margin-left
La margin-lef tpropiedad establece el margen izquierdo de un elemento.
La margin-top propiedad establece el margen superior de un elemento.
La margin-right propiedad establece el margen derecho de un elemento.
La margin-bottom propiedad establece el margen inferior de un elemento.
Las propiedades CSS paddingse utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos.
La padding-bottom propiedad establece el relleno inferior (espacio) de un elemento.
La padding-left propiedad establece el relleno izquierdo (espacio) de un elemento.
La padding-right propiedad establece el relleno derecho (espacio) de un elemento.
La padding-top propiedad establece el relleno superior (espacio) de un elemento.
ALTURA Y ANCHO DE LAS PAGINAS WEB
height
La height propiedad establece la altura de un elemento.
¡La altura de un elemento no incluye relleno, bordes o
márgenes!
La max-height propiedad define la altura máxima de un elemento.
La max-width propiedad define el ancho máximo de un elemento.
La min-height propiedad define la altura mínima de un elemento.
La min-width propiedad define el ancho mínimo de un elemento.
width
La width propiedad establece el ancho de un elemento.
MODELOS DE CAJAS DE CSS
outline
Un contorno es una línea que se dibuja alrededor de los elementos, FUERA de los bordes, para que el elemento "resalte".
La propiedad CSS outline-width es usada para establecer el grosor del contorno de un elemento.
La outline-color propiedad especifica el color de un contorno.
outline-offset
La outline-offset propiedad agrega espacio entre el contorno y el borde o borde de un elemento.
outline-style
La outline-style propiedad especifica el estilo de un contorno.
outline-width
La outline-width propiedad especifica el ancho del contorno.
La direction propiedad especifica la dirección del texto/dirección de escritura dentro de un elemento a nivel de bloque.
La letter-spacing propiedad aumenta o disminuye el espacio entre caracteres en un texto.
La line-height propiedad especifica la altura de una línea.
MANEJO DE TEXTO Y ESTILO A TRAVES DE CSS
text-align
La text-align propiedad especifica la alineación horizontal del texto en un elemento.
La text-decoration propiedad especifica la decoración
añadida al texto y es una propiedad abreviada para:
línea de decoración de texto
(obligatorio)
texto-decoración-color
estilo de decoración de texto
La text-indent propiedad especifica la sangría de la primera línea en un bloque de texto.
La text-shadow propiedad agrega sombra al texto.
La text-transform propiedad controla las mayúsculas del texto.
text-overflow
La text-overflow propiedad especifica cómo se debe señalar al usuario el contenido desbordado que no se muestra. Se puede recortar, mostrar puntos suspensivos (...) o mostrar una cadena personalizada.
La unicode-bidi propiedad se usa junto con la propiedad de dirección para establecer o devolver si el texto debe anularse para admitir varios idiomas en el mismo documento.
La vertical-align propiedad establece la alineación vertical de un elemento.
La white-space propiedad especifica cómo se maneja el espacio en blanco dentro de un elemento.
La word-spacing propiedad aumenta o disminuye el espacio en blanco entre palabras.
La propiedad font permite establecer de una sola vez los valores para todas las propiedades: font-size, etc.
La font-family propiedad especifica la fuente de un elemento.
La font-sizepropiedad establece el tamaño de una fuente.
La font-style propiedad especifica el estilo de fuente para un texto.
font-variant
La font-variant propiedad especifica si un texto debe mostrarse o no en letra minúscula.
La font-weight propiedad establece qué tan gruesos o delgados deben mostrarse los caracteres en el texto.
**COMO AGREGAR ICONOS
DIMENSIONES O TAMAÑOS DE LOS ICONOS
<i class="fa fa-bars fa-lg" style="color:#FFFFFF;"/></i>
LOS LINK EN CSS
a:link
a:link- un enlace normal, no visitado.
a:visited
a:visited- un enlace que el usuario ha visitado.
a:hover
a:hover- un enlace cuando el usuario pasa el mouse sobre él.
a:active
a:active- un enlace en el momento en que se hace clic.
LAS LISTAS
list-style-type
Especifica el list-style-type tipo de marcador de elemento de lista en una lista.
list-style-position
La list-style-position propiedad especifica la posición de los marcadores de elementos de lista (viñetas).
list-style-image
La list-style-image propiedad reemplaza el marcador de elemento de lista con una imagen.
LAS TABLAS EN CSS
border-collapse
La border-collapse propiedad establece si los bordes de la tabla deben contraerse en un solo borde o separarse como en HTML estándar.
border-spacing
La border-spacing propiedad establece la distancia entre los bordes de las celdas adyacentes.
caption-side
La caption-side propiedad especifica la ubicación de un título de tabla.
La empty-cells propiedad establece si mostrar o no los bordes en las celdas vacías de una tabla.
La table-layoutpropiedad define el algoritmo utilizado para diseñar celdas, filas y columnas de la tabla.
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
La display propiedad especifica el comportamiento de visualización (el tipo de cuadro de representación) de un elemento.
La position propiedad especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, absoluto, fijo o fijo).
Un elemento con position: static; no está posicionado de ninguna manera especial; siempre se posiciona de acuerdo con el flujo normal de la página.
Un elemento con position: relative; se coloca en relación con su posición normal.
Un elemento con position: fixed;se coloca 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. Las propiedades superiores, derecha, inferior e izquierda se utilizan para colocar el elemento.
Un elemento con position: absolute;se coloca en relación con el ancestro posicionado más cercano (en lugar de posicionarse en relación con la ventana gráfica, como fijo).
Un elemento con position: sticky; posiciona en función de la posición de desplazamiento del usuario.
La bottom propiedad afecta la posición vertical de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados.
left
La left propiedad afecta la posición horizontal de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados.
La right propiedad afecta la posición horizontal de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados.
La top propiedad afecta la posición vertical de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados.
La z-index propiedad especifica el orden de pila de un elemento.
La overflow propiedad especifica si recortar el contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en el área especificada.
La overflow-x propiedad especifica si se recorta el contenido, se agrega una barra de desplazamiento o se muestra el contenido de desbordamiento de un elemento de nivel de bloque, cuando se desborda en los bordes izquierdo y derecho.
La overflow-y propiedad especifica si se recorta el contenido, se agrega una barra de desplazamiento o se muestra el contenido desbordado de un elemento de nivel de bloque, cuando se desborda en los bordes superior e inferior.
De forma predeterminada, el desbordamiento es visible, lo que significa que no se recorta y se representa fuera del cuadro del elemento.
Con el hidden valor, el desbordamiento se recorta y el resto del contenido se oculta.
Al establecer el valor en scroll, el desbordamiento se recorta y se agrega una barra de desplazamiento para desplazarse dentro del cuadro. Tenga en cuenta que esto agregará una barra de desplazamiento tanto horizontal como verticalmente (incluso si no la necesita).
El auto valor es similar a scroll, pero agrega barras de desplazamiento solo cuando es necesario.
La propiedad CSS box-sizing nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.
La clear propiedad controla el flujo junto a los elementos flotantes.
La float propiedad especifica si un elemento debe flotar a la izquierda, a la derecha o no flotar en absoluto.
FLOAT:LEFT
Deja que una imagen flote a la izquierda.
Deja que una imagen flote a la derecha.
Deje que la imagen se muestre justo donde aparece en el texto (flotante: ninguno).
Heredará la configuración flotante del elemento padre.
PROPIEDAD FOCUS
La pseudo-clase :focus CSS representa un elemento (como una entrada de formulario) que ha recibido el foco.
Comentarios
Publicar un comentario