إنشاء أعمدة css

في دروس أخرى، تحدثنا عن الأعمدة المتعددة في CSS وقدمنا ​​مثالًا سريعًا على كيفية تقسيم النص في علامة HTML ، في هذا الدرس سنضيف بعض ميزات التصميم البسيطة إلى الكود السابق.

تعريف

سنقوم بإضافة بعض التغييرات على النص الخاص كما في الكود التالي:

    /*Width*/
column-rule-width: 4px;

/*Style*/
column-rule-style: dashed;

/*color*/
column-rule-color: #D9D9D9;
  • عرض قاعدة العمود: الذي يحتوي على عرض الأسطر المنفصلة بين الفقرة.
  • نمط قاعدة العمود: الذي يحتوي على نوع من الأسطر المنفصلة ، توفره CSS كنوع مثل: متقطع ، أو منقط.
  • لون قاعدة العمود: الذي يشير إلى لون هذه الخطوط المنفصلة.

 

فوائد إنشاء أعمدة css

يمكننا تلخيص فوائد استخدام الأعمدة المتعددة من أجل:

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

 

مثال

من فضلك ، لفهم أسلوب CSS متعدد الأعمدة جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{
    border:1px solid #D9D9D9;
    padding: 10px;
    -webkit-column-count:3;
    column-count:3;
    -webkit-column-gap: 50px;
    column-gap: 50px;

    /*Width*/			/*Here*/
    column-rule-width: 4px;

    /*Style*/
    column-rule-style: dashed;

    /*color*/
    column-rule-color: #D9D9D9;


}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Multi Columns</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.

            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.
        </div>
    </body>

</html>