css e baslamak
Geridön
Css e başlamak
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
Geridön