Dropka Perenggan dengan elemen pertama dan huruf CSS CSS
Terdapat beberapa pemilih CSS atau sifat yang saya fikir jarang digunakan di alam liar, tetapi sebenarnya mereka telah wujud sejak hari CSS1; sesetengahnya termasuk :Barisan pertama dan :surat pertama unsur pesudo.
Bagaimana nak guna?
Unsur-unsur pseudo ini pada asasnya berfungsi sama dengan saudara kandung mereka -: sebelum dan selepas: dan saya fikir mereka juga agak mudah. The :surat pertama akan menyasarkan huruf pertama atau aksara elemen yang dipilih, ini pseudo-element biasanya digunakan untuk membuat kesan tipografi seperti topi drop. Begini bagaimana ia dilakukan.
p: first-letter font-size: 50px;
Kod ini menghasilkan persembahan berikut.
Walau bagaimanapun, beberapa perkara harus diperhatikan, kesan ini hanya akan terpakai apabila watak pertama tidak didahului oleh elemen lain, contohnya, imej. Di samping itu, apabila kita mempunyai beberapa unsur sasaran yang sama secara berturut-turut, semuanya juga akan terjejas.
Selanjutnya, dari segi :Barisan pertama, ini pseudo-element akan menargetkan baris pertama unsur sasaran, contoh di bawah ini menunjukkan bagaimana kita berani baris pertama perenggan.
p: first-line font-weight: bold;
Seperti kod sebelumnya :surat pertama, ini juga akan menjejaskan semua baris pertama dalam elemen perenggan yang ada di halaman.
Jadi, dalam kes sebenar, apabila kita secara amnya mahu menambah topi drop atau mengubah baris pertama sahaja pada perenggan pertama kita perlu lebih spesifik - sama ada dengan menambah atribut kelas tambahan atau menggunakan unsur-unsur pseudo ini bersama-sama dengan : anak pertama atau : first-of-type pemilih, seperti itu.
p: anak pertama: huruf pertama font-size: 50px; p: anak pertama: baris pertama font-weight: bold;
Di sana kita pergi, perenggan yang terjejas kini hanya yang pertama.
Pseudo-Elements at Work
Baiklah, mari kita cuba merekabentuk perenggan yang lebih baik dengan menggunakan unsur-unsur pseudo. Tetapi sebelum kita mula kita memerlukan font khas untuk topi drop kami dan di sini adalah pilihan saya: Hominis oleh Paul Lloyd. Kemudian kita menentukan keluarga font baru dalam lembaran gaya, seperti berikut.
@ font-face font-family: 'HominisNormal'; src: url ('fon / HOMINIS-webfont.eot'); format: url ('fon / HOMINIS-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / HOMINIS-webfont.woff' Format HOMINIS-webfont.ttf ') (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') format (' svg '); font-weight: normal; gaya fon: normal; Seterusnya, kami tetapkan keluarga font lalai untuk perenggan.
p color: # 555; font-family: 'Georgia', Times, serif; garis ketinggian: 24px;
Dalam contoh ini, kami akan menggunakan : anak pertama pemilih untuk menyasarkan perenggan pertama dan menggunakan gaya hiasan untuk kelihatan lebih menonjol:
p: anak pertama padding: 30px; border-left: 5px solid # 7f7664; warna latar belakang: # f5f4f2; garis ketinggian: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); kedudukan: relatif;
Kemudian, kami menambah topi drop menggunakan :surat pertama, membesarkan saiz fon serta menetapkan keluarga font baharu kepadanya;
p: anak pertama: surat pertama font-size: 72px; terapung: kiri; padding: 10px; ketinggian: 64px; font-family: 'HominisNormal'; warna latar belakang: # 7F7664; margin-right: 10px; warna: putih; jejari sempadan: 5px; garis ketinggian: 70px;
Kami juga akan menekankan baris pertama dengan :Barisan pertama, seperti itu.
p: anak pertama: baris pertama font-weight: bold; saiz fon: 24px; warna: # 7f7664;
Akhir sekali, kami ingin menambah atribut dekoratif pada perenggan pertama dengan menggunakan klip kertas : selepas pseudo-element.
p: anak pertama: selepas latar belakang: url ("... /images/paper-clip.png") tiada tatal ulang 0 0 telus; kandungan: " "; paparan: blok dalam talian; ketinggian: 100px; kedudukan: mutlak; kanan: -5px; atas: -35px; lebar: 100px; Itulah semua kod yang kita perlukan, kini paragraf kita harus kelihatan lebih baik;
Anda juga boleh melihat demo langsung dari pautan di bawah:
- Lihat Demo
- Muat turun Sumber
Pemikiran Akhir
Seperti yang telah kita sebutkan di dalam jawatan ini, unsur-unsur pseudo ini, khususnya :surat pertama dan :Barisan pertama telah dimasukkan sejak CSS1, oleh itu mereka juga disokong walaupun di Internet Explorer 8 lebih awal.
Namun, sejauh yang saya tahu, mereka tidak begitu banyak dilaksanakan di alam liar. Oleh itu, kami berharap tutorial ini dapat memberi inspirasi kepada anda untuk mencuba ciri CSS di laman web anda.
