الخاصية Outline في لغة CSS
تسمح لنا خواص outline بتحديد منطقة التخطيط حول مربع العنصر.
التخطيط outline هي خطوط مرسومة خارج حافة حدود العناصر مباشرةً. تُستخدم خواص outline بشكل عام في حالات focus أو active للعناصر مثل الأزرار والروابط وحقول النموذج وما إلى ذلك.
في هذا الدرس سوف نتعلم خصائص التخطيط outline بالتفصيل
الفرق بين التخطيط Outlines والحدود Borders
يبدوا تأثير خواص التخطيط outline مشابهًا جدًا للحدود border، ولكنه يختلف عن الحد بالأمور التالية:
- لا تشغل التخطيط outline مساحة ، لأنها توضع دائمًا أعلى مربع العنصر مما قد يتسبب في تداخلها مع العناصر الأخرى في الصفحة.
- على عكس الحدود
borders ، لن تسمح لنا التخطيط outline بتعيين كل حافة بعرض مختلف ، أو ألوان وأنماط مختلفة لكل حافة. التخطيط هي نفسها من جميع الجوانب. - ليس للتخطيط أي تأثير على العناصر المحيطة بصرف النظر عن التداخل.
- بخلاف الحدود ، لا يغير التخطيط حجم العنصر أو موضعه.
- قد يكون مخطط العنصر غير مستطيل ، لكن لا يمكنك إنشاء تخطيط دائرية.
أنماط التخطيط المختلفة
تحدد الخاصية outline-style نمط او شكل التخطيط للعنصر.
يمكن أن تحتوي الخاصية outline-style على إحدى القيم التالية: none و solid و dashed و dotted و double و inset و outset و groove و ridge. الآن دعونا نلقي نظرة على الرسم التوضيحي التالي الذي يوضح هذه القيم بشكل عملي.
لا تعرض القيمة تخطيط للعنصر. تُنشئ القيم inset و outset و groove و ridge تأثيرًا ثلاثي الأبعاد يعتمد بشكل أساسي على قيمة لون التخطيط . يتم تحقيق ذلك عادةً عن طريق إنشاء ظل من لونين أفتح قليلاً وأغمق من لون التخطيط.
لنجرب المثال التالي ونرى كيفة عمل هذه الخاصية:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>أنماط التخطيط المختلفة</title>
<style>
body {
font-size : 20px;
text-align:right;
direction : rtl;
width: 75%;
margin:auto;
}
p {
outline-style: double;
outline-width: 5px;
}
</style>
</head>
<body>
<p><strong>تحذير:</strong>لا يدعم Internet Explorer 7 والإصدارات السابقة خصائص outline . يدعم IE8 خصائص outline فقط إذا تم تحديد <code><!DOCTYPE></code>.</p>
</body>
</html>
المخرجات
يجب إضافة الخاصية outline-style لجعل التخطيط تظهر حول عنصر ، لأن القيمة الافتراضية للخاصية الخاصية outline-style هي none .
تحديد سماكة التخطيط
تحدد الخاصية outline-width سماكة التخطيط التي سيتم إضافتها للعنصر.
دعنا نجرب المثال التالي لفهم كيفية عملها:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد سماكة مخطط العنصر</title>
<style>
body {
font-size : 20px;
text-align:right;
direction : rtl;
width: 75%;
margin:auto;
}
p {
outline-style: dotted;
outline-width: thick;
}
</style>
</head>
<body>
<p><strong>تحذير:</strong>لا يدعم Internet Explorer 7 والإصدارات السابقة خصائص outline . يدعم IE8 خصائص outline فقط إذا تم تحديد <code><!DOCTYPE></code>.</p>
</body>
</html>
المخرجات
يمكن تحديد سماكة التخطيط باستخدام أي قيمة طول ، مثل px و em و rem وما إلى ذلك. يمكن أيضًا تحديده باستخدام إحدى الكلمات الرئيسية الثلاث: thin و medium و thick. القيم المئوية أو القيم السالبة غير مسموح بها تمامًا مثل الخاصية border-width .
تحديد لون التخطيط
تحدد الخاصية outline-color لون تخطيط العنصر.
تقبل هذه الخاصية نفس القيم المستخدمة للخاصية color .
في المثال التالي سنضيف تخطيط بلون ازرق حول عناصر الفقرات:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد لون مخطط العنصر</title>
<style>
body {
font-size : 20px;
text-align:right;
direction : rtl;
width: 75%;
margin:auto;
}
p {
outline-style: solid;
outline-color: #0000ff;
}
</style>
</head>
<body>
<p><strong>تحذير:</strong>لا يدعم Internet Explorer 7 والإصدارات السابقة خصائص outline . يدعم IE8 خصائص outline فقط إذا تم تحديد <code><!DOCTYPE></code>.</p>
</body>
</html>
المخرجات
لا تعمل الخاصية outline-width أو الخاصية outline-color في CSS إذا تم استخدامها بمفردها. يجب استخدم الخاصية outline-style لتحديد نمط او شكل التخطيط أولاً.
الخاصية المختصرة outline
الخاصية outline هي خاصية مختصرة لتحديد واحدة أو أكثر من خصائص التخطيط الفردية outline-style و outline-width و outline-color في خاصية واحدة.
دعنا نلقي نظرة على المثال التالي لفهم كيفية عملها:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>الخاصية المختصرة outline</title>
<style>
body {
font-size : 20px;
text-align:center;
direction : rtl;
width: 75%;
margin:auto;
}
p {
outline: 5px solid #9acd32;
}
</style>
</head>
<body>
<p>هذه فقرة من النص</p>
</body>
</html>
المخرجات
إذا تم حذف إحدى قيم الخاصية المختصرة outline أو لم يتم تحديدها ، فسيتم استخدام القيمة الافتراضية لتلك الخاصية بدلاً من ذلك ، إن وجدت.
على سبيل المثال ، إذا كانت قيمة الخاصية outline-color مفقودة أو لم يتم تحديدها، فسيتم استخدام قيم الخاصية color كقيمة للون التخطيط.
في المثال التالي ، ستكون التخطيط عبارة عن خط أخضر متصل بعرض 5 بكسل:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام قيم الخاصية color</title>
<style>
body {
font-size : 20px;
text-align:center;
direction : rtl;
width: 75%;
margin:auto;
}
p {
color: green;
outline: 5px solid;
}
</style>
</head>
<body>
<p>لون المخطط لهذه الفقرة هو نفس لون النص.</p>
</body>
</html>
المخرجات
ولكن ، في حالة الخاصية outline-style ، فإن حذف القيمة لن يؤدي إلى ظهور التخطيط على الإطلاق ، لأن القيمة الافتراضية لهذه الخاصية هي none.
في المثال أدناه ، لن يكون هناك تخطيط للعنصر:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ليس هناك تخطيط للعنصر</title>
<style>
body {
font-size : 20px;
text-align:center;
direction : rtl;
width: 75%;
margin:auto;
}
p {
outline: 5px #00ff00;
}
</style>
</head>
<body>
<p>هذه الفقرة ليس لها تخطيط</p>
</body>
</html>
المخرجات
إزالة التخطيط حول الروابط النشطة
تُستخدم الخاصية outline على نطاق واسع لإزالة التخطيط حول الروابط النشطة.
ومع ذلك ، يوصى بتطبيق بعض الأنماط البديلة للإشارة إلى التركيز على الرابط التشعبي.
لنجرب المثال التالي ونرى كيفة عملها:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>إزالة التخطيط حول الروابط النشطة</title>
<style>
a {
outline: none;
}
</style>
</head>
<body>
<p><a href="https://alawirisaddam.blgspot.com/" target="_top">Visit Education Factory alawirisaddam </a></p>
</body>
</html>
المخرجات
