Ahmad Saleh

الوسـام الماسـي
التسجيل
29/1/12
المشاركات
3,051
الإعجابات
1,255
الإقامة
Egypt - Alex
#1


border-bottom


في الدرس السابق من دورة CSS و CSS3 على هذا الرابط

دورة CSS و CSS3 باللغة العربية .. شرح مصور شامل

تعلمنا في الدرس السابق الخاصية Border وفهمنا القليل عنها
يرجى متابعة الدرس التالي للمعرفة اكثر
CSS :: شرح الخاصية border

وها نحن اليوم نتطرق لشرح الخاصية border-bottom
لا تختلف كثيراً الخاصية border-bottom في شرحها عن الخاصية border

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

تعالو نقوم بتطبيق الكود التالي, افتح صفحة تكست فارغة واعطها الامتداد html ثم قم بوضع الكود التالي فيها:

PHP:
<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                border-style:solid;
                border-bottom:5px double #ff0000;
                width:300px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <p>Damasgate Forums: Programs, Windows, Office, Courses, DVD, CD, Medical Engineering, Sciences, Educational CDs, Global programs, Modify Windows, And accessed by more forums Damasgate</p>
    </body>
</html>
والآن اغلق الصفحة و قُم بتشغيلها على متصفح الانترنت لترى التالي...



كما نرى بالصورة ‘ هناك اربع حدود ولكن الحد الاسفل مختلف في اللون والاستايل وهذا يتم عن طريق الأكواد التالية...

border-style:solid = الحدود السوداء
border-bottom:5px double #ff0000 = سمك الحدود السوداء و الحد الاسفل المختلف

تعالوا نقوم بتوضيح الكود أكثر
الكود border-style:solid يقوم بإعطاء كل الحدود الاستايل العادي والذي يُسمى solid
اما الكود الآخر فـ هو مكون من أكثر من جزء انظر الكود مرة أخرى

border-left:5px double #ff0000

الكود هذه المرة أصبح بأسم border-bottom وهذا حتى يتم التطبيق على الجانب الاسفل من الحدود
ويمكننا تطبيق هذا ايضاً على Border-right يعني الجانب الايمن من الحدود
كما يمكنك كتابة border-top و border-left

5px وهي سُمك الحد الاسفل فقط اما باقي الحدود فهي أخذت الحجم الطبيعي او الإفتراضي الذي يتم تطبيقه في حال عدم كتابة سماكة الحدود.

double هو ستايل الجانب الاسفل وكما نلاحظ ان الجانب الاسفل عبارة عن خطين متوازيين
ff0000 هو اللون الأحمر من الوان الهيكس وهو ايضاً لون الجانب الاسفل كما بالصورة

وبهذا فهمنا ما هي الخاصية border-bottom
بالتوفيق للجميع .
 

emadmohamed

عضو جديد
التسجيل
16/10/11
المشاركات
5
الإعجابات
0
#2
مشكورررررررررر
 

ربيع

عضـو
التسجيل
1/9/03
المشاركات
0
الإعجابات
6,501
#3
بارك الله فيك وجزاك خيراً أخي العزيز
 
محـــمد ظافـــر

محـــمد ظافـــر

مجموعة الإدارة
التسجيل
8/9/08
المشاركات
28,715
الإعجابات
8,376
الإقامة
Malaysia
#4
بارك الله فيك وجزاك خيرا
 
elkatep

elkatep

الوسـام الذهبي
التسجيل
17/3/11
المشاركات
1,554
الإعجابات
230
الإقامة
مصر - دميــاط
الجنس
Male
#5

omar karim

عضو فعال
التسجيل
9/7/05
المشاركات
149
الإعجابات
48
#6
بارك الله فيك
 

أعلى