میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

متغیرها در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش متغیرها در CSS با من همراه باشید.

در css مانند زبان های برنامه نویسی این امکان وجود دارد که شما می توانید خصوصیاتی را که از قبل تعریف کرده اید و آماده است. را در قالب متغیرها تعریف کرده و با استفاده از توابع، از آنها برای سایر عناصر html نیز استفاده کنید.

متغیرها یکی از ساختارهای عمومی در تمام زبان های برنامه نویسی هستند که به منظور نگهداری موقت داده ها کاربرد بسیاری دارند، متغیرها در CSS نیز برای تعریف استایل و استفاده ی چندین باره از آن کاربرد دارد.


استفاده از متغیرها (Variables ) در css

بعد از تعریف کردن متغیر برای style هایی که آماده کرده اید، با استفاده از توابع ()var در css می توانید این محتویات متغیرها را، برای سایر عناصر صفحه وب نیز استفاده کنید.

پشتیبانی در مرورگرها

تابعChromeInternet Explorer / EdgeFirefoxSafariOpera
()var۴۹٫۰۱۵٫۰31.09.136.0

توابع ()var

ابتدا متغییر ها را باید در قسمت :root یا سلکتور body ، با ساختار زیر تعریف کنید:

۱-نام  متغییر حتما باید با دو dash به شکل (–) شروع شود.

۲- متغییر باید در قالب ساختار زیر تعریف شود:

(var(custom-name, value

  • custom-name = نام متغییر است.
  • value =  این پارامتر اختیاری بوده و زامانیکه ، مقدار متغییر نا معتبر باشد استفاده می شود.

مثال: در این مثال یک متغییر با نام “main-bg-color –” با مقدار نام یک رنگ ، در قسمت  :root ، تعریف کرده ایم، سپس برای عناصر دیگر از آن استفاده کرده ایم:

مثال : استفاده از تابع var

مثال ۲- در این مثال ابتدا چند متغیر تعریف کرده، و از آن ها در عناصر دیگر استفاده کرده ایم:

مثال : استفاده از چندین متغیر var
:root {
    --main-bg-color: coral;
    --main-txt-color: blue;
    --main-padding: 15px;
}


#div1 {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    padding: var(--main-padding);
}


#div2 {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    padding: var(--main-padding);
}

 


امیدواریم آموزش متغیرها در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟