الفرق بين المراجعتين ل"CSS/column-rule"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 2: | سطر 2: | ||
الخاصية <code>column-rule</code> المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة. | الخاصية <code>column-rule</code> المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة. | ||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| 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</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>[[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>[[CSS/column-rule-style|column-rule-style]]</code> لمزيدٍ من المعلومات. | شكل الخط، راجع صفحة الخاصية <code>[[CSS/column-rule-style|column-rule-style]]</code> لمزيدٍ من المعلومات. | ||
| − | === | + | === <code><column-rule-color></code> === |
لون الخط، راجع صفحة الخاصية <code>[[CSS/column-rule-color|column-rule-color]]</code> لمزيدٍ من المعلومات. | لون الخط، راجع صفحة الخاصية <code>[[CSS/column-rule-color|column-rule-color]]</code> لمزيدٍ من المعلومات. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
مراجعة 19:34، 29 أغسطس 2018
الخاصية column-rule المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.
بطاقة الخاصية
| القيمة الابتدائية | لكل خاصية مختصرة:
|
|---|---|
| تُطبَّق على | العناصر متعددة الأعمدة. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | لكل خاصية مختصرة:
|
هذه الخاصية ستضبط قيمة الخاصيات 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'>;
مصادر ومواصفات
- مواصفة CSS Multi-column Layout Module.