20 Tips CSS Berguna Untuk Pemula

Di masa lalu, kami sangat bergantung pada pengembang dan pemrogram untuk membantu memperbarui situs web, meskipun itu hanya versi kecil. Berkat CSS dan fleksibilitasnya, style dapat diekstraksi secara terpisah dari kode. Sekarang, dengan pemahaman dasar tentang CSS, bahkan seorang pemula dapat dengan mudah mengubah gaya situs web.

Apakah Anda tertarik untuk mengambil CSS untuk membuat situs web Anda sendiri, atau hanya untuk mengubah tampilan dan perasaan blog Anda - selalu baik untuk memulai dengan dasar-dasar untuk mendapatkan fondasi yang lebih kuat. Mari kita lihat beberapa Tips CSS kami pikir mungkin berguna untuk pemula. Daftar lengkap setelah lompat.

1. Menggunakan reset.css

   Ketika merender gaya CSS, peramban seperti Firefox dan Internet Explorer memiliki cara penanganan yang berbeda. reset.css me-reset semua gaya fundamental, sehingga Anda mulai dengan stylesheet baru yang benar-benar kosong.

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

2. Gunakan CSS singkatan

   CSS singkatan memberi Anda cara yang lebih singkat untuk menulis kode CSS Anda, dan yang paling penting dari semuanya - itu membuat kode lebih jelas dan lebih mudah dipahami.

   Alih-alih membuat CSS seperti ini

   .header background-color: #fff; background-image: url (image.gif); background-repeat: no-repeat; posisi latar belakang: kiri atas; 

   Ini dapat dilakukan dengan singkat sebagai berikut:

   .header background: #fff url (image.gif) tanpa-pengulangan kiri atas

   Lebih - Pengantar Singkatan CSS, Properti singkatan CSS yang berguna

3. Memahami Kelas dan ID

   Dua penyeleksi ini sering membingungkan pemula. Dalam CSS, kelas diwakili oleh sebuah titik "." sementara id adalah hash '# ". Singkatnya id digunakan pada gaya yang unik dan tidak terulang, kelas di sisi lain, bisa digunakan kembali.

   Lebih - Kelas vs. ID | Kapan menggunakan Kelas, ID | Menerapkan Kelas dan ID bersama-sama

4. Kekuatan dari

5. daftar tautan a.k.a, sangat berguna saat digunakan dengan benar
   atau
   , khususnya untuk gaya menu navigasi.

   • Lupa , mencoba

     Salah satu keuntungan terbesar CSS adalah penggunaan

     untuk mencapai fleksibilitas total dalam hal gaya.

     tidak seperti

     , di mana konten 'dikunci' dalam a

     sel. Aman untuk mengatakan sebagian besar tata letak dapat dicapai dengan menggunakan dan styling yang tepat, mungkin juga kecuali konten tabular yang besar. Lebih - Meja sudah mati, Tabel Vs. CSS, CSS vs tabel Alat Debugging CSS Selalu baik untuk mendapatkan pratinjau instan tata letak sambil mengubah CSS, membantu memahami dan men-debug gaya CSS dengan lebih baik. Berikut adalah beberapa alat debugging CSS gratis yang dapat Anda instal di browser Anda: Pengembang Web FireFox, Inspektur DOM, Toolbar Pengembang Internet Explorer, dan Firebug. Hindari Selektor Superfluous Terkadang deklarasi CSS Anda bisa lebih sederhana, artinya jika Anda mendapati diri Anda mengode berikut: ul li ... ol li ... tabel tr td ... Mereka dapat dipersingkat menjadi adil li ... td ... Penjelasan: hanya akan ada di dalam atau dan dan hanya akan berada di dalam jadi benar-benar tidak perlu memasukkannya kembali. Penuh arti !penting Gaya apa pun yang ditandai dengan !penting akan mulai digunakan tanpa peduli jika ada aturan penulisan ulang di bawahnya. .halaman background-color: blue! important; background-color: red; Dalam contoh di atas, background-color: biru akan diadaptasi karena ditandai dengan !penting, bahkan ketika ada background-color: merah; di bawahnya. !penting digunakan dalam situasi di mana Anda ingin memaksakan gaya tanpa sesuatu menimpanya, namun itu mungkin tidak berfungsi di Internet Explorer. Ganti Teks dengan Gambar Ini biasanya dilakukan untuk menggantikan judul dari judul berbasis teks ke gambar. Begini cara Anda melakukannya. h1 text-indent: -9999px; background: url ("title.jpg") no-repeat; lebar: 100px; tinggi: 50px; Penjelasan: indentasi teks: -9999px; membuang judul teks Anda dari layar, diganti dengan gambar yang dinyatakan oleh Latar Belakang: … dengan tetap lebar dan tinggi. Memahami Pemosisian CSS Artikel berikut memberi Anda pemahaman yang jelas dalam menggunakan penentuan posisi CSS - posisi: ... Lebih - Pelajari Posisi CSS dalam Sepuluh Langkah CSS @impor vs. Ada 2 cara untuk memanggil file CSS eksternal - masing-masing menggunakan @impor dan . Jika Anda tidak yakin metode mana yang digunakan, berikut adalah beberapa artikel untuk membantu Anda memutuskan. Lebih - Perbedaan Antara @import dan tautan Merancang Formulir dalam CSS Formulir web dapat dengan mudah dirancang dan dikustomisasi dengan CSS. Artikel-artikel berikut ini menunjukkan caranya: Lebih - Bentuk tanpa tabel, Bentuk taman, Styling lebih banyak lagi bentuk kontrol Terinspirasi Jika Anda mencari-cari situs web berbasis CSS yang dirancang dengan baik untuk mencari inspirasi, atau sekadar menjelajah untuk menemukan UI yang bagus, berikut adalah beberapa situs menampilkan CSS yang kami rekomendasikan: CSS Remix Kecantikan CSS CSS Elite CSS Mania CSS Leak Jaga Kode CSS Bersih Jika kode CSS Anda berantakan, Anda akan berakhir dengan pengkodean dalam kebingungan dan mengalami kesulitan referensi kode sebelumnya. Sebagai permulaan, Anda dapat membuat lekukan yang tepat, komentar mereka dengan benar. Lebih - 12 Prinsip Untuk Menjaga Kode Anda Bersih, Memformat Kode CSS Online Pengukuran Tipografi: px vs. em Mengalami masalah saat memilih untuk menggunakan unit pengukuran px atau em? Artikel-artikel berikut mungkin memberi Anda pemahaman yang lebih baik tentang unit tipografi. Tabel Kompatibilitas Peramban CSS Kita semua tahu bahwa setiap browser memiliki cara berbeda dalam merender gaya CSS. Ada baiknya memiliki referensi, bagan atau daftar yang menunjukkan seluruh kompatibilitas CSS untuk setiap browser. Tabel dukungan CSS: # 1, # 2, # 3, # 4. Desain Multicolumns dalam CSS Mengalami masalah saat membuat kolom kiri, tengah, dan kanan sejajar dengan benar? Berikut beberapa artikel yang mungkin membantu: Mencari Cawan Suci Kolom Faux Alasan utama kolom CSS Anda kacau Kotak Litte (contoh) Layout Multi-Kolom Memanjat Keluar dari Kotak Kolom Mutlak Dapatkan Editor CSS Gratis Editor khusus selalu lebih baik daripada notepad. Berikut ini beberapa yang kami rekomendasikan: Lebih - CSS sederhana, Notes ++, Editor Gaya CSS Memahami Jenis Media Ada beberapa jenis media saat Anda mendeklarasikan CSS dengan . cetak, proyeksi, dan layar adalah beberapa dari jenis yang umum digunakan. Memahami dan menggunakannya dengan cara yang tepat memungkinkan aksesibilitas pengguna yang lebih baik. Artikel berikut menjelaskan cara menangani jenis Media CSS. Lebih - CSS dan Jenis Media, Jenis Media W3, Jenis Media CSS, Jenis Media CSS2 20 Aplikasi iPhone yang Berguna untuk Pengembang & Desainer 20 Alat SVG yang Berguna untuk Grafik yang Lebih Baik 20 Huruf Ultra Ringan dan Elegan untuk Desainer Web Artikel selanjutnya 20 Pengaya Firefox Sidebar yang Berguna Artikel sebelumnya 20 Aplikasi Berguna untuk Maksimalkan Instagram