الفرق بين المراجعتين لصفحة: «CSS/::first-letter»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 24: | سطر 24: | ||
== أمثلة == | == أمثلة == | ||
مثال عن استخدام هذا العنصر الزائف لتحديد أوّل حرف في أول سطر للعنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html"> | مثال عن استخدام هذا العنصر الزائف لتحديد أوّل حرف في أول سطر للعنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html"> | ||
<p> | <p>في مهمة لتطوير العالم العربي</p> | ||
<p>نعمل لنمكّن الشباب ونفتح مزيدًا من الفرص أمامهم. نحن حسوب</p> | |||
<p>حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p> | |||
<p> | |||
<p> | |||
<p>-بداية علامة ترقيم خاصة</p> | |||
<p>_بداية علامة ترقيم خاصة</p> | |||
<p>- | <p>"بداية علامة ترقيم خاصة</p> | ||
<p> | <p>'بداية علامة ترقيم خاصة</p> | ||
<p>" | <p>*بداية علامة ترقيم خاصة</p> | ||
<p>' | <p>#بداية علامة ترقيم خاصة</p> | ||
<p>* | |||
<p># | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
p::first-letter { | p::first-letter { | ||
مراجعة 10:27، 11 أكتوبر 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 |
مصادر ومواصفات
- مسودة 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.