تعلم CSS بالعربية 2023 _ #5 CSS Outline
CSS Outline هي خاصية في CSS تستخدم لتعيين خط دائري أو مستطيل حول العنصر، وعادة ما تستخدم لتحديد وتسهيل رؤية العنصر في الصفحة. يمكن استخدام خاصية CSS Outline لتحديد العناصر التي تتميز بالتركيز (focus)، والتي يتم تحديدها عندما يتم تحديد العنصر باستخدام لوحة المفاتيح أو الماوس.
يمكن تعيين السمة CSS Outline باستخدام القيمة “outline”، ويمكن أيضًا تحديد سمك ونوع الحدود باستخدام القيم الأخرى مثل “outline-width” و “outline-style”. يمكن أيضًا تعيين لون الحدود باستخدام القيمة “outline-color”.
على سبيل المثال، يمكن تعيين خاصية CSS Outline على النحو التالي:
outline: 2px solid blue;
هذا سيعيد خطاً من اللون الأزرق الداكن بسماكة 2 بكسل حول العنصر المحدد.
يمكن أيضًا استخدام القيمة “none” لإزالة الحدود الخارجية تمامًا، كما يمكن استخدام قيم أخرى مثل “dotted” أو “dashed” لتحديد نوع الحدود.
إن استخدام CSS Outline يمكن أن يكون ذو فائدة كبيرة في تحديد العناصر التي تحتاج إلى التركيز وتحسين تجربة المستخدم في المواقع والتطبيقات على الويب.
تحديد خاصية CSS Outline للعناصر التي لا تحتوي على تركيز؟
يمكن تحديد خاصية CSS Outline للعناصر التي لا تحتوي على تركيز باستخدام الاختيارات الجماعية (selectors) في CSS. يمكن استخدام الاختيارات الجماعية لتحديد مجموعة من العناصر وتطبيق الخصائص CSS عليها جميعًا.
على سبيل المثال، إذا كنت تريد تحديد خاصية CSS Outline لجميع الروابط التي لا تحتوي على تركيز، فيمكنك استخدام الاختيار الجماعي “:not” مع الاختيار الجماعي “a” كما يلي:
a:not(:focus) {
outline: 2px solid red;
}
هذا سيعيد خطًا أحمر بسماكة 2 بكسل حول جميع الروابط التي لا تحتوي على تركيز.
يمكن استخدام الاختيارات الجماعية الأخرى في CSS لتحديد العناصر التي لا تحتوي على تركيز وتطبيق الخصائص المناسبة عليها.
استخدام خاصية CSS Outline.
في هذا المثال، سنستخدم خاصية CSS Outline لتحديد العناصر التي يتم التركيز عليها، والتي يتم تحديدها عندما يتم النقر عليها بالماوس أو تحديدها باستخدام لوحة المفاتيح.
<!DOCTYPE html>
<html>
<head>
<title>CSS Outline Example</title>
<style>
:focus {
outline: 2px solid blue;
}
</style>
</head>
<body>
<h1>Example Heading</h1>
<p>This is an example paragraph. Click on me to see the outline.</p>
<a href="#">Example link</a>
</body>
</html>
في هذا المثال، عندما يتم النقر على الفقرة، ستظهر خطاً دائرياً أزرق اللون حول الفقرة، وهذا يشير إلى أنها العنصر المحدد. وعندما يتم النقر على الرابط، سيتم عرض خط دائري أزرق حول الرابط.
يمكن تغيير لون الحدود وسمكها وشكلها باستخدام قيم مختلفة لخاصية CSS Outline.
