CSS Academy · درس

::placeholder و::selection و::marker

نسّق العناصر النائبة لحقول الإدخال وتحديد النص والرموز النقطية للقوائم باستخدام العناصر الزائفة

الدرس 2 من 413 خطوة

::placeholder و::selection و::marker درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

::placeholder

تنسّق ::placeholder نص العنصر النائب داخل عنصري إدخال النماذج ومنطقة النص. ولا تدعم سوى مجموعة فرعية من خصائص CSS.

<input type="text" placeholder="Type your name…" />

الخصائص المدعومة في ::placeholder

لا تعمل جميع خصائص CSS مع ::placeholder. وتشمل الخصائص المدعومة: color وfont-size وfont-weight وfont-style وletter-spacing وopacity وبعض الخصائص الأخرى. أما خصائص التخطيط فلا تكون مدعومة.

إتاحة العنصر النائب

يختفي نص العنصر النائب عندما يكتب المستخدمون، ولذلك لا ينبغي استخدامه بدلًا من عناصر <label>. احرصوا دائمًا على توفير تسميات مرئية لحقول النماذج. ويجب أن يحقق تباين العنصر النائب أيضًا نسبة WCAG البالغة 4.5:1.

::selection

تنسّق ::selection النص الذي حدده المستخدم بالمؤشر. وتتيح إنشاء ألوان تحديد متوافقة مع هوية التصميم.

<p>Select this text with your cursor to see the branded highlight color.</p>

الخصائص المدعومة في ::selection

لا تعمل سوى مجموعة صغيرة من الخصائص مع ::selection: color وbackground-color وtext-shadow وtext-decoration. أما الخصائص الأخرى فيتجاهلها المتصفح.

::marker

تنسّق ::marker علامة عنصر القائمة، أي الرمز النقطي أو الرقم في قائمتي <ul> و<ol>.

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

الخصائص المدعومة في ::marker

تشمل خصائص ::marker المدعومة: color وcontent وfont-size وfont-family وfont-weight وfont-style وunicode-bidi.

علامات قوائم مخصصة باستخدام ::marker

استخدموا الرموز التعبيرية أو الأحرف الخاصة كعلامات للقوائم:

<ul>
  <li>Normal item</li>
  <li class="warning">Warning item</li>
</ul>

::first-line

تنسّق ::first-line السطر الأول المُنسّق من عنصر كتلة، أي السطر كما يظهر فعليًا، وليس أول فاصل أسطر في HTML. وهي مفيدة لتنسيق الفقرة الافتتاحية بأسلوب يشبه الحرف الاستهلالي الكبير.

<p>This is the opening line of a paragraph that wraps onto a second line once it runs out of horizontal room in its container, so you can see the effect clearly.</p>

::first-letter

تستهدف ::first-letter الحرف الأول من أول سطر منسّق. ومن الاستخدامات التقليدية لها إنشاء أحرف استهلالية كبيرة في الطباعة بأسلوب المجلات.

<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>

::cue لتنسيق الترجمة

تنسّق ::cue ترجمات VTT في عناصر HTML من نوع <video>، وهي عنصر زائف متخصص لكنه مهم لإتاحة الوسائط.

<p style="color:#888;">::cue styles VTT subtitle text inside a &lt;video&gt; element (no visible effect without an active video/track, shown here for reference).</p>
<video controls style="max-width:100%;"></video>

تحقق سريع

ما العنصر الزائف الذي يتيح تنسيق الرمز النقطي أو الرقم لعنصر في قائمة؟

أجب عليها في الدرس التفاعلي

مراجعة

تنسّق ::placeholder نص العنصر النائب في حقول الإدخال. وتنسّق ::selection النص المحدد. أما ::marker فتنسّق الرموز النقطية والأرقام في القوائم. ويتيح ::first-letter و::first-line إجراء ضبط دقيق للطباعة. ولا تدعم جميع هذه العناصر سوى مجموعة محدودة من خصائص CSS.

البدء مجانًا

تعلم CSS مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 40
الدروس: 159

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «::placeholder و::selection و::marker» مجاني؟

نعم — نص درس «::placeholder و::selection و::marker» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «::placeholder و::selection و::marker»؟

نسّق العناصر النائبة لحقول الإدخال وتحديد النص والرموز النقطية للقوائم باستخدام العناصر الزائفة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «::placeholder و::selection و::marker»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy