Borders به معنای حاشیه‌ها است. در این جلسه یاد می‌گیریم که چگونه برای عناصر خود حاشیه و یا خط مرزی ایجاد کنیم. تغییر استایل و ظاهر حاشیه‌ها به جذاب شدن عناصر کمک زیادی می‌کند. تغییر استایل، ضخامت و رنگ حاشیه‌ها از جمله مواردی است که می‌توانیم آن‌ها را تغییر دهیم.
استایل حاشیه
برای تغییر دادن استایل حاشیه باید از دستور border-style استفاده کنیم. از جمله مقادیری که این دستور می‌تواند بگیرد در زیر آورده شده است:
- Dotted
- solid
- double
- dashed
- groove
- و ….
که به ترتیب حالت نقطه چین، خط ساده، دو خطی، خط چین و حالت سه بعدی را ایجاد می‌کند. به عنوان مثال :
P{
border-style: dashed ;
}
در این حالت یک حاشیه به صورت خط چین دور تا دور فضای پاراگراف ایجاد می‌شود.
اکنون که نوع استایل حاشیه را مشخص کردیم ، می‌توانیم ضخامت و رنگ آن را نیز به دلخواه خود تغییر دهیم. توجه کنید اگر استایل را تعیین نکنیم دستورات مربوط به رنگ و ضخامت کار نخواهند کرد.
ضخامت حاشیه
Width به معنای ضخامت است. برای ایجاد تغییرات ضخامت حاشیه از دستور border-width استفاده می‌کنیم. برای مقدار دهی آن می‌توانیم از مقدار عددی مانند 2px و… استفاده کنیم و یا از مقادیر حرفی مانند thick ، medium و یا thin استفاده کنیم و حاشیه ی با ضخامت کم ، متوسط و یا زیاد به آن بدهیم. مثال:
P{
border-style: dashed ;
border-width: 2px;
}
رنگ حاشیه
به راحتی می‌توانیم با استفاده از دستور color رنگ حاشیه را تغییر دهیم. برای تغییر رنگ حاشیه می‌توانیم از مقادیر اسمی‌و یا قالب‌های رنگی استفاده کنیم.
P{
border-style: dashed ;
border-color: red;
}
نکته: موضوع مهمی‌وجود دارد اینکه ما می‌توانیم فقط یک یا دو یا سه یا هر چهار طرف حاشیه را استایل دهی کنیم. در واقع ما می‌توانیم هر طرف از حاشیه ی عنصر را به طور دلخواه تغییر دهیم. برای این کار می‌توانیم از دستورات زیر استفاده کنیم:
P{
border-top-style: solid ;
border-right-style: dotted;
border-bottom-style: groove ;
border-left-style: dashed ;
}
این ویژگی برای رنگ‌ها و ضخامت هم وجود دارد. و می‌توانیم از آن‌ها استفاده کنیم.
ساختار چند مقداری
فرض کنید می‌خواهیم مانند مثال بالا به یک پاراگراف border بدهیم. یعنی برای هر طرف، استایل متفاوتی بدهیم. اگر دقت کنید ما باید برای این کار از چهار دستور استفاده کنیم که این کار ما را از بهینه سازی کد‌ها دور می‌کند و تعداد دستورات ما را بالا می‌برد. برای این حالت راهکاری وجود دارد ما می‌توانیم از ساختار چهار مقداری، سه مقداری، دو مقداری و یا تک مقداری استفاده کنیم. و با این کار از زیاده نویسی جلوگیری کنیم.
به عنوان نمونه ، مثال بالا را می‌توانیم به شکل زیر بنویسیم:
P{
border-style: solid dotted groove dashed ;
}
یعنی در این حالت حاشیه ی بالا خط ساده و حاشیه سمت راست به شکل نقطه چین و حاشیه پایین حالت سه بعدی و حاشیه ی سمت چپ خط چین است. حال اگر از حالت سه مقداری استفاده کنیم به چه صورت است؟
P{
border-style: solid dotted dashed ;
}
در این حالت حاشیه ی بالا خط ساده ، حاشیه ی سمت راست و چپ هر دو به صورت نقطه چین و حاشیه ی پایین به شکل خط چین خواهد بود.
و اگر از دو مقدار استفاده کنیم چگونه خواهد بود؟ به عنوان مثال اگر:
P{
border-style: solid dotted ;
}
این گونه بنویسیم آن گاه حاشیه ی بالا و پایین خط ساده و حاشیه ی سمت راست و چپ به صورت نقطه چین می‌شود. و اگر از یک مقدار استفاده کنیم تمام اضلاع حاشیه به یک شکل خواهند بود.
زاویه‌های گرد
برای گرد کردن گوشه‌های حاشیه می‌توانیم از دستور زیر استفاده کنیم:
border-radius : 5px;
این خصوصیت به عناصر ما زیبایی خاصی می‌بخشد.
