Sedikit trik huruf pertama

Penulis：Eve Cole Waktu Pembaruan：2010-03-19 16:24:49

Ketika OL mendefinisikan daftar yang diurutkan, kecuali list-style-position:inside; ditentukan, teks dan karakter utama akan diindentasi.

Namun terkadang, tipe daftar yang ditentukan oleh OL memiliki batasan. Misalnya, karakter Cina "satu, dua, dan tiga" tidak dapat ditentukan secara manual. Kita harus memasukkan karakter ini secara manual, tetapi kali ini teks dan karakter dihubungkan bersama.

[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]

Saat ini, Anda dapat menggunakan kelas semu huruf pertama untuk membantu:

Jalankan kotak kode
<!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 ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>huruf pertama</title>
<gaya tipe="teks/css">
body{ukuran font:12px;lebar:600px;margin:2em otomatis;}
ol.list { gaya daftar: tidak ada }
ol.list li:huruf pertama { margin-kiri:-2em;warna:biru;berat font:bold;}
</gaya>
</kepala>
<tubuh>
<ol>
<li>Awalnya dikenal sebagai Box Model Acid Test, ini adalah halaman web yang digunakan untuk menguji browser. Dikembangkan pada bulan Oktober 1998, ini menjadi tolok ukur penting untuk kompatibilitas dengan browser awal, terutama dukungan browser untuk Cascading Style Sheets 1.0. Sama seperti menggunakan uji asam untuk mengukur kualitas sepotong logam dengan cepat dan visual, tujuan uji asam web adalah memberikan cara untuk menunjukkan dengan jelas apakah browser mematuhi standar Web. </li>
<li>Versi ini dirancang oleh Proyek Standar Web untuk pengujian komprehensif dukungan terhadap standar HTML, CSS 2.0, dan gambar PNG[1]. </li>
<li>Resmi dirilis pada 3 Maret 2008, fokus pengujiannya adalah pada ECMAScript, DOM Level 3, Media Queries dan data: URL[3]. Setelah membuka halaman web tes ini dengan browser, halaman tersebut akan terus memuat fungsi [4] dan memberikan skor berdasarkan situasi tes, dengan skor penuh 100</li>
</ol>
<jam />
<ol class="daftar">
<li>1. Awalnya dikenal sebagai tes asam model kotak, ini adalah halaman web yang digunakan untuk menguji browser. Dikembangkan pada bulan Oktober 1998, ini menjadi tolok ukur penting untuk kompatibilitas dengan browser awal, terutama dukungan browser untuk Cascading Style Sheets 1.0. Sama seperti menggunakan uji asam untuk mengukur kualitas sepotong logam dengan cepat dan visual, tujuan uji asam web adalah memberikan cara untuk menunjukkan dengan jelas apakah browser mematuhi standar Web. </li>
<li>2. Versi ini dirancang oleh Proyek Standar Web untuk pengujian komprehensif yang mendukung standar gambar HTML, CSS 2.0 dan PNG [1]. </li>
<li>3. Resmi dirilis pada 3 Maret 2008, fokus pengujiannya adalah pada ECMAScript, DOM Level 3, Media Queries dan data: URL[3]. Setelah membuka halaman web tes ini dengan browser, halaman tersebut akan terus memuat fungsi [4] dan memberikan skor berdasarkan situasi tes, dengan skor penuh 100</li>
</ol>
<jam />
<ol class="daftar">
<li>1. Awalnya dikenal sebagai tes asam model kotak, ini adalah halaman web yang digunakan untuk menguji browser. Dikembangkan pada bulan Oktober 1998, ini menjadi tolok ukur penting untuk kompatibilitas dengan browser awal, terutama dukungan browser untuk Cascading Style Sheets 1.0. Sama seperti menggunakan uji asam untuk mengukur kualitas sepotong logam dengan cepat dan visual, tujuan uji asam web adalah memberikan cara untuk menunjukkan dengan jelas apakah browser mematuhi standar Web. </li>
<li>2. Versi ini dirancang oleh Proyek Standar Web untuk pengujian komprehensif yang mendukung standar gambar HTML, CSS 2.0 dan PNG [1]. </li>
<li>3. Resmi dirilis pada 3 Maret 2008, fokus pengujiannya adalah pada ECMAScript, DOM Level 3, Media Queries dan data: URL[3]. Setelah membuka halaman web tes ini dengan browser, halaman tersebut akan terus memuat fungsi [4] dan memberikan skor berdasarkan situasi tes, dengan skor penuh 100</li>
</ol>
</tubuh>
</html>

[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]

Kali ini, karakter utama dijaga pada jarak tertentu dari teks, dan Anda dapat mengontrol lebih banyak gaya.
Namun, gaya koma setelah karakter utama tidak dapat dikontrol, tapi saya ingin tahu apakah saya dapat mengatur gambar latar belakang untuk menggantikannya?
Sebuah tes sederhana menemukan bahwa mengendalikan latar belakang kelas semu huruf pertama sama membingungkannya dengan mengendalikan gambar gaya daftar, sehingga ditinggalkan.

Selain itu, setiap browser memperlakukan simbol di sebelah karakter utama secara berbeda. Karena Safari tidak diinstal, saya tidak mengujinya:

Kode:

Hasil rendering:

IE8, FF3 dan Opera berperilaku sama. Chrome hanya memproses simbol di sebelah kiri, sedangkan IE6 dan 7 hanya memproses karakter pertama.