صفت all در زبان سی اس اس
در این مقاله از پایگاه آموزش طراحی وب ( سایت آموزی ) جهت مطالعه شما همراهان همیشگی قصد داریم در مورد ویژگی all در css توضیحاتی را ارائه نماییم.
صفت all در زبان سی اس اس به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی all در css
از طریق ویژگی جدید all می توانید کلیه خصوصیات css در تگ و یا تگ های html به جز صفات direction و unicode-bidi که جهت متن را مشخص می کنند، به حالت initial و inherit بازنشانی یا ریست کنید.
مقادیر صفت all در زبان سی اس اس
صفت جدید all که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:
- مقدار initial
- مقدار inherit
- مقدار unset
مقدار initial درون ویژگی all در css
اگر در یک تگ html ، خاصیت all را برابر با مقدار initial قرار بدهیم، همه ویژگی های css مربوط به آن تگ html به حالت اولیه و تنظیماتی که در CSS Specification تعریف شده است، برمی گردد.
مقدار inherit درون ویژگی all در css
اگر در یک تگ html ، ویژگی all در css را برابر با مقدار inherit قرار بدهیم، آن تگ html همه ویژگی های css در استایل تگ html پدرش را به ارث می برد، و تگ html مربوطه با خصوصیات css پدر به شکل تگ پدر خود در خروجی مرورگر اینترنتی نمایش داده می شود.
مقدار unset درون ویژگی all در css
اگر در یک تگ html ، خاصیت all را برابر با مقدار unset قرار بدهیم،
ویژگی هایی که از تگ یا تگ های پدر به ارث می رسد، به صورت نرمال عمل می کنند.
به عبارت دیگر تگ html مربوطه ویژگی هایی که قابلیت به ارث رسیدن دارند را به ارث می برد.
همچنین اگر هیچ ویژگی قابل توارث برای عنصر html مورد نظر وجود نداشت، مقدار اولیه و چیزی که درون CSS Specification مشخص شده، برای تگ html مورد نظر اعمال می شود.
مثال در مورد استفاده از ویژگی all در css
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: small;
color: blue;
}
#ex1 {
background-color: yellow;
color: red;
}
#ex2 {
background-color: yellow;
color: red;
all: inherit;
}
#ex3 {
background-color: yellow;
color: red;
all: initial;
}
#ex4 {
background-color: yellow;
color: red;
all: unset;
}
</style>
</head>
<body>
<p>No all property:</p>
<div id=”ex1″>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<p>all: inherit:</p>
<div id=”ex2″>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<p>all: initial:</p>
<div id=”ex3″>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<p>all: unset:</p>
<div id=”ex4″>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<p><b>Note:</b> Internet Explorer and Safari 8 and earlier verisions do not support the all property.</p>
</body>
</html>
خروجی کد در مرورگر اینترنتی
No all property:
بررسی خاصیت از نظر نسخه زبان طراحی css
خاصیت کاربردی all در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش ظراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery
پشتیبانی مرورگرهای اینترنتی از این ویژگی all در css
| خاصیت css |  |  |  |  |  |
| all | 37.0 | عدم پشتیبانی | 27.0 | 9.1 | 24.0 |
دیدگاهتان را بنویسید