کوتاه نویسی حاشیه (Border Shorthand)
کوتاه نویسی حاشیه یعنی با ویژگی «border» همه چیز را یک جا بنویسی. «حاشیه (Border)» قاب دور عنصر است. همچنین «میان بر (Shorthand)» یعنی جمع کردن چند ویژگی در یک خط.
مرور سریع ویژگی میان بر border
«border» میان بر «border-width»، «border-style» و «border-color» است. «border-style» ضروری است؛ چون نوع خط را مشخص می کند.
نمونه: حاشیه کامل در یک خط
<style>
p.demo {
border: 5px solid red;
}
</style>
<p class="demo">Some text</p>
میان بر برای یک ضلع خاص
می توانی فقط یک طرف را هم کوتاه بنویسی؛ مثل «border-left» یا «border-bottom».
نمونه: فقط چپ
<style>
p.leftOnly {
border-left: 6px solid red;
}
</style>
<p class="leftOnly">Some text</p>
نمونه: فقط پایین
<style>
p.bottomOnly {
border-bottom: 6px solid red;
}
</style>
<p class="bottomOnly">Some text</p>
نکته: اگر «border-style» ندهی، بقیه تنظیم ها دیده نمی شوند. چون سبک خط مشخص نشده است.
گام های عملی
- ابتدا «border-style» مناسب را تعیین کن.
- سپس پهنا و رنگ را اضافه کن.
- در صورت نیاز، فقط یک طرف را مقدار بده.
مطالب مرتبط: طرف های حاشیه، عرض حاشیه، رنگ حاشیه، و حتی کوتاه نویسی حاشیه برای این صفحه.
جمع بندی سریع
- border میان بر سه ویژگی است.
- border-style همیشه لازم است.
- می توانی فقط یک طرف را ست کنی.
- کد کوتاه تر، خوانایی بهتر می شود.