CSS Reset
Tabel Konten
Paling Sederhana
* {
padding:0;
margin:0;
border:none;
}Eric Meyer
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Yahoo CSS Reset
YUI 2
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}YUI 3
<link rel='stylesheet' type='ext/css' href='http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css'></link>Sumber: YUI, Eric Meyer
9 Komentar
Anonim
btw kegunaannya buat apa ya? jadi bingung ane 3~3
Taufik Nurrohman
@Ф дфѕдғфдғ Ф: Ini untuk mereset semua style default bawaan dari browser. Masalahnya, setiap browser memiliki standar CSS yang berbeda-beda. Untuk menyetarakan semua tampilan pada semua browser, lebih baik netralkan semua CSS default browser, kemudian kita tulis CSS kita sendiri.
Anonim
tadi sempet dicoba, tapi kok kagak ada yang ngefek yah?
punya tutor show/hide komentar.. tapi yang bergaya lightboxnya (overlay) -_- susah nyarina nih!
Unknown
Mas kalau saya sudah mereset terus saya buat begini juga bolehkan,
Disini adalah text yang mau saya publikasikan.
#main-wrapper{width: 749px; float: left; margin: 0 10px 0 10px; word-wrap: break-word;overflow: hidden;}
#related-posts{display:none;}
#comment-form{display:none;}
#comments{display:none;}
#sidebar-wrapper{display:none;}
kalau mau meringkas saya masih kurang paham betul caranya, tapi ini bisa juga untuk buat multi colom ndak mas..? tapi sebelum tanda # diberi style dan diakhirnya ditutup garisng style. kerena newbie mas jadi banyak nanya kerena pingin tau dan bisa mengikuti jejak mas yang memiliki skill dewa... \o/ :D :D
Taufik Nurrohman
@Suwardi Unggit Multikolom??? Mungkin maksudnya memakai CSS Float
Contoh ringkasnya bisa disederhanakan menjadi seperti ini:
#main-wrapper {
width:749px;
float:left;
margin:0 10px 0 10px;
word-wrap:break-word;
overflow:hidden;
}
#related-posts,
#comment-form,
#comments,
#sidebar-wrapper {display:none;}
</style>
Unknown
@Taufik Nurrohmanyach ngelayout dengan css float maksudnya, terus kalau untuk CSS Reset eric mayer saya meletakannya di dalam templete setelah code dan sebelum /*Variable definitions*/
itu tujuannya biar praktis gitu. Ternyata belajar banyak sumber ini buat binggung kalau begitu saya belajar sama mas taufik aja lah kalau begitu, kemarin pernah nanya sama andre di facebook tapi tidak dibalas liat tutorial bang Amdhas Chromatic puyeng banyak bahas grid dengan HTML5
Unknown
@Suwardi Unggit saya masukan lagi lagi codenya yang hilang diatas itu <i rel="code'><![CDATA[ </i>
Taufik Nurrohman
@Suwardi Unggit Untuk saat ini lebih baik jangan tanya terlalu banyak sama mas Andre... Hehe 0:) Dia lagi stress gara-gara blognya dihack. Kodenya hilang, mungkin karena kamu memakai tanda petik tunggal. Harusnya memakai petik ganda seperti ini:
CSS Reset digunakan untuk mereset semua format tampilan CSS di atasnya. Secara umum sih sebenarnya digunakan untuk mereset semua CSS default dari masing-masing peramban. Sekedar untuk meyakinkan agar kode CSS yang kita buat nantinya benar-benar tampak sama jika dilihat pada semua peramban. Kalau kita meletakkan kode CSS reset di salam posting itu juga supaya kode CSS di atasnya akan terhapus semua dan kembali seperti semula sebagai sesuatu yang bebas. Tapi itu tidak mutlak. Mending mempelajari elemen-elemennya saja seperti biasa, lalu buat versi CSS resetmu sendiri :-bd
Unknown
@Taufik Nurrohman terima kasih mas sarannya ,pantasan blognya mas andre tidak bisa dibuka yang ada malah tampil localhost gitu dan ada sedikit jejak inisial di tinggalkan, nanti saya tanya teman saya yang hecker black and white untuk bantu andre, itu kalau teman saya mau sih mas. saya sudah lihat blogazine mas taufik keren.....