الفرق بين المراجعتين لصفحة: «CSS/::first-line»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 56: | سطر 56: | ||
|1.0 | |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-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]. | * مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-shadow CSS Text Decoration Module Level 3]. | ||
المراجعة الحالية بتاريخ 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.