CSS3 بأعمدة
محتوى النص CSS3 ويمكن تصميم مثل صحيفة تخطيط بأعمدة، والأمثلة التالية:
هذا البرنامج التعليمي - العلم ليس التكنولوجيا فحسب، بل أيضا حلما! هذا البرنامج التعليمي (www.w3big.com) يوفر البرنامج التعليمي الأكثر اكتمالا تكنولوجيا البرمجة القائمة يقدم أساسيات HTML، CSS، جافا سكريبت، بيثون، جافا، روبي، C، PHP و MySQL، وغيرها من لغات البرمجة. ولكن الموقع يقدم أيضا عددا من الأمثلة على الانترنت، على سبيل المثال، يمكنك معرفة أفضل البرمجة.
دعم المتصفح
الأرقام الواردة في الجدول تمثل أول متصفح لدعم عدد طريقة إصدار.
مباشرة بعد متصفح عدد -webkit- أو بادئة محدد -moz-.
| ممتلكات | |||||
|---|---|---|---|---|---|
| عمود العد | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| العمود الفجوة | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| عمود القاعدة | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| عمود القاعدة لون | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| على غرار حكم العمود | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| عمود القاعدة العرض | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| عمود عرض | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
CSS3 خصائص بأعمدة
هذا الفصل سنتعلم عدد قليل من أكثر خصائص عمود CSS3:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 لإنشاء أعمدة متعددة
column-count تحدد السمة عدد الأعمدة تحتاج إلى تقسيمها.
وينقسم العنصر المثال التالي <div> في النص إلى ثلاثة:
أمثلة
-webkit عمود العد: 3؛ / * كروم، سفاري، أوبرا * /
-moz عمود العد: 3؛ / * فايرفوكس * /
عمود العد: 3؛
}
محاولة »
CSS3 الفجوة بأعمدة بين الأعمدة والأعمدة
column-gap تحدد الخاصية الفجوة بين الأعمدة والأعمدة.
يحدد المثال التالي الفجوة بين العمود والعمود هو 40 بكسل:
أمثلة
-webkit-العمود الفجوة: 40px؛ / * كروم، سفاري، أوبرا * /
-moz عمود الفجوة: 40px؛ / * فايرفوكس * /
العمود الفجوة: 40px؛
}
محاولة »
الحدود العمود CSS3
column-rule-style تحدد الخاصية الأعمدة نمط الحدود بين الأعمدة:
أمثلة
القاعدة على غرار عمود -webkit: الصلبة؛ / * كروم، سفاري، أوبرا * /
-moz عمود القاعدة على غرار: الصلبة؛ / * فايرفوكس * /
القاعدة على غرار العمود: صلب.
}
محاولة »
column-rule-width تحدد السمة سمك الحدود من اثنين:
أمثلة
-webkit عمود القاعدة العرض: 1PX؛ / * كروم، سفاري، أوبرا * /
-moz عمود القاعدة العرض: 1PX؛ / * فايرفوكس * /
عمود القاعدة العرض: 1PX.
}
محاولة »
column-rule-color تحدد السمة لون الحدود من اثنين:
أمثلة
عمود -webkit القاعدة لون: lightblue؛ / * كروم، سفاري، أوبرا * /
-moz عمود القاعدة لون: lightblue؛ / * فايرفوكس * /
عمود القاعدة لون: lightblue.
}
محاولة »
column-rule العقار الاختزال لكافة الخصائص * عمود rule-.
يقوم المثال التالي العمود مباشرة للسمك الحدود، لون ونمط:
أمثلة
-webkit عمود القاعدة: 1PX الصلبة lightblue؛ / * كروم، سفاري، أوبرا * /
-moz عمود القاعدة: 1PX الصلبة lightblue؛ / * فايرفوكس * /
عمود القاعدة: 1PX الصلبة lightblue.
}
محاولة »
عدد الأعمدة في عنصر محدد
يحدد المثال التالي <H2> العنصر في جميع الأعمدة:
يحدد عرض الأعمدة
column-width تحدد السمة عرض العمود.
CSS3 خصائص بأعمدة
يسرد الجدول التالي كل صفات CSS3 بأعمدة:
| ممتلكات | وصف |
|---|---|
| عمود العد | ينبغي تقسيم عدد الأعمدة المحددة عنصر. |
| العمود ملء | يحدد كيفية تعبئة الأعمدة |
| العمود الفجوة | تحديد الفجوة بين الأعمدة والأعمدة |
| عمود القاعدة | جميع * الخاصية المختصرة عمود rule- |
| عمود القاعدة لون | تحدد اللون من الحدود بين البلدين |
| على غرار حكم العمود | تحديد نمط من الحدود بين البلدين |
| عمود القاعدة العرض | يحدد سمك من الحدود بين البلدين |
| العمود تمتد | تحديد عدد الأعمدة لعبور عنصر |
| عمود عرض | يحدد عرض الأعمدة |
| الأعمدة | وضع عمود العرض والاختزال عمود العد |