Eğer diyetin ikinci ve en ağır dönemine hazırsanız, hemen devam edelim. Bir önceki yazımda, sayfanın baş kısmında bulunan öğelerinde değişiklik yaptık. Ayrıca sayfa içinde bulunan tüm tablolara bir id ismi verdik. Buraya kadar CSSe dokunmadık ama bu yazıdan itibaren, CSS ile sayfamızı zayıflatmaya başlayacağız.
Üzerinde çalıştığımız sayfanın BODY elementi birçok gereksiz bilgi ile doldurulmuş durumda.
1. <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();"> Yukarıdaki kod içinde gördüğünüz tüm özellikler CSS ile tanımlanabilir ve böylece ileriki tarihte site üzerinde bir değişiklik yapmak istediğinizde, üzerine değişiklik yapmanız gereken yalnızca bir dosya yani CSS dosyası olur.
Hadi gelin ilk CSSimizi yazalım bu sayfa için. Şimdilik yazacağımız tüm CSSi dahili olarak yazacağız yani sayfanın içine koyacağız. İşimiz bittiğinde ise bu CSS kodlarını harici dosya içinde saklayacağız. Bunu yapmak için hemen TITLE elementi altına bir aşağıda gördüğünüz gibi bir CSS komutu açmamız gerekiyor:
1. <title>Diyetmax Turkiye</title>
2. <style>
3. body {background:#fff; margin:0; padding:0;}
4. </style>
5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> İşte yukarıda gördüğünüz CSS kodu içinde hem arka plan rengini hem de BODY elementinde bulunan leftmargin topmargin marginwidth ve marginheight özelliklerini tanımlamış olduk. Yeni BODY kodumuz şu şekilde olacaktır:
1. <body onload="preloadImages();"> body {background:#fff; margin:0; padding:0;} icindeki backgroundarka plan rengini bize vermektedir. Arka plan rengi icin #fff değerini kullandım ki bunun açılımı #ff ff ffdir yani beyaz. Eğer bir arka plan rengindeki 6 harf ya da sayının ikili grupları aynı harf ya da sayıdan oluşuyor ise benzer harf ya da sayı silinebilir ve bu nedenle #fff değeri #ffffff değeri ile aynıdır. #ff00ee değeri #f0e ile aynidir. Başka bir örnek ise #99CC66 değeri #9C6 ile aynıdır.
CSS içinde kullandığımız margin, bir HTML elementinin etrafındaki boşluğun miktarını belirlemek için kullanılır. margin:0 dendiğinde bu elementin tüm kenarlarının diğer elementlerden uzaklığı 0 piksel olacaktır. margin: 0 deyimini ayni zamanda margin: 0 0 0 0; seklinde de yazabilirdim. Buradaki değerler sırasıyla üst (top), sağ (right), alt (bottom) ve sol (left) margin değerlerinin 0 olduğunu göstermektedir. Buradaki sıralama önemlidir. Yani T (top), R (right), B (bottom), L (left) sıralaması. Bunu daha iyi hatırlamak için size yardımcı olabileceğini inandığım bir kelimeyi ismini aklınızda tutabilirsiniz: TiReBoLu ya da TRaBzonLu.
CSS içinde kullandığımız padding ise, bir element içindeki verilerin, elementin kenarlarına uzaklığını belirten değerdir. Yani bir tablo içindeki yazının, tablo kenarına olan uzaklığını belirleyen değerdir. Yine örneğimizde margin gibi BODY padding değerini 0 verdik. Bütün margin kuralları padding içinde geçerlidir. TiReBoLu kuralı da dâhil olmak üzere.
Gelin şimdi de FONT değerlerini ve link renklerini CSS içine yerleştirelim. Üzerinde çalıştığımız sitedeki hemen hemen her paragraf
<font size="2" color=#666666 face="Tahoma"> değerini taşıyor. Bu demektir ki o paragraf "Tahoma" fontunu kullanıyor, rengi #666666 ve büyüklüğü ise 2 olarak belirlenmiş. Bu sayfa içinde defalarca tekrar edilmiş durumdu. Bu değeri CSS içine koymak gayet basit.
1. <style>
2. body {background:#fff; margin:0; padding:0;}
3. body, p, td {font:normal 90% tahoma, verdana, sans-serif; color:#666;}
4. </style> Yukarıdaki CSS içinde BODY, P ve TD elementi içinde yer alan tüm tekstlerin, stilinin normal (yani italik degil), büyüklüğünün yüzde 90 (yaklaşık size="2" ye eşittir), font tipinin tahoma (eğer tahoma yoksa Verdana eger Verdana yoksa herhangi bir sans-serif font) ve renginin ise #66666 olması gerektiğini belirttik. Font özelliğini CSS içine ekledikten sonra sayfa içindeki bütün <FONT> ile tanımlanmış olan HTML elementlerini silebilirim (57 tane). İşte gördüğünüz gibi bir satir CSS kodu ile 57 FONT elementini sayfamızdan çıkardık ve ileriki bir tarihte font tipini değiştirmeye karar verirsek, CSSi değiştirmemiz yeterli olacak.
Şimdi de linklerin renklerinin ve dekorasyonunu belirtecek CSSi sayfamıza ekleyelim.
1. body, p, td {font:normal 90% tahoma, verdana, sans-serif; color:#666;}
2. a:link, a:visited {text-decoration:none; color:#800000;}
3. a:hover {text-decoration:underline; background:#C4BCFB; color:#000;}
4. a:active {color:#8000aa;}
5. </style> Yukarıdaki CSS içinde a:link yani normal linkler, a:visited yani ziyaret edilmiş linkler, a:hover yani faremizi linki üzerine getirdiğimizdeki durum ve a:active yani link seçilmiş iken ki stilini tanımladık. CSS içinde gördüğünüz text-decoration bize linkin altının çizili olup olmadığını gösteriyor. CSS linkleri konusunda dikkat edilmesi gereken kural ise yine sıralamadır. Sıralama su şekildedir: a:link , daha sonra a:visited, daha sonra a:hover ve en son a:active gelir. Sıralama için aklınızda tutacağınız kelime LeVHA olabilir.
Yukarıda yazdıklarım belki de birçoğunuzun bildiği CSS bilgileri. Gelin biraz da tablo için nasıl kullanacağımıza bakalım.
Önceki yazıda tablolara id verdik. İşte simdi o verdiğimiz idleri kullanmaya başlayacağız. Üzerinde çalıştığımız sitedeki ilk tablo aşağıdaki gibi:
1. <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="masthead">
Hemen masthead ile ilgili bir CSS yazalım:
1. table {border-collapse: collapse;border-spacing: 0px;}
2. table td { vertical-align: top;}
3. #masthead {margin:5px 0 15px 0; padding:0; text-align:left; width:800px;}
4. </style>masthead tablosu logonun ve ana linklerin bulunduğu bir tablo. Bu tablo ve site içindeki diğer tabloların hiçbirinde kenar çizgisi olmadığı için table elementinin kenar çizgi değerlerini 0a eşitledim ve bunu border-collapse: collapse;border-spacing: 0px; ile gerçekleştirdim. Bu CSS kuralı, önünde bir id ismi olmadığı için, sayfa ve site içindeki tüm tablolar için geçerli olacaktır.
Yine sayfa ve site içinde geçerli olacak bir başka kural ise, tablo hücrelerinin hepsi hücrenin üstüne hizalanacaktır (tablodaki valign=top degeri) ve bunu da vertical-align: top ile gerçekleştirdim. Masthead tablosu için ise id ismini kullandım. CSS kodu içinde bütün idlerin önünde # işareti olmalıdır. Masthead tablosunun uzunluğunu 800 piksel olarak tanımladım (width:800px). Yazıları sola hizaladım (text-align:left) ve yazıların tablonun kenarlarından uzaklığını yani padding değerini 0 olarak verdim. Fakat margin değeri olarak yani tablonun diğer elementlerden uzaklığını ise üstten 5 piksel, sağdan 0, alttan 15 ve soldan 0 olarak tanımladım.
Yeni tablomuzun kodu aşağıdaki gibi olacaktır:
1. <table cellpadding="0" id="masthead"> İşte bu yeni kod içinde widthi, borderi , align ve cellspacing değerini kaldırdık.
web tasarımı nasıl yapılır 