آموزش CSS – آشنایی با Property یی تحت عنوان border در سی اس اس (CSS) (جلسه ۲۲)

معمولاً برای افزودن زیبایی بصری به Element های مختلف اچ تی ام ال (HTML) از Property یی تحت عنوان border استفاده می شود. به طور کلی border به سه صورت border-style، border-color و border-width مورد استفاده قرار می گیرد. این Property را هم می توان به صورت مجزا برای هر چهار جهت Element و یا به صورت یکباره برای کل Element در نظر گرفت.
ابتدا کدهای زیر را وارد فایل اچ تی ام ال (HTML) می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>This is border</p>
   </body>
</html>

برای درک بهتر هر یک از این Property ها، کد زیر را وارد فایل سی اس اس (CSS) می نماییم:

p {
   border-top-style:solid;
   border-right-style:solid;
   border-bottom-style:solid;
   border-left-style:solid;
   
   border-top-width:1px;
   border-right-width:1px;
   border-bottom-width:1px;
   border-left-width:1px;
   
   border-top-color:black;
   border-right-color:black;
   border-bottom-color:black;
   border-left-color:black;
}

به نظر می رسد که نوشتن کدهای مرتبط با border به صورت فوق کار دشواری باشد. برای راحت تر نوشتن این کدها، می توان آن ها را به صورت خلاصه مورد استفاده قرار داد:

p {
   border:1px solid black;
}

به منظور مشاهده کدهای فوق، فایل اچ تی ام ال خود را داخل مرورگر اجرا می کنیم:

xcss_border_property

همانطور که می بینیم، border یی به ضخامت یک پیکسل و رنگ مشکی و همچنین به شکل خطی یکپارچه و یکدست (solid) به نمایش در آمده است.
نکته بسیار مهمی که در ارتباط با border وجود دارد این است که مقدار در نظر گرفته شده برای border در اندازه کلی Element تاثیر خواهد داشت. برای مثال کدهای زیر را در نظر می گیریم:

p {
   width:100px;
   padding: 24px;
   border:1px solid black;
}

با در نظر گرفتن کد فوق، اندازه width این Element برابر است با border سمت چپ که یک پیکسل است + مقدار padding سمت چپ که معادل با ۲۴ پیکسل است، مقدار مرتبط با width که ۱۰۰ پیکسل است و مقدار مرتبط با padding سمت راست که مجدد ۲۴ پیکسل است و در نهایت مقدار مرتبط با border سمت راست که معادل است با یک پیکسل و جمع کل این اعداد برابر است با ۱۵۰ پیکسل.
نکته ای که در ارتباط با border-style وجود دارد این است که برای این Property می توان ده Value متفاوت در نظر گرفت که در تصویر زیر این ده Value نمایش داده شده اند:

2016-06-02_02-25-23

علاوه بر این مقادیر none، hidden و inherit را هم می توان برای این Property در نظر گرفت. لازم به ذکر است که برای مقادیر double، groove، ridge، inset و outset در بیشتر مواقع ضخامت border می بایست بیش از یک پیکسل باشد تا این مقادیر جلوه پیدا کنند.
برای مشاهده تاثیر مقادیر فوق الذکر، کد خود را به صورت زیر بازنویسی می کنیم:

p {
   width:100px;
   padding: 24px;
   border:7px double black;
}

همانطور که در کد فوق می بینیم، مقدار ۷px را برای ضخامت و مقدار double به معنی “دوبل، دوتا” را برای border-style در نظر گرفته ایم. مجدد مرورگر خود را به روز رسانی می کنیم:

xcss_double_border_property

نکته ای که در ارتباط با رنگ border وجود دارد این است که این رنگ مجزا از رنگ پس زمینه Element است. برای انتخاب رنگ border هم می توان از رنگ های از پیش تعریف شده در سی اس اس همچون white، black، blue و … استفاده کرد و هم از کدهای Hexadecimal استفاده کرد.
به طور مثال کد فوق را به صورت زیر بازنویسی می کنیم:

p {
   width:100px;
   padding: 24px;
   border:7px double #ffdeff;
}

برای مشخص سازی میزان اندازه boder همانطور که در کد زیر ملاحظه می شود می توان از مقادیر thin، medium و thick هم استفاده نمود:

p {
   width:100px;
   padding: 24px;
   border:thick solid #ffdeff;
}
221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان