CSS STIL SABLONLARI - Fatih Hayrioğlu, CSS (Stil Sablonları)

Fatih Hayrioğlu, CSS (Stil Sablonları)

3. Seçiciler 34 incelersek ilk ul elemanının iki adet li çocuk elemanı bulunmaktadır ve bu iki li elemanının altındaki tüm elemanlar ilk ul elem

3. Seçiciler 34 incelersek ilk ul elemanının iki adet li çocuk elemanı bulunmaktadır ve bu iki li elemanının altındaki tüm elemanlar ilk ul elemanının torun elemanlarıdır. 3.5. Torun Seçicileri (Descendant Selectors) Bu modelin avantajlarından birisi Torun Seçicileridir(diğer isimleri iç içe seçicilerdir). Torun Seçicilere yapılan tanımlama sadece belirtilen elemanlara uygulanır bu kuralların haricinde kalanlara ise uygulanmaz. Bir örnek verecek olursak bir h1 elemanının em torun elemanına belirli bir stil uygulamak istesek. Normalde bir sınıf tanımlaması yapılarak her h1 elemanı altındaki em elemanını tek tek seçerek bu sınıfı uygulamamız gerekir ki bunun font etiketi uygulamasından farkı yoktur. Açıkçası bu işlemi yapmak uzun zaman alacaktır. Ancak Torun Seçicisi kullanarak bu işi kolayca yapabiliriz. Örnek kod yazarsak: h1 em {color: gray} Bu kod dokümandaki atası h1 olan tüm em torun elemanlarını gri yapacaktır. Diğer em'ler ise bu kuralı uygulamayacaktır. Torun Seçicilerde, seçici kısmı birbirinden bir boşlukla ayrılmış iki veya daha fazla seçiciden oluşur. Aradaki boşluk bağlayıcı özellik taşır. Sadece iki elemanla sınırlı değiliz, sınırsız eleman tanımlayabiliriz. ul ol ul em {color: gray} Torun Seçiciler çok kuvvetli olabilirler. Onlar (X)HTML ile yapılması imkanı olmayan işler yaparlar. Örnek bir dokümanda iki adet alan oluşturduğumuzu düşünün birinci alanın artalanı(background) mavi, ikinci alanın artalanının beyaz olduğunu düşünün ve her iki alanın içindede linkler olduğunu farz edelim. Tüm linkleri mavi olarak atamamız mümkün olmayacaktır çünkü ilk alanın artalanı mavi olduğu için linkler görünmeyecektir. Çözüm Torun Seçicilerindedir; ilk alan içindeki linklere farklı renk diğerlerine farklı renk tanımlaması yaparak bu işi halledebiliriz. td.sidebar {background: blue;} td.main {background: white;} td.sidebar a:link {color: white;} td.main a:link {color: blue;} Bir örnek daha verelim. blockquote ve p elemanları içindeki b elemanı ile blockquote içinde ve normal paragraf içinde geçen b elemanlarına özel bir atama yapmak istiyoruz bunun için kod yazarsak:

  1. Quisque volutpat.
  2. Curabitur feugiat
  3. Sapien a laoreet mollis
Internet Explorer 7 ve alt sürümlerinde ar

  • 8. Listeleme Özellikleri 124 8.2. Liste imleyici resmi (list-style-image) Yapısı: list-style-image: Aldığı Değerler: | none | inherit Başlangıç değeri: none Uygulanabilen elemanla

  • 8. Listeleme Özellikleri 125 Internet Explorer 7 ve alt sürümlerinde float uygulanmış liste elemanının list-style-image ile atanmış işaretleri görünmez. Tarayıcı Uyumu: Internet Explorer 4+ Fire

  • 8. Listeleme Özellikleri 126 Örnek 8-3 8. Listeleme Özellikleri 127 Tarayıcı Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 8.4. Liste biçemi (list-style) Yapısı: list-style: Aldığı Değerler:

  • 8. Listeleme Özellikleri 128 Tarayıcı Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ Yukarıdaki özellikler genel bir bilgi vermesi açısından anlatılmıştır. Günüm

  • 9. Kutu Modeli Özellikleri 129 9. Kutu Modeli Özellikleri CSS tüm HTML elemanlarını bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını kontrol eder. Bu elemanlar h

  • 9. Kutu Modeli Özellikleri 130 kenar içi boşluğu değerleri, üst-alt kenar çizgisi değerleri ve içerik alanı yüksekliği toplamı yükseklik değerini oluşturur. Kutu modelinin iki elemanı bulunur. B

  • 9. Kutu Modeli Özellikleri 131 Kenar çizgisi (Border): Elemanın kenar çizgilerini gösterir. Kenar dışı boşluğu (Margin): Elemanın kenar dışı boşluklarıdır. Sırası ile bu özellikleri inceleyelim.

  • 9. Kutu Modeli Özellikleri 132 9. Kutu Modeli Özellikleri 133 Tarayıcı Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 9.2.2. border-top-style, border-right-style, border-bottom-style, border-left-styl

  • 9. Kutu Modeli Özellikleri 134 Tarayıcı Uyumu: Internet Explorer 6+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 9.2.3. Kenar çizgisi genişliği (border-width) Yapısı: border-width: Aldığ

  • 9. Kutu Modeli Özellikleri 135 Uzunluk: Kenar çizgisi kalınlığı doğrudan belirtilen (göreli olmayan/hesaplanmayan) bir değerdir ve negatif olamaz. Örnek 9-3

  • 9. Kutu Modeli Özellikleri 136 Tarayıcı Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 9.2.4. border-top-width, border-right-width, border-bottom-width, border-left-widt

  • 9. Kutu Modeli Özellikleri 137 Kutu Modeli Özellikleri