15 Trik CSS berguna yang mungkin anda diabaikan

Jika anda telah menjadi pemaju web frontend untuk sementara waktu, ada peluang yang tinggi bahawa anda mempunyai sesetengah ketika anda cuba untuk mencari tahu bagaimana untuk kod sesuatu dan menyedari selepas sedikit googling, itu “terdapat CSS untuk itu”. Sekiranya anda tidak berjaya, anda pasti akan.

Siaran ini adalah koleksi kod CSS tersebut, yang boleh memberi anda ciri seperti mengubah unsur melekit, memberi anda garis putus-putus yang menggariskan keupayaan, mengalir teks halaman anda dalam bentuk istimewa, atau mencapai kesan paralaks. Sebahagian daripada mereka disokong secara meluas manakala yang lain sedang dalam perjalanan untuk sokongan penuh oleh semua pelayar.

1. Menyenara tajuk dan sub kepala

   Katakan anda mempunyai satu set tajuk dan subheadings dalam dokumen anda dan anda sedang menomborkannya secara manual atau melalui skrip. Sebaliknya, anda boleh menggunakan kaunter CSS untuk melakukan ini. Terdapat jawatan yang mendalam di sini di sini. Dan kerana ia dari spesifikasi CSS2, anda boleh bertaruh bahawa ia disokong oleh semua penyemak imbas, kecuali mungkin IE 6.

2. Spice Up Plain Underlines

   Kadang-kadang kita mahu menggariskan dengan garis putus-putus atau putus asa yang baik dan bukannya pepejal. Oleh kerana tidak ada pilihan untuk itu, kami menetap sempadan bawah. Tetapi sempadan bawah bukanlah satu penyelesaian yang baik jika teks anda menggariskan bungkus.

   CSS3 tidak menetapkan satu tetapi tiga sifat baru untuk hiasan teks teks-hiasan-warna, text-decoration-line, dan gaya-hiasan teks yang boleh menjadi lama yang baik teks-dekorasi.

   Anda boleh menggunakan mereka untuk gaya menggariskan, menggariskan, bahkan membuat teks berkedip, dan banyak lagi. Sehingga April 2015 hanya Firefox menyokong harta ini, tetapi anda boleh mendayakan “ciri platform web percubaan” untuk menggunakannya di Chrome.

3. Memetik Petikan

   Pertama sekali, tidak perlu repot dengan menaip sebut harga keriting yang betul untuk sebut harga pendek kerana terdapat HTML untuk itu: tag yang menunjukkan petikan sebaris.

   The tag juga berhati-hati memetik sebut harga dalaman dengan petikan tunggal. Jadi, di manakah “terdapat 'CSS' untuk itu” masa ini?

   Katakan anda tidak mahu petikan berganda lalai atau anda mempunyai lebih daripada satu tahap petikan bersarang, anda boleh menentukan pilihan petikan anda untuk elemen petikan dengan CSS dengan menggunakan CSS2 sebut harga harta.

4. Menguruskan Jadual yang Tidak Teratur

   Anda mungkin telah melihat jadual besar dengan saiz kandungan yang berlainan bagi setiap sel yang enggan kekal dalam lebar yang telah anda tentukan, tidak kira apa yang anda cuba. Jongkong jadual itu dengan susun atur jadual harta (untuk ketinggian lajur yang sama, ikuti pautan ini).

   Untuk menjadi khusus, pembetulan berada di susun atur jadual: tetap; nilai. Apabila anda menetapkan susun atur tetap untuk jadual, jadual dan lebar sel ditentukan oleh lebar jadual atau baris pertama sel (yang boleh ditakrifkan oleh pengguna) dan bukan oleh kandungan. Ini disokong oleh semua penyemak imbas.

5. Buat Sticky

   Elemen lengket adalah unsur-unsur pada halaman yang tidak akan dilukis dari pandangan. Dengan kata lain ia melekat pada kawasan yang kelihatan (viewport atau kotak menatal). Anda boleh membuat ini menggunakan CSS kedudukan: melekit;.

   Mereka bertindak seperti unsur-unsur yang relatif ditonjolkan sebelum mana-mana menatal dan kemudian seperti elemen tetap apabila ambang menatal dicapai. Untuk sekarang, hanya Firefox menyokongnya.

6. Dapatkan Teks Anda Dalam Bentuk

   Adakah anda mahu teks pada halaman anda untuk melengkapkan dengan baik terhadap beberapa imej yang anda paparkan di sebelahnya? Anda boleh cuba Bentuk CSS. Untuk melaksanakan bentuk CSS, kita boleh menggunakan tiga sifat bentuk-di luar, bentuk-margin dan bentuk-imej-ambang. Setakat April, 2015 CSS Bentuk disokong oleh pelayar webkit.

7. Bidang Mandatori

   Sekiranya anda mendapat borang, terdapat peluang yang tinggi bahawa beberapa bidang di dalamnya diperlukan sementara yang lain tidak. Anda perlu membiarkan pengguna mengetahui yang mana. CSS untuk ini adalah : diperlukan : pilihan kelas pseudo. Semua pelayar moden menyokongnya.

8. Picky Dengan Warna

   Jika anda tidak suka warna tertentu, seperti biru, kita boleh mewarna kawasan yang dipilih dengan beberapa warna lain dan :: pemilihan elemen pseudo ialah CSS untuk itu. Ini disokong oleh semua penyemak imbas moden.

9. Adakah saya Memeriksanya?

   Dalam keadaan di mana kotak semak telah diperiksa, ia akan menjadi lebih baik untuk mempunyai satu lagi petunjuk selain membentuk tanda semak kecil di dalam kotak semak default untuk menandakan bahawa item itu telah ditandakan.

   Terdapat CSS untuk yang mengeksploitasi ikatan antara adik beradik terdekat, dua unsur bersebelahan. CSS mempunyai pemilih bersebelahan yang dilambangkan oleh tambah + tanda, dan kami boleh menggunakannya untuk menyasarkan label di sebelah kotak centang. Tetapi bagaimana dengan mensasarkan kotak semak yang diperiksa terlebih dahulu? Terdapat : diperiksa kelas pseudo untuk itu.

10. Seperti A Storybook

    Kemudian, tidakkah lebih bagus jika yang pertama “O” di dalam “Pada suatu masa dahulu” kelihatan cantik? Kita boleh membuatnya kelihatan cantik, setelah semua ada CSS untuk itu. Inilah di mana ::surat pertama unsur pseudo datang untuk menyelamatkan. Ia menargetkan huruf pertama baris pertama unsur sasaran. Baca lebih lanjut mengenainya di sini.

11. Adakah Anda Suka Tahu Lebih Banyak?

    Unsur mungkin mempunyai kelas X atau data Y atau beberapa nilai lain pada atribut. Sekiranya kita perlu memaparkan nilai sifat atribut elemen di dekatnya, kita boleh menggunakannya kandungan: attr (X). Ia mengambil nilai atribut X elemen, maka kita dapat menunjukkannya di sebelah unsur.

12. Sedikit Lagi Untuk Kiri

    Unsur-unsur yang berpusat untuk pemula CSS agak menjadi pencapaian. Unsur-unsur yang berbeza memerlukan set ciri CSS yang berbeza untuk memusatkannya. Kami akan melihat satu contoh daripada banyak yang boleh didapati di seluruh dunia, supaya anda dapat mengingatkan lagi bahawa terdapat CSS untuk memusatkan perkara.

13. Nyatakan Format Fail Pautan

    Pernah melihat imej kecil berhampiran pautan yang menunjukkan pautan itu? PDF? atau DOC? Ya, ada CSS untuk mencapai itu. The kandungan: url () adalah apa yang akan kita gunakan untuk memaparkan imej di belakang pautan.

14. Kesan Parallax Memicu

    Kesan paralaks adalah kesan yang digunakan untuk menggambarkan pergerakan latar yang kelihatan lambat berbanding latar depan. Kesan ini popular di laman web yang melaksanakan tayangan paralaks. Terdapat pelbagai cara untuk melaksanakannya, contoh di bawah ini berfungsi di Firefox dengan lampiran-lampiran: tetap;.

15. Kuasa Animasi CSS

    Mungkin tidak besar “terdapat CSS untuk itu” momen, kerana anda semua mungkin menyedari animasi CSS sekarang. Tetapi peringatan sedikit tidak membahayakan. Terdapat banyak kegunaan untuk animasi CSS tetapi di sini adalah satu untuk senaman pewarna yang mudah.

Sekarang Baca: 50 Cetakan CSS berguna Setiap Pereka Perlu