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

• 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

  Burada bir şeyler yazar

  B

• .o...">3. Seçiciler 28 />

• 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

  <...">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 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