بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
خاصية border-style : تستخدم لتحديد نوع الحد ، متصل أو منقط أو غير ذلك ، وهي تأخذ القيمة solid وهوالحد المتصل أو dashed وهو المنقط أو dotted المنقط كذلك ، وهناك خصائص أخرى يمكن التعرف عليها بسهولة ، المحرر يعطيها بشكل تلقائي عندما تكتب border ويمكنك تجربتها من أجل المعرفة ، أما الأكثر استخداما فهي الثلاث التي ذكرتها.
خاصية border-width : تستخدم لتحديد عرض الحد وتأخذ القيمة ب px أو em .
خاصية border-color : تستعمل لتحديد لون معين للحد.
هذا إذا أردنا الحدود في جميع الإتجاهات ، أما إذا أردنا تخصيص الحد لاتجاه معين فنكتب الخاصية border ثم الإتجاه ثم بقية الخصائص هكذا:
border-bottom-style
border-bottom-width
border-bottom-color
نفس الشيء بالنسبة ل top أو right أو left .
لنجرب المثال التالي:
واختصارا للوقت والكود يفضل كتابة خاصية border هكذا أو متبوعة بالإتجاه وإعطائها القيم الثلاث style و width و color في سطر واحد كما في التنسيق التالي:
وكما تلاحظ نفس النتيجة .
خاصية outline : ينطبق عليها ما ينطبق على border غير أن تأثيرها يكون خارج حدود العنصر ، فإن أبعاد border تضاف إلى أبعاد العنصر لتشكل له أبعادا جديدة فيصبح border جزءا من العنصر ، عكس outline التي تبني أبعادا جديدة خارج العنصر فتأتي بعد border .
فإذا جربنا كود html التالي:
والتنسيق مع النتيجة كالتالي:
فالواضح هنا أن outline جاء بعد border وقد تعمدت كتابة outline أولا كي أثبت أنه لا يمكن أن يأتي إلا بهذا الشكل.
وغير هذا فكل ما ينطبق على border ينطبق على outline ، فمع الأخيرة يمكن أيضا إضافة الإتجاهات وبقية الخصائص كما سبق وشرحنا مع border .
موعدنا في الدرس القادم مع شرح padding و margin ، الإزاحة الداخلية والخارجية ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.