CSS تنظيم المحتوى

CSS border : الحدود

آخر تحيين: 05-01-2015

CSS الهوامش CSS الطول و العرض


لنتعرف على ثلاث خاصيات تُستعمل لتحديد حجم و تزيين حُدود الكتل و هي

  • border-width : عرض الحُدود
  • border-style : نوع الحدود
  • border-color : لون الحدود

CSS border-width

لتحديد عرض وسم الكتلة يمكننا استعمال القيمة بالبيكسل ، و هذا عملي و سهل . أمّا لعُشّاق القيم المُسمّاة ، توجدُ ثلاث

  • thin : حُدود رقيقة
  • medium : حُدود متوسّطة
  • thick : حُدود سميكة

مثال الإستعمال لكلتا الحالتين

p.one {
    border-width: 5px;
}
p.two {
    border-width: medium;
}

رغم أننا حددنا حجم حدود الفقرة ، إلا أنها تبقى دون فاعلية بدون الخاصية الثانية border-style

ِCSS border-style

لتحديد نوع حدود الكُتلة ، لدينا عدّة قِيَم عبارة عن أسماء :

  • solid : حدود بخط عادي
  • dotted : حدود مُنقّطة
  • dashed : حدود بخط مُتقطّع
  • double : خط مزدوج
  • groove : حدود على شكل تضاريس أو نتوء
  • ridge : تأثير ثلاثي الأبعاد 3D
  • inset : تأثير ثلاثي الأبعاد داخلي
  • outset : تأثير ثلاثي الأبعاد خارجي
  • none : بدون حُدود . يُمكننا إعطاء قيمة 0 بدل هذه القيمة و هو المُتعارَفُ عليه ، لا لشيء إلاّ لربح الوقت مثلا border:0px; أو border:0; بكل بساطة

مثال :

p {
    border-width: 5px;
    border-style: dotted;  
}
مشاهدة النتيجة

CSS border-color

لدينا ثلاث طُرق مختلفة لتحديد اللون ، وهي ليست بالجديدة و لا الغريبة عنكم
- إما إعطاء اسم اللون ،
- أو طريقة hexadecimal : (#ffab00)
- أو استعمال طريقة rgb : rgb(124,255,10) .

p {
    border-width: 5px;      /* عرض الحدود */
    border-style: solid;   /* نوع الحدودو */
    border-color: #FF0000;  /* لون الحدود */
}

و المُفاجئة السّارة . بدل أن نكتب الخاصيات الثلاث ثُمّ إعطاء كل خاصّية قيمتها على حِدة . يّمكننا جمعها في خاصّية واحدة تُسمّى border و هي ،خاصّية مُميّزة من نوع ميغا (Mega Propriety) و هذا النّوع يُتيح لنا إمكانية الجمع بين مجموعة من القِيَم في نفس الوقت كالخاصية التي رأيناها سابقا background . كذلك border تُمكّننا من إعطاءها ثلاثة قيم دُفعةً واحدة .
لإعطاء القيم الثلاث أي عرض و لون ونوع الحدود ،دُفعة واحدة للخاصّية border . نكتبها كما يلي :

p {border: 5px solid #FF0000; }
مشاهدة النتيجة
ترتيب القيم في الخاصية border ، يكون على الشّكل التالي :
  • border-width
  • border-style
  • border-color

لن نقف عند هذا الحدّ ، ما دام CSS يوفّر لنا خيارات أخرى . لسنا مرغمين أن نضيف نفس الحدود للجهات الأربعة للكتلة . فيمكننا إضافة حد مختلف لكل جهة و ذلك باستعمال الخاصيات التالية

  • border-top : الحد العلوي
  • border-bottom : الحد السفلي
  • border-left : حد الجانب الأيسر
  • border-right : حد الجانب الأيمن

نستعمل هذه الخاصّيات الأربع بنفس الطريقة التي استخدمنا بها خاصية border . بخلاف أن القيم هنا تُطبّق على جانب واحد فقط من الإطار

  .top_bottom
   {
   border-top: 4px dashed red;      /* الحد العلوي */
   border-bottom: 4px dashed red;   /* الحد السفلي */
  }
 .left_right
   {
   border-left: 8px solid black;   /* الحد الأيسر */
   border-right: 8px solid silver; /* الحد الأيمن */
  } 
 .all_borders
   {
   border-top: 5px dotted blue;       /* الحد العلوي */
   border-left: 3px solid green;      /* الحد الأيسر */
   border-right: 3px solid green;     /* الحد الأيمن */
   border-bottom: 5px dotted blue;    /* الحد السفلي */
  }
مشاهدة النتيجة
إذا رغبتم في تطبيق نفس الحدود على جميع الجوانب ، لا تنسوا أن تستعملوا الخاصّية border بدل إعادة كتابة الخاصيات الأربع

يمكن استعمال الخاصّية border أيضا على الوسوم الدّاخلية (inline) مثلا على كلمة أو جملة ، و لما لا ؟ إن أردت سَجن كلمة في حدود معيّنة رغم أن هذا لا يبدو إنسانيا . أعني عمليّا . وليس ذو فائدة . لكن لن نقلّل من أهمية هذه الخاصيّة ، و خاصّة على الوسم img . فهو كما تعلمون ،وسم من نوع inline . أنظروا الجدول السابق لتتأكّدوا . و وضيفتُه إدراج الصّور .
- أتذكرون بعض الصّور التي قمنا بإدراجها كأمثلة في ذلك الدّرس ؟ و الصّورة التي وضعناها كرابط ؟ ، سأضع واحدة أمام أعينكم مرّة أخرى . و أريدكم أن تركّزوا على حدود الصّورة

كما لاحظتم فالصّورة محاطة بإطار ذو حدود زرقاء أو بلون آخر حسب المتصفّح الذي تستعملونه . و تلك هي الطريقة التلقائية لعرض الصّورة التي تُمثّلُ الرّابط عند جل المُتصفّحين (browsers) . و هذا الإطار ليس مرحّباً به عند أغلبية المُطوّرين ، إذاً ،لحذف هذا الإطار ، سنُطبّق خاصّية border على الوسم img

img {
    border:0;
}