إعلان
تعلم الآن

CSS الحدود الخارجية

مفهوم الحدود الخارجية

الحدود الخارجية ( Outline ) هي خطوط يمكن إظهارها حول العناصر من كل الجهات مثل الحدود العادية ( Border ) و لكنها تستخدم لأهداف أخرى هي إظهار حدود مؤقتة حول العنصر الذي يقف عنده المستخدم مثل الزر الذي نقر عليه أو مربع النص الذي يكتب فيه و كذلك يمكن استخدامها لاكتشاف أخطاء القياسات الموضوعة للعناصر.

الحدود الخارجية تظهر حول الحدود التي يمكن إضافتها للعنصر.

Outline apear arround border

في حال كانت زواية حدود العنصر مائلة فإن الحدود الخارجية ستميل مثلها.

Rounded border with rounded outline

يمكن إضافة هامش بين حدود العنصر و حدوده الخارجية ستميل م.

Outline offset 5px

خصائص الحدود الداخلية و الخارجية

التعامل مع الحدود الخارجية يشبه كثيراً التعامل مع الحدود العادية و القيم التي يمكن وضعها لخصائصهما هي نفسها و لكن الفرق بينهما أن الحدود الخارجية فيها خيارات أقل.

على سبيل المثال، الحدود العادية يمكن تحديد حجم و لون و شكل كل جهة فيها على حدا و هذا غير ممكن في الحدود الخارجية حيث يمكن تحديد شكل الحدود و حجمها و لونها من كل الجهات بذات القدر.


ملاحظة

الحدود الخارجية يتم رسمها حول حدود العنصر و لكنها لا تأخذ مساحة من حجمه.
إذاً حدود العنصر الخارجية قد تظهر فوق العناصر القريبة إن كانت ملاصقة لها.

تحديد شكل الحدود الخارجية العنصر

لتحديد شكل الحدود الخارجية نضيف الخاصية outline-style و من ثم نمرر لها إحدى القيم التالية:

  • dotted لإظهار الحدود الخارجية كنقط.
  • dashed لإظهار الحدود الخارجية كخط متقطع.
  • solid لإظهار الحدود الخارجية كخط.
  • double لإظهار الحدود الخارجية كخط مزدوج.
  • groove لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأنها أخدود.
  • ridge لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأنها قمة.
  • inset لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة السفلية ناحية اليمين.
  • outset لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة العلوية ناحية اليسار.
  • none لإزالة الحدود الخارجية و هي نفسها outline-width: 0;.

في المثال التالي قمنا بتعريف كلاسات CSS عند إضافتها للعناصر فإنها تظهر حدود خارجية لها شكل محدد حولها.
لتبسيط الشرح جعلنا أسماء الكلاسات مثل أسماء أشكال الحدود الخارجية التي تظهرها.

مثال

.dotted { 
    outline-style: dotted;
}

.dashed {
    outline-style: dashed;
}

.solid {
    outline-style: solid;
}

.double {
    outline-style: double;
}

.groove {
    outline-style: groove;
}

.ridge {
    outline-style: ridge;
}

.inset {
    outline-style: inset;
}

.outset {
    outline-style: outset;
}

.none {
    outline-style: none;
}
        
جرب الكود

تحديد سمك الحدود الخارجية

لتحديد سمك الحدود الخارجية نضيف الخاصية outline-width و من ثم نمرر لها إحدى القيم التالية:

  • thin لجعل الحدود الخارجية رفيعة السمك.
  • medium لجعل الحدود الخارجية متوسطة السمك.
  • thick لجعل الحدود الخارجية عريضة السمك.
  • رقم بالبكسل px أو بوحدة قياس أخرى ليمثل سمك الحدود الخارجية.

في المثال التالي قمنا بتعريف كلاسات CSS عند إضافتها للعناصر فإنها تظهر حدود خارجية أحجامها مختلفة.

مثال

.one {
	outline-style: solid;
	outline-width: 2px;
}

.two {
	outline-style: solid;
	outline-width: medium;
}

.three {
	outline-style: solid;
	outline-width: thick;
}
        
جرب الكود

تحديد لون الحدود الخارجية

لتلوين حدود العنصر الخارجية نستخدم الخاصية outline-color و اللون نضعه لها كقيمة من خلال إسمه ( Color Name ) أو بتحديد درجته بأسلوب HEX أو RGB أو RGBA أو HSL أو HSLA كما تعلمنا في درس الألوان.


ملاحظة

إن لم يكن شكل الحدود الخارجية outline-style محدداً فإن لون الحدود outline-color لن يظهر لأنه منطقياً لا يمكنك تلوين الحدود و هي بالأساس غير موجودة.


فيما يلي قمنا بتلوين الحدود الخارجية للعناصر بـألوان مختلفة.

مثال

.one {
    outline-style: solid;
    outline-color: red;
}

.two {
    outline-style: solid;
    outline-color: green;
}

.three {
    outline-style: solid;
    outline-color: blue;
}
        
جرب الكود

تعريف كل خصائص الحدود الخارجية بسطر واحد

لتحديد سمك، شكل و لون حدود العنصر الخارجية بشكل مختصر أكتب outline و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

outline: [outline-width] [outline-style] [outline-color];

في المثال التالي قمنا بإظهار حدود خارجية سمكها 5 بكسل على شكل خط لونه أحمر.

مثال

.demo {
    outline: 5px solid red;
}
        
جرب الكود

إبعاد الحدود الخارجية عن الحدود الأصلية للعنصر

لإبعاد الحدود الخارجية للعنصر عن حدوده الأساسية نضيف الخاصية outline-offset و من ثم نمرر لها رقم بالبكسل أو بوحدة قياس أخرى ليمثّل حجم الفراغ بينهما.


في المثال التالي قمنا بإبعاد حدود العنصر الأساسية عن حدوده الخارجية بمقدار 5 بكسل.

مثال

.demo {
	border: 2px solid black;
    outline: 2px solid cadetblue;
	outline-offset: 5px;
}
        
جرب الكود

في المثال التالي قمنا بإبعاد حدود العنصر الأساسية عن محتواه بمقدار 10 بكسل، و قمنا بإعداد حدوده الخارجية عن حدوده الأساسية بمقدار 5 بكسل.

مثال

.demo {
	border: 2px solid black;
    outline: 2px solid cadetblue;
	outline-offset: 5px;
    padding: 10px;
}
        
جرب الكود

طريقة معرفة العنصر الذي يسبب مشكلة في حجم الصفحة

حين يصبح محتوى الصفحة كبيراً أحياناً تبدأ بملاحظة أنه يظهر شريط تمرير ( Scrollbar ) لسبب غير معروف و هذا الأمر يجعل الصفحة تظهر بشكل سيئ أمام المستخدم.

حتى نعرف من هو العنصر الذي يسبب المشكلة نقوم بإظهار الحدود الخارجية لجميع العناصر و من ثم نراقب من هو العنصر الذي يتطلب مساحة زيادة.

* {
    outline: 1px solid red;
}
    

كمثال عملي لاحظ أن الصفحة التالية يظهر فيها شريط تمرير في الأسفل مع أنه لا يوجد أي داعي لأن يظهر.

جرب الكود


لمعرفة سبب ظهور هذا الشريط نحتاج أن نعرف الحجم الفعلي للعناصر لكي نعرف من هو العنصر الذي يحتاج مساحة زيادة و الذي بسببه ظهر هذا الشريط. لذلك نقوم بإظهار حدود خارجية لجميع عناصر الصفحة كالتالي.


الآن نقوم بإزاحة شريط التمرير فيظهر لنا العنصر الذي يسبب هذه المشكلة بكل سهولة.

جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة