ویژگی all در css ریست initial و inherit تگ html
در این مقاله از سایت آموزی جهت مطالعه شما همراهان همیشگی قصد داریم در مورد ویژگی جدید all در زبان css توضیحاتی را ارائه نماییم.
ویژگی کاربردی all در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی جدید all در زبان طراحی css
از طریق ویژگی جدید all می توانید کلیه خصوصیات css در تگ و یا تگ های html به جز صفات direction و unicode-bidi که جهت متن را مشخص می کنند، به حالت initial و inherit بازنشانی یا ریست کنید.
مقادیر صفت جدید all در زبان طراحی css
صفت جدید all که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:
- مقدار initial
- مقدار inherit
- مقدار unset
مقدار initial درون خاصیت all در زبان css
اگر در یک تگ html ، خاصیت all را برابر با مقدار initial قرار بدهیم، همه ویژگی های css مربوط به آن تگ html به حالت اولیه و تنظیماتی که در CSS Specification تعریف شده است، برمی گردد.
مقدار inherit درون خاصیت all در زبان css
اگر در یک تگ html ، خاصیت all را برابر با مقدار inherit قرار بدهیم، آن تگ html همه ویژگی های css در استایل تگ html پدرش را به ارث می برد، و تگ html مربوطه با خصوصیات css پدر به شکل تگ پدر خود در خروجی مرورگر اینترنتی نمایش داده می شود.
مقدار unset درون خاصیت all در زبان css
اگر در یک تگ html ، خاصیت all را برابر با مقدار unset قرار بدهیم، ویژگی هایی که از تگ یا تگ های پدر به ارث می رسد، به صورت نرمال عمل می کنند. به عبارت دیگر تگ html مربوطه ویژگی هایی که قابلیت به ارث رسیدن دارند را به ارث می برد.
همچنین اگر هیچ ویژگی قابل توارث برای عنصر html مورد نظر وجود نداشت، مقدار اولیه و چیزی که درون CSS Specification مشخص شده، برای تگ html مورد نظر اعمال می شود.
مثال در مورد استفاده از خاصیت all در زبان طراحی css
[html]<!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>[/html]
خروجی کد در مرورگر اینترنتی
No all property:
بررسی خاصیت all از نظر نسخه زبان طراحی css
ویژگی کاربردی all در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
پشتیبانی مرورگرهای اینترنتی از خاصیت all در زبان طراحی css
| خاصیت css |  |  |  |  |  |
| all | 37.0 | عدم پشتیبانی | 27.0 | 9.1 | 24.0 |
