English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل CSS

قواعد CSS (RULES)

موسوعة خصائص CSS

استخدام خاصية column-rule-style CSS و أمثلة

يُستخدم خاصية column-rule-style CSS لتحديد نمط الخطوط التي يتم رسمها بين الأعمدة في التخطيط المعدد.

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

القيمة الافتراضية:القيمة
يُستخدم لـ:عناصر الصف المعدد
الوراثة:لا
يمكن تحويله ديناميكياً:لايرجى الرجوع إلى: خصائص الرسوم المتحركة.
الإصدار: ميزات CSS3 الجديدة
قواعد النحو لـ JavaScript:JavaScript.style.columnRuleStyle="dotted"

 قواعد النحو لاستخدام column-rule-style

قواعد النحو لهذا العنصر هي:

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit

في هذا المثال، يتم عرض كيفية استخدام خاصية column-rule-style.

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule-color: red;
    -webkit-column-rule-width: 2px;
    -webkit-column-rule-style: solid;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule-color: red;
    -moz-column-rule-width: 2px;
    -moz-column-rule-style: solid;
    
    column-count: 3;
    column-gap: 100px;
    column-rule-color: red;
    column-rule-width: 2px;
    column-rule-style: solid;
column-rule-width: 2px;
column-rule-style: solid;

}

التحقق من‹/›النتيجة

قيم الخاصيةالجدول التالي يصف قيم هذه الخاصية.
القيمةالوصف
noneلا يظهر أي خطوط.
hiddenلا يظهر أي خطوط. متشابه مع none.
dottedيظهر الخطوط كسلسلة من النقاط.
dashedيظهر الخطوط كسلسلة من الخطوط القصيرة، وهي نقط السكاكين.
solidيظهر الخطوط كخط مستقيم.عرض خط الأعمدةdouble
يظهر الخطوط كخطين متوازيين من الخطوط المستقيمة، مع بعض المسافات بينهما. مجموع الخطين و المسافات بينهما يساويقيم.لون خط الأعمدةgroove
الظهور بنفس النمط المنحوت في الصفحة، ويضفي انطباعًا ثلاثي الأبعاد، عادة ما يتم إنجازه عن طريق إنشاء ظلال من لونين، ويكون هذان اللونان أكثر إشراقًا وإظلامًا منبألوان أكثر إشراقًا وإظلامًا
ridgeالظهور بنفس النمط inset، ويضفي انطباعًا ثلاثي الأبعاد، وكأن الخطوط تبدو وكأنها تخرج من الصفحة
الظهور بنفس النمط ridgeالظهور بنفس النمط groove
البدايةاعتماد هذا الخصائص للقيمة الافتراضية.
التوريثإذا تم تحديد هذا، فإن العناصر المرتبطة تستخدم نفس قيمة column-rule-style للعنصر الأب

ملاحظة:خصائص column-rule-style تعتمد بشكل أساسي على القيم المحددةstyle الحاجز، ولكن تفسير هذه القيم مختلف عننموذج الهوامش المدمجة متشابه.

تطابق المتصفحات

مستوى التطابق للمتصفحات الخاصة بخصائص column-rule-style، الأرقام في الجدول التالي تمثل أحدث إصدار للمتصفح يدعم هذه الخاصية؛ جميع المتصفحات الشائعة تدعم هذه الخاصية.

  • Firefox 2+ -moz-

  • Google Chrome 4+ -webkit-

  • Internet Explorer 10+

  • Apple Safari 3.1+ -webkit-

  • Opera 11.1+ -o-, 15+ -webkit-

قراءة إضافية

يرجى الرجوع إلى التعليمات التالية:تصميم الأعمدة المتعددة في CSS3.

خصائص مرتبطة:عرض الأعمدة,ملء الأعمدة,فجوة بين الأعمدة,خط الأعمدة,عرض خط الأعمدة,لون خط الأعمدة,استخدام الأعمدة عبر الأعمدة,عدد الأعمدة,الأعمدة.