مقالات CSS
- الصفحة السابقة تصفح CSS
- الصفحة التالية واجهة المستخدم CSS
إعداد ترتيب نصي متعدد الأعمدة
تسمح لنا إعداد ترتيب نصي متعدد الأعمدة بسهولة - مثل الصحف:
رواية عن الحروب الثلاثة
الجزء الأول
اجتماع الرجال العظماء في ياو يوان لتقديم التزام الثلاثة
قتل الأبطال الحمراء من الهانغ شينغ
قالوا: "إن القوى الكبرى في العالم، عندما تفرق لفترة طويلة، ستتحد، وعندما تتحد لفترة طويلة، ستفرق: في نهاية العصر الطويل، كانت هناك سبعة دول تقاتل ضد بعضها البعض، ثم انضمت إلى 秦؛ وبعد انتهاء حكم 秦، قاتلت楚国 والهان ضد بعضها البعض، ثم انضمت إلى الهان؛ في عهد الإمبراطور جينغ من الهان، انطلق المضطهدون من السوسة، وأحكموا العالم. بعد ذلك، في عهد الإمبراطور جوانغ من الهان، انتقلت السلطة إلى الإمبراطور هان، ثم إنقسمت إلى ثلاثة دول. يمكن أن نرى أن السبب في الفوضى يبدأ من الإمبراطوران هوانغ ولينغ. حبس الإمبراطور هوانغ الفئة الجيدة، وأخذ الثقة من الحاشية. وعندما مات الإمبراطور هوانغ، صعد الإمبراطور لينغ إلى العرش، وأعطى الجنرال ساو في، والمعلم تشن فان، الدعم المتبادل؛ في هذه الأثناء، كان هناك حاشية مثل تشاو جي، الذين يسيطرون على السلطة، خطط ساو في وشن فان لقتلهم، ولكن لم يكن لديهم سرية كافية، وتم قتلهم، وأصبح الحاشيون أكثر قوة من ذلك. في اليوم الرابع من شهر أبريل من عام جينغنين، كان الإمبراطور في قاعة وندر. بينما كان يجلس على العرش، انفجرت الرياح العاتية من زاوية القاعة. رأى فجأة ثعبان كبير يسقط من السقف، يطوى نفسه على الكرسي. هز الإمبراطور من شدة الخوف، وأعطى الحرس القريبين المساعدة وأخذوه إلى القصر، وكان جميع الرسميين يهربون. بعد بضع لحظات، اختفت الثعبان. فجأة، سقطت العواصف والبرد، حتى في منتصف الليل، وأسقطت العديد من المنازل. في عام جينغنين الرابع، هزت زلزال洛阳. كما ارتفعت المياه البحرية، وأخذت جميع السكان الساحليين وأخذتهم الأمواج إلى البحر. في عام جوانغهوا، تحولت الدجاجة إلى طائر. في اليوم الأول من شهر يونيو، ارتفعت الغيوم السوداء لعدة عشرات من القدمين، وأخذت في الطيران إلى قاعة وندر. في شهر يوليو من ذلك العام، ظهرت قوس قزح في قاعة يوتانغ، وكانت ساحل الولاية الخمسية قد انفصلت. جميع هذه الأشياء غير السارة ليست مجرد أمر واحد. أصدر الإمبراطور أمرًا يسأل الرسميين عن أسباب الكوارث، وقدم الملازم تشاو يونغ رسالة، قال فيها إن السحابة المنقولة وأخذت الدجاجة الذكرية كانت نتيجة للتدخل في الشؤون السياسية من قبل النساء والأطفال، وكانت كلماته صادقة وجريئة. نظر الإمبراطور إلى الخطاب و叹了口气، وأخذ في تغيير الملابس. نظر تشاو جي في الخلف، وأخبر الجميع؛ وبالتالي، أُدخل تشاو يونغ في مشكلة بسبب أمر آخر، وأرسل إلى المناطق الريفية. بعد ذلك، كان هناك عشرة أشخاص هم تشانغ رانغ، وزو زونغ، فانغ يو، سانغgui، تشاو جي، هاو لوان، جيان شاو، تشينغ كوانغ، تشا يونغ، وغو شينغ، يعملون معًا كفاسدون، ويُدعى بهم "عشرة حاشيون دائمون". أعطى الإمبراطور تشانغ رانغ الثقة الكاملة، ويدعى "أبي". أصبحت السياسة في الديناسة أسوأ وأسوأ، مما أدى إلى أن تشعر الناس في جميع أنحاء العالم بالفوضى، وبدأت الهجمات الإرهابية في الازدياد.
...... ......
خصائص CSS المتعددة الأعمدة
في هذا الفصل، ستتعلم عن خصائص المتعددة الأعمدة التالية:
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
دعم المتصفح
رقم الجدول في النص يشير إلى إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.
خصائص | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
إنشاء أعمدة متعددة في CSS
column-count
تحدد الخاصية عدد الأعمدة التي يجب تقسيم العنصر إليها.
في المثال أدناه، يتم تقسيم نص العنصر <div> إلى 3 أعمدة:
مثال
div { column-count: 3; }
تحديد مسافة بين الأعمدة في CSS
column-gap
تحدد الخاصية مسافة بين الأعمدة.
في المثال أدناه، يتم تحديد مسافة بين الأعمدة كـ 40 بكسل:
مثال
div { column-gap: 40px; }
قواعد CSS للأعمدة
column-rule-style
خصائص تحديد نمط النمط بين الأعمدة:
مثال
div { column-rule-style: solid; }
column-rule-width
خصائص تحديد عرض النمط بين الأعمدة:
مثال
div { column-rule-width: 1px; }
column-rule-color
خصائص تحديد لون النمط بين الأعمدة:
مثال
div { تحدد الخاصية لون النمط بين الأعمدة: }
خصائص column-rule هي خصائص مختصرة تستخدم لضبط جميع خصائص column-rule-*.
في المثال أدناه، تم تحديد عرض النمط، النمط واللون بين الأعمدة:
مثال
div { column-rule: 1px solid lightblue; }
تحديد عدد الأعمدة التي يجب أن تتجاوز العنصر
column-span
تحدد الخاصية عدد الأعمدة التي يجب أن تتجاوز العنصر.
في المثال أدناه، يتم تحديد أن عناصر <h2> يجب أن تتجاوز جميع الأعمدة:
مثال
h2 { column-span: all; }
تحديد عرض الأعمدة
column-width
تحدد الخاصية عرض الأعمدة الموصى به.
في المثال أدناه، يتم تحديد عرض الأعمدة الموصى به كـ 100px:
مثال
div { column-width: 100px; }
خصائص CSS المتعددة الأعمدة
في الجدول أدناه، تمت عرض جميع خصائص المتعددة الأعمدة:
خصائص | وصف |
---|---|
column-count | تحديد عدد الأعمدة التي يجب تقسيم العنصر إليها. |
column-fill | تحديد كيفية تعبئة الأعمدة. |
column-gap | تحديد المسافة بين الأعمدة. |
column-rule | يستخدم لضبط جميع خصائص column-rule-* كخصائص مختصرة. |
column-rule-color | تحديد لون النمط بين الأعمدة. |
column-rule-style | تحديد النمط بين الأعمدة. |
column-rule-width | تحديد عرض النطاق بين الأعمدة. |
column-span | تحديد عدد الأعمدة التي يجب أن ينتقل إليها العنصر |
column-width | تحديد أفضل عرض لكل عمود |
columns | خصائص اختصار لـ column-width و column-count |
- الصفحة السابقة تصفح CSS
- الصفحة التالية واجهة المستخدم CSS