Como todos los demás lenguajes de programación, CSS también tiene sus funciones. Las funciones CSS se utilizan como valor para varias propiedades CSS. A diferencia de otros lenguajes de programación, no podemos escribir nuestras propias funciones en CSS.
Echemos un vistazo a algunas de las funciones importantes de CSS que debe conocer:
1. Función url() : Esta función se utiliza para configurar la imagen de fondo, el estilo de lista, la imagen de estilo de lista, el contenido, el cursor, el borde, la imagen del borde, la fuente de la imagen del borde, la máscara, la imagen de la máscara.
background: url("photo.jpg")
2. Función calc() : Esta función se utiliza para realizar cálculos.
width: calc(100%-60px)
3. Función var() : esta función se utiliza para insertar el valor de una variable CSS.
--white: #fff
h2 { color: var(--white); }
4. Funciones rgb() y rgba() : se usa para describir los niveles de color, aquí ‘r’ significa rojo, ‘g’ significa verde, ‘b’ significa azul y ‘a’ se usa para especificar la opacidad de un color.
color: rgb(0, 0, 0) color: rgba(0, 0, 0, 1)
5. Función hsl() : esta función se utiliza para describir los niveles de color utilizando el tono, la saturación y la luminosidad.
color: hsl(0, 0, 0)
6. Función de desenfoque() : se utiliza para aplicar el efecto de desenfoque.
.body{
filter : blur(100px);
}
7. Función de brillo() : ayuda a ajustar el brillo.
.h2{
filter: brightness(50%);
}
8. Función opacity() : ayuda a establecer la opacidad del elemento.
img{
filter : opacity(50%);
}
9. Función :not() : para aplicar el estilo al elemento img que no tiene la clase .no-p.
img:not(.no-p){
padding: 0;
}
10. Selectores :nth-child() & :nth-last-child() : Para seleccionar uno o más elementos en un grupo de elementos.
li:nth-child(2),
li:nth-last-child(2){
color: yellow;
}