الفرق بين المراجعتين لصفحة: «CSS/::first-letter»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 64: | سطر 64: | ||
|1.0 | |1.0 | ||
|} | |} | ||
==مصادر ومواصفات== | ==انظر أيضًا== | ||
* صفحة الصنف الزائف <code>[[CSS/::first-line|first-line::]]</code> الذي يؤدي إلى تطبيق الأنماط على أوّل سطر من العناصر الكتلية (block-level elements)، لاحظ أنَّ طول أوّل سطر يختلف تبعًا لعدة عوامل بما في ذلك عرض العنصر وعرض المستند وحجم الخط. | |||
== مصادر ومواصفات == | |||
* مسودة [https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo CSS Pseudo-Elements Level 4]. سمحت هذه المسودة باستخدام الخاصية <code>[[CSS/opacity|opacity]]</code> و <code>[[CSS/box-shadow|box-shadow]]</code>. | * مسودة [https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo CSS Pseudo-Elements Level 4]. سمحت هذه المسودة باستخدام الخاصية <code>[[CSS/opacity|opacity]]</code> و <code>[[CSS/box-shadow|box-shadow]]</code>. | ||
* مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-shadow CSS Text Decoration Module Level 3]. سمحت هذه المواصفة باستخدام الخاصية <code>[[CSS/text-shadow|text-shadow]]</code>. | * مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-shadow CSS Text Decoration Module Level 3]. سمحت هذه المواصفة باستخدام الخاصية <code>[[CSS/text-shadow|text-shadow]]</code>. | ||
المراجعة الحالية بتاريخ 20:02، 24 أكتوبر 2018
العنصر الزائف ::first-letter في CSS (أي pseudo-element) يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية).
p::first-letter {
font-size: 130%;
}
لاحظ أنَّه لا يسهل تحديد أوّل حرف من العنصر دومًا:
- بعض علامات الترقيم التي تسبق أو تلي أوّل حرف مباشرةً ستدخل في هذا العنصر الزائف.
- استخدام العنصر الزائف
::beforeمع الخاصيةcontentسيؤدي إلى إضافة بعض النصوص قبل بداية العنصر، وفي هذه الحالة سيُطابِق العنصر الزائف::first-letter أوّل حرف من المحتوى المولَّد.
الشكل العام لهذا المحدد:
::first-letter
:first-letter
لاحظ أنَّ CSS3 أضافت الشكل ::first-letter (لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل :first-letter المُضاف في 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. - جميع خاصيات الهوامش:
marginوmargin-topوmargin-rightوmargin-bottomوmargin-left. - جميع خاصيات الحواشي:
paddingوpadding-topوpadding-rightوpadding-bottomوpadding-left. - جميع خاصيات الإطارات:
borderوborder-styleوborder-colorوborder-widthوborder-radiusوborder-image، وجميع الخاصيات التي تختصرها. - الخاصية
color. - الخاصيات:
text-decorationوtext-shadowوtext-transformوletter-spacingوword-spacing(عندما يكون استعمالها مناسبًا) وline-heightوtext-decoration-colorوtext-decoration-lineوtext-decoration-styleوbox-shadowوfloat(إذا ضٌبِطَت إلىnoneفقط) وvertical-align.
أمثلة
مثال عن استخدام هذا العنصر الزائف لتحديد أوّل حرف في أول سطر للعنصر <p>:
<p>في مهمة لتطوير العالم العربي</p>
<p>نعمل لنمكّن الشباب ونفتح مزيدًا من الفرص أمامهم. نحن حسوب</p>
<p>حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p>
<p>-بداية علامة ترقيم خاصة</p>
<p>_بداية علامة ترقيم خاصة</p>
<p>"بداية علامة ترقيم خاصة</p>
<p>'بداية علامة ترقيم خاصة</p>
<p>*بداية علامة ترقيم خاصة</p>
<p>#بداية علامة ترقيم خاصة</p>
شيفرة CSS:
p::first-letter {
color: red;
font-size: 130%;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي (:first-letter) | 1.0 | 1.0 | 5.5 | 3.5 | 1.0 |
| ::first-letter | 1.0 | 1.0 | 9.0 | 7.0 | 1.0 |
انظر أيضًا
- صفحة الصنف الزائف
first-line::الذي يؤدي إلى تطبيق الأنماط على أوّل سطر من العناصر الكتلية (block-level elements)، لاحظ أنَّ طول أوّل سطر يختلف تبعًا لعدة عوامل بما في ذلك عرض العنصر وعرض المستند وحجم الخط.
مصادر ومواصفات
- مسودة CSS Pseudo-Elements Level 4. سمحت هذه المسودة باستخدام الخاصية
opacityوbox-shadow. - مواصفة CSS Text Decoration Module Level 3. سمحت هذه المواصفة باستخدام الخاصية
text-shadow. - مواصفة Selectors Level 3.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.