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

4. Basamaklı Yapı ve Kalıtsallık 71 h1 {color: blue !important;} Tanımlama yukarıdaki gibi değiştirildiğinde h1 elemanı mavi renkte görünecektir

4. Basamaklı Yapı ve Kalıtsallık 71 h1 {color: blue !important;} Tanımlama yukarıdaki gibi değiştirildiğinde h1 elemanı mavi renkte görünecektir. Eğer değer aynı olursa(mesela 0013 e 0013) ne olur, bu durumda son yapılan tanımlamanın özellikleri uygulanır. 4.3. Kalıtsallık(Inheritance) XHTML dokümanlarının yapısından ve CSS ile olan ilişkisinden bir önceki konuda bahsetmiştik. XHTML öğeleri bir biri ile bir ailenin birbiri ile olan bağı gibi bağlıdır. Hatırlıyorsanız bir soy ağacı benzetmesi yapmıştık. şte bu soy ağacının öğeleri arasında bir kalıtsallık söz konusudur. Ebeveynden çocuğuna geçen özellikler gibi XHTML öğeleri arasında CSS özellikleride kalıtsal olarak alt elemanları(çocuk eleman) etkiler. Kalıtsallık; CSS ile web sayfası kodlarken tüm elemanlara tek tek atama yapabildiğimiz gibi birde bir elemana atama yaparız ve bu özellik tüm alt(çocuk elemanları) elemanlarınada uygulanır buna kalıtsallık denir. CSS'in birçok özelliğinin kalıtsallık özelliği vardır. Kitabın ilerleyen sayfalarında CSS özellikleri verilirken her özelliğin kalıtsallık özelliği hakkında bilgi verilecektir. Bazı CSS özelliklerinde kalıtsallık yoktur. Örneğin margin, padding ve border özellikleri gibi tüm liste sağda Örnek bir kodlama yaparsak: Örnek 4-3 Basamaklı Yapı ve Kalıtsallık

Buradaki içerik ortalanacaktır

text-align özelliğinin kalıtsallığı olduğu için buradaki içerikte ortalanacaktır

  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