مانند سایر زبانهای برنامه نویسی ، CSS نیز توابع خود را دارد. توابع CSS به عنوان مقداری برای خصوصیات مختلف CSS استفاده می شود. برخلاف سایر زبان های برنامه نویسی ، ما نمی توانیم توابع خود را در CSS بنویسیم.
url() : این عملکرد برای تنظیم تصویر پس زمینه ، list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image استفاده می شود.
background: url("photo.jpg");calc() : این تابع برای انجام محاسبات استفاده می شود.
width: calc(100%-60px);var() : این تابع برای درج مقدار متغیر CSS استفاده می شود.
--white: #fff;
h2 {
color: var(--white);
}rgb() و rgba() : این برای توصیف سطح رنگ استفاده می شود ، در اینجا “r” مخفف قرمز ، “g” مخفف سبز، “b” مخفف آبی و “a” برای تعیین تیرگی یک رنگ استفاده می شود.
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, 1);hsl() : این عملکرد برای توصیف سطح رنگ با استفاده از hue، اشباع و روشنایی استفاده می شود.
color: hsl(0, 0, 0);blur() : این برای اعمال اثر تاری استفاده می شود.
.body{
filter : blur(100px);
}brightness() : به تنظیم روشنایی کمک می کند.
.h2{
filter: brightness(50%);
}opacity() : به تنظیم opacity عنصر کمک می کند.
img{
filter : opacity(50%);
}not() : برای اعمال سبک در عنصر img فاقد کلاس no-p.
img:not(.no-p){
padding: 0;
}:nth-child() و :nth-last-child()برای انتخاب یک یا چند عنصر در یک گروه از عناصر.
li:nth-child(2),
li:nth-last-child(2){
color: yellow;
}به طور حتم CSS دارای توابع بسیاری می باشد اما در اینجا برخی از پرکاربردترین آنها معرفی شده است که با استفاده از آنها می توانید جلوه خاصی به صفحه وب سایت خود اضافه کنید. همچنین می توانید از فریم ورکهای CSS نیز استفاده نمایید که قابلیت های بیشماری دارند.
