5 - Fatih Hayrioğlu, CSS (Stil Sablonları) // webdeyim.net yeni nesil yayincilik

5. Yazıtipi(Font) Özellikleri 79 (üst elemanlara(ebeveyn) bağlı olarak) Başlangıç değeri: medium Uygulanabilen elemanlar

) nerede(altta mı üstte mi) olacağını belirler. Bu özelliği IE(ie5+/mac destekliyor) desteklemiyor. Tüm tarayıcıların dest

11. Tablo Özellikleri 216 olarak belirlenen elemanlara Kalıtsallık: Var border-collapse, tablo hücrelerinin etrafındaki kenarlık ile olan mesafeyi azaltmamızı veya açmamızı sağlar. separate atam

11. Tablo Özellikleri 217
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.	Vestibulum felis.
Maecenas pulvinar, ante convallis pellentesque tristique, felis odio commodo metus, id euismod pede quam sit amet ligula.	Curabitur sit amet tellus. Suspendisse CSS(Stil Şablonları) Başlangıç için Fatih HAYRİOĞLU Yazar Hakkında Fatih Hayrioğlu, 1978 Trabzon/Sürmene doğmuştur. lk, orta ve lise eğitimini stanbul Zeytinburnu'nda tamamladıktan sonra Üniversiteyi Fırat Üniversitesi'nde okudu. Bölümü her ne kadar Ç Önsöz lk defa notlarımı bir yerde tutma ihtiyacı ile başlayan bir çalışmanın son noktasıdır bu kitap. Web sayfası kodlarken bazı problemlerle karşılaşıyordum ve bu sorunlara çözüm bulup yoluma devam Bu kitap kimin için? CSS'e başlangıç kitabı CSS'in teorik kısmını içerir. Tanımlamalar, özellikler ve CSS'e başlangıca ait bilgiler içerir. Kitap içindeki konuları anlamak ve örnekleri uygulamak için Kitabın yapısı Kitap genel olarak iki ana kısımdan oluşmaktadır. 1. Kısım CSS'in Temellleri CSS'e giriş: CSS'in tanımı genel bilgiler ve avantajlarını içeriyor. CSS'in yapısı: CSS'in yapısını oluşt Kitabın düzeni? Kitapta anlaşılabilirliği arttırmak ve görünümü güzelleştirmek için bazı işaretler ve şablonlar kullanılmıştır. Kitapta yer alan tüm şablonlar aşağıda sıralanmıştır. Sırası ile bu şab gösterir. Bu HTML elemanları belli gruplara ayrılır (blok seviyeli, satıriçi, yerleştirilen elemanlar gibi) bu gruplarda burada belirtilebilir. -Kalıtsallık alanı, özelliğin kalıtsal özelliğine sahip Kaynak kodlar Kitap içinde verilen örnekler özelliğin veya tanımın kavranması için verilen genel özelliklerdir. Kaynak kodları web sitemden indirebilirsiniz. Konuların daha iyi anlaşılabilmesi için k Hatalar Kitabı hazırlarken her ne kadar hata yapmamaya çalışsam da muhakkak bir yerde bir sorun çıkacaktır. Konu anlatımımdaki hatalarım, yazım hatalarım ve diğer hatalarımı bana site üzerinden ileti Teşekkür Bu kitabı yazarken devamlı beni oğlum yeter diye bilgisayar başından kaldırmaya çalışan biricik anneciğime. çindekiler 1 çindekiler çindekiler................................................................................................ 1 1. CSS'E GİRİŞ ............................................. çindekiler 2 2.4. CSS Yorumları ............................................................................... 23 3. Seçiciler .................................................................. çindekiler 3 5.3. Yazıtipi boyutu (font-size) ............................................................... 78 5.4. Yazıtipi kalınlığı (font-weight) ........................................... çindekiler 4 9.2.2. border-top-style, border-right-style, border-bottom-style, border-leftstyle ............................................................................................... 13 5 10.2.1. Konumlandırma özelliği (position) ............................................ 196 10.2.2. Üst, sağ, alt ve sol (top, right, bottom, left) .............................. 196 Göreceli Konu 1. CSS'E G R Ş 6 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 s 1. CSS'E G R Ş 8 1.2.1. Görünüm Avantajları CSS HTML'e göre birçok stil özelliğine sahiptir. CSS'in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürse 1. CSS'E G R Ş 9 1.2.3. Tasarım Tutarlılığı Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz, bu özellik sayesinde siteniz tutarlılık kazanacaktır. Web sayfanızdaki ilk sayfadan son sayfaya ka 1. CSS'E G R Ş 10 Ancak şunu da belirtmeliyim ki bu editörlerden fazla bir özellik ve işlevsellik beklemeyin. 1.3.1. CSS Editörleri Bu editörler sadece css yazmak için üretilen programlardır 1. CSS'E G R Ş 11 1.4. CSS'i Web Dokümanlarına Eklemek CSS'i (X)HTML sayfalarımıza eklemenin 4 yöntemi vardır. 1.4.1. Kod içinde (In-line) Direk olarak (X)HTML elemanın içine style özelliği 1. CSS'E G R Ş 12 Daha sonra bu kodu gereken sayfalarımıza uygularız. 1. CSS'E G R Ş 13 1. CSS'E G R Ş 14 kullanılırız. Ancak birçok web sayfası hazırlama editörü bu aracı içinde barındırır. Web sayfalarımız doğrulattığımızda sonuç olarak bize sayfamızda bir sorun varsa bunu ve niç 1. CSS'E G R Ş 15 Web tarayıcılarının DOCTYPE tiplerine göre farklılıklarını görmek için http://www.ericmeyeroncss.com/bonus/render-mode.html bir göz atın. Çok uğraşıp en iyi ve en doğru CSS kod 2. CSS'in Yapısı 16 2. CSS'in Yapısı CSS'in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda ikiye ayrılır. Özellik(Property) ve Değer( 2. CSS'in Yapısı 17 Şeklinde arada boşluk verilerek de bildirim yapılabilir. Burada ilk tanımlama yazı tipinin boyutunu ikinci tanımlama ise yazı tipinin ismini gösterir. leride bu konuya daha a 2. CSS'in Yapısı 18 Burada " / " Seçicinin yazı tipi boyutunu ve satır yüksekliğini gösterir. (yazıtipi boyutu/satır yüksekliği) 2.2. Gruplama Yukarıda hep bir seçiciyi sadece bir HTML elema 2. CSS'in Yapısı 19 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 54 Ad: Tarayıcı Uyumu: Internet Explorer 5.0+ Firefox 1+ Safari 1.3+ Opera 5.0+ CSS 1+ lk Çocuk Elemanını seçmek 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 Quisque volutpat. Curabitur feugiat 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 Ana sayfa - Web sitesinin açıl 9. Kutu Modeli Özellikleri 178 overflow: hidden eğer overflow:hidden değeri atarsak. Sınırladığımız kutunun dışına taşan kısımlar gösterilmeyecektir. Örnek 9-25 9. Kutu Modeli Özellikleri 179 } Ana sayfa - Web sitesinin açılış sayfası Ürünler D 9. Kutu Modeli Özellikleri 180 overflow: auto Son olarakta otomatik değeri vardır. Bu değeri atayınca kutu içeriğine göre otomatik işlem yapacaktır. Eğer taşma olmuyorsa kaydırma çubuğu çıkmayac 9. Kutu Modeli Özellikleri 181 Dikkat ederseniz overflow: scroll'dan farklı olarak sadece dikey kaydırma çubuğu çıkmıştır. Yatayda bir taşma olmadığı için yatay kaydırma çubuğu çıkmamıştır. Safa 9. Kutu Modeli Özellikleri 182 taşan kısımlara uygulanacak özellikleri(visible, scroll, hidden ve auto) atmamızı sağlar. overflow-y'de dikeyde aynı şeyi yapar. Firefox'unda 1.1 sürümünden itibar 9. Kutu Modeli Özellikleri 183 Internet Explorer 5.5+(kısmen) Firefox 1+ Safari 1.3+ Opera 3+ CSS 2+ clip, elemanın içeriğinin belli bir bölümünün gösterilmesi sağlar. Başlangıç değerinin auto a 9. Kutu Modeli Özellikleri 184 Bir örnek yapalım. CSS kodu: Örnek 9-27 < 9. Kutu Modeli Özellikleri 185 9. Kutu Modeli Özellikleri 186 Kalıtsallık: Yok Tarayıcı Uyumu: Internet Explorer 5.5+(kısmen) Firefox 1+ Safari 1.3+(kısmen) Opera 3.6+ CSS 2+ Görünürlük(visibility) özelliği nesnelerin görü 9. Kutu Modeli Özellikleri 187 Örnekte gördüğümüz gibi eleman görünmediği halde sayfadaki yerini korumaktadır. Ayrıca gizli nesneye atanan kenarlık ve Artalan rengide görünmemektedir. Ancak elem ...">9. Kutu Modeli Özellikleri 188 Kutu Modeli Özellikleri 9. Kutu Modeli Özellikleri 189 visiblity: collapse özelliği vardır. collapse tablo elemanlar için hidden etkisi yapar. Ancak burada bir fark var gizlenen elemanlar yerini korumaz. Ayrıca bu özel 10. Yüzen kutu ve Konumlandırma Özellikleri 190 10. Yüzen kutu ve Konumlandırma Özellikleri 10.1. Yüzen kutu özellikleri CSS ile web sitesi kodlamanın en önemli özelliklerinden iki tanesidir f 10. Yüzen kutu ve Konumlandırma Özellikleri 191 /> Untitled Document 10. Yüzen kutu ve Konumlandırma Özellikleri 192 Internet Explorer 4+ Firefox 1+ Safari 1.3+ Opera 3.6+ CSS 1+ Bir elemana float uygulandığında, float uygulanan kutu kapsayıcı kutunun veya diğer 10. Yüzen kutu ve Konumlandırma Özellikleri 193 Eğer kapsayıcı kutu genişliği her üçünün sığacağı kadar değil ise sondaki kutu kendiliğinden aşağı kayacaktır. Eğer kutular farklı yükseklikte ise 10. Yüzen kutu ve Konumlandırma Özellikleri 194 Örnek 10-2 10. Yüzen kutu ve Konumlandırma Özellikleri 195 Tarayıcı Uyumu: Internet Explorer 3+ Firefox 1+ Safari 1.3+ Opera 4+ CSS 1+ 10.2. Konumlandırma Özellikleri CSS ile web sayfası kodlamanın üç 10. Yüzen kutu ve Konumlandırma Özellikleri 196 Satıriçi kutular yatay olarak tasarlanır. Yatay boşluk kenar dış boşluğu(margin), kenar iç boşluğu(padding) ve kenar çizgisi ile hesaplanır. Bu ne 10. Yüzen kutu ve Konumlandırma Özellikleri 197 Internet Explorer 4+(kısmen yüzde ve uzunluk değerlerini , IE6 dan sonra inherit hariç hepsini) Firefox 1+ Safari 1.3+ Opera 5+ CSS 2+ Göreceli 10. Yüzen kutu ve Konumlandırma Özellikleri 198 Mutlak konumlandırılmış elemanın konumu en yakındaki üst elemanın konumuna bağlıdır. Eğer bir ata elemanın konumu belirlenmemişse elemanımız ana b 10. Yüzen kutu ve Konumlandırma Özellikleri 199 } ..... Tel: 0845 838 6163 Not:Bu kullanım gelişmiş tarayıcılar için geçerlidir. IE 5.5 ve IE 6(W 10. Yüzen kutu ve Konumlandırma Özellikleri 200 11. Tablo Özellikleri 213	Kota(GB)	Bağlantı Ücreti**	Aylık Ücret	Limitin Üzerindeki Her MB için Ücret***
1024/256â?²e kadar	4
hücre3	hücre4