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

المراجعة الحالية بتاريخ 20:03، 24 أكتوبر 2018

العنصر الزائف ‎::first-line‎ في CSS (أي pseudo-element) يؤدي إلى تطبيق الأنماط على أوّل سطر من العناصر الكتلية (block-level elements)، لاحظ أنَّ طول أوّل سطر يختلف تبعًا لعدة عوامل بما في ذلك عرض العنصر وعرض المستند وحجم الخط.

p::first-line {
  color: red;
}

الشكل العام لهذا المحدد:

::first-line
:first-line

لاحظ أنَّ CSS3 أضافت الشكل ‎::first-line (لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل ‎:first-line المُضاف في CSS2 أيضًا.

لا يسمَح إلا باستخدام مجموعة جزئية من خاصيات CSS مع هذا العنصر الزائف:

جميع خصائص الخطوط: font و font-style و font-feature-settings و font-kerning و font-language-override و font-stretch و font-synthesis و font-variant و font-variant-alternates و font-variant-caps و font-variant-east-asian و font-variant-ligatures و font-variant-numeric و font-variant-position و font-weight و font-size و font-size-adjust و line-height و font-family.
جميع خاصيات الخلفيات: background و background-color و background-image و background-clip و background-origin و background-position و background-repeat و background-size و background-attachment و background-blend-mode.
الخاصية color.
الخاصيات: text-decoration و text-shadow و text-transform و letter-spacing و word-spacing و line-height و text-decoration-color و text-decoration-line و text-decoration-style و vertical-align.

أمثلة

مثال عن استخدام هذا العنصر الزائف لتحديد أول سطر لجميع العناصر:

<p>سيتم تطبيق الأنماط فقط على السطر الأول من هذه الفقرة.
بعد ذلك ، سيتم تنسيق جميع النصوص مثل وضعها الطبيعي. هل تفهم ما اعني؟</p>

<span>لن يتلقى السطر الأول من هذا النص نمطًا خاصًا
لأنه ليس عنصر مستوى الكتلة.</span>

شيفرة CSS:

::first-line {
  color: blue;
  text-transform: uppercase;


  /* تحذير! لا تستعمل هذه الخاصيات لأنها غير صالحة مع هذا العنصر الزائف */
  margin-left: 20px;
  text-indent: 20px;
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي (‎:first-line)	1.0	1.0	5.5	3.5	1.0
‎::first-line	1.0	1.0	9.0	7.0	1.0

انظر أيضًا

صفحة الصنف الزائف first-letter:: الذي يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية).

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

مسودة CSS Pseudo-Elements Level 4.
مواصفة CSS Text Decoration Module Level 3.
مواصفة Selectors Level 3.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.

@@ سطر 17: / سطر 17: @@
 == أمثلة ==
 مثال عن استخدام هذا العنصر الزائف لتحديد أول سطر لجميع العناصر:<syntaxhighlight lang="html">
-<p>Styles will only be applied to the first line of this paragraph.
+<p>سيتم تطبيق الأنماط فقط على السطر الأول من هذه الفقرة.
-After that, all text will be styled like normal. See what I mean?</p>
+بعد ذلك ، سيتم تنسيق جميع النصوص مثل وضعها الطبيعي. هل تفهم ما اعني؟</p>
-<span>The first line of this text will not receive special styling
+<span>لن يتلقى السطر الأول من هذا النص نمطًا خاصًا
-because it is not a block-level element.</span>
+لأنه ليس عنصر مستوى الكتلة.</span>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 ::first-line {
@@ سطر 56: / سطر 56: @@
 |1.0
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/::first-letter|first-letter::]]</code> الذي يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية).
+== مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo CSS Pseudo-Elements Level 4].
 * مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-shadow CSS Text Decoration Module Level 3].
@@ سطر 62: / سطر 65: @@
 * مواصفة [http://www.w3.org/TR/CSS2/selector.html#first-line-pseudo ‎CSS Level 2 (Revision 1)‎].
 * مواصفة [http://www.w3.org/TR/CSS1/#the-first-line-pseudo-element CSS Level 1].
-[[تصنيف:CSS]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Selectors]]
+[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
-[[تصنيف:CSS pseudo-element]]
+[[تصنيف:CSS pseudo-element|{{SUBPAGENAME}}]]