إذا كانت هذه الزيارة الأولى لك ، فضلا قم بزيارة الأسئلة الشائعة بالضغط على الرابط، ربما يجب عليكالتسجيل قبل البدء بالمشاركة أو زيارةالمنتديات . لكي تكون قادراً على تصفح المنتدى ، بإمكانك إختيار أحد المنتديات الموجودة بالأسفل وتصفحها . مع تمنياتنا للجميع بتصفح ممتع بإذن الله.
قبل دعم الـ CSS كان امر ممل ولا يتم الا بواسطة الـ Tables (او الجداول وسنتعرف عليها فيما بعد)
لكن بعد دعم الـ CSS المسألة اصبحت اكثر مرونة وسهولة, وسرعة وجمال فى تنسيق الصفحة ايضا.
كيف يمكن التحكم فى تنسيق الصفحة من خلال الـ CSS ؟
اجابة هذا السؤال كبيرة نوعا ما, ودرس اليوم هو جزء من الإجابة.
وسنبدأه بالتحكم بالعناصر التى لها اربعة حدود او مايعرف بالـ box model (مثل الـ div مثلا)
اولا.
كل عنصر من عناصر الـ HTML يمكننا ان نحدد ابعادها (الإرتفاع والعرض) من خلال الـ CSS من خلال الخاصيتين width و height
كامثال (اظن رأينا اشياء مشابهة مسبقا)
الرمز:
p{ width: 100px; height: 75px; }
لكن ماذا اذا كان محتوى العنصر اكبر من الأبعاد التى حددناها له, ومازلنا نرغب ان لا يتم استخدام مساحة اكثر لمحتوى هذا العنصر؟
(السؤال بصيغة اخرى) ماذا اذا كان محتوى العنصر يحتاج الى 200px كاعرض, و 150px ارتفاع, ومازال لدينا رغبة فى ان لا يزيد حجم هذا العنصر عن 100px عرض و 75px ارتفاع لكى يكتمل جمال الصفحة, ونتلاشى ايضا تشويه شكل الصفحة بسبب حجم هذا العنصر؟
اذا كان العنصر, عبارة عن صورة فـ بالتأكيد ان تعلم كيف تقوم بإعداد ابعاد الصورة, لكن المشكلة اذا كان العنصر نصى. لكن الحل ان شاء الله موجود. وهو بإستخدام الخاصية overflow خاصية الـ overflow لها عدة قيم يمكننا ان نستخدم احداهم. وهما كالتالى
visible وهذه هى القيمة الإفتراضية, وتعنى ان المحتوى الذى يتطلب مساحة اكبر سيتم عرضه كما هو.
hidden وتعنى ان اى محتوى داخل العنصر يحتاج لمزيد من المساحة, سيتم حجبه وعدم عرضه
scroll وتعنى ظهور سكرول بار, واذا كان هناك محتوى يتطلب مزيد من المساحة, سيمكن للمستخدم ان يستخدم الأسكرول بار للتجول داخل العنصر ورؤية المتبقى منه.
auto وهذه افضل قيمة يمكنك ان تستخدمها, وهى تعنى عدم عرض الـ scroll bar الا عند الحاجة له, اى عندما يكون هناك محتوى يتطلب مساحة اكثر من المساحة التى حددناها للعنصر (سواء كانت المساحة المطلوبة فى العرض او الإرتفاع)
هذا كان بالنسبة لحجم العنصر.
ولنلقى الأن نظرة على عدة خصائص للتحكم بمظهر العناصر.
خاصية Padding
ترجمة كلمة padding تعنى البطانة.
والمقصود بخاصية padding هو التحكم فى المسافة التى تفرق بين محتوى احد العناصر وبين حدود هذا العنصر.
انظر الصورة التالية فهى توضح المعنى المقصود من محتوى العنصر وحدود العنصر
خاصية الـ padding يتفرع منها 5 خصائص وهما كالتالى padding-top و padding-left و padding-right و padding-bottom وكل منهم يتم تحديد قيمته بالبيكسل او الـ em او حتى cm (سم) على سبيل المثال اذا كنا نريد العنصر صاحب الكلاس message ان يكون هناك مسافة 2 بيكسل بين حدود الجهة اليمنى والمحتوى يتم الأمر بالشكل التالى
الرمز:
.message{ padding-right: 2px; }
وهكذا لبقية خصائص الـ padding
لكن ماذا عن الإختصارات؟ هل يجب عليك ان تكتب الأربع خصائص اذا كنت تريد ان يكون هناك مسافة معينة بين كل حد من حدود العنصر ومحتواه؟ بالطبع لا, يمكنك استخدام خاصية padding فقط. مثلا نريد ان نجعل المسافة 5 بيكسل تفصل بين كل الحدود (الأيمن, والأيسر, والأسفل و الأعلى) وبين المحتوى يتم الأمر بمنتهى البساطة بالشكل التالى
الرمز:
padding: 5px;
وايضا يمكنك استخدام padding فقط لتحديد المسافة بالأربعة حدود (حتى ولو لم تكن المسافات متساوية كما فى المثال الأخير)
انظر للقائمة التالية لفهم كيفية استخدام padding بمفردها
padding: 5px; سوف يتم تحديد فارق 5 بيكسل بين كل الحدود والمحتوى
padding: 5px 6px; سوف يتم وضع مسافة 5 بيكسل, بين الحد الأعلى, والحد الأسفل, ومسافة 6 بيكسل لليمين واليسار
padding: 5px 3px 4px; سوف يتم وضع مسافة 5 بيكسل تفرق بين الحد الأعلى والمحتوى ومسافة 3 بيكسل للحد الأيمن والحد الأيسر ومسافة 4 بيكسل للحد السفلى
بنفس الطريقة الموجودة بالكود الأخير يمكننا اعداد بقية الحدود. مايجب توضيحه فقط هو قيمة الخاصية style الخاصة بالحدود
والقائمة التالية توضح اهم القيم التى يمكن استخدامها
none تلغى الحد, اى لا يظهر.
solid تجعل الحد عبارة عن خط كاهذا مثلا _______________________
dotted تجعل الحد عبارة عن خط من النقاط كالتالى مثلا ......................
dashed تجعل الحد عبارة عن خط مكون من الداش كالتالى مثلا --------------
double تجعل الحد مكرر, يعنى لو تم وضعها مع القيمة solid مثلا تجعل هناك خطين بدلا من خط واحد.
هذه هى القيم الأكثر استخداما هناك ايضا القيم التالية groove و ridge و inset و outset
وكما فعلنا مع خاصية padding فأنت لست دائما بحاجة لكتابة كل حد بمفرده, او حتى كتابة كل خاصية لكل حد (كالـ width والـ style) لكل حد بمفرده. يمكنك تعين الأربع حدود بالشكل التالى كامثال
الرمز:
border: 1px solid #000000;
هذا سيجعل الأربعة حدود للعنصر لهم اللون الأسود ومن النوع solid وسُمكهم هو 1px
او يمكنك فعل نفس الشئ للحد الأسفل مثلا
الرمز:
border-bottom: #000000 1px dashed;
اتمنى يكون كل شئ بالنسبة للـ border كان واضحا بإذن الله.
خاصية Margin
خاصية الـ margin مثلها تماما مثل الـ padding
الا فرق واحد جزرى
الـ padding كما عرفنا هى مانحدد بها المسافة بين حدود احد العناصر, ومحتوى هذا العنصر.
لكن الـ margin نحدد بها المسافة بين حدود احد العناصر, وماخارج هذا العنصر (وليس داخله)
كامثال انظر كود الـ html التالى
الرمز:
some text here
لاحظ الجملة some text here والتى هى داخل العنصر p
والعنصر p نفسه داخل العنصر div
لاحظ ان العنصر p يظهر بأقصى يسار العنصر div صحيح؟ وايضا فى المنتصف (بالنسبة للإرتفاع).
اذن نجرب التالى
الرمز:
some text here
فى الكود الثانى اضفنا للعنصر p الكود التالى margin-top: 0px;
مما يعنى, ان نجعل المسافة بين الحد العلوى للعنصر p وبين ماهو خارج العنصر p (والخارجى فى مثالنا هو العنصر div) هى 0 بيكسل
اتمنى يكون كل شئ بهذا الدرس الطويل والكبير اصبح واضح بإذن الله.
الْعُمْر
الْمَشِارَكِات
الْنِّقَاط
السٌّمعَة 
موضوع: الدرس الرابع : التحكم فى العناصر المربعة box models 
