الفرق بين المراجعتين لصفحة: «CSS/column-rule»

المراجعة الحالية بتاريخ 05:05، 12 سبتمبر 2018

الخاصية column-rule المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.

بطاقة الخاصية

القيمة الابتدائية	لكل خاصية مختصرة: `column-rule-width`: `medium` `column-rule-style`: `none` `column-rule-color`: `currentcolor`
تُطبَّق على	العناصر متعددة الأعمدة.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	لكل خاصية مختصرة: `column-rule-width`: طول مطلق، أو `0` إذا كانت قيمة الخاصية `column-rule-style` تساوي `none` أو `hidden`. `column-rule-style`: كما حُدِّدَت. `column-rule-color`: قيمة لونية.

هذه الخاصية ستضبط قيمة الخاصيات column-rule-width و column-rule-style و column-rule-color في خاصيةٍ واحدة.

/* كلمات محجوزة */
column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;

/* القيم العامة */
column-rule: inherit;
column-rule: initial;
column-rule: unset;

أمثلة

مثال عن مختلف القيم للخاصية column-rule مع مكافئاتها من الخاصيات غير المختصرة column-rule-style و column-rule-width و column-rule-color:

p { column-rule: dotted; }
p {
    column-rule-style: dotted;
    column-rule-width: medium;
    column-rule-color: currentColor;
}

div { column-rule: solid blue; }
div {
    column-rule-style: solid;
    column-rule-width: medium;
    column-rule-color: blue;
}

.foo { column-rule: solid 8px; }
.foo {
    column-rule-style: solid;
    column-rule-width: 8px;
    column-rule-color: currentColor;
}
 
.bar { column-rule: thick inset blue; }
.bar {
    column-rule-style: inset;
    column-rule-width: thick;
    column-rule-color: blue;
}

مثال عن ضبط الخاصية column-rule لقيمة الخاصيتين column-rule-style و column-rule-width:

<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى عمودين باستخدام CSS،
لاحظ الخط الفاصل بين الأعمدة.
</p>

شيفرة CSS:

.content-box {
  margin: 1em;
  padding: 1em;
  width: 400px;
  border: 1px solid #eaecf0;
  background-color: #f8f9fa;
  columns: 3 150px;
  column-rule: solid 4px;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	4.0 (مع السابقة `-webkit-`) 50 (دون سابقة)	2.0 (مع السابقة `-moz-`)	10	15 (مع السابقة `-webkit-`) 37 (دون سابقة)	3.1 (مع السابقة `-webkit-`) 10 (دون سابقة)

البنية العامة

تقبل الخاصية column-rule قيمةً أو قيمتين أو ثلاث قيم من القيم التالية وبأي ترتيب.

`<column-rule-width>`

قيمة طولية <length> تُمثِّل عرض الخط أو إحدى الكلمات المحجوزة thin أو medium أو thick، راجع صفحة الخاصية column-rule-width لمزيدٍ من المعلومات.

`<column-rule-style>`

شكل الخط، راجع صفحة الخاصية column-rule-style لمزيدٍ من المعلومات.

`<column-rule-color>`

لون الخط، راجع صفحة الخاصية column-rule-color لمزيدٍ من المعلومات.

البنية الرسمية

column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>;

انظر أيضًا

صفحة الخاصية column-count التي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
صفحة الخاصية column-fill التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة.
صفحة الخاصية column-gap التي تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements).
صفحة الخاصية column-rule التي تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة، والخاصيات الفرعية لهذه الخاصية وهي column-rule-color و column-rule-style و column-rule-width.
صفحة الخاصية column-spanالتي سمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة all لها.
صفحة الخاصية column-width التي تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها.

مصادر ومواصفات

مواصفة CSS Multi-column Layout Module.

@@ سطر 2: / سطر 2: @@
 الخاصية <code>column-rule</code> المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.
-هذه الخاصية ستضبط قيمة الخاصيات <code>[[CSS/column-rule-width|column-rule-width]]</code> و <code>[[CSS/column-rule-style|column-rule-style]]</code> و <code>[[CSS/column-rule-color|column-rule-color]]</code> في خاصيةٍ واحدة.<nowiki/><syntaxhighlight lang="css">
+== بطاقة الخاصية ==
-/* كلمات محجوزة */
-column-rule: dotted;
-column-rule: solid blue;
-column-rule: solid 8px;
-column-rule: thick inset blue;
-/* القيم العامة */
-column-rule: inherit;
-column-rule: initial;
-column-rule: unset;
-</syntaxhighlight>
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 38: / سطر 27: @@
 |}
+هذه الخاصية ستضبط قيمة الخاصيات <code>[[CSS/column-rule-width|column-rule-width]]</code> و <code>[[CSS/column-rule-style|column-rule-style]]</code> و <code>[[CSS/column-rule-color|column-rule-color]]</code> في خاصيةٍ واحدة.<nowiki/><syntaxhighlight lang="css">
+/* كلمات محجوزة */
+column-rule: dotted;
+column-rule: solid blue;
+column-rule: solid 8px;
+column-rule: thick inset blue;
+/* القيم العامة */
+column-rule: inherit;
+column-rule: initial;
+column-rule: unset;
+</syntaxhighlight>
 == أمثلة ==
@@ سطر 106: / سطر 108: @@
 == البنية العامة ==
 تقبل الخاصية <code>column-rule</code> قيمةً أو قيمتين أو ثلاث قيم من القيم التالية وبأي ترتيب.
-=== القيمة <code><column-rule-width></code> ===
+===  <code><column-rule-width></code> ===
 قيمة طولية <code>[[CSS/length|<length>]]</code> تُمثِّل عرض الخط أو إحدى الكلمات المحجوزة <code>thin</code> أو <code>medium</code> أو <code>thick</code>، راجع صفحة الخاصية <code>[[CSS/column-rule-width|column-rule-width]]</code> لمزيدٍ من المعلومات.
-=== القيمة <code><column-rule-style></code> ===
+=== <code><column-rule-style></code> ===
 شكل الخط، راجع صفحة الخاصية <code>[[CSS/column-rule-style|column-rule-style]]</code> لمزيدٍ من المعلومات.
-=== القيمة <code><column-rule-color></code> ===
+===  <code><column-rule-color></code> ===
 لون الخط، راجع صفحة الخاصية <code>[[CSS/column-rule-color|column-rule-color]]</code> لمزيدٍ من المعلومات.
 === البنية الرسمية ===
@@ سطر 117: / سطر 119: @@
 </syntaxhighlight>
+==  انظر أيضًا ==
+* صفحة الخاصية  <code>[[CSS/column-count|column-count]]</code> التي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
+* صفحة الخاصية  <code>[[CSS/column-fill|column-fill]]</code> التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة.
+* صفحة الخاصية  <code>[[CSS/column-gap|column-gap]]</code> التي تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements).
+* صفحة الخاصية  <code>column-rule</code>  التي تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة، والخاصيات الفرعية لهذه الخاصية وهي <code>[[CSS/column-rule-color|column-rule-color]]</code> و <code>[[CSS/column-rule-style|column-rule-style]]</code> و <code>[[CSS/column-rule-width|column-rule-width]]</code>.
+* صفحة الخاصية  <code>[[CSS/column-span|column-span]]</code>التي سمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة <code>all</code> لها.
+* صفحة الخاصية  <code>[[CSS/column-width|column-width]]</code> التي تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها.
 == مصادر ومواصفات ==
 * مواصفة [https://drafts.csswg.org/css-multicol-1/#column-rule CSS Multi-column Layout Module].
-[[تصنيف:CSS]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Property]]
+[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Columns]]
+[[تصنيف:CSS Columns|{{SUBPAGENAME}}]]