متغیرهای CSS

ویژگی سفارشی CSS (متغیرها)

تابع ()var می تواند برای قرار دادن مقدار یک ویژگی سفارشی استفاده شود.

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

اعداد در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از این ویژگی پشتیبانی می کند.

تابع
var()
49.0
15.0
31.0
9.1
36.0

تابع var()

متغیرها در CSS باید در یک انتخابگر CSS اعلام شوند که دامنه آن را تعریف می کند. برای محدوده جهانی می توانید از :root یا body استفاده کنید.

نام متغیر باید با دو خط تیره (-) شروع شود و حساس به حروف است!

ساختار عملکرد ()var به شرح زیر است:

var(custom-name, value)
مقدار
شرح
custom-name
ضروری. نام مالکیت سفارشی (باید با دو خط شروع شود)
value
اختیاری. مقدار بازگشتی (استفاده می شود اگر ویژگی سفارشی نامعتبر است)

مثال زیر ابتدا یک ویژگی سفارشی سراسری به نام "main-bg-color--" را تعریف می کند، سپس از تابع ()var برای وارد کردن مقدار ویژگی سفارشی بعدا استایل استفاده می کند:

تابع var
:root {
    --main-bg-color: coral;
}

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

#div2 {
    background-color: var(--main-bg-color);
}
مشاهده مثال

مثال زیر از تابع ()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

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز