ما هي لغة CSS ؟

في لغتي HTML و CSS , تُصنَّف العناصر إما كعناصر "ضمن السطر" (inline elements) أو كعناصر "على مستوى الكتلة" (block-level elements) , ويُحدِّد هذا التصنيف كيفية سلوكها ضمن تخطيط المستند.

يُعد فهم هذا الاختلاف أمراً بالغ الأهمية للتحكم في كيفية عرض المحتوى الخاص بك على صفحة الويب.

العناصر على مستوى الكتلة (Block-level elements) هي عناصر تشغل افتراضياً كامل العرض المتاح لها، حيث تمتد عبر عرض الحاوية التي تحتويها.

تبدأ هذه العناصر دائمًا في سطر جديد وتدفع المحتوى الآخر إلى السطر التالي، مما يُشكّل "كتلة" (block) من المحتوى.

تُطبَّق خاصية CSS المسماة display: block; افتراضياً على العناصر من نوع (Block-level) ; وتضمن هذه الخاصية تمدد العنصر ليملأ عرض الحاوية وظهوره في سطر جديد.

من الأمثلة الشائعة على عناصر مستوى الكتلة (block-level elements) : عناصر div , والفقرات (paragraphs) , والعناوين (headings) , والقوائم المرتبة (ordered lists) , والقوائم غير المرتبة (unordered lists) , وعناصر الأقسام (section).

إليك مثال برمجي لعنصر على "مستوى الكتلة" (block-level) :

<p style="border: 2px solid red;">
 الفقرة الأولى
</p>
<p>الفقرة الثانية</p>
        

معاينة:

في هذا المثال، لدينا عنصران من نوع "فقرة" (paragraph)، حيث يحيط بالفقرة الأولى "إطار أحمر" (red border).

لا يتشارك عنصرا الفقرة في السطر نفسه; لأنهما يُعدّان من عناصر مستوى الكتلة (block-level elements) بشكل افتراضي.

وبذلك، سيشغل كلا عنصري الفقرة العرض الكامل للحاوية الخاصة بهما، وهي في هذه الحالة عنصر الجسم body.

تُعد العناصر ذات مستوى الكتلة (Block-level elements) مثاليةً عندما ترغب في ترتيب المحتوى بشكل عمودي، مثل الفقرات أو الأقسام أو كتل المحتوى الكبيرة; إذ تُستخدم عادةً لتحديد تخطيط صفحة الويب وهيكلها.

على عكس العناصر التي تشغل مستوى الكتلة (block-level elements)، تشغل العناصر المضمنة (inline elements) فقط القدر الذي تحتاجه من العرض ولا تبدأ في سطر جديد؛ إذ تنساب هذه العناصر ضمن المحتوى، مما يسمح للنصوص والعناصر المضمنة الأخرى بالظهور بجانبها.

تُطبَّق خاصية CSS المسماة display: inline; على العناصر المضمنة (inline elements) بشكل افتراضي؛ وتضمن هذه الخاصية بقاء العنصر ضمن تدفق المحتوى دون الانتقال إلى سطر جديد.

من العناصر المضمنة (inline elements) الشائعة: عناصر span و a و img.

إليك مثال لفهم العناصر المضمنة (inline elements) بشكل أفضل:

<p>هذه كلمة
 <span style="color: red; border: 2px solid green;">حمراء</span>
 داخل فقرة.
</p>
        

معاينة:

في هذا المثال، لدينا عنصر span متداخل داخل عنصر فقرة p. يتميز عنصر span بلون نص أحمر وإطار أخضر يحيط به، وذلك ليتسنى لك رؤية الكلمة المُبرَزة بشكل أوضح.

كما ترى، يشغل عنصر span مساحة تعادل حجم كلمة "حمراء" فقط، ولا يدفع المحتوى التالي إلى سطر جديد.

تُعد العناصر المضمنة (Inline elements) الخيار الأمثل لتنسيق أجزاء صغيرة من النص أو المحتوى داخل السطر نفسه، مثل إبراز كلمة، أو إنشاء روابط تشعبية، أو تطبيق تنسيقات محددة على أجزاء من الفقرة.