CSS turkce egitim e-book

Toplam 235 sayfadan olusan bu Css egitim kitabi Css`e ilk adim atanlar icin cok iyi bir kaynak. E-bookta konu anlatimlarinin yanisira bir cok orneklerde bulunmaktadir. Bu kitap Css ogrenmek isteyenlere cok yardimci olacaktir. Kitabim dili Turkcedir.  Anlatim konu basliklarini asgida gorebilirsiniz.

1. CSS’E GiRiS …………………………………………………………………………….. 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ıgı …………………………………………………………….. 8
1.2.3. Tasarım Tutarlılıgı …………………………………………………………….. 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. <style> Elemanı Kullanılarak …………………………………………….. 11
1.4.3. Harici CSS Dosyası Kullanımı ……………………………………………… 11
1.4.4. @import le Eklemek ………………………………………………………. 12
1.5. Standart mod, garip mod ve Doctype Kullanımı ……………………………. 13
1.5.1. Web Sayfalarını Dogrulama “Onaylama” ……………………………….. 13
1.5.2. Web tarayıcı mod’ları ………………………………………………………. 14
1.5.3. DOCTYPE Geçisleri ………………………………………………………….. 14
2. CSS’in Yapısı ………………………………………………………………………….. 16
2.1. Seçiciler ve Bildirim Blogu ……………………………………………………… 16
2.2. Gruplama …………………………………………………………………………. 18
2.3. Degerler …………………………………………………………………………… 20
2.3.1. Anahtar sözcükler …………………………………………………………… 20
2.3.2. Uzunluk Degerleri …………………………………………………………… 21
2.3.3. Renk Degerleri ………………………………………………………………. 22
2.3.4. URL Degerleri ……………………………………………………………….. 22
2.3.5. Dizgeler(Strings) ……………………………………………………………. 23
çindekiler 2
2.4. CSS Yorumları ……………………………………………………………………. 23
3. Seçiciler ………………………………………………………………………………… 25
3.1. Sınıf Seçicisi(Class Selector) …………………………………………………… 25
3.2. Tekil Seçiciler(Id Selector) …………………………………………………….. 29
3.3. Sınıf(Çogul) mı? Tekil mi? ……………………………………………………… 30
3.4. (X)HTML Doküman Hiyerarsisini Anlamak …………………………………… 32
3.5. Torun Seçicileri (Descendant Selectors) …………………………………….. 34
3.6. Çocuk Seçicileri(Direct Child Selectors) ……………………………………… 35
3.7. Bitisik Kardes Seçiciler(Next Sibling Selector) ……………………………… 37
3.8. Evrensel Seçiciler(Universal Selector) ……………………………………….. 39
3.9. Özellik Seçicileri(Attribute Selectors) ………………………………………… 41
3.9.1. Basit Özellik Seçicisi ……………………………………………………….. 42
3.9.2. Özellik Degeri Seçicisi ……………………………………………………… 43
3.9.3. Kısmi Özellik Degeri Seçicisi ………………………………………………. 45
3.9.4. Dikkate Deger Özellik Seçicisi …………………………………………….. 47
3.10. Sözde(Pseudo)-sınıfları ve Sözde(Pseudo)-elemanları …………………… 49
3.10.1. Sözde Sınıf Seçicileri ……………………………………………………… 50
Sözde Link Sınıfı …………………………………………………………………….. 50
Sözde Dinamik Sınıf Seçicileri …………………………………………………….. 52
lk Çocuk Elemanını seçmek ………………………………………………………. 54
:lang sözde sınıfı ……………………………………………………………………. 56
Sözde sınıfları birlestirmek ………………………………………………………… 57
3.10.2. Sözde eleman seçicileri …………………………………………………… 59
first-letter (ilk harf) ………………………………………………………………… 59
first-line (ilk satır) ………………………………………………………………….. 61
before ve after elemanları …………………………………………………………. 62
4. Basamaklı Yapı ve Kalıtsallık ……………………………………………………….. 65
4.1. CSS’de Tanımlamalar ve Etkinlikleri(Specificity) …………………………… 65
4.2. !important ………………………………………………………………………… 70
4.3. Kalıtsallık(Inheritance)………………………………………………………….. 71
4.3.1. inherit (kalıtsallık)degeri …………………………………………………… 73
5. Yazıtipi(Font) Özellikleri …………………………………………………………….. 75
5.1. Renk (color) özelligi …………………………………………………………….. 75
5.2. Yazıtipi ailesi (font-family) …………………………………………………….. 76
çindekiler 3
5.3. Yazıtipi boyutu (font-size) ……………………………………………………… 78
5.4. Yazıtipi kalınlıgı (font-weight) …………………………………………………. 80
5.5. Yazıtipi biçemi (font-style) …………………………………………………….. 82
5.6. Yazıtipi farklılıkları (font-variant) ……………………………………………… 84
5.7. Yazıtipi (font) …………………………………………………………………….. 85
6. Metin(Text) Özellikleri ……………………………………………………………….. 88
6.1. Metin Girintileme (text-indent)………………………………………………… 88
6.2. Metin hizalama (text-align) ……………………………………………………. 90
6.3. Dikey hizalama (vertical-align) ……………………………………………….. 91
6.4. Satırlar arası yükseklik (line-height) …………………………………………. 93
6.5. Sözcükler arası mesafe (word-spacing) ……………………………………… 95
6.6. Harfler arası mesafe (letter-spacing) ………………………………………… 97
6.7. Harf Büyüklügü (text-transform) ……………………………………………… 99
6.8. Satırın altını, üstünü, ortasını çizme ve yanıp sönme (text-decoration) . 101
6.9. Metin gölgelendirme (text-shadow) …………………………………………. 103
6.10. Boslukların korunması (white-space) ………………………………………. 104
6.11. Metin yazma yönü(direction) ……………………………………………….. 105
6.12. Çok yönlülük algoritması (unicode-bidi) özelligi …………………………. 107
7. Artalan (Background) Özellikleri ………………………………………………….. 109
7.1. Artalan rengi (background-color) ……………………………………………. 109
7.2. Artalan resmi (background-image ) …………………………………………. 111
7.4. Artalan resim baglılıgı (background-attachment) …………………………. 114
7.5. Artalan resmi konumu (background-position) ……………………………… 116
7.6. Artalan (background) ………………………………………………………….. 118
8. Listeleme Özellikleri …………………………………………………………………. 121
8.1. Liste imleyici tipi (list-style-type ) …………………………………………… 121
8.2. Liste imleyici resmi (list-style-image) ……………………………………….. 124
8.3. Liste imleyici konumu (list-style-position) ………………………………….. 125
8.4. Liste biçemi (list-style) ………………………………………………………… 127
9. Kutu Modeli Özellikleri ………………………………………………………………. 129
9.1. Genel Tanımlar ………………………………………………………………….. 130
9.2. Kenarlık Çizgisi(Border) Özellikleri …………………………………………… 131
9.2.1. Kenar çizgisi biçemi (border-style) ……………………………………… 131
çindekiler 4
9.2.2. border-top-style, border-right-style, border-bottom-style, border-leftstyle
………………………………………………………………………………….. 133
9.2.3. Kenar çizgisi genisligi (border-width) …………………………………… 134
9.2.4. border-top-width, border-right-width, border-bottom-width, borderleft-
width ……………………………………………………………………………. 136
9.2.5. Kenar Çizgisi Rengi (border-color) ……………………………………… 138
9.2.6. border-top-color, border-right-color, border-bottom-color, border-leftcolor
………………………………………………………………………………….. 139
9.2.7. Kenar Çizgisi (border) …………………………………………………….. 141
9.3. Kenar Dıs Boslugu(Margin) Özellikleri ………………………………………. 144
9.3.1. Üst Kenar dıs boslugu (margin-top) ……………………………………. 144
9.3.2. Sag kenar dıs boslugu (margin-right ) …………………………………. 146
9.3.3. Alt kenar dıs boslugu (margin-bottom) ………………………………… 147
9.3.4. Sol kenar dıs boslugu (margin-left) …………………………………….. 149
9.3.5. Kenar dıs boslugu (margin) ………………………………………………. 151
9.4. Kenar iç boslugu (Padding) özellikleri ……………………………………….. 155
9.4.1. Üst kenar içi boslugu(padding-top) …………………………………….. 155
9.4.2. Sag kenar içi boslugu(padding-right ) ………………………………….. 157
9.4.3. Alt kenar içi boslugu (padding-bottom) ………………………………… 158
9.4.4. Sol kenar içi boslugu (padding-left) …………………………………….. 160
9.4.5. Kenar içi boslugu (padding) ……………………………………………… 162
9.5. Boyut Tanımlama Özellikleri ………………………………………………….. 165
9.5.1. Genislik (width)…………………………………………………………….. 165
9.5.2. Yükseklik (height ) ………………………………………………………… 166
9.5.3. Asgari genislik ve yükseklikler (min-width, min-height) …………….. 168
9.5.4. Azami genislik ve yükseklik (max-width, max-height) ………………. 170
9.6. Görsel Sonuç Özellikleri ……………………………………………………….. 174
9.6.1. Tasma (Overflow) ………………………………………………………….. 174
9.6.2. Kırpma (clip) ……………………………………………………………….. 182
9.6.3. Görünürlük (visibility) …………………………………………………….. 185
10. Yüzen kutu ve Konumlandırma Özellikleri ……………………………………… 190
10.1. Yüzen kutu özellikleri …………………………………………………………. 190
10.1.1. float özelligi ………………………………………………………………. 190
10.1.2. clear özeligi ……………………………………………………………….. 193
10.2. Konumlandırma Özellikleri …………………………………………………… 195
5
10.2.1. Konumlandırma özelligi (position) …………………………………….. 196
10.2.2. Üst, sag, alt ve sol (top, right, bottom, left) ………………………… 196
Göreceli Konumlandırma(position:relative) ……………………………………. 197
Mutlak(Absolute) Konumlandırma ………………………………………………. 197
Sabit Konumlandırma (position:fixed) ………………………………………….. 199
10.3. z-index özelligi ………………………………………………………………… 203
10.4. display özelligi …………………………………………………………………. 209
11. Tablo Özellikleri …………………………………………………………………….. 211
11.1. Baslık Konumu Özelligi (table-layout) ……………………………………… 211
11.2. Tablo planı özelligi (caption-side) ………………………………………….. 214
11.3. Hücre Bosluklarını ayarlama (border-collapse) …………………………… 215
11.4. Hücre dısı bosluklarını ayarlama (border-spacing) ………………………. 217
11.5. Bos hücre ayarları (empty-cells) ……………………………………………. 219
12. Kullanıcı Arayüzü Özellikleri ……………………………………………………… 222
12.1. Fare imleci özellikleri tanımlama (cursor) …………………………………. 222
12.2. Dıs hat çizgisi özellikleri(outline) …………………………………………… 223
12.2.1 Dıs hat çizgisi biçemi (outline-style) …………………………………… 224
12.2.2. Dıs hat çizgisi genisligi (outline-width) ……………………………….. 225
12.2.3. Dıs hat çizgisi rengi (outline-color) ……………………………………. 225
12.2.4. Dıs hat çizgisi (outline) ………………………………………………….. 226
12.3. Sistem yazıtipi ve rengi özellikleri ………………………………………….. 227

Indir