Css ile uğraşanlar çok iyi bilirler, her browser ın yaptığı işlev aynı fakat tanımladıkları bazı kurallar birbirleri arasında farklılık gösterir.
Bu yüzden bir sürü hack yöntemi çıkar (bknz IE6 margin hack,vb…) ve tasarımınızın her tarayıcıda aynı görünebilmesi için sizde bir takım “hack” lere başvurabilirsiniz. Bu durumu en aza indirmek için tarayıcıların default ayarlarını sıfırlayacak bir yöntem kullanmamız gerekiyor.
Bununla alaklı eğer bir google yaparsanız yüzlerce sonuç bulabilirsiniz. Türkçe kaynaklara bir tane daha eklenmesi amacıyla bende bu konuda bir makale yazmak istedim.
Şimdi sıra geldi bu konuyu biraz daha detaylandırmaya. Mesela yeni bir web form oluşturalım ve bir <h2> tagı ekleyelim.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Resetleme-Olmadan.aspx.cs"
Inherits="BarbarosUI.Resetleme_Olmadan" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Html element ayarlarını sıfırlamak : CSS Reset</h2>
</div>
</form>
</body>
</html>Daha sonra projeyi çalıştırıp nasıl görüneceğine bakalım.
Eğer projeyi çalıştırıp sayfayı açtıysanız, sol ve üst tarafta bir margin görülmekte. Hiç bir kod yazmamıza rağmen sol ve üst taraftan ilk tanımlanmış değer olan margin değerleri atandı.
Şimdi 3 satır kod ekleyerek bu default değeri nasıl resetleyeceğimizi göreceğiz.
<style type="text/css">
html,body
{
margin: 0;
padding: 0;
}
</style>Bu gördüğünüz kod bloğunda <head> tagları arasına yerleştirirseniz eğer. <h2> tagları arasında olan başlığın browser içeriğine yapıştığını göreceksiniz.
html,body gibi tüm elementlerin kendilerine özgü default margin ve padding leri vardır. Bu yüzden az önceki css kod bloğumuzda uyguladığımız yöntemi her element için uygulayıp, css reset dosyamızı daha da geliştireceğiz.
İnternetten yapmış olduğum araştırmalar, okumuş olduğum makaleler ve kendi tecrübelerim doğrultusunda oluşturmuş olduğum reset.css dosyasını size sunuyorum :)
/***** Global Settings ****/
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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
vertical-align: baseline;
}
html
{
font-size: 62.5%;
}
body
{
font: 1.1em/1.5em Verdana, Helvetica, Arial, Geneva,sans-serif;
}
/*** Headings ***/
h1, h2, h3, h4, h5, h6
{
font-weight: normal;
}
/*** Formatting ***/
ul, ol
{
list-style: none;
list-style-image: none;
}
img
{
border: 0;
}
/*** Links ***/
a, a:link, a:visited
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
/**** Forms ****/
form
{
margin: 0;
padding: 0;
display: inline;
}
textarea
{
line-height: 1.25em; /*padding:5px;*/
}
/*** Tables ***/
table tr td
{
padding: 2px;
}
Evet yukarıda vermiş olduğum küçük örneğin geliştirilmiş hali işte yukarıda. Artık sizde bu css yi reset.css adı altında kaydedebilir ve kendi stil dosyanıza import edip kullanmaya başlayabilirsiniz.
Style.css
Sancısız tasarımlar, iyi çalışmalar
Technorati Tags:
css,
reset
Tags: