نموذج التنسيق المرئي في لغة CSS
نموذج التنسيق المرئي في لغة CSS هو الخوارزمية المستخدمة لمعالجة المستندات للوسائط المرئية. في نموذج التنسيق المرئي ، يُنشئ كل عنصر في شجرة المستندات صفرًا أو أكثر من الصناديق وفقًا
لنموذج الصندوق box model.
يعتمد تصميم هذه الصناديق على العوامل التالية:
- أبعاد الصندوق.
- نوع العنصر (كتلة block أو مضمنة inline).
- مخطط تحديد موقع العنصر الذي يعتمد على عدة عوامل.
- العلاقات بين العناصر في شجرة الوثيقة.
- معلومات خارجية مثل حجم شاشة العرض ، الأبعاد الحقيقة للصور ، إلخ.
شجرة الوثيقة Document Tree هي التسلسل الهرمي للعناصر المكتوبة في الكود المصدري لصفحة الويب. كل عنصر في شجرة الوثيقة له أب واحد ، باستثناء العنصر الجذر ، الذي ليس له أب.
نوع الصناديق التي يتم إنشاؤها في CSS
يُنشئ كل عنصر معروض على صفحة الويب صندوقاً مستطيلًا. فيما أنواع الصناديق التي قد يتم إنشاؤها بواسطة العناصر.
عناصر الكتلة Block-level Elements
عناصر الكتلة Block-level elements هي تلك العناصر التي يتم تنسيقها بصريًا ككتل (أي تشغل العرض الكامل المتاح) ، مع فاصل سطر قبل العنصر وبعده. على سبيل المثال ، عنصر الفقرة <p> والعناوين <h1> إلى <h6> والأقسام <div> إلخ.
بشكل عام ، قد تحتوي عناصر الكتلة على عناصر مضمنة Inline-level Elements وعناصر أخرى كتلة أخرى.
عناصر مضمنة Inline-level Elements
العناصر المضمنة Inline-level elements هي تلك العناصر التي لا تشكل كتل محتوى جديدة ؛ بل يتم عرض محتواها في نفس السطر. على سبيل المثال ، العنصر <em> او <span> والعنصر <strong> وما إلى ذلك.
قد تحتوي العناصر المضمنة عادةً على نص وعناصر مضمنة أخرى فقط.
على عكس عناصر الكتلة ، فإن العناصر المضمنة لا تأخذ إلا قدرًا من العرض حسب الضرورة ، ولا تنشئ فواصل أسطر.
يمكننا تغيير كيفية عرض عنصر ما على صفحة ويب باستخدام الخاصية display. سوف نتعلم عن هذه الخاصية في الدرس القادم.