BİLGİ SAYAMIYORUM beta

Reset Css (stil sıfırlama) tekniği nedir? Nasıl kullanılır?

0

Tarayıcınız (browser) herhangi bir sayfayı görsel hale getirmeden önce siteye iliştirdiğiniz css dosyaları ya da inline stillerden önce kendi stil şemasını inceler ve bunlar ile öğelere stil verir. Bu genellikle çok sıcak bakılmayan bir özellik olmuştur. Her ne kadar bunlar genel kullanılan standartları bozmayabilecek şeyler olsa da. yazdığınız temiz css i fazlasıyla bozabilir. 

Bunu yapmaması için kendi css dosyanızın başına sıfırlamak istediğiniz stilleri yazabilirsiniz. Ama her projeye bunları kopyalamanız ya da gereksiz olanları elden geçirmeniz gerekebilir. Bu yüzden internet üzerinde bir çok insanın hazırladığı hazır "reset.css" dosyaları bulabilirsiniz.

Bunlardan en çok işe yarayabilecek olan Eric A. ve Kathryn S. Meyer in kendi meyerweb.com adlı sitelerinde yayınladıkları "reset.css" olacaktır. Dosyayı gerektikçe güncelliyorlar tabii ki bu yüzden de her seferinde daha iyi olmakta. 

Sitedeki en güncel olan stili aşağıda ineceleyebilirsiniz. (kaynak)

 

/* 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;
}


Bu css i direk indirip sitenize yerleştirmek için de bu linki kullanabilirsiniz. 

BENZER 7

Kimse etkileşime girmemiş

ETİKETLER