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

3. Seçiciler 30 3.3. Sınıf(Çoğul) mı? Tekil mi? Yukarıda Tekil Seçicisi için her ne kadar da bir sayfada sadece bir defa kullanılır diye tanıml

3. Seçiciler 30 3.3. Sınıf(Çoğul) mı? Tekil mi? Yukarıda Tekil Seçicisi için her ne kadar da bir sayfada sadece bir defa kullanılır diye tanımlasak de kodlamacının sayfada birçok yerde kullanmasına tarayıcılar ses çıkarmaz, yani hata mesajı vermez. Ancak Bu elemanları DOM(Belge Nesne Modeli) betiklerinde kullanırken id atamasını bir kaç yerde yaptığımızda hata meydana gelecektir. Bu nedenle her ne kadar tarayıcılar izin verse de Tekil Seçicicilerini sayfalarımızda bir kez kullanmalıyız. Birden fazla kullanacağımız elemanlar için Sınıf Seçicisini kullanmalıyız. Bu kodumuzu daha kullanışlı ve temiz yapacaktır. Sınıf ve Tekil Seçicileri küçük-büyük harfe karşı duyarlıdır; Örnek 3-5 CSS'in yapısı

Burada bir şeyler yazar

B

  • .o...">3. Seçiciler 28 /> CSS'in yapısı

  • 3. Seçiciler 29 onemli metinler için kalın, uyari için yazının şeklini eğik olarak belirliyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class="onemli uyari" olarak ata

  • 3. Seçiciler 30 3.3. Sınıf(Çoğul) mı? Tekil mi? Yukarıda Tekil Seçicisi için her ne kadar da bir sayfada sadece bir defa kullanılır diye tanımlasak de kodlamacının sayfada birçok yerde kullanma

  • 3. Seçiciler 31 p.onemliBilgi { font-weight: bold; }

    Uygulama olmaz .

    Yukarıdaki kod uygulanmayacaktır çünkü " B " bir yerde

  • 3. Seçiciler 32 3.4. (X)HTML Doküman Hiyerarşisini Anlamak Seçici(Selector) ve doküman arasındaki ilişkiyi anlayabilmemiz için, dokümanların nasıl planlandığını bir göz atmamız gerekir. Aşağıda

  • 3. Seçiciler 33 CSS'in güçlü olmasının en büyük nedeni (X)HTML elemanları arasındaki ilişkiden yararlanmasıdır. (X)HTML dokümanları gizli bir hiyerarşi ile oluşturulur. Bu hiyerarşi içinde tüm (

  • 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çicile

  • 3. Seçiciler 35 blockquote b, p b {color: gray} Koda dikkat edersek her iki atamayı ayrı ayrı yapmak yerine araya bir virgül koyarak birlikte yaptığımızı görürsünüz. Tarayıcı Uyumu: Internet Exp

  • 3. Seçiciler 36 Yukarıdaki durumda sadece ilk strong elemanı için tanımlama gerçekleşecektir. kincisi için herhangi bir stil tanımı uygulanmayacaktır. Yukarıda ana örneğimizin bir kısmı göste

  • 3. Seçiciler 37 Tarayıcı Uyumu : Internet Explorer 6.0: desteklemiyor, 7.0 destekliyor Firefox1+ Safari1.3+ Opera 9.2+ CSS 2+ 3.7. Bitişik Kardeş Seçiciler(Next Sibling Selector) Bitişik Kar

  • 3. Seçiciler 38 Dokümanın yapısı: Biz burada h2 ve h3 arasında boşluk vermek için yukarıdaki kodu kullandık Tarayıcı Uyumu: Internet Explorer 5.5, 6.0: desteklemiyor (7.0 destekliyor) Firefox

  • 3. Seçiciler 39 sağlar. Bu sayede birçok kod yığınından kurtulmuş oluruz ve kodlarımız bir düzene girer. Bu kuralları uyguladıkça önemini daha iyi anlayacağız. Çocuk Seçicileri ve Bitişik Kardeş

  • 3. Seçiciler 40 Ayrıca bir eleman içindeki tüm elemanlara uygulamak istersek Örnek 3-10

  • 3. Seçiciler 41 Paragraf içindeki tüm elemanları kırmızı yapar. Tarayıcı Uyumu : Internet Explorer 5.0+ Firefox 1+ Safari 1.3+ Opera 5.0+ CSS 2+ 3.9. Özellik Seçicileri(Attribute Selectors)

  • 3. Seçiciler 42 img[src="grafik.gif"] { border: 1px solid #000} Dört çeşit Özellik Seçicisi vardır. 3.9.1. Basit Özellik Seçicisi Belirli bir etiketin(örn:img) özelliğine(örn:alt) göre tanım

  • 3. Seçiciler 43 Yukarıdaki kodlamada birden fazla tanımı vardır. Ama biz sadece alt tanımı yaptıklarımıza belli özellikler atamak istiyoruz. Bunun için Basit Özellik Seçicisini kullanabili

  • 3. Seçiciler 44 Örnek 3-12 <

  • 3. Seçiciler 45 Genelde formlarda tanımlama yaparken sadece metin girişi yaptığımız alanlara atama yapmakta zorlanırız. Bunun sebebi etiketini sadece metin girişi için kullanılmamasıdır,

  • 3. Seçiciler 46 Şekil3.9 Kısmi özellik seçicilerin yapısı Örnek 3-13

  • 3. Seçiciler 47 Türkçe karakterde sorunsuz çalışıyor. Siz kullanabileceğimiz yerleri hesap edin artık. Tarayıcı Uyumu: Internet Explorer 5.5, 6.0: desteklemiyor 7.0: destekliyor ; Firefox 1+ Saf

  • 3. Seçiciler 48 Örnek 3-14 <

  • 3. Seçiciler 49 Tarayıcı Uyumu: Internet Explorer 5.5, 6.0: desteklemiyor 7.0: destekliyor ; Firefox 1+ Safari1.3+ Opera 7.0+ CSS 2+ Bunların dışında CSS3 ile birlikte gelen dört tane daha yeni

  • 3. Seçiciler 50 Sözde(Pseudo) sınıf ve elemanları HTML sınıf özelliği olarak belirtilmemiştir. Normal sınıflar sözde sınıfları ve sözde elemanları ile kullanılabilir. a.disariyalinkller:link, a.

  • 3. Seçiciler 51 }

    gooogle

    yahoo

    3. Seçiciler 52 Internet Explorer 5.0+ Firefox 1+ Safari 1.3+ Opera 5.0+ CSS 1+ Sözde Dinamik Sınıf Seçicileri Sözde Dinamik Sınıfları sayfa görünümüne çok büyük katkılar yapabilir. Bu sınıf

  • y...">3. Seçiciler 53

    yahoo

    fatih

    :focus için bir örnek verece

  • 3. Seçiciler 55 CSS'in yapısı

    <...">3. Seçiciler 57 p:lang(fr) { color: red; }

    Bonjour le monde!

    Tarayıcı Uyumu: Internet Explorer 5.5, 6.0, 7.0 desteklemiyo

  • 3. Seçiciler 58 edilmemiş linklerin :hover özelliğini farklı atamak istesek. Örnek 3-20

  • 3. Seçiciler 59 Sıralama önemli değildir. Tarayıcı Uyumu: Internet Explorer 5.5, 6.0, 7.0 desteklemiyor Firefox 1+ Safari 1.3+ Opera 9.0: desteklemiyor CSS 1+ 3.10.2. Sözde eleman seçicileri

  • ...">3. Seçiciler 60 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • 3. Seçiciler 61 first-line (ilk satır) Bir metnin ilk elemanına stil atamak için kullanılır. Örneğin paragraflarınızın ilk satırlarını renklendirmek için kullanabiliriz. Örnek 3-22

  • 3. Seçiciler 62 Tarayıcı Uyumu: Internet Explorer 5.0+ Firefox 1+(kısmen) Safari 1.3+ Opera 5.0+ CSS 1+ before ve after elemanları Bir elemanın öncesine ve sonrasına bir içerik veya özellik

  • p.not...">3. Seçiciler 63 CSS'in yapısı 6. Metin(Text) Özellikleri 89 p{ text-indent: 10px; }

    Vestibulum felis. Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod

  • 6. Metin(Text) Özellikleri 90 Tarayıcı Uyumu: Internet Explorer 3+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 6.2. Metin hizalama (text-align) Bir elemanın diğerlerine göre hizasını belirlemek

  • 6. Metin(Text) Özellikleri 91 Tarayıcı Uyumu: Internet Explorer 3+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 6.3. Dikey hizalama (vertical-align) Bir elemanın içeriğinin dikey hizalaması için

  • 6. Metin(Text) Özellikleri 92 middle | bottom | text-bottom Başlangıç değeri: baseline Uygulanabilen elemanlar: satıriçi seviyeden ve table-cell elemanları Kalıtsallık: Yok Örnek 6-3

  • 6. Metin(Text) Özellikleri 93 Internet Explorer 7 ve alt sürümlerinde bottom ve top değerleri textbottom ve text-top gibi yorumlanır. Tarayıcı Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+

  • 6. Metin(Text) Özellikleri 94 Örnek 6-4 6. Metin(Text) Özellikleri 95 Internet Explorer 7 ve alt sürümlerinde eğer satır içinde yerleştirilen bir eleman(resim veya form elemanları gibi) varsa bu özelliği yanlış uygular. Firefox 1.0.0.

  • 6. Metin(Text) Özellikleri 96 Sözcükler arası boşluk algoritmaları kullanıcı arayüzüne bağlıdır. Sözcükler arası boşluklar ayrıca satır iki kenara yayılarak hizalama yapılırken değişebilir. Örne

  • 6. Metin(Text) Özellikleri 97 Firefox 2 ve alt sürümlerinde ve Opera9.2 ve alt sürümlerinde Satıriçi çocuk elemanların arasındaki boşluğun asgari genişliği sıfırdır. Tarayıcı Uyumu: Internet Exp

  • 6. Metin(Text) Özellikleri 98 Örnek 6-6 6. Metin(Text) Özellikleri 99 Tarayıcı Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 6.7. Harf Büyüklüğü (text-transform) Metnin büyük-küçük harf çevirmek için kullanı

  • 6. Metin(Text) Özellikleri 100 Örnek 6-7 6. Metin(Text) Özellikleri 101 Tarayıcı Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 6.8. Satırın altını, üstünü, ortasını çizme ve yanıp sönme (text-decoration) Bu ö

  • 6. Metin(Text) Özellikleri 102 Örnek 6-8 6. Metin(Text) Özellikleri 103 Internet Explorer 7 ve altı sürümlerinde blink değerini desteklemez. Internet Explorer 6 ve altı sürümlerinde line-through ile çizilen çizgi diğer tarayıcılara gör

  • 6. Metin(Text) Özellikleri 104 6.10. Boşlukların korunması (white-space) Yapısı: white-space: Aldığı Değerler: normal | pre | nowrap | inherit Başlangıç değeri: normal Uygulanabilen ele

  • 6. Metin(Text) Özellikleri 105 Internet Explorer 7 ve alt sürümlerinde pre-line veya pre-wrap değerlerini desteklemiyor. textarea elemanı için normal ve pre atamaları pre-wrap gibi davranır. tex

  • 6. Metin(Text) Özellikleri 106 Aldığı Değerler: ltr | rtl | inherit Başlangıç değeri: ltr Uygulanabilen elemanlar: tüm elemanlar Kalıtsallık: Var Bu özelliğin aşağıdakileri belirler: Bloğun yaz

  • 6. Metin(Text) Özellikleri 107 Tarayıcı Uyumu: Internet Explorer 5.5+ Firefox 1+ Safari 1.3+ Opera 9.2+ CSS 2+ 6.12. Çok yönlülük algoritması (unicode-bidi) özelliği Yapısı: unicode-bidi:

  • 6. Metin(Text) Özellikleri 108 tanımlamalar yapmalıyız. Ayrıntılı bilgi için http://www.unicode.org/reports/tr9/ adresini inceleyiniz. Bu özellik Unicode çok yönlülük algoritmasının iç içe seviy

  • 7. Artalan (Background) Özellikleri 109 7. Artalan (Background) Özellikleri Artalan(Bacground) yukarıdaki resimde dolgu alanı(padding) ve içerik alanını(paragraf) kapsar. Artalan özellikleri

  • 7. Artalan (Background) Özellikleri 110 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 7. Artalan (Background) Özellikleri 111 Tarayıcı Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 7.2. Artalan resmi (background-image ) Elemanların artalanına resim ekle

  • 7. Artalan (Background) Özellikleri 112 Tarayıcı Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 7.3. Artalan resim yenileme (background-repeat) background-repeat özelli

  • 7. Artalan (Background) Özellikleri 113 no-repeat [yineleme]: Resim yinelenmez; resmin sadece bir kopyası oluşturulur. Örnek 7-3

  • 7. Artalan (Background) Özellikleri 114 Safari 2 ve alt sürümlerinde bu özellikle ilgili bazı sorunlar vardır: bacground-repeat değeri no-repeat olarak atanmış olan artalan resimleri tekrarlamam

  • 7. Artalan (Background) Özellikleri 115 Örnek 7-4 7. Artalan (Background) Özellikleri 116 Tarayıcı Uyumu: Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ 7.5. Artalan resmi konumu (background-position) background-position özel

  • 7. Artalan (Background) Özellikleri 117 En kolay kullanım şekli; 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ı

  • 7. Artalan (Background) Özellikleri 118 ligula. Curabitur sit amet tellus. Suspendisse potenti.

    Quisque volutpat. Curabitur feugiat, sapien a laoreet mollis, leo sapien pellentesque nisi,

  • 7. Artalan (Background) Özellikleri 119 Yapısı: background: Aldığı Değerler: || || || ||

  • 7. Artalan (Background) Özellikleri 120 Tarayıcı Uyumu: Internet Explorer 3+ Firefox 1+ Safari 1.3+(kısmen) 3+ Opera 3.6+ CSS 1+

  • 8. Listeleme Özellikleri 121 8. Listeleme Özellikleri Liste özellikleri listelerin genel görsel biçimi ayarlamamızı sağlar. lk olarak listeleme amaçlı kullanılsa da şimdilerde menü yapımında ku

  • 8. Listeleme Özellikleri 122 armenian: Geleneksel Ermenice numaralama. cjk-ideographic: Düz sembolik (Çince/Japonca) numaralama hiragana: a, i, u, e, o, ka, ki, ... katakana: A, I, U, E, O, KA,

  • 8. Listeleme Özellikleri 123

    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