Bu başlık altında css bilgisi 0 olanlara ufak ufak birşeyler anlatacağım
Css bir etiket ve ona ayit özelliklerden oluşur
mesela linkler linklerin html kodu şudur
Kod:
<a href="#">Ana Sayfa</a>
bu bir link normalde tarayıcıda beli bir büyüklükte altı çizili gözükülür bunu değiştirmek için css şöyle yazılır
Kod:
a {
color: #ff0000;
}
burda link kodu a ile başladığından a seçicisi kullandık
color ise a seçicisine ayit özellikleri belirtir (linkin rengi)
eğer herhangi biyere ait özellikler belirtmek istiyorsak şöyle yapacağız
html kodu
Kod:
<div id="seçiciadı">seçicinin bulunduğu yerdeki yazı</div>
css de ise
Kod:
#seçiciadı {
buraya özelikleri yazacağız
}
buraya kadar tamamsa özelliklere geçiyorum
css de özellikleri tanımlamak için height,color gibi inglizce terimler kullanılır
ben basit olarak özellikleri yazacam ve tanımını yapacağım sonra bir örnek ile göstereceğim
width:Bu kod css de en çok kulanılan kodlardan biridir işlevi ise css in uygulandığı alanın genişliğini belirtmek.Birim olarak % ve px ile ifade edilir ama en çok px kulanılır px in açılımı pikseldir örenek ile açıklayayım
Kod:
#seçiciadı {
width: 300px;
}
bu şekilde kodu uyguladığımız yerin 300 piksel genişliğinde olmasını sağladık
height: Bu kodda uyguladığımız alanın yüksekliğini belirler.width gibi kullanılır örnekle geçiyorum
Kod:
#seçiciadı {
width: 300px; /**bu kod alanın 300piksel genişliğinde olmasını sağlar**/
height: 600px;/**bu kod ise alanın 600piksel yüksekliğinde olmasını sağlar**/
background: Bu kod kullandığımız alanın arkaplan özelliklerini belirler bu koda birden fazla özellik belirtilebilir bir koddur
Kod:
#seçiciadı {
width: 300px;
height: 600px;
background: url(arkaplanresimurlsi.jpg);
veya
Kod:
#seçiciadı {
width: 300px;
height: 600px;
background: #000000; /**arkaplan resimi**/
extra özelikler:
no-repeat: Bu kod arkaplan resiminin arka arkaya tekrar etmesini engeller.
[İ]repeat-x:[/i] Bu kod ise arkaplanının sadece yatay olarak tekrarını sağlar.
[İ]repeat-y:[/i] Bu kod ise arkaplanın sadece dikey olarak tekrarını sağlar.
kullanımı
Kod:
#seçiciadı {
width: 300px;
heigth: 600px;
background: url(arkaplanresimiurlsi.jpg) no-repeat #000000;
}
Bu kod sayesinde arkaplan rengi siyah ve tekrar etmiyor mesela bunu sitenin arkaplanına uygulamak için
Kod:
body {
backgorund: url(sitearkaplanurlsi.jpg) reprat-x #000000;
}
burda ise bütün siteye uyguladığımızdan body seçicisini kullandık
burda background özelliklerini bitiriyorum gerisi profesyonele giriyor
font: Bu kod ise uyguladığımız alanın yazı fontunu belirler
Kod:
body {
font: Arial, Helvetica, sans-serif;
}
burda yazı fontunu arial o yoksa helvetica oda yoksa sans-serif olarak göstermesini sağlar
bazı font gurupları
Kod:
Georgia, "Times New Roman", Times, serif
"Courier New", Courier, monospace
"Times New Roman", Times, serif
burda " içinde bulunda font asıl belirtilen font diğerleri ise aparatif fontlar
color: Bu kod ise yazı rengini belirler kulanımı çok basit;
Kod:
body {
color: #fff;
}
burda yazı rengini beyaz olarak gösterdik
Şimdilik bukadar
Burdan örneği indirebilrisiniz kendi uploadımdır
http://www.fileden.com/files/2008/10/24/2157319/ornek.rar |