محددات CSS (الإطلالة)

(outline) الخطوط الخارجية للهيكل (مثل الأزرار، المناطق النشطة في النموذج، إلخ) هي خطوط تُرسم خارج حاشية العنصر لتعزيزها.

مفهوم (Outline) مقابل حاشية (Border)

يُستخدم الهيكل الخارجي عادةً لتشديد الانتباه على العنصر. يبدو الهيكل الخارجي في البدء مشابهًا جدًا للحدود، ولكن يختلف فيما يلي:

• لا يأخذ الهيكل الخارجي مساحة، لأنه دائمًا ما يتم وضعها في أعلى حاوية العنصر، مما قد يؤدي إلى تSuperposition مع العناصر الأخرى على الصفحة.

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

• إلا للانطباق، لا يؤثر الهيكل الخارجي على العناصر المحيطة به.

• مختلف عن الحدود، لا يغير الهيكل الخارجي حجم العنصر أو موقع العنصر.

• قد لا يكون الهيكل الخارجي مركزيًا.

outline-width خاصية عرض الهيكل الخارجي

يحدد خاصية عرض الهيكل الخارجي عرض الهيكل الخارجي الذي سيتم إضافته إلى العنصر. يجب أن تكون قيمته طول CSS (px،pt،em إلخ) أو كلمة مفتاح مسموح بها، ولكن لا يمكن استخدام النسب أو القيم السلبية.border-widthمثل الممتلكات.

p　{
　　　　outline-width: thick;
}

outline-style خاصية نمط الهيكل الخارجي

يُستخدم خاصية outline-style لضبط نمط الهيكل الخارجي، مثل: solid،dotted إلخ.

يمكن لهذا الخصوصية أن يأخذ أحد القيم التالية: none،hidden،dashed،dotted،double،groove،inset،outset،ridge و solid. مثلborder-styleالقيم متشابهة.

p　{
　　　　outline-style: double;
}

outline-color خاصية لون الهيكل الخارجي

يُستخدم خاصية لون الهيكل الخارجي لضبط لون الهيكل.

p　{
　　　　outline-style: solid;
　　　　outline-color: #0000ff;
}

يمكنك أيضًا إعداد لون الهيكل الخارجي على شفاف.

خصائص النسيج السريعة

الخصائص السريعة للنسيج CSS هي خاصية اختصار تُستخدم لتحديد أو أكثر من خصائص النسيج الفردية outline-style، outline-width و outline-color في قاعدة واحدة.

p　{
　　　　outline:　5px　solid　#9acd32;
}

إذا تم تجاهل أو عدم تحديد قيمة الخاصية الواحدة فيخصائص النسيج السريع، فإن النسيج سيستخدم القيمة الافتراضية للخصائص (إذا كانت موجودة).

في المثال التالي، النسيج سيكون خطًا أسودًا بعرض 5px:

p　{
　　　　color:　black;
　　　　outline:　5px　solid;
}

لكن، في الحالاتoutline-style،إذا تم توفير القيمة، لن يتم عرض أي نسيج لأن قيمة outline-style الخاصية هي none بشكل افتراضي.

في المثال التالي، لن يكون هناك أي نسيج:

p　{
　　　　outline:　5px　#00ff00;
}

ازالة الخطوط الهلالية حول الروابط النشطة

يستخدمoutline الخاصية بشكل واسع لازالة الخطوط الهلالية حول الروابط النشطة.

a,　a:acive,　a:focus　{
　　　　outline:　none;　/*　يعمل في Firefox,　Chrome,　IE8 وأعلى　*/
}