Ada banyak tips dalam pengembangan layout web CSS, dan teman-teman pemula sering kali masih asing dengannya. Pada satu atau dua masalah kecil, mungkin perlu waktu lama untuk menyelesaikannya. Meskipun aspek ini telah disebutkan berkali-kali dalam dokumen 52CSS.com, masih banyak teman yang melakukan kesalahan dalam masalah tersebut. Mari kita lihat teknik CSS hari ini. Bacalah dengan cermat. Mungkin Anda belum sepenuhnya memahaminya. Anda dapat mencari di 52CSS.com untuk memperluas pengetahuan yang Anda inginkan.
1. Tag ul memiliki nilai padding secara default di Mozilla, tetapi di IE hanya margin yang memiliki nilai.
2. Pemilih kelas yang sama dapat muncul berulang kali dalam dokumen, namun pemilih id hanya dapat muncul satu kali. Gunakan kelas dan id untuk mendefinisikan label di CSS. Jika definisi diulang, definisi yang dibuat oleh pemilih id adalah valid karena bobot id lebih besar daripada bobot kelas.
3. Cara bodoh untuk menyesuaikan kompatibilitas (IE dan Mozilla):
Pemula mungkin menghadapi situasi seperti ini: atribut dari label yang sama ditampilkan secara normal ketika diatur ke A di IE, tetapi harus diatur ke B di Mozilla untuk ditampilkan secara normal, atau keduanya dibalik.
Solusi sementara: Pemilih {property name: B !important; property name: A} terkadang tidak berfungsi. Anda dapat mencari solusi BUG lainnya di 52CSS.com.
4. Jika diperlukan jarak antar grup tag yang disarangkan, serahkan pada atribut margin dari tag yang berada di dalam, alih-alih menentukan padding dari tag yang terletak di luar.
5. Disarankan untuk menggunakan gambar latar belakang daripada gambar gaya daftar untuk ikon di depan tag li.
6. IE tidak dapat membedakan perbedaan antara hubungan warisan dan hubungan ayah-anak.
7. Saat menambahkan penyeleksi secara berlebihan ke tag Anda, jangan lupa untuk menambahkan komentar ke penyeleksi di CSS. Anda akan mengetahui alasan Anda melakukan ini saat Anda memodifikasi CSS nanti. Juga peringatan, jangan terlalu gila.
8. Jika Anda mengatur gambar latar belakang gelap dan efek teks cerah untuk label. Disarankan untuk menyetel warna latar belakang yang lebih gelap untuk label Anda saat ini. Karena gambarnya hilang, teks tetap dapat dibaca.
9. Saat menentukan empat status tautan, perhatikan urutannya: Tautan yang Dikunjungi Arahkan Aktif
10. Harap gunakan latar belakang untuk gambar yang tidak ada hubungannya dengan konten. Selalu ingat untuk memisahkan presentasi dari konten.
11. Warna yang ditentukan dapat disingkat #8899FF=#89F
12. Tabel masih berguna dalam beberapa aspek. Saat Anda menemukan tabel data, jangan membencinya.
13. <script> tidak memiliki atribut bahasa dan harus ditulis seperti ini: <script type="text/javascript">
14. Tabel garis besar piksel tunggal yang sempurna (dapat lulus tes di IE5, IE6, IE7 dan FF1.0.4 atau lebih tinggi)
tabel{ keruntuhan batas: keruntuhan; } td{ batas:#000 padat 1 piksel } |
15. Nilai margin negatif dapat berperan dalam penentuan posisi relatif ketika label menggunakan posisi absolut. Ketika halaman ditampilkan di tengah, atribut left:XXpx tidak cocok untuk lapisan yang menggunakan posisi absolut. Sebaiknya letakkan lapisan ini di sebelah label yang perlu diposisikan secara relatif, lalu gunakan nilai negatif untuk margin.
16. Saat menggunakan pemosisian absolut, nilai margin dapat digunakan untuk memposisikan relatif terhadap posisinya sendiri, yang berbeda dengan pemosisian atribut seperti atas dan kiri relatif terhadap tepi jendela. Keuntungan dari positioning absolut adalah memungkinkan elemen lain mengabaikan keberadaannya.
17. Jika teks terlalu panjang, ubah bagian yang panjang menjadi elipsis dan tampilkan: tidak valid di IE5 dan FF, tetapi bisa disembunyikan, valid di IE6
| <DIV STYLE=”lebar:120px;tinggi:50px;batas:1px biru solid;overflow:hidden;text-overflow:ellipsis”> <NOBR>Misalnya, ada satu baris teks yang sangat panjang sehingga tidak dapat ditampilkan dalam satu baris pada tabel.</NOBR> |
18. Jika ada masalah duplikasi teks yang disebabkan oleh komentar di IE, Anda dapat mengubah komentar menjadi:
<!–[if !IE]>Masukkan komentar Anda di sini…<![endif]–> |
19. Cara memanggil font eksternal menggunakan CSS
tata bahasa:
| @font-face{font-family:name;src:url(url);sRules} |
Nilai:
nama: nama font. nilai apa pun yang mungkin dari atribut font-family url(url): Tentukan file font OpenType menggunakan alamat url absolut atau relatif sRules: definisi style sheet |
20. Bagaimana cara memusatkan teks secara vertikal dalam kotak teks di formulir?
Jika menggunakan tinggi baris dan grup tinggi tidak berpengaruh di FF, caranya adalah dengan menentukan padding atas dan bawah untuk mencapai efek yang diinginkan.
21. Masalah kecil yang perlu diperhatikan saat mendefinisikan tag A:
Saat kita mendefinisikan a{color:red;}, ini mewakili gaya dari empat keadaan di A. Jika kita ingin mendefinisikan keadaan di mana mouse ditempatkan, cukup tentukan a:hover. Tiga keadaan lainnya ada di A. The gaya yang ditentukan. Ketika hanya satu a:link yang ditentukan, pastikan untuk mengingat untuk menentukan tiga status lainnya!
22. Tidak semua gaya perlu disingkat:
Ketika p{padding:1px 2px 3px 4px} ditentukan sebelum style sheet, gaya lain ditambahkan di proyek berikutnya dengan padding atas 5px dan padding bawah 6px. Kita tidak perlu menulis p.style1{padding:5px 6px 3px 4px}. Bisa ditulis sebagai p.style1{padding-top:5px;padding-right:6px;}. Anda mungkin merasa menulis seperti ini tidak sebagus aslinya, tapi pernahkah Anda memikirkannya? metode berulang kali mendefinisikan gaya. Selain itu, Anda tidak perlu mencari tahu berapa nilai padding bawah dan kiri yang asli! Jika gaya P sebelumnya berubah di masa mendatang, gaya p.style1 yang Anda tetapkan juga akan berubah.
23. Semakin besar websitenya, maka akan semakin banyak pula style CSSnya. Sebelum memulai, harap lakukan persiapan dan rencana secara menyeluruh, termasuk aturan penamaan. Pembagian blok halaman, klasifikasi gaya internal, dll.
24. Pemotongan karakter Cina dengan lebar tetap: overflow: tersembunyi; text-overflow: ellipsis; white-space: nowrap; (Namun, ini hanya dapat menangani pemotongan teks pada satu baris, bukan beberapa baris.) (IE5 dan lebih tinggi) FF tidak bisa, Ia hanya bersembunyi.
Jika ada banyak hal yang tidak Anda pahami, tidak masalah. Catat keterampilan ini dan sering-seringlah mengunjungi 52CSS.com untuk memeriksanya. Anda pasti akan mendapatkan sesuatu. Anda juga dapat memasukkan konten yang Anda minati di kotak pencarian di sebelah kiri untuk mencari. Anda dipersilakan untuk meninggalkan komentar dan menambahkan tips CSS.