آشنایی با حاشیه بندی یا Border در CSS

1395/9/24 علیرضا حاتمی نیا 3998

با سلام و خسته نباشید خدمات شما علاقه مندان به آموزش طراحی وب
علیرضا حاتمی نیا هستم به قسمتی دیگر از آموزش های طراحی وب HTML CSS در خدمت شما هستم
در این جلسه با خصوصیت border در CSS جهت  تعریف حاشیه یا  لبه برای عناصر HTML آشنا می شویم.

شاید شما قصد داشته باشید برای عناصری در صفحه مانند تصاویر ، پاراگرافها ، div ها و … حاشیه یا لبه تعریف کنید. لبه ها معمولا دارای خصوصیاتی مانند رنگ، ضخامت و نوع  (مثلا خط، نقطه چین و...) می باشند.
در شکل زیر برای 3 عنصر div در صفحه حاشیه های جداگانه تعریف کرده ایم.

ایجاد حاشیه یا لبه توسط Css

خصوصیت border-style :
این خصوصیت نوع border را مشخص می کند. اهمیت این خصوصیت از آنجایی ست که اگر مقدار آن تعیین نشود لبه یا border کلا نمایش داده نمی شود.
مهمترین مقادیری که این خصوصیت دریافت می کند عبارتند از:
solid : لبه به صورت یکپاچه و ادامه دار نمایش داده می شود. (در تصویر بالا مانند div1 )
dashed : لبه به صورت خط های تیره نمایش داده می شود. (در تصویر بالا مانند div2)
dotted : لبه به صورت نقطه چین نمایش داده می شود. ( در تصویر بالا مانند div3)
double : دو لبه برای عنصر نمایش داده می شود.

 

<style>
.div1 { border-style:solid;}
.div2 { border-style: dashed;}
.div3 { border-style: dotted;}
.div4 { border-style: double;}
</style>

خصوصیت border-width:
برای تعیین اندازه ضخامت لبه از این خصوصیت استفاده می شود. مقداری که این خصوصیت دریافت می کند پیکسل است که با px نشان داده می شود.
مثلا مقدار 5 پیکسل به صورت 5px نمایش داده می شود.

<style>
.div1 { border-style:solid; border-width: 1px;}
.div2 { border-style: dashed; border-width: 5px;}
.div3 { border-style: dotted; border-width: 3px;}
.div4 { border-style: double; border-width: 10px;}
</style>

خصوصیت border-color :
برای تعیین رنگ لبه یا border مورد نظر از این خاصیت استفاده می شود. مقدار این خصوصیت از قوانین رنگها پیروی می کند.

<style>
.div1 { border-style:solid; border-width: 1px; border-color:red;}
.div2 { border-style: dashed; border-color: #1dd13f;}
.div3 { border-style: dotted; border-color:blue;}
.div4 { border-style: double; border-color:green;}
</style>

تعریف لبه یا border به صورت جداگانه :
شما می توانید در CSS برای عناصر لبه هایی جداگانه تعریف کنید. مثلا فقط برای لبه بالا یا فقط برای لبه های چپ و راست و یا تعریف لبه فقط برای لبه پایین و چپ.

 

<style>
.div1 { border-top-style:dotted;}
.div2 { border-right-style:solid;}
.div3 { border-left-style:solid;}
.div4 { border-bottom-style:dotted;}
</style>


خصوصیت border جهت خلاصه نویسی:
در CSS شما می توانید تمامی خواص بالا را به صورت یک خاصیت و یا به اصطلاح مختصر نویسی کنید.
برای این منظور به جای خواص گفته شده در بالا از خاصیت border استفاده می کنیم. مقداری که این خاصیت دریافت می کند به ترتیب عبارتند از :
1.  border-width
2.  border-style
3.  border-color
به جز مقدار border-width می توانید بقیه مقادیر را وارد نکنید.

 

<style>
.div1 { border:5px solid blue;}
.div2 { border:2px dashed red;}
.div3 { border:5px dotted red;}
.div4 { border: solid red;}
</style>


بسیار عالی تا به اینجای کار با نحوه تعریف و تنیم border در CSS آشنا شدیم. طبق روال همیشه یک فیلم ویدیویی جهت تفهیم بیشتر این مبحث برای شما عزیزان آماده کردم که لینک دانلود و مشاهده این ویدویی رو در ادامه خواهم گذاشت. ممنون که همراه ما هستید.

دانلود PDF قسمت شانزدهم طراحی وب

دانلود ویدیو طراحی وب

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت