Reset CSS mengacu pada mengatur ulang gaya browser. Pada artikel sebelumnya di 52CSS.com, pengetahuan serupa telah diperkenalkan, tetapi itu tidak cukup mendalam. Hari ini kita akan melihat sepuluh contoh metode Reset CSS dan mempelajari penerapan metode ini.
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.
1. Reset Generik CSS
* {
bantalan: 0;
margin: 0;
batas: 0;
}
Ini juga merupakan metode Reset CSS, yang mengatur padding, margin dan border semua selector 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.
2. Ateneu Populer CSS Reset
html, body, div, span, 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}
3. 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;
}
4. Badan Reset CSS Yahoo
,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
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;
}
5. Eric Meyer Reset CSS
html, body, div, span, applet, objek, iframe, tabel, caption,
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: "" "";
}
6. Tantek Celik Reset CSS
:link,:visited { text-decoration:none }
ul,ol { gaya daftar:tidak ada }
h1,h2,h3,h4,h5,h6,pra,kode { ukuran font:1em }
ul,ol,li,h1,h2,h3,h4,h5,h6,pra,form,body,html,p,blockquote,fieldset,input
{ margin:0; bantalan:0 }
sebuah img,:link img,:mengunjungi img { batas:tidak ada }
alamat { font-style:normal }
7. Christian Montoya Reset CSS
html, isi, formulir, kumpulan bidang {
margin: 0;
bantalan: 0;
jenis huruf: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pra,
blockquote, ul, ol, dl, alamat {
margin: 1em 0;
bantalan: 0;
}
li, dd, blockquote {
margin-kiri: 1em;
}
label formulir {
kursor: penunjuk;
}
kumpulan bidang {
perbatasan: tidak ada;
}
masukan, pilih, area teks {
ukuran font: 100%;
font-family: mewarisi;
}
8. Pekerjaan Kasar Reset CSS
* {
margin: 0;
bantalan: 0;
perbatasan: tidak ada;
}
html {
jenis huruf: 62,5% "Lucida Grande", Lucida, Verdana, sans-serif;
bayangan-teks: #000 0px 0px 0px;
}
jalan {
gaya daftar: tidak ada;
tipe gaya daftar: tidak ada;
}
h1, h2, h3, h4, h5, h6, p, pra,
blockquote, ul, ol, dl, alamat {
berat font: normal;
margin: 0 0 1em 0;
}
kutip, em, dfn {
gaya font: miring;
}
sup {
posisi: relatif;
bawah: 0,3em;
perataan vertikal: garis dasar;
}
sub {
posisi: relatif;
bawah: -0,2em;
perataan vertikal: garis dasar;
}
li, dd, blockquote {
margin-kiri: 1em;
}
kode, kbd, samp, pra, tt, var, masukan[type='teks'], textarea {
ukuran font: 100%;
font-family: monaco, “Lucida Console”, kurir, mono-space;
}
del {
dekorasi teks: garis demi garis;
}
masuk, dfn {
batas bawah: 1px solid #ccc;
}
kecil, sup, sub {
ukuran font: 85%;
}
abbr, akronim {
transformasi teks: huruf besar;
ukuran font: 85%;
spasi huruf: .1em;
gaya batas bawah: putus-putus;
lebar batas bawah: 1 piksel;
}
abbr, akronim {
perbatasan: tidak ada;
}
sup {
perataan vertikal: super;
}
sub {
perataan vertikal: sub;
}
jam1 {
ukuran font: 2em;
}
jam2 {
ukuran font: 1,8em;
}
jam3 {
ukuran font: 1,6em;
}
jam4 {
ukuran font: 1,4em;
}
jam5 {
ukuran font: 1.2em;
}
h6 {
ukuran font: 1em;
}
a, a:link, a:dikunjungi, a:hover, a:aktif {
garis besar: 0;
dekorasi teks: tidak ada;
}
sebuah gambar {
perbatasan: tidak ada;
dekorasi teks: tidak ada;
}
gambar {
perbatasan: tidak ada;
dekorasi teks: tidak ada;
}
label, tombol {
kursor: penunjuk;
}
masukan:fokus, pilih:fokus, area teks:fokus {
warna latar belakang: #FFF;
}
kumpulan bidang {
perbatasan: tidak ada;
}
.jernih {
jelas: keduanya;
}
.float-kiri {
mengapung: kiri;
}
.float-kanan {
mengapung: benar;
}
tubuh {
perataan teks: tengah;
}
#pembungkus {
margin: 0 otomatis;
perataan teks: kiri;
}
9. Anieto2K Reset CSS
html, body, div, span, applet, objek, iframe,
h1, h2, h3, h4, h5, h6, hal,
blockquote, pra, a, abbr, akronim, alamat, besar,
mengutip, 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,
pusat, kamu, b, saya {
margin: 0;
bantalan: 0;
batas: 0;
garis besar: 0;
berat font: normal;
gaya font: normal;
ukuran font: 100%;
font-family: mewarisi;
perataan vertikal: garis dasar
}
tubuh {
tinggi garis: 1
}
:fokus {
garis besar: 0
}
ol, ul {
gaya daftar: tidak ada
}
meja {
keruntuhan perbatasan: keruntuhan;
spasi batas: 0
}
blockquote:sebelum, blockquote:setelah, q:sebelum, q:setelah {
isi: ""
}
kutipan blok, q {
kutipan: "" ""
}
masukan, area teks {
margin: 0;
bantalan: 0
}
jam {
margin: 0;
bantalan: 0;
batas: 0;
warna: #000;
warna latar belakang: #000;
tinggi: 1 piksel
}
10. CSSLab CSS Reset
html, body, div, span, applet, objek, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pra, a, abbr, akronim, alamat,
besar, mengutip, kode, del, dfn, em, font, img, ins, kbd, q, s, samp,
kecil, serang, kuat, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, formulir, label, legenda, tabel, keterangan, tbody, tfoot,
kepala, 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;
}
meja {
keruntuhan perbatasan: terpisah;
spasi batas: 0;
}
keterangan, th, td {
perataan teks: kiri;
berat font: normal;
}
sebuah gambar, iframe {
perbatasan: tidak ada;
}
ol, ul {
gaya daftar: tidak ada;
}
masukan, area teks, pilih, tombol {
ukuran font: 100%;
font-family: mewarisi;
}
pilih {
margin: mewarisi;
}
/* Memperbaiki penempatan angka yang salah di IE6/7 */
ol { margin-kiri:2em;
/* == perbaikan yang jelas == */
.clearfix:setelah {
isi: ".";
tampilan: blok;
tinggi: 0;
jelas: keduanya;
visibilitas: tersembunyi;
}
.clearfix {tampilan: blok sebaris;}
* html .clearfix {tinggi: 1%;}
.clearfix {display: block;}
Semuanya serupa, dengan kebutuhan dan metode berbeda.