کار با خاصیت border در زبان CSS همراه با نمونه کدها

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

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

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

خطوط حاشیه با خاصیت border :

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

توضیح : خطوط حاشیه به دور یک عنصر در چهار جهت بالا ، پایین ، راست و چپ کشیده می شوند . در CSS می توان هر یک از این خواص را به تنهایی تعریف کرده و برای هر کدام خواص جداگانه ای مثل رنگ ، ضخامت و … تعیین کرد

ما ابتدا در این قسمت خاصیت border را معرفی کرده و سپس تعیین آن را برای جهت های مختلف توضیح می دهیم

تعریف : خاصیت چند مقداری جهت دریافت کلیه ویژگی های برای حاشیه کامل به دور عنصر است ، که هر یک از این ویژگی ها باید به ترتیب زیر وارد شود :

border : [ border-width ] [ border-style ] [ border-color ]

خواص ارائه شده در این قسمت در لیست زیر قرار دارند ، برای دریافت اطلاعات درباره هر کدام بر روی آن کلیک کنید :

آشنایی با مجموعه خاصیت border

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

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

نکته مهم : در جدول باید خاصیت border را بر هر یک از خانه های جدول ( تگ td ) به صورت جداگانه اعمال کنیم . خواص هر خانه می تواند کاملا با دیگران متفاوت باشد.

<table cellspacing="0" style="border-color: Blue; border-style: solid;
 border-width: medium; width: 500px">
 <tr>
<td style="border-color: Blue; border-style: solid; border-width: medium">
    Cell 1
  </td>
<td style="border-color: Green; border-style: solid; border-width: medium">
    Cell 2
</td>
</tr>
</table>

<table cellspacing="0" style="border: solid medium blue ; width: 500px">
  <tr>
<td style= "border: solid medium blue">
    Cell 1
  </td>
  <td style= "border: solid medium green">
    Cell 2
  </td>
 </tr>
</table>

مثال : در حالت زیر خواص متفاوتی را برای هر کدام از خانه های جدول تعیین کرده ایم.

< table cellpadding="5" cellspacing="5" style="border: solid medium blue;
 width: 500px" >
  < tr >
    < td style="border: solid thin blue" >
      Cell 1 solid , thin
    < /td >
    < td style="border: dashed medium blue" >
      Cell 2 dashed , medium
    < /td >
    < td style="border: double thick maroon" >
      Cell 3 double , thick
    < /td >
  < /tr >
  < tr >
    < td style="border: dotted thick green" >
      Cell 4 dotted , thick
    < /td >
    < td style="border: outset medium green" >
      Cell 5 outset , medium
    < /td >
    < td style="border: inset medium red" >
      Cell 6 inset , medium
    < /td >
  < /tr >
  < tr >
    < td style="border: ridge medium red" >
      Cell 7 ridge , medium
    < /td >
    < td style="border: groove medium red" >
      Cell 8 groove , medium
    < /td >
    < td style="border: hidden medium blue" >
      Cell 9 hidden , medium
    < /td >
  < /tr >
< /table >

نکته مهم : خطوط حاشیه برای هر عنصر در ۴ جهت بالا ، راست ، پایین و چپ تعیین می شود . در CSS می توان تعیین یا عدم تعیین و خصوصیات خط حاشیه را برای هر جهت به صورت جدا مقدار دهی کرد.

حالت اول : تعیین به صورت خاصیت چند مقداری

هر یک از خواص border-color , border-width , border-style معرفی شده در قسمت بالا می توانند خصوصیات ۴ جهت خطوط حاشیه به دور یک عنصر را به صورت کامل در قالب یک خاصیت به شرح زیر دریافت کنند :

border- style : خط بالا style خط راست style خط پایین style خط چپ style

border- width : خط بالا width خط راست width خط پایین width خط چپ width

border- color : خط بالا color خط راست color خط پایین color خط چپ color

مثال : به طور مثال اگر خاصیت border-color برای یک خانه جدول به صورت زیر تنظیم شود ، داریم :

border-color: Red Black Blue Green;

به این معنی است که رنگ خط حاشیه بالا قرمز ، رنگ حاشیه راست مشکی ، رنگ حاشیه پایین آبی و رنگ حاشیه چپ سبز خواهد بود .

<table style="border: solid 2px maroon; width: 500px;
 height: 100px">
  <tr>
<td style="border-style: solid dashed solid dashed;
 border-color: Red Blue Green black">
    Cell 1
</td>
<td style="border-style: dashed solid dashed solid;
 border-color: Green Black Red Blue">
    Cell 2
</td>
</tr>
</table>

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

هر یک از خواص فوق را می توان به صورت تک مقداری نیز ، مقدار دهی کرد . مجموعه خواص جدول زیر در برگیرنده کلیه صفات ممکن برای خطوط ۴ گانه هستند :

مثال : به مثال زیر و نحوه تعیین خواص برای خطوط حاشیه خانه جدول توجه کنید . برای دریافت اطلاعات راجع به هر خاصیت موس را چند لحظه روی کد آن نگه دارید :

<table style="border: solid 2px maroon; width: 500px; height: 100px">
 <tr>
<td style =" border-top: dotted 3px green; border-bottom-color: Red;
  border-bottom-style : double ; border-bottom-width : 2px;
  border-right: dashed 2px blue ; border-left: dashed 1px yellow"> 
   Cell 1
</td>
</tr>
</table>

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