Apa gaya CSS anda?

Salah satu aspek yang paling mengelirukan untuk bekerja dengan CSS (Cascading Style Sheets) adalah bahawa anda boleh menulis gaya dalam banyak cara. Sama seperti menulis prosa, hanya kerana anda memahami peraturan asas tatabahasa dan ejaan tidak bermakna anda telah menguasai menulis prosa ringkas.

Pereka CSS yang berpengalaman menghabiskan masa yang panjang untuk mencipta ringkas, jelas CSS yang mudah diedit dan dikemas kini. Tetapi orang-orang yang baru kepada CSS cenderung untuk menulis lebih banyak gaya daripada yang diperlukan dan untuk mencipta gaya yang berlebihan.

Bukan sahaja kod berlebihan mengambil masa lebih lama untuk dimuat turun ke penyemak imbas web, lebih sukar untuk diedit atau diubah kemudian. Dan, semakin banyak kode anda yang berlebihan, semakin besar kemungkinan anda mengalami konflik gaya.

Berikut adalah lima petua untuk menulis gaya yang bersih dan cekap:

• Jangan sekali-kali membuat dua gaya apabila sudah cukup. Sebagai contoh, anda boleh membuat gaya menggunakan pemilih teg untuk semua tag

  yang mengubah keluarga font utama anda, dan kemudian buat gaya kedua menggunakan pemilih kelas yang anda boleh memohon kepada tajuk utama anda untuk menukar warna.

  Akan tetapi, lebih berkesan untuk menentukan warna dan keluarga font dalam gaya yang sama. Ingat bahawa anda sentiasa boleh kembali dan mengedit gaya untuk menambah peraturan lain jika anda mahu mengubah pemformatan gaya.

• Singkat kod warna heksadesimal. Anda boleh menentukan warna dalam CSS dengan memasukkan kod warna heksadesimal keseluruhan. Walau bagaimanapun, apabila anda menggunakan kod warna yang berulang, anda perlu memasukkan hanya tiga huruf pertama. Sebagai contoh #ffffff adalah sama dengan #fff; kedua-duanya akan mencipta warna putih.

• Gunakan helaian gaya luaran. Anda boleh menentukan gaya dalam helaian gaya dalaman di bahagian atas setiap halaman web, atau anda boleh menyimpan gaya anda dalam fail luaran dengan. pelanjutan css dan sertakan helaian gaya untuk semua halaman web anda. Helaian gaya luaran sememangnya lebih cekap kerana ia membolehkan anda menggunakan gaya yang sama pada mana-mana atau semua halaman dalam laman web anda.

  Sebagai contoh, jika anda menentukan gaya yang menjadikan semua tajuk utama utama berani, biru, dan besar, menyelamatkan gaya itu dalam lembaran gaya luaran membolehkan anda menggunakan gaya yang sama untuk setiap tajuk utama. Kemudian, jika anda memutuskan kemudian bahawa anda ingin mengubah tajuk utama anda menjadi hijau, anda boleh mengubah gaya dalam satu helaian gaya luaran dan menukar semua tajuk berita sekaligus.

  Jika anda menyimpan gaya dalam helaian gaya dalaman, anda perlu mengedit gaya tajuk dalam setiap fail.

• Buatkan konvensyen penamaan untuk gaya anda. Walaupun anda boleh namakan gaya yang dibuat dengan pemilih kelas atau ID apa sahaja yang anda suka, lebih baik memilih gaya yang mempunyai makna selain dari pemformatan.Sebagai contoh, jika anda membuat gaya yang dipanggil. redHeadlines dan kemudian memutuskan bahawa anda mahu semua anda. redHeadlines menjadi biru, anda sama ada akan berakhir dengan gaya tajuk biru dipanggil. redHeadlines atau perlu menamakan semula gaya.

  Dan menamakan semula gaya termasuk kembali dan memaparkan semula gaya di mana-mana anda mempunyai tajuk utama yang anda ingin bertukar biru, yang menafikan kekuatan gaya untuk membuat kemas kini global. Untuk mengelakkan masalah ini, buat nama gaya yang merujuk kepada kedudukan atau kepentingan elemen, seperti. utamaHeadlines atau. sidebarHeadlines.

• * Uji dan sahkan kod anda. Malah pereka CSS yang berpengalaman membuat kesilapan, itulah sebabnya mengapa Dreamweaver termasuk banyak alat hebat untuk menguji dan mengesahkan kod dalam laman web anda. Pastikan anda menguji CSS anda untuk kesilapan biasa.

  Berikut ialah dua perkhidmatan ujian dalam talian yang boleh anda gunakan untuk menyemak ralat dalam kod CSS anda. Cukup masukkan URL mana-mana halaman web di Internet dalam medan alamat pada salah satu laman web ini dan klik butang Serah untuk menerima laporan yang memperlihatkan sebarang ralat dalam kod anda:

  • Perkhidmatan Pengesahan CSS W3C

  • XHTML-CSS : Jadilah sah atau Die Pembelajaran