دروس دورة CSS : شرح الخاصية border

اسعد الله اوقاتكم بكل خير

الليله بإذن الله نشرح لكم خاصية border في تقنية CSS , هذه الخاصية التي لابد وان تجدها في اي موقع .

معنى border باللغة العربية يعني الحدود وفي شرحنا هذا سوف نتطرق لأساسيات هذه الخاصية ويليها دروس أخرى اعمق واعمق إن شاء الله, كما ذكرنا خاصية اليوم هي

border

ويتفرع منها الكثير والكثير من الأكواد سوف تطرح على دروس منفصلة إن شاء الله
دعونا نأخذ مثال حتى تتضح لنا الصورة أكثر , افتح صفحة تكست فارغة ثم اعطها الامتداد html وضع فيها الكود التالي..

<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 5px solid #0cf;
width: 330px;
padding: 15px;
}
</style>
</head>
<body>
<div>
<b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/>
<b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/>
<b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/>
<b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/>
<b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/>
<b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/>
<b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/>
<b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/>
<b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/>
<b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/>
</div>
</body>
</html>

وبعد حفظ الكود هذا في صفحة html افتحها على المتصفح لتجد التالي ..

انظر الحدود ذات اللون البحري

كيف تم هذا ؟ تعالوا بنا ننظر بقرب للسطر الملون في الكود السابق وهو

border: 5px solid #0cf;

تفسير الكود كالتالي :
الأحمر : هو الخاصية التي نشرحها .
الأزرق : سُمك الحدود والتي جعلناها 5px.
الفوشيا : هو ستايل الحدود فهناك العديد من الاستايلات سوف نشرحها الآن.
البني : هو لون الحدود والتي جعناها بحري.
وهذا يفسر لنا انه يمكن كتابة نفس الكود بشكل مختلف وهو كالتالي :

border-width: 5px;
border-style: solid;
border-color: #0cf;

الأمر مُمتع حقاً !!
دعونا الآن نطرح لكم اسماء الاستايلات وهي كالتالي :

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

ما هي شكل هذه الاستايلات ؟ هذا ما سوف نعرفه الآن , ولتجربة هذه الاستايلات فقط قُم بتغيير كلمة solid في الكود الذي وضعته في صفحة html , والآن انظر الصور التالية :