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

Fatih Hayrioğlu, CSS (Stil Sablonları)

çindekiler 1 çindekiler çindekiler................................................................................................ 1 1. CSS'E G

çindekiler 1 çindekiler çindekiler................................................................................................ 1 1. CSS'E GİRİŞ ......................................................................................... 7 1.1. CSS'in tanımı ve genel bilgi ............................................................... 7 1.2. CSS'in Avantajları ............................................................................ 7 1.2.1. Görünüm Avantajları ................................................................... 8 1.2.2. Kullanım Kolaylığı ....................................................................... 8 1.2.3. Tasarım Tutarlılığı....................................................................... 9 1.2.4. Daha az Dosya Boyutları ............................................................. 9 1.2.5. Gelecek Vaat ediyor .................................................................... 9 1.3. CSS Editörleri .................................................................................. 9 1.3.1. Metin Editörleri .......................................................................... 9 1.3.1. CSS Editörleri .......................................................................... 10 1.3.3. HTML ve Web Programlama Editörleri .......................................... 10 1.4. CSS'i Web Dokümanlarına Eklemek .................................................. 11 1.4.1. Kod içinde (In-line) ................................................................... 11 1.4.2.

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