الفرق بين المراجعتين ل"CSS/column-span"

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

الخاصية column-span في CSS تسمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة all لها.

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

القيمة الابتدائية	`none`
تُطبَّق على	العناصر الكتلية.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

/* كلمات محجوزة */
column-span: none;
column-span: all;

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

أمثلة

مثال عن استخدام القيمة all في الخاصية column-span على عناصر <h1>:

<div class="content-box">
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
<h1 class="span">الترويسة</h1>
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</div>

شيفرة CSS:

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

.span {column-span: all; text-align: center;}

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

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

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

تقبل الخاصية column-span قيمةً من القيمتين التاليتين.

`none`

لن يمتد العنصر على أكثر من عمود.

`all`

سيمتد العنصر على جميع الأعمدة، ولا يُسمَح باستخدام هذه الخاصية إلا على العناصر الكتلية التي لها القيمة block للخاصية display، وهي تفيد إذا أردنا أن تمتد صورة أو عنوان على جميع الأعمدة.

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

column-span: none | all;

انظر أيضًا

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

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>column-span</code>}}</noinclude>
-الخاصية <code>column-span</code> في CSS تسمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة <code>all</code> لها.<nowiki/><syntaxhighlight lang="css">
+الخاصية <code>column-span</code> في CSS تسمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة <code>all</code> لها.
-/* كلمات محجوزة */
-column-span: none;
-column-span: all;
-/* القيم العامة */
+== بطاقة الخاصية ==
-column-span: inherit;
-column-span: initial;
-column-span: unset;
-</syntaxhighlight>
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 28: / سطر 21: @@
 |}
+<syntaxhighlight lang="css">
+/* كلمات محجوزة */
+column-span: none;
+column-span: all;
+/* القيم العامة */
+column-span: inherit;
+column-span: initial;
+column-span: unset;
+</syntaxhighlight>
 == أمثلة ==
 مثال عن استخدام القيمة <code>all</code> في الخاصية <code>column-span</code> على عناصر <code>[[HTML/h1-h6|<nowiki><h1></nowiki>]]</code>:<syntaxhighlight lang="html">
 <div class="content-box">
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
-<h1 class="span">Heading</h1>
+<h1 class="span">الترويسة</h1>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
+</div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 .content-box {
@@ سطر 69: / سطر 74: @@
 == البنية العامة ==
 تقبل الخاصية <code>column-span</code> قيمةً من القيمتين التاليتين.
-=== القيمة <code>none</code> ===
+===  <code>none</code> ===
 لن يمتد العنصر على أكثر من عمود.
-===القيمة <code>all</code>===
+=== <code>all</code>===
 سيمتد العنصر على جميع الأعمدة، ولا يُسمَح باستخدام هذه الخاصية إلا على العناصر الكتلية التي لها القيمة <code>block</code> للخاصية <code>[[CSS/display|display]]</code>، وهي تفيد إذا أردنا أن تمتد صورة أو عنوان على جميع الأعمدة.
 === البنية الرسمية ===
@@ سطر 78: / سطر 83: @@
 </syntaxhighlight>
-== مصادر ومواصفات ==
+==  انظر أيضًا ==
+* صفحة الخاصية  <code>[[CSS/column-count|column-count]]</code> التي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
+* صفحة الخاصية  <code>[[CSS/column-gap|column-gap]]</code> التي تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة.
+* صفحة الخاصية  <code>[[CSS/column-fill|column-fill]]</code> التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة.
+* صفحة الخاصية  <code>[[CSS/column-rule|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-width|column-width]]</code> التي تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها.
+==مصادر ومواصفات==
 * مواصفة [https://drafts.csswg.org/css-multicol-1/#column-gap CSS Multi-column Layout Module].
 [[تصنيف:CSS|{{SUBPAGENAME}}]]
 [[تصنيف:CSS Property|{{SUBPAGENAME}}]]
 [[تصنيف:CSS Columns|{{SUBPAGENAME}}]]