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

آشنایی با حاشیه بندی یا Border در 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 استفاده می کنیم.

مقداری که این خاصیت دریافت می کند به ترتیب عبارتند از :
border-width
border-style
border-color
به جز مقدار border-width می توانید بقیه مقادیر را وارد نکنید.
 
.div1 { border:5px solid blue;}
.div2 { border:2px dashed red;}
.div3 { border:5px dotted red;}
.div4 { border: solid red;}


مطالب مشابه

ارسال نظر

عکس خوانده نمی‌شود





2018 © تمامی حقوق این وب‌سایت برای پیشروسافت محفوظ است.
انصراف
سوالی دارید؟ پاسخگو هستیم