Son eklenen makale ve haberler
Yükleniyor !!!
CSS tanımı ve tablosuz tasarım
- Amaç
CSS (Cascading Style Sheets)'nin Türkçe karşılığı stil şablonları anlamındadır. CSS, HTML üzerinde yer alan çıktıları biçimlendirme fırsatı veren bir teknolojidir. "Peki bize ne gibi yararı vardır?" derseniz bir iki örnek ile CSS'nin neden günümüzde yaygın kullanıldığını ispatlayabilirim.
Projenizi göz önünüze alın. Siz sitenizi kırmızı ton ağırlıklı yaptınız fakat kullanıcılarınızdan gelen yoğun istek üzerine renk değişikliği yapmanız gerekiyor. Ve çok fazla sayfanız var bunu yapmanız belkide günlerinizi alacak. Ama eğer ki siz sitenizi CSS ile stil dosyanızı kullanarak oluşturmuş olsaydınız sadece dakikalarınızı ayırmanız yeterli olacaktı.
Şuanda ben sizlere karşılaştığım, ve bir çok kişinin de zor durumda kaldığı iki basit anıyı belirttim. Sizlerde zamanla bir çok faydası göreceksiniz ve iyi ki CSS ile tanışmışım diyeceksiniz.
CSS'yi mutlaka öğrenmelisiniz. Hem zaman kazanmak için, hem işlerinizi daha pratik yürütmek için hem de sayfanızı daha esnek gösterebilmek için. Dikkatinizi bir noktaya çekmek istiyorum. Eskiden toplist diye nitelendirdiğimiz gelişi güzel tüm sitelerin listelendiği siteler popülerdi. Fakat ne zamanki CSS varlığını gösterdi artık yeni trend CSS Galerileri oldu. En sıklıkla takip edilen CSSMania, CSSBeauty, CSSVault vb... gibi siteler arasına ne mutlu ki Türkiye'den de bir iki sitemiz yer almaktadır. İştirak sahibi ve yöneticisi olduğum CSSGaleri.com ve kardeş bağlantım olan CSSBahcesi.com. Galerileri sıklıkla takip ederek CSS kullanarak oluşturulmuş siteleri gezerek daha farklı fikirler elde edebilirsiniz. Diğer siteler ile arasında olan farklılıkları hissedebilir, esnekliği çok net hissedebilirsiniz.
CSS'yi sitenizde yüzeysel olarak kullanmayın. Tüm alanlarınıza yayın. Örneğin kimi siteler sadece linkleri CSS'de biçimlendirir ve diğer alanları eski usul ile biçimlendirir. Hayır, sizler tüm alanlarınızı CSS ile yönetebilmelisiniz, yönetmelisiniz.
Her zaman web'in en geniş ve en basit anlatımı olan fakat Türkçe dil desteği olmayan W3Schools'a girip dökümanları okuyarak bilgilerinizi tazeleyin.
Aktif olarak sayılabilir 3 çeşit bağlantı metodu vardır;
- Import medotu <style type=text/css media=screen>@import url(dosyaadi.css);</style>
- Link medotu <link href="dosyaadi.css" rel=stylesheet type=text/css />
- HeadTag medotu sayfada direkt olarak <style type=text/css>...</style> arasına yazılır.
Şimdiye kadar CSS hakkında bilgiler verdik. Nedir ne değildir anlamaya -anlatmaya- çalıştık. Şimdi gelelim bir örnek ile konuyu bütünleştirmeye. Amacımız tablo kullanmadan bir sayfa (layout) oluşturmaya. Öncelikle sayfamızda yer alacak ana alanları listeleyelim;
- Tüm alanları bünyesinde barındıracak #ana alanı,
- Header görevini üstlenecek #ust alanı,
- Content görevini üstlenecek #orta alanı,
- Sağ ve Sol içeriğimizi yönetebileceğimiz #sag ve #sol alanları,
- Son olarak Footer görevini üstlenecek #alt alanı.
#ana {
width: 600px; /* Alanın genişliğini ayarla */
margin: auto; /* Alanın dışa bağlı boşluğu ayarla. Auto değeri alanı ortalı gösterecektir */
}
#ana #ust {
height: 100px; /* Alanın yüksekliğini ayarla */
background: #aaa; /* Arkaplan rengini ayarla */
border: 1px solid #888; /* 1px genişliğinde ve #888 renginde düz hat çerçeve oluştur */
margin: 0 0 5px; /* margin özelliği top right bottom left olarak 4 değer alır. Biz şuan top ve left'i 0 bottom'u 5 verdik. Eğer left ile right eşit olmasaydı left'i tanımlamamız gerekekti ama şuan left değeride 0 olacaktır. */
}
#ana #orta {
background: #fff;
margin: auto;
}
#ana #orta #sol {
float: left; /* Sola hizala */
width: 400px;
height: 350px; /* Bu alana değer vermeyebilirsiniz, yazılarınızı girdikte alan otomatik uzayacaktır. */
border: 1px solid #888;
background: #eee;
}
#ana #orta #sag {
float: right; /* Sağa hizala */
width: 195px;
height: 350px; /* Bu alana değer vermeyebilirsiniz, yazılarınızı girdikte alan otomatik uzayacaktır. */
border: 1px solid #888;
background: #eee;
}
#ana #alt {
clear: both; /* Float alanlarını temizle (Bu özellik kullanılmaması halinde float'ın altında kalan alanlar browser uyuşmazlığı yaşayarak kaymalar doğurabilir */
height: 100px;
background: #aaa;
border: 1px solid #888;
margin-top: 5px;
}
width: 600px; /* Alanın genişliğini ayarla */
margin: auto; /* Alanın dışa bağlı boşluğu ayarla. Auto değeri alanı ortalı gösterecektir */
}
#ana #ust {
height: 100px; /* Alanın yüksekliğini ayarla */
background: #aaa; /* Arkaplan rengini ayarla */
border: 1px solid #888; /* 1px genişliğinde ve #888 renginde düz hat çerçeve oluştur */
margin: 0 0 5px; /* margin özelliği top right bottom left olarak 4 değer alır. Biz şuan top ve left'i 0 bottom'u 5 verdik. Eğer left ile right eşit olmasaydı left'i tanımlamamız gerekekti ama şuan left değeride 0 olacaktır. */
}
#ana #orta {
background: #fff;
margin: auto;
}
#ana #orta #sol {
float: left; /* Sola hizala */
width: 400px;
height: 350px; /* Bu alana değer vermeyebilirsiniz, yazılarınızı girdikte alan otomatik uzayacaktır. */
border: 1px solid #888;
background: #eee;
}
#ana #orta #sag {
float: right; /* Sağa hizala */
width: 195px;
height: 350px; /* Bu alana değer vermeyebilirsiniz, yazılarınızı girdikte alan otomatik uzayacaktır. */
border: 1px solid #888;
background: #eee;
}
#ana #alt {
clear: both; /* Float alanlarını temizle (Bu özellik kullanılmaması halinde float'ın altında kalan alanlar browser uyuşmazlığı yaşayarak kaymalar doğurabilir */
height: 100px;
background: #aaa;
border: 1px solid #888;
margin-top: 5px;
}
<html>
<head>
<title>Tablosuz tasarım giriş</title>
<link rel="stylesheet" type="text/css" media="screen" href="stil.css" _fcksavedurl=""stil.css"" _fcksavedurl=""stil.css"" />
</head>
<body>
<div id="ana">
<div id="ust">Header</div>
<div id="orta">
<div id="sol">Sol alan</div>
<div id="sag">Sağ alan</div>
</div>
<div id="alt">Footer</div>
</div>
</body>
</html>
Sercan Çakır (SrcnCkr)
| SrcnCkr 16.03.2007 | |
| |
| Rating : 10 üzerinden 8.89 |
Yorum ekle
