เมื่อ 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>
<style type="text/css">
เนื้อความ{font-size:12px;width:600px;margin:2em auto;}
</สไตล์>
</หัว>
<ร่างกาย>
<ol>
<li>เดิมเรียกว่า Box Model Acid Test เป็นหน้าเว็บที่ใช้ในการทดสอบเบราว์เซอร์ พัฒนาขึ้นในเดือนตุลาคม พ.ศ. 2541 และกลายเป็นเกณฑ์มาตรฐานที่สำคัญสำหรับความเข้ากันได้กับเบราว์เซอร์รุ่นแรกๆ โดยเฉพาะการสนับสนุนเบราว์เซอร์สำหรับ Cascading Style Sheets 1.0 เช่นเดียวกับการใช้การทดสอบกรดเพื่อวัดคุณภาพของชิ้นส่วนโลหะอย่างรวดเร็วและมองเห็นได้ เป้าหมายของการทดสอบกรดของเว็บคือการให้วิธีการระบุอย่างชัดเจนว่าเบราว์เซอร์ปฏิบัติตามมาตรฐานของเว็บหรือไม่ </li>
<li>เวอร์ชันนี้ได้รับการออกแบบโดย Web Standards Project สำหรับการทดสอบที่ครอบคลุมของการรองรับมาตรฐาน HTML, CSS 2.0 และ PNG [1] </li>
<li>เปิดตัวอย่างเป็นทางการเมื่อวันที่ 3 มีนาคม พ.ศ.2551 โดยเน้นการทดสอบที่ ECMAScript, DOM ระดับ 3, Media Queries และข้อมูล: URL[3] หลังจากเปิดหน้าเว็บทดสอบนี้ด้วยเบราว์เซอร์แล้ว หน้าเว็บจะโหลดฟังก์ชันต่างๆ อย่างต่อเนื่อง [4] และให้คะแนนตามสถานการณ์การทดสอบด้วยคะแนนเต็ม 100</li>
</ol>
<ชม. />
<ol style="list-style:none;">
<li>1. เดิมเรียกว่าการทดสอบกรดแบบกล่อง เป็นหน้าเว็บที่ใช้ทดสอบเบราว์เซอร์ พัฒนาขึ้นในเดือนตุลาคม พ.ศ. 2541 และกลายเป็นเกณฑ์มาตรฐานที่สำคัญสำหรับความเข้ากันได้กับเบราว์เซอร์รุ่นแรกๆ โดยเฉพาะการสนับสนุนเบราว์เซอร์สำหรับ Cascading Style Sheets 1.0 เช่นเดียวกับการใช้การทดสอบกรดเพื่อวัดคุณภาพของชิ้นส่วนโลหะอย่างรวดเร็วและมองเห็นได้ เป้าหมายของการทดสอบกรดของเว็บคือการให้วิธีการระบุอย่างชัดเจนว่าเบราว์เซอร์ปฏิบัติตามมาตรฐานของเว็บหรือไม่ </li>
<li>2. เวอร์ชันนี้ได้รับการออกแบบโดย Web Standards Project สำหรับการทดสอบที่ครอบคลุมซึ่งรองรับมาตรฐาน HTML, CSS 2.0 และ PNG [1] </li>
<li>3. เปิดตัวอย่างเป็นทางการเมื่อวันที่ 3 มีนาคม พ.ศ. 2551 โดยเน้นการทดสอบที่ ECMAScript, DOM ระดับ 3, Media Queries และข้อมูล: URL[3] หลังจากเปิดหน้าเว็บทดสอบนี้ด้วยเบราว์เซอร์แล้ว หน้าเว็บจะโหลดฟังก์ชันต่างๆ อย่างต่อเนื่อง [4] และให้คะแนนตามสถานการณ์การทดสอบด้วยคะแนนเต็ม 100</li>
</ol>
</ร่างกาย>
</html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]
ในเวลานี้ คุณสามารถใช้คลาสเทียมอักษรตัวแรกเพื่อช่วย:
เรียกใช้กล่องรหัส
<!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>
<style type="text/css">
เนื้อความ{font-size:12px;width:600px;margin:2em auto;}
ol.list { รายการสไตล์: ไม่มี;
ol.list li:อักษรตัวแรก { ขอบซ้าย:-2em;สี:สีฟ้า;แบบอักษร-น้ำหนัก:ตัวหนา;}
</สไตล์>
</หัว>
<ร่างกาย>
<ol>
<li>เดิมเรียกว่า Box Model Acid Test เป็นหน้าเว็บที่ใช้ในการทดสอบเบราว์เซอร์ พัฒนาขึ้นในเดือนตุลาคม พ.ศ. 2541 และกลายเป็นเกณฑ์มาตรฐานที่สำคัญสำหรับความเข้ากันได้กับเบราว์เซอร์รุ่นแรกๆ โดยเฉพาะการสนับสนุนเบราว์เซอร์สำหรับ Cascading Style Sheets 1.0 เช่นเดียวกับการใช้การทดสอบกรดเพื่อวัดคุณภาพของชิ้นส่วนโลหะอย่างรวดเร็วและมองเห็นได้ เป้าหมายของการทดสอบกรดของเว็บคือการให้วิธีการระบุอย่างชัดเจนว่าเบราว์เซอร์ปฏิบัติตามมาตรฐานของเว็บหรือไม่ </li>
<li>เวอร์ชันนี้ได้รับการออกแบบโดย Web Standards Project สำหรับการทดสอบที่ครอบคลุมของการรองรับมาตรฐาน HTML, CSS 2.0 และ PNG [1] </li>
<li>เปิดตัวอย่างเป็นทางการเมื่อวันที่ 3 มีนาคม พ.ศ.2551 โดยเน้นการทดสอบที่ ECMAScript, DOM ระดับ 3, Media Queries และข้อมูล: URL[3] หลังจากเปิดหน้าเว็บทดสอบนี้ด้วยเบราว์เซอร์แล้ว หน้าเว็บจะโหลดฟังก์ชันต่างๆ อย่างต่อเนื่อง [4] และให้คะแนนตามสถานการณ์การทดสอบด้วยคะแนนเต็ม 100</li>
</ol>
<ชม. />
<ol class="รายการ">
<li>1. เดิมเรียกว่าการทดสอบกรดแบบกล่อง เป็นหน้าเว็บที่ใช้ทดสอบเบราว์เซอร์ พัฒนาขึ้นในเดือนตุลาคม พ.ศ. 2541 และกลายเป็นเกณฑ์มาตรฐานที่สำคัญสำหรับความเข้ากันได้กับเบราว์เซอร์รุ่นแรกๆ โดยเฉพาะการสนับสนุนเบราว์เซอร์สำหรับ Cascading Style Sheets 1.0 เช่นเดียวกับการใช้การทดสอบกรดเพื่อวัดคุณภาพของชิ้นส่วนโลหะอย่างรวดเร็วและมองเห็นได้ เป้าหมายของการทดสอบกรดของเว็บคือการให้วิธีการระบุอย่างชัดเจนว่าเบราว์เซอร์ปฏิบัติตามมาตรฐานของเว็บหรือไม่ </li>
<li>2. เวอร์ชันนี้ได้รับการออกแบบโดย Web Standards Project สำหรับการทดสอบที่ครอบคลุมซึ่งรองรับมาตรฐาน HTML, CSS 2.0 และ PNG [1] </li>
<li>3. เปิดตัวอย่างเป็นทางการเมื่อวันที่ 3 มีนาคม พ.ศ. 2551 โดยเน้นการทดสอบที่ ECMAScript, DOM ระดับ 3, Media Queries และข้อมูล: URL[3] หลังจากเปิดหน้าเว็บทดสอบนี้ด้วยเบราว์เซอร์แล้ว หน้าเว็บจะโหลดฟังก์ชันต่างๆ อย่างต่อเนื่อง [4] และให้คะแนนตามสถานการณ์การทดสอบด้วยคะแนนเต็ม 100</li>
</ol>
<ชม. />
<ol class="รายการ">
<li>1. เดิมเรียกว่าการทดสอบกรดแบบกล่อง เป็นหน้าเว็บที่ใช้ทดสอบเบราว์เซอร์ พัฒนาขึ้นในเดือนตุลาคม พ.ศ. 2541 และกลายเป็นเกณฑ์มาตรฐานที่สำคัญสำหรับความเข้ากันได้กับเบราว์เซอร์รุ่นแรกๆ โดยเฉพาะการสนับสนุนเบราว์เซอร์สำหรับ Cascading Style Sheets 1.0 เช่นเดียวกับการใช้การทดสอบกรดเพื่อวัดคุณภาพของชิ้นส่วนโลหะอย่างรวดเร็วและมองเห็นได้ เป้าหมายของการทดสอบกรดของเว็บคือการให้วิธีการระบุอย่างชัดเจนว่าเบราว์เซอร์ปฏิบัติตามมาตรฐานของเว็บหรือไม่ </li>
<li>2. เวอร์ชันนี้ได้รับการออกแบบโดย Web Standards Project สำหรับการทดสอบที่ครอบคลุมซึ่งรองรับมาตรฐาน HTML, CSS 2.0 และ PNG [1] </li>
<li>3. เปิดตัวอย่างเป็นทางการเมื่อวันที่ 3 มีนาคม พ.ศ. 2551 โดยเน้นการทดสอบที่ ECMAScript, DOM ระดับ 3, Media Queries และข้อมูล: URL[3] หลังจากเปิดหน้าเว็บทดสอบนี้ด้วยเบราว์เซอร์แล้ว หน้าเว็บจะโหลดฟังก์ชันต่างๆ อย่างต่อเนื่อง [4] และให้คะแนนตามสถานการณ์การทดสอบด้วยคะแนนเต็ม 100</li>
</ol>
</ร่างกาย>
</html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]
คราวนี้ ตัวละครนำจะถูกเก็บไว้ให้ห่างจากข้อความ และคุณสามารถควบคุมสไตล์ได้มากขึ้น
อย่างไรก็ตาม ไม่สามารถควบคุมรูปแบบของเครื่องหมายจุลภาคหลังตัวละครนำได้ แต่ฉันสงสัยว่าฉันสามารถตั้งค่าภาพพื้นหลังเพื่อแทนที่ได้หรือไม่
การทดสอบง่ายๆ พบว่าการควบคุมพื้นหลังของคลาสเทียมตัวอักษรตัวแรกนั้นสร้างความสับสนพอๆ กับการควบคุม list-style-image ดังนั้นจึงถูกยกเลิกไป
นอกจากนี้ แต่ละเบราว์เซอร์จะปฏิบัติต่อสัญลักษณ์ที่อยู่ถัดจากอักขระนำที่แตกต่างกัน เนื่องจากไม่ได้ติดตั้ง Safari ฉันจึงไม่ได้ทดสอบ:
รหัส:
.png)
ผลการเรนเดอร์:
.jpg)
IE8, FF3 และ Opera ทำงานเหมือนกัน Chrome ประมวลผลเฉพาะสัญลักษณ์ทางด้านซ้ายเท่านั้น ในขณะที่ IE6 และ 7 ประมวลผลเฉพาะอักขระตัวแรกเท่านั้น