Tahukah Anda apa itu Reset CSS? Biasanya juga ditulis sebagai Reset CSS, yang mengatur ulang gaya browser. Di berbagai browser, beberapa nilai default digunakan untuk pemilih CSS. Misalnya, ketika h1 tidak disetel ke suatu nilai, ukuran tertentu akan ditampilkan. Namun tidak semua browser menggunakan nilai yang sama, sehingga Reset CSS digunakan untuk membuat gaya halaman web berperilaku konsisten di setiap browser.
Jika Anda menggunakan CSS, apakah Anda pernah menggunakan Reset CSS? Tentu saja, mungkin Anda menggunakannya tetapi tidak tahu Anda sedang menggunakannya.
| * { bantalan: 0; margin: 0; batas: 0 } |
Ini juga merupakan metode Reset CSS yang menyetel padding, margin, dan batas semua pemilih ke 0. Ini adalah metode yang ampuh, paling sederhana dan aman, namun juga paling intensif sumber dayanya. Untuk website kecil, penggunaan ini tidak akan menyebabkan pemborosan sumber daya yang besar, namun jika website dengan struktur yang sangat besar seperti Yahoo, Anda hanya perlu mengatur ulang CSS secara selektif untuk mengurangi pemborosan sumber daya. Berikut kode reset CSS Yahoo yang juga merupakan metode Reset CSS terpopuler. Cara yang dipilih YUI adalah:
| badan,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pra, form,fieldset,input,textarea,p,blockquote,th,td { bantalan: 0; margin: 0; } meja { keruntuhan perbatasan: keruntuhan; spasi batas: 0; } kumpulan bidang,img { batas: 0; } alamat, keterangan, kutipan, kode, dfn, em, kuat, th, var { berat font: normal; gaya font: normal; } ol,ul { gaya daftar: tidak ada; } keterangan, ke { perataan teks: kiri; } h1,h2,h3,h4,h5,h6 { berat font: normal; ukuran font: 100%; } q:sebelum,q:sesudah { isi:"; } abbr, akronim { batas: 0; } |
Oke, saya yakin Anda sudah memahami tujuan reset CSS. Mungkin Anda juga bisa menulis sistem reset CSS Anda sendiri sesuai dengan preferensi Anda sendiri. Lagi pula, kebutuhan dan kebiasaan setiap orang berbeda-beda. Dan Anda bisa merujuk pada yang berikut ini:
Reset CSS Populer Ateneu
| html, isi, div, rentang, applet, objek, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pra, a, abbr, akronim, alamat, besar, kutipan, kode, del, dfn, em, font, img, ins, kbd, q, s, samp, kecil, mogok, kuat, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, formulir, label, legenda, tabel, keterangan, tbody, tfoot, thead, tr, th, td { margin: 0; bantalan: 0; batas: 0; garis besar: 0; font-weight: mewarisi; gaya font: mewarisi; ukuran font: 100%; font-family: mewarisi; perataan vertikal: garis dasar; } :fokus {garis besar: 0;} a, a:link, a:dikunjungi, a:hover, a:aktif{text-decoration:none} tabel { keruntuhan batas: terpisah; spasi batas: 0;} th, td {perataan teks: kiri; berat font: normal;} img, iframe {batas: tidak ada; dekorasi teks: tidak ada;} ol, ul {gaya daftar: tidak ada;} masukan, area teks, pilih, tombol {ukuran font: 100%;keluarga font: warisan;} pilih {margin: mewarisi;} jam {margin: 0;padding: 0;batas: 0;warna: #000;warna latar: #000;tinggi: 1px} |
Reset CSS Chris Poteet
| * { perataan vertikal: garis dasar; font-family: mewarisi; gaya font: mewarisi; ukuran font: 100%; perbatasan: tidak ada; bantalan: 0; margin: 0; } tubuh { bantalan: 5 piksel; } h1, h2, h3, h4, h5, h6, p, pra, blockquote, form, ul, ol, dl { margin: 20 piksel 0; } li, dd, blockquote { margin-kiri: 40 piksel; } meja { keruntuhan perbatasan: keruntuhan; spasi batas: 0; } |
Eric Meyer Setel Ulang CSS
| html, isi, div, rentang, applet, objek, iframe, tabel, keterangan, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, kecil, mogok, kuat, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pra, a, abbr, akronim, alamat, besar, kutipan, kode, dl, dt, dd, ol, ul, li, kumpulan bidang, formulir, label, legenda { perataan vertikal: garis dasar; font-family: mewarisi; font-weight: mewarisi; gaya font: mewarisi; ukuran font: 100%; garis besar: 0; bantalan: 0; margin: 0; batas: 0; } :fokus { garis besar: 0; } tubuh { latar belakang: putih; tinggi garis: 1; warna: hitam; } ol, ul { gaya daftar: tidak ada; } meja { keruntuhan perbatasan: terpisah; spasi batas: 0; } keterangan, th, td { berat font: normal; perataan teks: kiri; } blockquote:sebelum, blockquote:setelah, q:sebelum, q:setelah { isi: ""; } kutipan blok, q { kutipan: "" ""; } |