عندما يحدد OL قائمة مرتبة، ما لم يتم تحديد list-style-position:inside، يتم وضع مسافة بادئة للنص والأحرف البادئة.
لكن في بعض الأحيان، يكون لأنواع القائمة التي يحددها OL قيود. على سبيل المثال، لا يمكن تعريف الأحرف الصينية "واحد واثنين وثلاثة" وعلينا إدخال هذه الأحرف يدويًا، ولكن هذه المرة يتم ربط النص والأحرف معًا.
تشغيل مربع التعليمات البرمجية
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>الحرف الأول</title>
<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12 بكسل؛ العرض: 600 بكسل؛ الهامش: 2em تلقائي؛}
</نمط>
</الرأس>
<الجسم>
<ol>
<li>المعروف في الأصل باسم اختبار Box Model Acid، وهو عبارة عن صفحة ويب تستخدم لاختبار المتصفحات. تم تطويره في أكتوبر 1998، وأصبح معيارًا مهمًا للتوافق مع المتصفحات المبكرة، وخاصة دعم المتصفح لـ Cascading Style Sheets 1.0. تمامًا مثل استخدام الاختبار الحمضي لقياس جودة قطعة معدنية بشكل سريع وبصري، فإن الهدف من الاختبار الحمضي للويب هو توفير طريقة للإشارة بوضوح إلى ما إذا كان المتصفح يتوافق مع معايير الويب. </لي>
<li>تم تصميم هذا الإصدار بواسطة مشروع معايير الويب لإجراء اختبار شامل لدعم معايير HTML وCSS 2.0 وPNG image[1]. </لي>
<li>تم إصداره رسميًا في 3 مارس 2008، وينصب تركيز الاختبار على ECMAScript، وDOM المستوى 3، واستعلامات الوسائط والبيانات: URL[3]. بعد فتح صفحة الويب الاختبارية هذه باستخدام متصفح، ستقوم الصفحة بتحميل الوظائف بشكل مستمر [4] وتعطي درجات بناءً على حالة الاختبار، مع درجة كاملة تبلغ 100</li>
</ol>
<ساعة />
<ol style="list-style:none;">
<li>1. كان يُعرف في الأصل باسم اختبار حمض النموذج الصندوقي، وهو عبارة عن صفحة ويب تُستخدم لاختبار المتصفحات. تم تطويره في أكتوبر 1998، وأصبح معيارًا مهمًا للتوافق مع المتصفحات المبكرة، وخاصة دعم المتصفح لـ Cascading Style Sheets 1.0. تمامًا مثل استخدام الاختبار الحمضي لقياس جودة قطعة معدنية بشكل سريع وبصري، فإن الهدف من الاختبار الحمضي للويب هو توفير طريقة للإشارة بوضوح إلى ما إذا كان المتصفح يتوافق مع معايير الويب. </لي>
<li>2. تم تصميم هذا الإصدار بواسطة مشروع معايير الويب لإجراء اختبارات شاملة تدعم معايير HTML وCSS 2.0 وPNG image [1]. </لي>
<li>3. تم إصداره رسميًا في 3 مارس 2008، وينصب تركيز الاختبار على ECMAScript، وDOM المستوى 3، واستعلامات الوسائط والبيانات: URL[3]. بعد فتح صفحة الويب الاختبارية هذه باستخدام متصفح، ستقوم الصفحة بتحميل الوظائف بشكل مستمر [4] وتعطي درجات بناءً على حالة الاختبار، مع درجة كاملة تبلغ 100</li>
</ol>
</الجسم>
</html>
[Ctrl+A تحديد كافة النصائح: يمكنك تعديل جزء من الكود أولاً ثم الضغط على تشغيل]
في هذا الوقت، يمكنك استخدام الفئة الزائفة بالحرف الأول للمساعدة:
تشغيل مربع التعليمات البرمجية
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>الحرف الأول</title>
<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12 بكسل؛ العرض: 600 بكسل؛ الهامش: 2em تلقائي؛}
ol.list { نمط القائمة: لا شيء }
ol.list li:الحرف الأول { الهامش الأيسر:-2em;اللون:أزرق;وزن الخط:غامق;}
</نمط>
</الرأس>
<الجسم>
<ol>
<li>المعروف في الأصل باسم اختبار Box Model Acid، وهو عبارة عن صفحة ويب تستخدم لاختبار المتصفحات. تم تطويره في أكتوبر 1998، وأصبح معيارًا مهمًا للتوافق مع المتصفحات المبكرة، وخاصة دعم المتصفح لـ Cascading Style Sheets 1.0. تمامًا مثل استخدام الاختبار الحمضي لقياس جودة قطعة معدنية بشكل سريع وبصري، فإن الهدف من الاختبار الحمضي للويب هو توفير طريقة للإشارة بوضوح إلى ما إذا كان المتصفح يتوافق مع معايير الويب. </لي>
<li>تم تصميم هذا الإصدار بواسطة مشروع معايير الويب لإجراء اختبار شامل لدعم معايير HTML وCSS 2.0 وPNG image[1]. </لي>
<li>تم إصداره رسميًا في 3 مارس 2008، وينصب تركيز الاختبار على ECMAScript، وDOM المستوى 3، واستعلامات الوسائط والبيانات: URL[3]. بعد فتح صفحة الويب الاختبارية هذه باستخدام متصفح، ستقوم الصفحة بتحميل الوظائف بشكل مستمر [4] وتعطي درجات بناءً على حالة الاختبار، مع درجة كاملة تبلغ 100</li>
</ol>
<ساعة />
<ol class="list">
<li>1. كان يُعرف في الأصل باسم اختبار حمض النموذج الصندوقي، وهو عبارة عن صفحة ويب تُستخدم لاختبار المتصفحات. تم تطويره في أكتوبر 1998، وأصبح معيارًا مهمًا للتوافق مع المتصفحات المبكرة، وخاصة دعم المتصفح لـ Cascading Style Sheets 1.0. تمامًا مثل استخدام الاختبار الحمضي لقياس جودة قطعة معدنية بشكل سريع وبصري، فإن الهدف من الاختبار الحمضي للويب هو توفير طريقة للإشارة بوضوح إلى ما إذا كان المتصفح يتوافق مع معايير الويب. </لي>
<li>2. تم تصميم هذا الإصدار بواسطة مشروع معايير الويب لإجراء اختبارات شاملة تدعم معايير HTML وCSS 2.0 وPNG image [1]. </لي>
<li>3. تم إصداره رسميًا في 3 مارس 2008، وينصب تركيز الاختبار على ECMAScript، وDOM المستوى 3، واستعلامات الوسائط والبيانات: URL[3]. بعد فتح صفحة الويب الاختبارية هذه باستخدام متصفح، ستقوم الصفحة بتحميل الوظائف بشكل مستمر [4] وتعطي درجات بناءً على حالة الاختبار، مع درجة كاملة تبلغ 100</li>
</ol>
<ساعة />
<ol class="list">
<li>1. كان يُعرف في الأصل باسم اختبار حمض النموذج الصندوقي، وهو عبارة عن صفحة ويب تُستخدم لاختبار المتصفحات. تم تطويره في أكتوبر 1998، وأصبح معيارًا مهمًا للتوافق مع المتصفحات المبكرة، وخاصة دعم المتصفح لـ Cascading Style Sheets 1.0. تمامًا مثل استخدام الاختبار الحمضي لقياس جودة قطعة معدنية بشكل سريع وبصري، فإن الهدف من الاختبار الحمضي للويب هو توفير طريقة للإشارة بوضوح إلى ما إذا كان المتصفح يتوافق مع معايير الويب. </لي>
<li>2. تم تصميم هذا الإصدار بواسطة مشروع معايير الويب لإجراء اختبارات شاملة تدعم معايير HTML وCSS 2.0 وPNG image [1]. </لي>
<li>3. تم إصداره رسميًا في 3 مارس 2008، وينصب تركيز الاختبار على ECMAScript، وDOM المستوى 3، واستعلامات الوسائط والبيانات: URL[3]. بعد فتح صفحة الويب الاختبارية هذه باستخدام متصفح، ستقوم الصفحة بتحميل الوظائف بشكل مستمر [4] وتعطي درجات بناءً على حالة الاختبار، مع درجة كاملة تبلغ 100</li>
</ol>
</الجسم>
</html>
[Ctrl+A تحديد كافة النصائح: يمكنك تعديل جزء من الكود أولاً ثم الضغط على تشغيل]
هذه المرة، يتم الاحتفاظ بالحرف الرئيسي على مسافة معينة من النص، ويمكنك التحكم في المزيد من الأنماط.
ومع ذلك، لا يمكن التحكم في نمط الفاصلة بعد الشخصية الرئيسية، ولكن أتساءل عما إذا كان بإمكاني تعيين صورة خلفية لتحل محلها؟
وجد اختبار بسيط أن التحكم في خلفية الفئة الزائفة ذات الحرف الأول أمر مربك مثل التحكم في صورة نمط القائمة، لذلك تم التخلي عنها.
بالإضافة إلى ذلك، يتعامل كل متصفح مع الرموز الموجودة بجوار الحرف الرئيسي بشكل مختلف نظرًا لعدم تثبيت Safari، ولم أختبره:
شفرة:
.png)
نتيجة التقديم:
.jpg)
يعمل متصفح IE8 وFF3 وOpera بنفس الطريقة، حيث يقوم Chrome بمعالجة الرموز الموجودة على اليسار فقط، بينما يقوم IE6 و7 بمعالجة الحرف الأول فقط.