CSS Cantikkan Teks Perenggan dengan Drop Cap_Experience Exchange

Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}

Jika anda rasa masih belum jelas, berikut penjelasan terperinci:

Pertama sekali, anda perlu mempunyai sekeping teks anda sendiri dalam HTML, sama ada dalam

atau dalam tag blok lain. Anda boleh memberikannya ID, kelas atau teg langsung. Mula-mula, andaikan ID sekeping teks ialah artikel >

#article:first-letter {……}

:huruf pertama ialah kelas pseudo, digunakan untuk menetapkan sifat helaian gaya bagi aksara pertama dalam objek. Sintaks ini termasuk dalam skop CSS2. Untuk butiran, lihat "Manual Bahasa Cina CSS2"

Mari kita bercakap tentang setiap atribut dalam ayat secara terperinci Pertama, kita perlu menjadikan perkataan ini lebih besar daripada perkataan dalam teks, jadi saiz fon yang diberikan kepadanya adalah 2.5 kali ganda kandungan teks. Sudah tentu, anda juga boleh memilih 3 kali atau 4 kali, dan mengubah suai ini mengikut keperluan anda sendiri.

#article:first-letter { font-size:2.5em }

Mengapa menggunakan tag em? Kerana kadangkala pembaca kami perlu menukar saiz teks melalui fungsi zum penyemak imbas Jika ia ditetapkan kepada saiz tertentu, ia secara semula jadi akan berada di luar perkadaran. Anda boleh cuba menukar ini untuk melihat bagaimana rasanya. Saiz ada, tetapi fon salah, maka fon perlu ditambah dan huruf tebal perlu ditambah di sini.

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold;  }

Okay, setakat ini, perkataan pertama nampaknya tidak berniat untuk tenggelam, jadi perkara utama di sini ialah float:left ya, ia dibiarkan terapung. Kita perlu tahu bahawa apabila objek ditetapkan kepada atribut terapung, ia akan mempunyai ciri-ciri elemen peringkat blok tanpa mengira sama ada ia pada asalnya elemen peringkat blok. Bahagian aliran teks sekeliling yang tidak ditetapkan akan mengelilingi objek ini. Pembalut imej dalam teks juga mempunyai sifat ini.

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left;  }

Cubalah, pernahkah anda melihat penutup jatuh? Sudah tentu, mungkin anda boleh melihat bahawa ia agak tidak kemas Adakah terdapat sedikit lagi di atas? Jangan risau, gunakan padding untuk menyediakannya supaya terdapat lebih banyak ruang di bahagian atas perkataan, supaya perkataan pertama sama dengan baris pertama.

Apa lagi yang boleh saya katakan pada akhirnya? Saya memikirkannya setelah saya cuba membuat P dalam

......

juga melaksanakan penutup jatuh keputusannya gagal. Kesimpulannya ialah: kita tidak boleh mengawal aksara pertama dalam sub-objek melalui lapisan label.

Sudah tentu, jika anda berminat dengan pseudo-class ini, anda disyorkan untuk terus belajar:

Selector: first-line { sRules }

Selector1 Selector2: first-child { sRules }