CSS3 Öğreten Görüntülü USB Eğitim Seti (10 Saat Özel Anlatım)

Web Programlama Eğitim Seti

Dinamik Web sayfaları oluşturma elinizde.

Artık dinamik web siteleri yapabileceksiniz.

1) Başlarken

a) Görünüm ve Performans Avantajı

b) Tasarım Kolaylığı

c) Kolay Güncellenebilir

d) Tarayıcı Uyumu Dezavantajı

2) CSS Ana Yapısı

a) Seçiciler ve Bildirim Bloku

3) Genel CSS Seçicileri

a) Genel Seçici

b) Element Seçici

c) ID Seçicisi

d) Class Seçicisi

e) Torun Seçicisi

f) Çocuk Seçicisi

g) Bitişik Kardeş Seçicisi

h) Genel Kardeş Seçicisi

4) Nitelik Seçicileri (Attributes Selectors)

a) Basit Nitelik Seçicisi

b) Nitelik Değeri Seçicisi

c) Kısmî Nitelik Değeri Seçicisi

d) Dikkatedeğer Nitelik Değeri Seçicisi

e) Belirlenen Söz Dizimi ile Başlayan Nitelik Değeri Seçicisi

f) Belirlenen Söz Dizimi ile Biten Nitelik Değeri Seçicisi

g) İçinde Belirlenen Söz Dizimi Geçen Nitelik Değeri Seçicisi

5) Yapısal Sözde Sınıf Seçicileri

a) İlk Çocuk Element Seçicisi

b) Son Çocuk Element Seçicisi

c) İndeksi Baştan Başlayan Çocuk Elementi Seçmek

d) İndeksi Sondan Başlayan Çocuk Elementi Seçmek

e) İndeksi Baştan Başlayan Aynı Türdeki Elementi Seçmek

f) İndeksi Sondan Başlayan Aynı Türdeki Elementi Seçmek

g) Aynı Türdeki İlk Elementi Seçmek

h) Aynı Türdeki Son Elementi Seçmek

i) Tek Çocuk olan Aynı Tür Elementi Seçmek

j) Tek Çocuk olan Elementi Seçmek

k) İçi boş olan Elementleri Seçmek (:empty)

l) :target Sözde Sınıf Seçicisi

m) :not Sözde Sınıf Seçicisi

n) :enabled Sözde Sınıf Seçicisi

o) :disabled Sözde Sınıf Seçicisi

p) :checked Sözde Sınıf Seçicisi

q) ::selection (Seçili Metin) Sözde Sınıf Seçicisi

6) Sözde Sınıflar (Pseudo Classes) ve Sözde Elementler (Pseudo Elements)

a) :active Sözde Sınıfı

b) :hover Sözde Sınıfı

c) :first-letter Sözde Elementi

d) :first-line Sözde Elementi

7) CSS ile Konumlandırma (Positioning)

a) Float

b) Clear

c) Position

d) Z Ekseninde Konumlandırma

8) CSS Kutu Modeli (Box Model)

a) Block-Level ve Inline-Level Geçişi

b) Genişlik ve Yükseklik Değerleri

c) Elementin Diğer Elementlere olan Uzaklığı (margin)

d) Çerçeve Özellikleri (border)

e) İçeriğin Kenarlara olan Uzaklığı (padding)

f) Box-Sizing (Kutu Boyutu Hesaplama Özelliklerinin Değiştirilmesi)

g) Kutu Boyutu Hesaplama

9) Arkaplan Özellikleri (Background)

a) Arkaplan Rengi Tanımlama

b) Arkaplan Resmi Tanımlama

c) Arkaplanın Tekrarlama Ayarı

d) Arkaplan Konumunu Belirleme

e) Arkaplan Resmini Sabitleme

10) Font (Yazıtipi) Özellikleri

a) Yazıtipi Rengini Belirleme

b) Yazıtipi Ailesini (font-family) Belirleme

c) Yazıtipi Büyüklüğünü Belirleme

d) Yazıtipi Kalınlığını Belirleme

e) Yazıtipi Stilini Belirleme

f) Yazının Küçük-Büyük Harf ayarları

11) Metin (Text) Özellikleri

a) Metnin sola olan uzaklığını ayarlamak

b) Metni Hizalamak

c) Dikeyde Hizalama

d) Satır Yüksekliğini ayarlamak

e) Kelimeler arası boşluk değerini ayarlama

f) Harfler arası boşluk değerini ayarlama

g) Metin Dönüşümü (text-transform)

h) Metin Stilleri

i) Metinlere Gölge vermek (text-shadow)

12) @font-face kullanımı

13) Kutulara Gölge Vermek (box-shadow)

a) box-shadow ile kutuların dışına gölge vermek

b) box-shadow ile kutuların içine gölge vermek

c) box-shadow tarayıcı uyumu

14) Transform (Dönüştürme) İşlemleri

a) Tarayıcı Uyumu

b) Elementleri bir noktadan başka bir noktaya taşıma

c) Elementleri yeniden ölçeklendirme

d) Elementleri döndürme

e) Elementleri Eğip-Bükme

f) Transform işleminin Merkez Noktasını belirleme

15) Transition (Geçiş) İşlemleri

a) Elementlere Geçiş Efekti vermek

b) Geçiş Efektlerinin ne kadar süreceğini belirlemek

c) Geçiş Efektinin sayfa yüklendikten ne kadar sonra başlayacağını belirlemek

d) Kişisel Geçiş Efektleri

16) Animasyon Yapımı

a) Giriş

b) Tarayıcı Uyumu Konusu

c) CSS3ün Animasyonlarda Flashın yerini alması

d) Animasyon Tanımlama (@keyframes)

e) Elementlerde animasyon kullanma (animation)

f) Animasyon adını belirleme

g) Animasyonun ne kadar süreceğinin belirlenmesi

h) Animasyonlara Geçiş Efekti vermek

i) Animasyonların sayfa yüklendikten ne kadar sonra başlayacağının belirlenmesi

j) Animasyonun tekrar sayısının belirlenmesi

k) Animasyonun yönünü belirlemek

l) Animasyonun başlangıçtaki oynatma ayarlarını yapmak

17) Adım Adım Statik Web Sitesi Yapımı