Propiedades de CSS (Parte 1)
Propiedades de fondo de la pagina
-Background
La propiedad background es un atajo para definir los valores individuales del fondo en una única regla CSS. Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los elementos.
-Background-color
La background-color propiedad especifica el color de fondo de un elemento.
-Background-image
La propiedad background-image especifica una imagen para usar como fondo de un elemento. De forma predeterminada, la imagen se repite para que cubra todo el elemento.
-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 se utiliza para especificar la posición de la imagen de fondo.
-Background-attachment
La background-attachmentpropiedad, especifica si la imagen de fondo debe desplazarse o ser fija (no se desplazará con el resto de la página).
-Color
La propiedad de CSS color selecciona el valor de color de primer plano del contenido de elemento de texto y decoraciones de texto. Los colores se especifican utilizando nombres de colores predefinidos o valores RGB, HEX, HSL, RGBA, HSLA.
rgb: En CSS, un color se puede especificar como un valor RGB, usando esta fórmula: rgb ( rojo, verde , azul ) Cada parámetro (rojo, verde y azul) define la intensidad del color entre 0 y 255.
hex: En CSS, un color se puede especificar usando un valor hexadecimal en la forma: # rrggbb Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre 00 y ff (igual que el decimal 0-255). Por ejemplo, # ff0000 se muestra en rojo, porque el rojo está configurado en su valor más alto (ff) y los demás están configurados en el valor más bajo (00).
hsl: En CSS, un color se puede especificar usando tono, saturación y luminosidad (HSL) en la forma:
hsl ( tono , saturación , luminosidad )
El tono es un grado en la rueda de colores de 0 a 360. 0 es rojo, 120 es verde y 240 es azul. La saturación es un valor porcentual, 0% significa un tono de gris y 100% es el color completo. La claridad también es un porcentaje, el 0% es negro, el 50% no es ni claro ni oscuro, el 100% es blanco.
rgba: Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad de un color.
Un valor de color RGBA se especifica con:
rgba ( rojo, verde , azul, alfa )
hsla:
Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, que especifica la opacidad de un color.
Un valor de color HSLA se especifica con:
hsla ( tono, saturación , luminosidad, alfa )
Dominio de bordes
-border:
Las propiedades del borde CSS le permiten especificar el estilo, el ancho y el color del borde de un elemento.
-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 transparente.
-border-bottom-width:
Border-bottom-width define el ancho del borde inferior de una caja.
-border-color:
La border-color propiedad se utiliza para establecer el color de los cuatro bordes.
-border-left:
El border-left es una propiedad rápida para poner el ancho, estilo y color 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:
Establece el estilo del borde izquierdo de los elementos.
-border-left-width:
Establece la anchura del borde izquierdo de los elementos.
-border-radius:
La border-radiuspropiedad se usa para agregar bordes redondeados a un elemento.
-border-right:
La propiedad Border-right es una propiedad rápida para dar valores al border-right-width, border-right-style y border-right-color. Estas propiedades establecen un borde derecho del elemento.
-border-right-color:
La propiedad Border-right-color establece el color del borde derecho de un elemento.
-border-right-style:
La border-right-stylepropiedad establece el estilo del borde derecho de un elemento.
-border-right,widht:
La border-right-widthpropiedad establece el ancho del borde derecho de un elemento.
border-stylepropiedad 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. Las propiedades que se pueden configurar deben estar en el siguiente orden:
· border-top-style (obligatorio)
-Padding:
La Padding propiedad es una propiedad abreviada para:
- acolchado superior
- padding-right
- fondo acolchado
- Padding-left
padding-rightpropiedad establece el relleno correcto (espacio) de un elemento.
padding-toppropiedad establece el relleno superior (espacio) de un elemento.heightpropiedad establece la altura de un elemento.max-heightpropiedad define la altura máxima de un elemento.max-widthpropiedad define el ancho máximo de un elemento.
min-heightpropiedad define la altura mínima de un elemento.min-widthpropiedad define el ancho mínimo de un elemento.
widthpropiedad establece el ancho de un elemento.La outlinepropiedad es una propiedad abreviada para:
- ancho de contorno
- estilo de contorno (obligatorio)
- color de contorno
outline-widthespecifica la anchura de un esquema.outline-colorpropiedad especifica el color de un contorno.
-outline-offset:
outline-offsetpropiedad agrega espacio entre un contorno y el borde o borde de un elemento.outline-stylepropiedad especifica el estilo de un contorno.outline-widthespecifica la anchura de un esquema.directionpropiedad especifica la dirección del texto / dirección de escritura dentro de un elemento a nivel de bloque.letter-spacingpropiedad aumenta o disminuye el espacio entre caracteres en un texto.