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

السلام عليكم ورحمة الله وبركاته لعل الكثير من الإخوه و الأخوات رأيتك في بعض المواقع إطار او حدود خارجية لأي شئ و إذا بإطار منهم مختلف , حسنا...

ميني سوفت


السلام عليكم ورحمة الله وبركاته
لعل الكثير من الإخوه و الأخوات رأيتك في بعض المواقع إطار او حدود خارجية لأي شئ و إذا بإطار منهم مختلف , حسناً إخواني هذه الخاصية ايضاً ضمن الخاصية border و يمكن أن تختار اي جانب من جوانب المربع المُحدد فوق او تحت او يسار او يمين ومن ضمن هذه الخواص هي خاصية اليوم وهي ..
border-bottom
والآن دعونا نقوم بالتطبيق العملي , افتح صفحة تكست فارغة واعطها الامتداد html و انسخ فيها هذا الكود ..

<!DOCTYPE html>
<html>
<head>
<style>
div{
border-style: solid;
border-bottom: 5px dotted #FF3399;
padding:20px;
width:260px;
background-color:#E2FFFF;
}
</style>
</head>
<body>
<div>
MiniSoft By Ahmad Saleh. CSS & HTML
MiniSoft By Ahmad Saleh. CSS & HTML
MiniSoft By Ahmad Saleh. CSS & HTML
MiniSoft By Ahmad Saleh. CSS & HTML
</div>
</body>
</html>
 ثم قم بحفظ الصفحة وجرب فتحها على المتصفح لتجد التالي ..

border-bottom:5px dotted #FF3399
و الان دعونا نقوم بتفسير الكود , تلك الحدود السوداء السبب فيها هو الكود

border-style:solid;
وهذا يشمل جميع جوانب الصندوق ولكن بإضافة الكود التالي تم تغيير الحدود السفلية والسبب هو الكود ..

border-bottom: 5px dotted #FF3399;
وتفسير هذا الكود ايضاً كما يلي ..
5px سمك الحدود
dotted ستايل الحدود
وبالطبع الرقم الاخير هو لون الحدود

هذا ليس آخر ما يتعلق بشرح هذا الكود فهناك الكثير والكثير حوله سوف نأخذه على دروس متفرقة وهذا فقط لترتيب الدورة

ارجو أن تكون وصلت المعلومة بشكل ميسر
تحياتي لكم ,, نراكم قريباً وشرحٌ جديد .. أخوكم

التعليقات

BLOGGER: 4
تحميل...
325x285
مساحة إعلانية
728x90
728x90
الرجاء مساعدتي على نشر الموضوع من خلال المشاركة على مواقع التواصل الإجتماعي بواسطة الأزرار اسفل التدوينة وجزاكم الله خيراً
الاسم

اخبار تقنية,54,أدوات بلوجر,13,اضافات بلوجر,14,أكواد,11,البلوجر,34,التنصيب الصامت,6,الربح من الانترنت,13,أندرويد,20,اندرويد,15,برامج الإنترنت,58,برامج البرمجة,23,برامج التنظيف,16,برامج التنظيف والتحسين,11,برامج الحماية,21,برامج الصوت والفيديو,15,برامج الصور,1,برامج الكمبيوتر,29,برامج الميديا,25,برامج متنوعة,38,برامج مجانية,106,برامج مدفوعة,23,بيتكوين,1,تطبيقات اندرويد,24,تمارين ومكملات,19,حماية,2,رياضة كمال الاجسام,23,سوفت وير,4,شرح الويندوز,36,شروحات البرامج,89,شروحات بلوجر,81,شروحات عامة,75,شروحات مواقع,67,شروحات وتعريب,13,شعر,1,صحة وجمال,28,عملات رقميه,7,قوالب بلوجر,4,قوالب معربة,3,موبايلات,27,ميكروسوفت اوفيس,4,blogger,82,blogger widgets,1,Cars,3,City,3,CSS,51,CSS3,47,Entertainment,4,Facebook,35,Fashion,7,featured,5,Foods,7,Gallery,6,Graphic Design,8,HTML,19,HTML 5,14,Motion Design,8,Movies,2,Music,12,Nature,6,People,11,Phone,5,php,1,Print Design,2,SEO,20,Server,2,Short,1,Sports,7,Technology,17,Test,1,Title,2,Travel,5,Update,4,Video,7,Web Design,9,Windows,52,Windows 10,3,Windows 7,21,
rtl
item
ميني سوفت: دروس دورة CSS : شرح الخاصية border-bottom
دروس دورة CSS : شرح الخاصية border-bottom
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRamuTWYm5gjWG66f0M0OAVQdFDwvjXMk-gF1ac60MAoz3sehXQ1a1DMpTKcQY19nag0GUWBO7NrTh4ZUbDWW8sVxBZ6W1fCWvP8cewX5nDHF0o2TSdrcoYTuJPw8IBE2DVU_XE3SIg4eN/s1600/MiniSoft.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRamuTWYm5gjWG66f0M0OAVQdFDwvjXMk-gF1ac60MAoz3sehXQ1a1DMpTKcQY19nag0GUWBO7NrTh4ZUbDWW8sVxBZ6W1fCWvP8cewX5nDHF0o2TSdrcoYTuJPw8IBE2DVU_XE3SIg4eN/s72-c/MiniSoft.png
ميني سوفت
https://www.minisoftwre.com/2013/11/css-border-bottom.html
https://www.minisoftwre.com/
https://www.minisoftwre.com/
https://www.minisoftwre.com/2013/11/css-border-bottom.html
true
3808147084449263890
UTF-8
تحميل جميع الموضوعات لم يتم العثور على اي موضوعات عرض الكل إقرأ المزيد رد إلغاء الرد حذف بقلم الرئيسية الصفحات موضوع عرض الكل زوارنا اعجبهم ايضاً القسم الأرشيف بحث جميع الموضوعات لم يتم العثور على اي موضوع متطابق مع طلبك عودة للرئيسية الأحد الإثنين الثلاثاء الأربعاء الخميس الجمعة السبت Sun Mon Tue Wed Thu Fri Sat يناير فبراير مارس ابريل مايو يونيو يوليو اغسطس سبتمبر اكتوبر نوفمبر ديسمبر Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec الآن قبل دقيقة قبل $$1$$ دقيقة قبل ساعة قبل $$1$$ ساعة بالأمس قبل $$1$$ يوم قبل $$1$$ يوم قبل اكثر من 5 اسابيع متابعون متابعة هذا المحتوى مميز من فضلك شارك لإظهار المحتوى نسخ الكود تحديد تم نسخ الكود إلى الحافظة لم يتم النسخ، إضغط CRTL+C للنسخ او CMD+C إذا كنت تستخدم نظام الماك