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

علیرضا حاتمی نیا 8369

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

حاشیه یا border

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

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

خصوصیت border-style

این خصوصیت نوع border را مشخص می کند. اهمیت این خصوصیت از آنجایی ست که اگر مقدار آن تعیین نشود لبه یا border کلا نمایش داده نمی شود.

مهمترین مقادیری که این خصوصیت دریافت می کند عبارتند از:

  • solid : لبه به صورت یکپاچه و ادامه دار نمایش داده می شود. (در تصویر بالا مانند div1 )
  • dashed : لبه به صورت خط های تیره نمایش داده می شود. (در تصویر بالا مانند div2)
  • dotted : لبه به صورت نقطه چین نمایش داده می شود. ( در تصویر بالا مانند div3)
  • double : دو لبه برای عنصر نمایش داده می شود.
     
 .div1 { border-style:solid;}
 .div2 { border-style: dashed;}
 .div3 { border-style: dotted;}
 .div4 { border-style: double;}

خصوصیت border-width

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

.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;}

خصوصیت border-color

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

.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;}

تعریف لبه یا border به صورت جداگانه

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

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

خصوصیت border جهت خلاصه نویسی

در CSS شما می توانید تمامی خواص بالا را به صورت یک خاصیت و یا به اصطلاح مختصر نویسی کنید.
برای این منظور به جای خواص گفته شده در بالا از خاصیت border استفاده می کنیم.

مقداری که این خاصیت دریافت می کند به ترتیب عبارتند از :

  1. border-width
  2. border-style
  3. border-color

به جز مقدار border-width می توانید بقیه مقادیر را وارد نکنید.
 

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

 

کلمات کلیدی

لینک های مرتبط

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