آموزش CSS - مرزبندی(Border)

ویژگی border در CSS ویژگی ایست که با استفاده از آن میتوان یک خط به دور مرز داخلی یک عنصر کشیدو بطور کلی دارای 3 ویژگی زیر می باشد:

border-color رنگ خط مرز را مشخص می کند.
border-style استایل خط مرز را مشخص می کند.
border-width اندازه خط مرز را مشخص می کند.

ویژگی border-color

ویژگی border-color به شما امکان می دهد رنگ مرز داخلی اطراف یک عنصر را تغییر دهید. شما می توانید به صورت جداگانه رنگ قسمت های پایین، چپ، بالا و راست مرز عنصر را با استفاده از ویژگی ها تغییر دهید :

border-bottom-color رنگ مرز پایین را تغییر می دهد.
border-top-color رنگ مرز بالایی را تغییر می دهد.
border-left-color رنگ مرز سمت چپ را تغییر می دهد.
border-right-color رنگ مرز سمت راست را تغییر می دهد. −

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* سبز */
            border-top-color:#FF0000;    /* قرمز*/
            border-left-color:#330000;   /* سیاه */
            border-right-color:#0000CC;  /* ابی */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* سبز */
         }
      </style>
   </head>

   <body>
      <p class = "example1">
        این مثال تمام مرز ها را در رنگ های مختلف نشان می دهد.
      </p>
      
      <p class = "example2">
         این مثال تمام مرز ها را فقط به رنگ سبز نشان می دهد.
      </p>
   </body>
</html>

ویژگی border-style

ویژگی border-style به شما امکان می‌دهد یکی از سبک‌های زیر را برای مرز انتخاب کنید :

none (بدون) :مقدار اولیه این ویژگی است که باعث می شود مرز کاملا نادیده گرفته شود و عرض آن هم مقدار 0 در نظر گرفته شود. مگر اینکه مرز تصویری برای عنصر تعریف کنیم.(معادل ; border-width:0)
solid : باعث ترسیم یک خط ساده و تخت به عنوان مرز می شود. .
dotted (نقطه‌ای) : این مقدار باعث می شود تا حاشیه بصورت نقطه ای باشد در نظر داشته باشید که برخی مرورگرها نقطه های مربعی بوجود می آورند و برخی دایره ای شکل ترسیم می کنند.
dashed (خط چین) : مرز را تبدیل به خط چین می کند.
double (دو خط جامد) :دو خط راست و ساده به موازی هم در اطراف عنصر کشیده می شوند که جمع ضخامت و فاصله بین این دو خط برابر با عرضی است که برای حاشیه تعیین می کنیم.
groove (شیاری) :این حالت ایجاد شکاف و تو رفتگی دور عنصر می باشد که با استفاده از دو رنگی که کمی روشن تر و کمی تیره تر از رنگ حاشیه هستند بوجود می آید.
ridge (ریجی) : این حالت مخالف groove است و یک حاشیه برجسته یا سه بعدی بوجود می آورد.
inset (درون فرو شده): زمانی که از این حالت استفاده می کنیم عنصر شبیه به این دیده می شود که انگار فرورفتگی دارد.
outset (بیرون فرو شده):حالت متضاد حالت inset است و گویا عنصر حالت برآمدگی دارد.
hidden (مخفی): مانند none است، با این تفاوت که برای اجزای جدول مرز استفاده می‌شود.

می‌توانید با استفاده از ویژگی‌های زیر، استایل هر یک از مرزهای بالا، پایین، چپ و راست یک المان را به صورت مجزا تغییر دهید:

سبک-مرز-پایین (Border-bottom-style) − سبک مرز پایین را تغییر می‌دهد.
سبک-مرز-بالا (Border-top-style) − سبک مرز بالا را تغییر می‌دهد.
سبک-مرز-چپ (Border-left-style) − سبک مرز چپ را تغییر می‌دهد.
سبک-مرز-راست (Border-right-style) − سبک مرز راست را تغییر می‌دهد.

مثال زیر تمامی استایل‌های مرز را نشان می‌دهد:

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

خاصیت border-width

خاصیت border-width به شما اجازه می‌دهد تا عرض مرز‌های عناصر را تنظیم کنید. مقدار این خاصیت می‌تواند یک طول به واحد px، pt یا cm یا مقدار thin، medium و thick باشد.

شما می‌توانید با استفاده از خواص زیر، عرض مرز‌های پایینی، بالایی، چپ و راستی یک عنصر را به صورت جداگانه تغییر دهید:

خاصیت border-bottom-width عرض مرز پایینی را تغییر می‌دهد.
خاصیت border-top-width عرض مرز بالایی را تغییر می‌دهد.
خاصیت border-left-width عرض مرز چپ را تغییر می‌دهد.
خاصیت border-right-width عرض مرز راست را تغییر می‌دهد.

مثال زیر نشان می‌دهد که چگونه می‌توانید تمامی این عرض‌های مرز را تغییر دهید:

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>
      
      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>
      
      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>
      
      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>
      
      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>
      
      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html>

خاصیت مرز با استفاده از کد مختصر

خاصیت border به شما اجازه می‌دهد تا عرض، سبک و رنگ خطوط مرز را با یک خاصیت تعیین کنید.توجه داشته باشد که ترتیب نوشتن مهم میباشد .

مثال زیر نشان می‌دهد چگونه از تمامی این خاصیت‌ها در یک خاصیت استفاده کنید.

<html>
   <head>
   </head>

   <body>
      <p style = "border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

جداول - درس قبلی

درس بعدی - حاشیه از بیرون (Margins)