حدود ومخططات CSS: دليلك الشامل

المقدمة

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

خاصية outline في CSS

الخاصية outline في CSS تُستخدم لرسم خط حول العنصر، يمكن استخدامها لزيادة تباين العنصر مع الخلفية أو لتحديد العنصر النشط أو المحدد. المخطط ليس جزءًا من بعد العنصر، ولن يؤثر على توزيع العناصر.

مثال على استخدامها:

button:focus {
  outline: 2px solid blue;
}

في هذا المثال، سيتم تطبيق خط زرقاء على زر عند التركيز عليه.

خاصية border في CSS

خاصية الحدود في CSS تسمح لك بتعيين حدود حول العناصر. يمكنك التحكم في عرض الحدود، نمط الحدود (مثل solid، dashed، dotted، وغيرها) ولون الحدود.

مثال على كيفية استخدامها:

div {
  border: 2px solid black;
}

في هذا المثال، سيتم تطبيق حدود سوداء بعرض 2px على جميع العناصر div في الصفحة.

خاصية outline-width في CSS

خاصية outline-width تتيح لك التحكم في عرض المخطط الذي يتم تطبيقه على العنصر. يمكن أن تحتوي هذه القيمة على واحدة من القيم التالية: thin، medium، thick، أو قيمة محددة بالبكسل.

مثال على كيفية استخدامها:

button:focus {
  outline-width: 5px;
}

في هذا المثال، سيتم تطبيق مخطط بعرض 5px على زر عند التركيز عليه.

خاصية border & outline في CSS

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

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

div {
  border: 2px solid black;
  outline: 3px solid red;
}

في هذا المثال، ستظهر حدود سوداء بعرض 2px حول العنصر، وستظهر مخطط أحمر بعرض 3px حول الحدود.

خصائص CSS لتعيين عرض الحدود

يمكن تحديد عرض الحدود بواسطة الخصائص التالية: border-width، border-top-width، border-right-width، border-bottom-width، و border-left-width. القيم الممكنة هي: thin، medium، thick، أو قيمة محددة بالبكسل.

مثال:

div {
  border-width: 2px;
}

في هذا المثال، سيتم تطبيق حدود بعرض 2px على جميع الأطراف لجميع عناصر div في الصفحة.

خصائص CSS outline و border لتعيين اللون

خصائص الحدود والمخطط في CSS تسمح لك بتعيين اللون بواسطة الخصائص التالية: border-color و outline-color. يمكن تحديد اللون باستخدام اسم اللون، أو القيم العشرية للألوان، أو تنسيقات الألوان الأخرى.

مثال على كيفية استخدامها:

div {
  border-color: red;
  outline-color: blue;
}

في هذا المثال، ستظهر حدود حمراء ومخطط أزرق حول العناصر div.

خاصية border-radius في CSS

تتيح لك خاصية border-radius في CSS تقريب الحدود للعناصر. يمكنك تحديد قيمة واحدة لجميع الأطراف، أو تحديد قيم مختلفة لكل طرف.

مثال على كيفية استخدامها:

div {
  border-radius: 10px;
}

في هذا المثال، سيتم تقريب الحدود لجميع عناصر div بقيمة 10px.

خاصية outline-offset في CSS

خاصية outline-offset في CSS تحدد المسافة بين المخطط والحافة الخارجية للعنصر. القيمة الافتراضية هي 0.

مثال على كيفية استخدامها:

button:focus {
  outline: 2px solid blue;
  outline-offset: 5px;
}

في هذا المثال، سيتم تطبيق مخطط أزرق بعرض 2px على الزر عند التركيز عليه، وسيكون هناك مسافة 5px بين الزر والمخطط.

الخصائص المختصرة لحدود ومخططات CSS

يمكن استخدام الخصائص المختصرة لتعيين معايير متعددة للحدود والمخططات في CSS في خط واحد. يمكن استخدام border لتعيين عرض الحدود، نمط الحدود، ولون الحدود. بنفس الطريقة، يمكن استخدام outline لتعيين عرض المخطط، نمط المخطط، ولون المخطط.

مثال على كيفية استخدامها:

div {
  border: 2px solid red;
  outline: 3px dotted blue;
}

في هذا المثال، ستظهر حدود حمراء بعرض 2px ومخطط أزرق بعرض 3px حول العناصر div.

تطبيق نمط الحدود المتقطع في CSS

توفر CSS أنماط حدود متنوعة يمكن تطبيقها على عناصر الويب. أحد هذه الأنماط هو الحدود المتقطعة. يمكنك تطبيق هذا النمط باستخدام خاصية border-style.

div {
  border-style: dashed;
}

في هذا المثال، سيكون لكل عناصر div حدود متقطعة.

تطبيق عرض الحدود في CSS

عرض الحدود يمكن تعديله باستخدام خاصية border-width. يمكنك تحديد العرض باستخدام البكسل أو باستخدام الكلمات الرئيسية thin (رفيع)، medium (متوسط)، و thick (سميك).

div {
  border-width: thick;
}

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

خاصية border-radius في CSS

خاصية border-radius في CSS تسمح بإضافة حدود مستديرة لعناصر الويب. يمكن تحديد نصف القطر باستخدام القيم النسبية أو البكسل.

div {
  border-radius: 25%;
}

في هذا المثال، ستكون الحدود لكل عناصر div مستديرة بنسبة 25%.

الخلاصة

من خلال استخدام خصائص CSS المتعددة للحدود والمخططات، يمكنك تحسين تجربة المستخدم على موقع الويب الخاص بك. تأكد من تجربة الخصائص المختلفة ورؤية كيف يمكنها تغيير مظهر موقع الويب الخاص بك.

أسئلة متكررة