ویژگی all در css ریست initial و inherit تگ html
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery
در این مقاله از سایت آموزی جهت مطالعه شما همراهان همیشگی قصد داریم در مورد ویژگی جدید all در زبان css توضیحاتی را ارائه نماییم. خاصیت کاربردی all در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی جدید all در زبان طراحی سی اس اس
از طریق ویژگی جدید all می توانید کلیه خصوصیات css در تگ و یا تگ های html به جز صفات direction و unicode-bidi که جهت متن را مشخص می کنند، به حالت initial و inherit بازنشانی یا ریست کنید.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery
مقادیر صفت جدید 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
<!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
پشتیبانی مرورگرهای اینترنتی از این خاصیت در زبان طراحی css
| خاصیت css |  |  |  |  |  |
| all | ۳۷.۰ | عدم پشتیبانی | ۲۷.۰ | ۹.۱ | ۲۴.۰ |
