ویژگی all در css ریست initial و inherit تگ html

ویژگی all در css ریست initial و inherit تگ html

در این مقاله از سایت آموزی جهت مطالعه شما همراهان همیشگی قصد داریم در مورد ویژگی جدید all در زبان css توضیحاتی را ارائه نماییم.

ویژگی کاربردی all در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

معرفی و کاربرد ویژگی جدید all در زبان طراحی css

از طریق ویژگی جدید all می توانید کلیه خصوصیات css در تگ و یا تگ های html به جز صفات direction و unicode-bidi که جهت متن را مشخص می کنند، به حالت initial و inherit بازنشانی یا ریست کنید.

مقادیر صفت جدید all در زبان طراحی css

صفت جدید all که در زبان طراحی CSS3 معرفی شده است، ۳ مقدار می پذیرد که عبارتند از:

مقدار 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]