20 Tips CSS berguna untuk pemula

Di zaman dahulu, kita banyak bergantung pada pemaju dan pengaturcara untuk membantu mengemas kini laman web, walaupun ia hanya kecil. Terima kasih kepada CSS dan fleksibiliti ini, gaya boleh diekstrak secara bebas dari kod. Sekarang, dengan beberapa pemahaman asas CSS, bahkan seorang pemula dapat dengan mudah mengubah gaya laman web.

Sama ada anda berminat untuk mengambil CSS untuk membuat laman web anda sendiri, atau semata-mata untuk menampakkan pandangan blog anda dan merasa sedikit - ia sentiasa baik untuk bermula dengan asas-asas untuk mendapatkan asas yang lebih kukuh. Mari kita lihat beberapa Tips CSS kami fikir mungkin berguna pemula. Senarai penuh selepas melompat.

1. Guna reset.css

   Apabila menyentuh gaya CSS, pelayar seperti Firefox dan Internet Explorer mempunyai cara yang berbeza untuk mengendalikannya. reset.css mengubah semula semua gaya asas, jadi anda bermula dengan gaya sebenar baru kosong.

   Berikut adalah beberapa yang biasa digunakan reset.css rangka kerja - Yahoo Reset CSS, CSS Reset Eric Meyer, Tripoli

2. Gunakan CSS Shorthand

   CSS Shorthand memberi anda cara yang lebih pendek untuk menulis kod CSS anda, dan yang paling penting - ia menjadikan kod yang jelas dan mudah difahami.

   Daripada membuat CSS seperti ini

   .header background-color: #fff; background-image: url (image.gif); ulangi latar belakang: tidak ulangi; kedudukan latar belakang: kiri atas; 

   Ia boleh menjadi pendek kepada yang berikut:

   .header background: #fff url (image.gif) no-repeat left left

   Lebih banyak - Pengenalan kepada CSS Shorthand, Ciri-ciri kod pendek berguna CSS

3. Memahami Kelas dan ID

   Kedua pemilih ini sering mengelirukan pemula. Dalam CSS, kelas diwakili oleh titik "." sementara ID adalah hash '# ". Secara ringkasnya ID digunakan pada gaya yang unik dan tidak mengulangi sendiri, kelas Di sisi lain, dapat digunakan kembali.

   Lebih banyak - Kelas vs ID | Bila hendak menggunakan Kelas, ID | | Memohon Kelas dan ID bersama-sama

4. Kuasa

5. senarai pautan a.k.a, sangat berguna apabila digunakan dengan betul
   atau
   , khususnya untuk gaya menu navigasi.

   • Lupakan , cuba

     Salah satu kelebihan utama CSS ialah penggunaan

     untuk mencapai fleksibiliti keseluruhan dari segi gaya.

     tidak seperti

     , di mana kandungan 'terkunci' dalam a

     sel. Ia selamat untuk dikatakan paling banyak susun atur boleh dicapai dengan penggunaan dan styling yang betul, mungkin kecuali kandungan jadual besar. Lebih banyak - Jadual mati, Jadual Vs. CSS, CSS vs jadual CSS Debugging Tools Ia sentiasa baik untuk mendapatkan pratonton serta-merta susun atur semasa tweaking CSS, membantu pemahaman dan debug gaya CSS lebih baik. Berikut adalah beberapa alat debugging CSS percuma yang anda boleh pasang pada pelayar anda: Pemaju Web FireFox, Inspektor DOM, Toolbar Pembangun Internet Explorer, dan Firebug. Elakkan Pengeluar Berlebihan Kadang-kadang perisytiharan CSS anda boleh lebih mudah, maksudnya jika anda mendapati diri anda pengekodan berikut: ul li ... ol li ... table tr td ... Mereka boleh dipendekkan menjadi adil li ... td ... Penjelasan: hanya akan wujud di dalamnya atau dan dan hanya akan berada di dalam jadi tidak perlu memasukkan semula mereka. Mengetahui !penting Mana-mana gaya ditandakan dengan !penting akan digunakan untuk kegunaan sama ada terdapat peraturan penangguhan di bawahnya. .halaman background-color: blue! important; warna latar belakang: merah; Dalam contoh di atas, warna latar belakang: biru akan disesuaikan kerana ia ditandai dengan !penting, walaupun ada a warna latar belakang: merah; di bawahnya. !penting digunakan dalam situasi di mana anda ingin memaksa gaya tanpa menimpa sesuatu, namun ia mungkin tidak berfungsi di Internet Explorer. Gantikan Teks dengan Imej Ini lazim diamalkan untuk menggantikan tajuk dari tajuk berdasarkan teks kepada imej. Berikut adalah cara anda melakukannya. h1 text-indent: -9999px; latar belakang: url ("title.jpg") no-repeat; lebar: 100px; ketinggian: 50px; Penjelasan: teks-indent: -9999px; melemparkan tajuk teks anda di luar skrin, digantikan oleh imej yang diisytiharkan oleh latar belakang: ... dengan tetap lebar dan ketinggian. Memahami Kedudukan CSS Artikel berikut memberi anda pemahaman yang jelas dalam menggunakan kedudukan CSS - kedudukan: ... Lebih banyak - Belajar CSS Positioning dalam Sepuluh Langkah CSS @import vs Terdapat 2 cara untuk memanggil fail CSS luaran - masing-masing menggunakan @import dan . Jika anda tidak pasti kaedah mana yang digunakan, berikut beberapa artikel untuk membantu anda membuat keputusan. Lebih banyak - Perbezaan Antara @import dan pautan Merancang Borang dalam CSS Bentuk web boleh dengan mudah mereka bentuk dan menyesuaikan dengan CSS. Artikel berikut menunjukkan kepada anda bagaimana: Lebih banyak - Borang kurang jadual, Form Garden, Penggayaan lebih banyak bentuk kawalan Dapatkan inspirasi Jika anda mencari di sekitar laman web berasaskan CSS yang direka dengan baik untuk inspirasi, atau hanya semak imbas untuk mencari beberapa UI yang baik, berikut adalah beberapa laman web mempamerkan CSS yang kami cadangkan: CSS Remix Kecantikan CSS CSS Elite CSS Mania Kebocoran CSS Simpan Kod CSS Bersih Jika kod CSS anda berantakan, anda akan berakhir pengkodan dalam kekeliruan dan mempunyai masa yang sukar untuk mengecam kod sebelumnya. Sebagai permulaan, anda boleh membuat lekukan yang betul, komen dengan betul. Lebih banyak - 12 Prinsip Untuk Menjaga Kod Anda Bersih, Format Kod CSS Online Pengukuran Typography: px vs em Mempunyai masalah memilih bila menggunakan unit pengukuran px atau em? Artikel berikut ini mungkin memberi anda pemahaman yang lebih baik mengenai unit-unit tipografi. Jadual Keserasian Pelayar CSS Kita semua tahu setiap pelayar mempunyai cara yang berbeza untuk membuat gaya CSS. Adalah baik untuk mendapatkan rujukan, carta atau senarai yang menunjukkan keserasian keseluruhan CSS untuk setiap penyemak imbas. Jadual sokongan CSS: # 1, # 2, # 3, # 4. Reka bentuk Multicolumns dalam CSS Mempunyai masalah mendapatkan ruang kiri, tengah dan kanan untuk diselaraskan dengan betul? Berikut adalah beberapa artikel yang mungkin membantu: Dalam Pencarian Holy Grail Lajur Faux Sebab utama lajur CSS anda telah merosakkan Kotak Litte (contoh) Layouts Multi-Column Climb Out of the Box Lajur Mutlak Dapatkan Editor CSS Percuma Editor berdedikasi sentiasa lebih baik daripada notepad. Berikut adalah beberapa yang kami cadangkan: Lebih banyak - CSS Mudah, Notepad ++, A Style CSS Editor Memahami Jenis Media Terdapat beberapa jenis media apabila anda mengisytiharkan CSS dengan . cetak, unjuran dan skrin adalah beberapa jenis yang biasa digunakan. Memahami dan menggunakannya dalam cara yang betul membolehkan akses pengguna lebih baik. Artikel berikut menerangkan cara menangani jenis Media CSS. Lebih banyak - CSS dan Jenis Media, Jenis Media W3, Jenis Media CSS, Jenis Media CSS2 20 Aplikasi iPhone Berguna untuk Pemaju & Pereka 20 Alat SVG berguna untuk Grafik yang Lebih Baik 20 Fesyen Ultra Cahaya dan Elegant untuk Pereka Web Artikel seterusnya 20 Firefox Sidebar Pengaya Tambahan Artikel sebelumnya 20 Aplikasi Berguna untuk Dapatkan Paling Keluar daripada Instagram