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

دليل CSS

قواعد CSS (@RULES)

مجلة خصائص CSS

طريقة استخدام و مثال على خاصية CSS3 column-rule

�性 CSS column-rule تحدد خطًا يُرسم بين كل عمود، أي "القاعدة". إنها اختصار لخصائص فردية، أي إعدادعرض خط الأعمدة,نمط خط الأعمدةولون خط الأعمدة.

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

القيمة الافتراضية:عرض جميع الخصائص
يُستخدم في:عناصر الأعمدة المتعددة
الوراثة:لا يوجد
يمكن الرسوم المتحركة:نعم، لأن بعض خصائص الشريط يمكن تعيينها بالرسوم المتحركة.يرجى الرجوع إلى: خصائص الرسوم المتحركة.
الإصدار: ميزات CSS3 الجديدة
قواعد الاستخدام لـ JavaScript:الجسم.style.columnRule="3px outset #ff00ff"

قواعد الاستخدام لـ column-rule

هذا الخصائص نحو كما يلي:

column-rule: [ column-rule-width column-rule-style column-rule-color ] | initial | inherit

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

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 2px solid red;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule: 2px solid red;
    
    column-count: 3;
    column-gap: 100px;
    column-rule: 2px solid red;
}
تجربة لمعرفة‹/›

قيمة الخاصية

جدول التالي يصف القيم الخاصة بهذه الخاصية.

القيمةالوصف
عرض خط الأعمدةتعيين عرض خط الأعمدة بين الأعمدة. القيمة الافتراضية هي medium. لا يسمح باستخدام القيم السلبية.
نمط خط الأعمدةتعيين نمط خط الأعمدة بين الأعمدة. القيمة الافتراضية هي لا شيء.
لون خط الأعمدةتعيين لون خط الأعمدة بين الأعمدة. القيمة الافتراضية هيcolorللمعلمات.
initialاعتماد هذا الخصائص على القيمة الافتراضية.
inheritإذا تم تحديد هذا، فإن العناصر المرتبطة تستخدم نفس قيمة خاصية column-rule للعنصر الأب.

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

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

  • Firefox 2+ -moz-

  • Google Chrome 4+ -webkit-

  • Internet Explorer 10+

  • Apple Safari 3.1+ -webkit-

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

قراءة متعمقة

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

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