Lihatlah! 10 petua praktikal CSS yang baik (kongsi)

Artikel ini akan berkongsi dengan anda 10 CSS petua praktikal untuk memudahkan pembangunan bahagian hadapan. Saya harap ia akan membantu semua orang.

CSS Terdapat kira-kira dua ratus sifat. Banyak atribut saling berkaitan, dan adalah mustahil untuk menyusun butiran setiap atribut. Oleh itu, artikel ini berkongsi beberapa CSS petua berguna untuk dirujuk oleh pembangun dan pereka. [Pembelajaran yang disyorkan: tutorial video css]

1. Kesan menaip

Reka bentuk web semakin kreatif. Diselaraskan dengan animasi CSS, halaman web anda akan kelihatan seperti hidup. Dalam contoh ini, kami akan menggunakan atribut animation dan @keyframes untuk mencapai kesan menaip.

Secara khusus, dalam tunjuk cara ini, kami menggunakan atribut steps() untuk mencapai kesan pemisahan teks. Pertama, anda perlu menentukan jumlah yang diluluskan dalam step(), yang dalam kes ini ialah panjang teks.

Kemudian, dalam langkah kedua, kami menggunakan @keyframes untuk mengisytiharkan bila hendak mula melaksanakan animasi.

Jika anda menambah kandungan selepas teks Typing effect for text tanpa menukar nombor dalam step(), ia tidak akan mempunyai kesan ini.

Kesan ini bukanlah sesuatu yang baru. Walau bagaimanapun, ramai pembangun menggunakan pustaka JavaScript untuk melaksanakan ini dan bukannya menggunakan CSS.

2. Kesan bayang gambar lutsinar

Pernahkah anda menggunakan box-shadow untuk menambah bayang-bayang jatuh pada imej lutsinar, menjadikannya kelihatan seperti jidar telah ditambahkan? Walau bagaimanapun penyelesaiannya adalah dengan menggunakan drop-shadow. Cara

drop-shadow berfungsi ialah ia mengikuti saluran Alpha yang diberikan imej. Jadi bayang-bayang adalah berdasarkan bentuk dalaman imej, bukannya muncul di luar imej.

3 Kursor Tersuai

Anda tidak perlu memaksa pelawat tapak anda menggunakan kursor unik. Sekurang-kurangnya, bukan untuk tujuan pengalaman pengguna. Walau bagaimanapun, perkara yang perlu diperhatikan tentang atribut cursor ialah ia membolehkan anda memaparkan imej, yang setara dengan memaparkan petua alat dalam format foto.

Sesetengah kes penggunaan termasuk membandingkan dua foto berbeza tanpa memaparkannya dalam tetingkap paparan. Contohnya: atribut cursor boleh digunakan dalam reka bentuk anda untuk menjimatkan ruang. Kerana anda boleh mengunci kursor tertentu dalam elemen div tertentu, ini div tidak boleh memberi kesan.

Pada masa ini terdapat had pada saiz imej, pembaca boleh menukar pengesahan sendiri

4. Gunakan attr() untuk memaparkan petua alat

attr() atribut yang saya temui baru-baru ini, dan ia adalah penemuan yang paling membanggakan. Saya pada asalnya bercadang untuk menambah fungsi tooltip pada tapak saya, tetapi mendapati saya perlu memperkenalkan pemalam, yang memperkenalkan perkara yang tidak perlu dan menjadikan tapak saya kelihatan kembung. Syukurlah, ini boleh dielakkan menggunakan attr().

attr() Cara atribut berfungsi sangat mudah, izinkan saya menganalisisnya langkah demi langkah:

• Kami menggunakan tooltip class untuk menandakan elemen mana yang perlu memaparkan maklumat tooltip. Kemudian tambah gaya yang anda suka pada elemen Untuk demonstrasi kemudahan ini, kami menggunakan gaya dotted border-bottom.
• Seterusnya, kami mencipta :before unsur pseudo yang akan mengandungi kandungan content, menunjuk kepada attr() tertentu. Ini merujuk kepada attr(tooltip-data).
• Seterusnya, kami akan mencipta kelas pseudo :hover yang akan menetapkan opacity kepada 1 apabila pengguna mengarahkan tetikus ke atas elemen.

Selain itu, anda boleh menyertakan gaya tersuai. Bergantung pada data yang anda tetapkan untuk tooltp, anda mungkin perlu melaraskan lebar atau jidarnya. Setelah anda menyediakan kelas tooptip-data arrt(), anda boleh menggunakannya pada bahagian lain reka bentuk anda.

5. >Seperti yang saya katakan pada awalnya, semakin matang. Demo senarai dinamik ini ialah contoh yang baik.

Kami menggunakan jenis input , ditambah dengan kelas pseudo

. Apabila

mengembalikan kes CSS, kami menggunakan atribut

untuk menukar keadaan.

checkboxAnda boleh mencapai pelbagai matlamat menggunakan kaedah ini. Sebagai contoh, apabila pengguna mengklik pada kotak pilihan yang ditentukan, kandungannya disembunyikan. Digunakan dalam input :checked taip radio dan kotak semak, sudah tentu, ini juga boleh digunakan pada elemen :checked dan true. transform

Coretan kodinput<option></option><select></select>

6 Gunakan :is()

dan <span style="font-size: 18px;">:where()</span><span style="font-size: 18px;">:is()</span> tambah gaya elemen <span style="font-size: 18px;">:where()</span>

Satu cara rangka kerja

moden beroperasi adalah melalui penggunaan pemilih logik bersyarat

. Dalam erti kata lain, atribut

dan CSS boleh digunakan untuk menggayakan berbilang elemen reka bentuk pada masa yang sama. Tetapi, yang lebih penting, anda boleh menggunakan sifat ini untuk menanyakan elemen yang anda perlukan untuk memproses secara individu. Coretan :is() di bawah ialah contoh kecil, anda boleh mengetahui lebih lanjut tentang :where() dan

melalui

. CSSMDN:is()Coretan kod:where()

7 Gunakan bingkai utama untuk mencapai kesan tarik-turun akordion

perpustakaan, seperti dsb., walaupun anda ingin menggunakan fungsi zum mudah, anda perlu mengimportnya sepenuhnya. Nasib baik, terdapat beberapa

helah untuk mengelakkan pengenalan ini. Contohnya, kod coretan akordion berikut.

JavaScriptJika anda melihat dengan teliti jQuery, Cash trend reka bentuk semasa, anda akan menemui kesan reka bentuk akordion pada halaman pendaratan. Ini adalah cara untuk memekatkan kandungan untuk menjimatkan ruang reka bentuk. Soalan lazim, ciri produk, petua penggunaan dan fungsi lain semuanya boleh dilaksanakan dalam akordion. Berikut ialah coretan kod CSS tulen dalam tindakan.

webCoretan kodCSS

8 Kesan tuding bar sisi

Adakah terdapat bar sisi yang boleh menggunakan CSS untuk mencapai kesan Hover dinamik? Sudah tentu, ini boleh dilakukan berkat atribut transform dan :hover.

Untuk keserasian, saya mengujinya pada berbilang terminal mudah alih dan ia berasa agak bagus. Walaupun kesan ini berfungsi dengan lancar pada desktop berbanding pada mudah alih.

Dalam latihan ini, menggunakan position: sticky; untuk mencipta bar sisi yang tajam berfungsi dengan baik.

9 Gunakan huruf pertama untuk menggunakan huruf pertama

<.>

Dalam

, elemen CSS tertentu boleh dipilih. Dalam contoh ini, kami menggunakan kelas pseudo first-of-type untuk mencapai kesan penggunaan huruf besar huruf pertama. Kelas ini membolehkan kami menambah gaya dengan lebih bebas. Jadi, anda boleh melaraskan gaya huruf besar agar sepadan dengan gaya reka bentuk tapak anda. ::first-letter

Bercakap tentang hartanah ini, anda boleh melakukan banyak perkara dengannya. Apabila elemen tertentu muncul buat kali pertama pada halaman, kami boleh menggunakan

untuk menambah gaya secara individu. Walau bagaimanapun, seperti yang ditunjukkan oleh kod di bawah, anda masih boleh menggunakannya pada berbilang elemen walaupun elemen itu sudah muncul. first-of-type

Coretan kod

10 Gunakan::sebelum menambah ikon butang

Setiap kali saya perlu memaut ke sumber luaran lain, saya akan menggunakan butang tersuai untuk mencapainya. Lebih tepatnya, ia adalah butang untuk menambah ikon. Carian Google yang mudah dan anda akan menemui banyak

, tetapi saya lebih berminat dengan penyelesaian umum yang boleh saya gunakan pada bila-bila masa.

button generatorsJadi, untuk mencapai ini, saya mencipta

elemen pseudo untuk butang tertentu. Perlu dinyatakan bahawa

dalam coretan kod ialah :before pelarian content:"

Atas ialah kandungan terperinci Lihatlah! 10 petua praktikal CSS yang baik (kongsi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!