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

1. CSS'E G R Ş 7 1. CSS'E G R Ş 1.1. CSS'in tanımı ve genel bilgi CSS (Cascading Style Sheets Stil Şablonları), Web dokümanlarına stil ekleme

1. CSS'E G R Ş 7 1. CSS'E G R Ş 1.1. CSS'in tanımı ve genel bilgi CSS (Cascading Style Sheets Stil Şablonları), Web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir. Web sayfalarının yapılarını düşündüğümüzde 3 kısma ayıra biliriz. çerik kısmı, biçimlendirme kısmı ve dinamik kısım. çerik kısmı, HTML kodlarını içeren sayfa asıl içeriğini oluşturan birimleri oluşturma kısımdır. Bu kısım genelde metinlerden oluşsa da, resim, animasyon ve video gibi elemanlarıda içerir. Biçimlendirme kısmı, içerik kısmını kullanıcıya nasıl görüntüleneceğini gösteren kısımdır. Sayfanın biçimini belirler. Kullanıcıya daha okunaklı ve kullanışlı sayfa sunmak için gerekli elemanları içerir. Dinamik kısım, Javascript ile yapılan dinamik işlemleri içerir. Etkileşimli sayfalar oluşturmak için kullanılır. Eskiden ki hala bu şekilde kodlama yapanlar mevcut. çerik kısmı ve biçimlendirme kısmı içi içe kodlama yapardık, örneğin yazıtipi tanımı için etiketini kullanırdık. Eski kodlama yöntemi ile zaman, hız ve erişebilirlik açısından büyük kayıplarımız vardı. CSS biçimlendirme kısmının yönetimini sağlamak için kullanılır. çerik kısmı ile biçimlendirme kısmının ayrılmasını sağlayan CSS bize birçok avantajlar sağlar. Örneği 10.000 sayfası olan bir siteyi tek css dokümanı yardımı ile biçimlendirmemizi sağlar. CSS 1996â?²da W3C tarafından duyuruldu. Son olarak(Ocak 2003'den beri) CSS2.1 sürümü yürürlüktedir. CSS3.0â?²da çalışmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulaşabilirsiniz. Tablosuz Web Sayfası kodlama tekniğini kullanmayanlar CSS'in ehemmiyetini tam olarak anlayamayacaktır. 1.2. CSS'in Avantajları CSS kullanımının önemli avantajlarından bazıları:

  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