Harun İstenci
Harun İSTENCİ
Kurucu ve Yönetici
 1997 yılında İstanbul'da dünyaya geldi ve memleketi Kastamonu. Çocukluğundan bu yana bilgisayar sistemleri üzerinde çalışıyor ve internet üzerinde içerik üretiyor...

Kişisel Web Sitesi: harunistenci.com

Öne Çıkan Şehirler

İstanbul
Sivas
Safranbolu
Kastamonu
Eskişehir
Edirne
Denizli
A320 Ailesi Aero Spacelines Afyonkarahisar Airbus Aliya İzzetbegoviç Almanya Amasya Ankara Antik Kent Antonov Araç Arkadaşlar Arkeoloji Avrupa AWACS Aydın Aydın Çufaoğlu Ayvalık Azdavay Baden-Württemberg BAE Systems Balıkesir Basın Açıklaması Bedesten Bergama Beşiktaş Beyoğlu Bilecik Blog Boeing Bolu Bombardier Bosna Hersek Breguet Bursa Cami Cide Concorde CSS Eğitimleri Çarşı Çevre Denizli Developer Doğa Douglas Aircraft Company EADS Edirne Efes Eğitim Eğlence Eminönü Erasmus Erzincan Eskişehir Fatih Fokker Fransa Galeri Gar Gebze Göl Göynük Guppy Gürün Haber Hamam Han Harun İstenci Havacılık Hayvanlar Heidelberg Heykel Ilgaz Ilyushin İğdir İnsanlar İnternet İsmail Ulukaya İstanbul İşletim Sistemleri İzmir İzmit Jumbo Jet Kadıköy Kale Kanyon Karaağaç Karabük Karşılaştırma Kartepe Kastamonu Kemaliye Keşfet Kilise Kocaeli Konak Konya Köprü Külliye Küre Linus Torvalds Linux Lockheed Lockheed Martin Ludwigshafen Maltepe Mannheim Marmaris McDonnell Douglas Medrese Merak Edilenler Microsoft Moda Motivasyon Muğla Muhammet Ali Sağlar Müze Nedir Ortaköy Osmangazi Paris Safranbolu Sakarya Sapanca Sivas Sivrihisar Siyaset Sorun Çözümü Strasbourg Stratolaunch Suhoy Sukhoi Süpersonik Şelale Şile Tarih Tarihe Yön Verenler Taşköprü Trakya Tupolev Türbe Ubuntu Uçaklar United Aircraft Coorparation Üsküdar Vickers Vickers-Armstrongs Limited Video Wilfrid Voynich Windows Windows10 Windows7 Yazılım Yelken Yerler Yollar Yurt dışı

CSS - Zemin Özellikleri (Background)
 CSS öğrenmeye karar verdiğimizde bu öğrenim sürecinde bir algoritma ile ilerlemek gerekir. CSS'de bulunan özelliklerden en temeli, en altta ne olacağına karar verdiğimiz zemin ayarlamalarıdır. "background" çatısı altında bir çok kişiselleştirilebilir özellik mevcut, bunlar;
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background
 Bu 6 zemin özellikleri ile elementlere ne tür özellikler uygulanabilir bunları tek tek inceleyeceğiz...

background-color Kullanımı

 Elementlerin zeminine bir renk tanımlamak için kullanılır.
[code type="CSS"]p { background-color: #000000; }[/code] Tüm elementlere uygulanabilir.

background-image Kullanımı

 Elementlerin zeminine resim eklemek için kullanılır.
[code type="CSS"]body { background-image: url(/images/resim.jpg) }[/code] Tüm elementlere uygulanabilir.

background-repeat Kullanımı

 background-repeat özelliği background-image ile zemine eklenen resmin tekrarlanmasını belirler.
[code type="CSS"]body { background: white url(resim.gif); background-repeat: repeat-x; }[/code] Tüm elementlere uygulanabilir.

background-attachment Kullanımı

 background-attachment özelliği zemine eklenen resmin sayfa ile scroll yani sayfa aşağı veya yukarı kaydırıldığında hareket etmesini veya sayfanın zeminin de sabit kalmasını sağlar.
[code type="CSS"]body { background: white url(gorsel.gif); background-attachment: fixed; }[/code]

background-position Kullanımı

 background-position özelliği background-image ile belirlenen resmin başlangıç noktasını belirler. Bu özellik sadece block-level ve replaced (Bu elementler kendine özgü boyutları olan elementler olarak tanımlanabilir. Örneğin: IMG, INPUT, TEXTAREA, SELECT, ve OBJECT) elementlere uygulanır.

 Kullanım yöntemi; Yatay değerler için: left, center, right Dikey değerler için: top, center, bottom

 Yüzde değerleri ve uzunluk değerleri de kullanılır. Yüzde değerleri elementin boyuta bağlı olarak görecelidir. Uzunluk değerleri de kullanılabilir. Ancak farklı ekran çözünürlüklerinde farklı görüntülere sebebiyet vermesi nedeni ile pek önerilmez.

 Yüzde değerler ve uzunluk değerleri verildiğinde ilk değer yatay içindir sonra gelen dikey değerdir. Örneğin %10 %60 değeri bir zemin resmi için verilmiş ise %10 değeri yataydaki değeri %60 ise dikey olarak değerini gösterir. 5px 10px gibi değerler verilmişse resmin sol üstden 5px sağa ve 10px aşağıdan başlayacağını belirler.

 Eğer yalnızca yatay değer verilmiş ise, dikey değer %50 olarak kabul edilecektir. Yüzde değerler ve uzunluk değerleri eksi değerler alabilir. Örneğin; -2px %10 gibi. Aşağıdaki örnekler genel kullanım için yararlıdır:
  • top left = left top = 0% 0%
  • top = top center = center top = 50% 0%
  • right top = top right = 100% 0%
  • left = left center = center left = 0% 50%
  • center = center center = 50% 50%
  • right = right center = center right = 100% 50%
  • bottom left = left bottom = 0% 100%
  • bottom = bottom center = center bottom = 50% 100%
  • bottom right = right bottom = 100% 100%
[code type="CSS"]body { background-image: url(gorsel.gif); background-repeat: no-repeat; background-position: center; }[/code]

background Kullanımı

 Bu özellik Zemin (background) ile ilgili tüm özelliklerin bir arada kullanılmasını sağlar.
[code type="CSS"]body{ background: white url(gorsel.gif) } blockquote { background: #FFF } p { background: url(../resimler/desen.png) #FFF fixed } table{ background: #000 url(resim.jpg) no-repeat bottom right }[/code]
Bu içerik Harun İstenci tarafından aşağıda belirtilmiş olan kategoriler altında oluşturulmuş ve yayınlanmıştır. İçeriğin kopyalanması 5846 sayılı Fikir ve Sanat Eserleri Kanunu'na göre suçtur. | İstenci Systems
Yazar Bilgisi: Harun İstenci Hakkında
Harun İstenci Hakkında
1997 yılında İstanbul'da dünyaya geldi ve memleketi Kastamonu. Çocukluğundan bu yana bilgisayar sistemleri üzerinde çalışıyor ve internet üzerinde içerik üretiyor...
Harun İstenci Resmi Web Sitesi Hakkında Daha Fazla >

CSS öğrenmeye karar verdiğimizde bu öğrenim sürecinde bir algoritma ile ilerlemek gerekir. CSS'de bulunan özelliklerden en temeli, en altta ne olacağına karar verdiğimiz zemin ayarlamalarıdır. "background" çatısı altında bir çok kişiselleştirilebilir özellik mevcut, bunlar;

Yorum Gönderme

Yorum alanı herkese açıktır. Olağan dışı bir yorum algılandığında topluluk politikalarımız gereğince 24 saat içinde kaldırılacaktır.

[blogger][disqus]

Author Name

İletişim Formu

Ad

E-posta *

Mesaj *

Blogger tarafından desteklenmektedir.