کوتاه نویسی پس زمینه (Background Shorthand)
«کوتاه نویسی پس زمینه (Background Shorthand)» یعنی چند تنظیم پس زمینه را یکجا بنویسیم. نتیجه کوتاه تر می شود و خوانایی بهتر می شود؛ مخصوصاً وقتی استایل زیاد داریم.
ایده کوتاه نویسی در CSS
به جای نوشتن چند ویژگی جدا، می توانیم همه را با ویژگی background بنویسیم. این روش را Shorthand می گویند؛ یعنی «کوتاه نویسی».
حالت عادی (بدون کوتاه نویسی)
اینجا هر ویژگی جدا نوشته شده است. کد طولانی تر است.
<style>
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
</style>
همه چیز در یک خط (Shorthand)
اکنون همان تنظیم ها را با background در یک اعلان می نویسیم.
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
</style>
ترتیب مقادیر در کوتاه نویسی
ترتیب پیشنهادی: background-color، سپس background-image، بعد background-position و background-size، سپس background-repeat، background-origin، background-clip، و در پایان background-attachment.
گام های عملی
- ویژگی های جدا را مشخص کن و تست کن.
- همان ها را با
backgroundدر یک خط بنویس. - ترتیب مقادیر را رعایت کن و نتیجه را چک کن.
نکته: جا افتادن یک مقدار مشکلی ندارد؛ اما ترتیب بقیه باید درست بماند.
مطالب مرتبط: تصویر پس زمینه، تکرار پس زمینه، پیوست پس زمینه. همچنین برای دسترسی سریع، همین کوتاه نویسی پس زمینه را نشانه گذاری کن.
جمع بندی سریع
backgroundکد را کوتاه و تمیز می کند.- ترتیب مقادیر اهمیت زیادی دارد.
- جا افتادن چند مقدار مجاز است.
- برای جزئیات، صفحات مرتبط را ببین.