❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSالأعمدة المتعددة

  • مفهوم الأعمدة المتعددة
  • تحديد عدد الأعمدة النصية
  • إضافة هامش بين الأعمدة النصية
  • إظهار حدود الأعمدة النصية
  • تحديد عرض الأعمدة النصية
  • دمج الأعمدة النصية
  • تحديد عدد و حجم الأعمدة النصية

مفهوم الأعمدة المتعددة

تخطيط الأعمدة المتعددة ( Multi-Column Layout ) هو أسلوب لعرض النصوص على شكل أعمدة تماماً كما يتم عرض النصوص في الصحف.

CSS Multi-Column Layout
The CSS multi-column layout module lets you divide content across multiple columns. By using the properties in this module, you can define the number and width of columns, the gap size between columns, and the visual appearance of the optional column dividing lines (known as column rules). You can also define how content should flow from column to column and how to break content between columns.

عند عرض النص على شكل أعمدة فإنك قادر على تحديد عدد الأعمدة التي تريد توزيع النص عليها، حجم الهامش بين الأعمدة، عرض خطوط فاصلة بين الأعمدة و غيرها.

في هذا الدرس سنتعرف على جميع الخصائص التالية و القيم التي يمكن إعطائها لها:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

تحديد عدد الأعمدة النصية

لتحديد عدد الأعمدة التي يمكن أن يظهر النص عليها يمكنك استخدام الخاصية column-count و تمرير عدد الأعمدة كقيمة لها.

في المثال التالي قمنا بجعل النص يظهر على ثلاث أعمدة.

مثال

.newspaper {
column-count: 3;
}
.newspaper { column-count: 3; }
جرب الكود

إضافة هامش بين الأعمدة النصية

لإضافة أو تحديد حجم الهامش بين الأعمدة النصية نستخدم الخاصية column-gap و نضع لها عدد بوحدة قياس محددة كقيمة مثل px، pt، cm ليمثل حجم الهامش.

في المثال التالي قمنا بإضافة هامش بين الأعمدة 40 بكسل.

مثال

.newspaper {
column-gap: 40px;
}
.newspaper { column-gap: 40px; }
جرب الكود

إظهار حدود الأعمدة النصية

لتحديد شكل الحدود بين الأعمدة النصية يمكنك استخدام الخاصية column-rule-style و تمرير إحدى القيم المخصصة لتحديد شكل الحدود لها.

مثال

.newspaper {
column-rule-style: solid;
}
.newspaper { column-rule-style: solid; }
جرب الكود

لتحديد سُمك الحدود بين الأعمدة النصية يمكنك استخدام الخاصية column-rule-width و تمرير عدد بوحدة قياس معينة لها.

مثال

.newspaper {
column-rule-width: 1px;
}
.newspaper { column-rule-width: 1px; }
جرب الكود

لتحديد لون الحدود بين الأعمدة النصية يمكنك استخدام الخاصية column-rule-color و تمرير اللون لها كقيمة.

مثال

.newspaper {
column-rule-color: deeppink;
}
.newspaper { column-rule-color: deeppink; }
جرب الكود

لتحديد كل خصائص الحدود بشكل مختصر ( Shorthand )، يمكنك استخدام الخاصية column-rule و تمرير القيمة التي تمثّل سُمكها، شكلها و لونها تباعاً.

مثال

.newspaper {
column-rule: 1px solid deeppink;
}
.newspaper { column-rule: 1px solid deeppink; }
جرب الكود

تحديد عرض الأعمدة النصية

لتحديد كم هو العرض الأدنى للعمود، يمكنك استخدام الخاصية column-width مع وضع عدد بوحدة قياس محددة لها كقيمة مثل px، pt، cm.

في المثال التالي قمنا بتحديد أن حجم كل عمود من الأعمدة يجب أن يكون على الأقل 100 بكسل.

مثال

.newspaper {
column-width: 100px;
}
.newspaper { column-width: 100px; }
جرب الكود

دمج الأعمدة النصية

في حال أردت إظهار عنوان يظهر على جميع أعمدة النص بدون أن يتم تقطيعه إلى أعمدة، يمكنك استخدام الخاصية column-span و هذه القيم التي يمكنك تمريرها لها:

  • none هي القيمة الإفتراضية و التي تجعل محتوى العنصر يظهر في العمود و يمكنه أن يتوزع على عدة أعمدة.
  • all تقوم بدمج الأعمدة حيث سيظهر محتوى العنصر، و من بعده يعود باقي المحتوى للظهور بداخل الأعمدة.

مثال

h3 {
column-span: all;
}
h3 { column-span: all; }
جرب الكود

تحديد عدد و حجم الأعمدة النصية

يمكنك استخدام الخاصية columns لتحديد أقل عرض ممكن للأعمدة النصية و عددها دفعة واحدة بدلاً من استخدام column-width و column-count لأجل ذلك.

مثال

.newspaper {
columns: 100px 3;
}
.newspaper { columns: 100px 3; }
جرب الكود
الدرس التالي❯ ❮الدرس السابق