Oca 12
15
Css Nedir ? Css İle Neler Yapılabilir ?
Css türkçe stil şablonları anlamına gelir.Html ile metin biçimlendirme yapabiliriz.Fakat Css’de bunun çok önüne geçilip web sitesi tasarlayıp web site şablonları oluştabilirsiniz.Yatay ve dikey menüler oluşturabilirsiniz.Metin ve resim biçimlendirme yapabilirsiniz.
Günümüzde web siteleri css teknolojisi kullanılarak divlerle oluşturuluyor.Div ve css ile siteyi bir düzene sokarız ve sitenin elemanlarının sağa sola kaymasını engelleriz.Web sitemiz her ne kadar tasarım açısından iyi görünsede tabanı yani kod kısmı oldukça önemlidir.Web sitesi yaparken sadece görselliği düşünmemeliyiz.Arama motorlarına uygun (SEO) yapıda tasarımlar yapmalıyız.Seo’ya uygun tasarımlar yapmanın en temel yoluda css ile site yapmaktır.Css o kadar ileri bir teknolojidir ki uzmanı olduğunuz zaman neredeyse hiç resim kullanmadan tasarım yapabilirsiniz.Css öğrenmek çok zor birşey değildir.Temel anlamda herkes öğrenebilir.Fakat uzman derecede öğrenmek için biraz çalışmanız gerekecek.
Css içerisinde farklı bölümlere ayrılır.Bunlar; id,class ve linklerdir.Classlar ile sitemizin metinlerini resimleri düzenleyebiliriz.İd’ler ile divlerimizi konumlandırırız.Linkler ile sitemizdeki linklerin görünümlerini ayarlarız.Şimdi kullanımlarına gelelim.
İd
<div id=sayfam></div>
Clas
#sayfa {
height: 900px;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #37B5DE;
}
Linkler
a:link {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 45px;
color: #009;
text-decoration: none;
font-weight: normal;
}
a:hover {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 45px;
color: #68A70A;
text-decoration: none;
}
a:visited {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 45px;
color: #000;
text-decoration: none;
float: left;
width: 100px;
height: 46px;
border-bottom-width: 0px;
border-bottom-style: solid;
}
a:active {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 45px;
color: #06F;
text-decoration: none;
}
Not:Linklerde a.link linkin ilk görüneceği şekildir.Hover,linkin üzerine gelince oluşacak şekildir.Visited tıklanınca görünecek şekildir.Active ise ziyaret edilen sayfadaki linkin görüneceği şekildir.