كود التحكم بإرتفاع و عرض أي عنصر عن طريق الـ css
 |
| التحكم بإرتفاع و عرض العنصر عن طريق إضافة أكواد الـ css |
عند إضافة أي عنصر أو فقرة سواء كان ذلك في الصفحة الرئيسية أو في صفحة فرعية أو في أي قسم من الأقسام فيجب علينا أن نقوم بتعريف التنسيق العام لهذا العنصر من أجل إظهاره للمتصفح ، وتحديد عناصر التحكم في هذا العنصر يتم عن طريق الأكواد الخاصة بهذا العنصر بالكود الخاص بإسم هذا العنصر الموجود في CSS .
و من أجل ذلك وضعنا هذا المثال البسيط عن التحكم في العنصر المُسمى div و الذي بدوره سوف يتم تطبيق هذه الأكواد على جميع العناصر الذي تأخذ اسم هذا العنصر لذلك يجب عليك الإنتباه أثناء التنفيذ لأنه سوف يتم التطبيق على جميع العناصر ، و إذا أردت التخصيص يجب عليك تحديد العنصر المُراد التطبيق عليه عبر تسميته بالإسم لكي يتم تنفيذ التطبيق عليه .
و في الكود المُستخدم في هذا المثال " الموجود في الصندوق بالأسفل " لاحظ أي تم كتابة الكود و أين موجود العنصر الذي تم تطبيق هذا الكود عليه . الكود الخاص بالتنسيق تم كتابته بين الوسمين <head> - </head> أما العنصر الذي تم تطبيق هذا الكود عليه فهو موجود ضمن الوسمين <body> - </body> .
شرح الكود :
كما ذكرنا في البداية إن الغرض من هذا الكود هو التحكم في إرتفاع و عرض العنصر و الأكواد الإضافية هي لإظهار العناصر بشكل أوضح ، كما نلاحظ من الكود الموجود فإن :
font-size : هو حجم الخط المُستخدم .
text-align : هو مكان تواجد النص .
backgroun-color : هو لون الخلفية لكامل العنصر حيث سوف يتم تطبيقه على كامل العنصر ، لاحظ أنه تم تعريف اللون عبر كتابة اسم اللون و في العنصر التالي قمنا بكتابة رمز اللون و ذلك من أجل التوضيح بأنه يمكنك استخدام الطريقتين من أجل إظهار اللون .
color : هو لون النص داخل العنصر و سوف يتم التطبيق على كافة النصوص الموجودة داخل هذا العنصر .
أما الكود الخاص بإرتفاع و عرض العنصر و هو محور هذا الدرس فكما تشاهد في الكود الخاص بإرتفاع العنصر و هو height تستطيع التحكم بإرتفاعه عن طريق النسبة المئوية بالنسبة لحجم المساحة المتوفرة في الصفحة و هي دائماً قيمة ثابتة (%100) و أنت تستطيع تحديد الإرتفاع أو العرض عبر وضع القيمة المناسبة لك من أجل إظهار العنصر .
أما الكود المسؤول عن قياس العرض للعنصر و هو width أيضاً تستطيع تطبيق التحكم به كما هو التطبيق الذي تم عمله على الإرتفاع ، و كما تشاهد وضعنا مثالين للتحكم إما عن طريق النسبة المئوية % أو عن طريق البيكسل px و في تلك الحالتين هو صحيح و يتم تنفيذه و نحن وضعنا المثالين لكي تشاهد الفرق بينهما و كيف يتم إظهاره أثناء التنفيذ كما هو موضح في نهاية الدرس .
الكود بعد التنفيذ يظهر على الشكل التالي :
إرسال تعليق