CSS Eğitimi
Markanız için 300X300 alan.
CSS eğitimine başlanmadan önce HTML'nin mantığının ve ne olduğunun bilinmesi kesinlikle gereklidir.
CSS eğitimi ile ilgili başlıca belgeler bu sayfada toplandı.
Önermesem de işin teorisini bırakıp hızlı bir başlangıç yapmak istiyorsanız CSS Hızlı Kurs ile başlayın.
CSS eğitiminden sonra öbeklere ayrılmış CSS özelliklerine göz atabilirsiniz.
En sonda ise CSS - İpuçları bölümü var. Burada, CSS eğitimine yeni başlayanlara hatta iyi derecede CSS bilenlere bile sonunda buldum
dedirtecek türden örnekler var.
CSS Özelliklerinin tümü bu sayfada.
CSS Eğitimi ve İçeriğiyle ilgili Güncellemeleri İzleyin
RSS sayfasında RSS beslemelerinin tümünü ve nasıl yapıldığını bulabilirsiniz. CSS Besleme ile CSS içeriğimi izleyebilir, abone olabilirsiniz.
Benimle İletişimde Kalın!
Eğitimine eklenmesini istediğiniz içerik için, görüşleriniz, önerileriniz, ve şikayetleriniz için benimle iletişime geçmekten çekimeyin!
CSS Eğitimi - Hızlı Kurs
CSS eğitimine hızlı kurs ile başlamak isterseniz CSS hızlı kursunda bazı tanımlar, yazım kuralları, dikkat edilmesi gereken bir kaç nokta, ve bunların yanında temel kurallar özet olarak veriliyor.
CSS Hızlı Kurs'a Hemen Başlayın !
CSS Öbekler
Öbeklerde, CSS özellikleri öbeklere ayrılıyor. Kutu modeli, yazı biçimlerdirme, yazı türleri, saydamlık, renkler, ve sanal ögeler ve sınıflar ve yatayda ortalama gibi konulara değiniliyor.
CSS Öbekleri Hemen Başlayın !
CSS Eğitimi - İpuçları!
CSS ile üçgen yapmaya mı çalışıyorsunuz? Yapamadınız mı? Ne arayacağınızı bile bilmiyor musunuz?
Çıldırmayın!
Saç baş yolduran sorunlara akıl almaz çözümler burada!
CSS - İpuçları'a Hemen Başlayın !
CSS'in İşlenme Mantığı
CSS eğitiminin ilk 6 sayfası CSS'in temelidir. Anlaşılmayan yer varsa sakın devam etmeyin. Öncelikle sorunu çözün, gerekirse soru sorun yanıt arayın ve ondan sonra devam edin.
- Baskınlık - Cascading (Cascading Style Sheets !)
- Kalıtsallık - Inheritance
- Seçiciler - Selectors
CSS ile ne yaparsanız yapın, bu 3'üyle yaparsınız!
İlki hangi değerlerin daha baskın olduğunu tanımlar.
İkincisi, atadan aktarılabilen değerlerin geçerli olmasını sağlar. Baskınlığın etkisi altındadır.
Seçicilerde ise amaç; özelliklerin hangi etikete ait olduğunu belirlemektir. Ancak değerler hem daha baskın yapılabilir hem de yazım kolaylığı ve verimlilik artışı sağlanabilir.
Bu 3'nün harmanı CSS'in çalışma mantığıdır.
Bu 3 madde iyi anlaşıldığında gerisi kesinlikle çocuk oyuncağıdır!
CSS ile Çalışırken Unutmayın
CSS3 hala tamamlanmadı. Geliştirilmesine devam ediliyor. Bazı özelliklerin eski tarayıcılarda farklı sonuç vermesi, hiç bir sonuç vermemesi, şu an alınan sonuçların yeni tarayıcılarda çok farklı olması gibi sorunları var. Eğitimde yeri geldikçe bununla ilgili uyarılıyorsunuz.
CSS kodlarını öğrenirken aklınızda bulunsun:
- Kopyala yapıştır hataları baş belasıdır, dikkat edin.
- Seçicilerde büyük/küçük tamga ayrımı vardır.
- CSS'te küçük tamga kullanılması şiddetle salık edilir.
- Kodları yazarken mümkün olduğunca az boşluk bırakın (bu kuralı öğrenme aşamasında göz ardı edebilirsiniz ama çok boşluk kullanmayı alışkanlık edinmeyin).
Bunların göz önünde bulundurulması, hata yapılma olasılığını azaltır.
Ve Kader Anı!
CSS eğitimine sonraki sayfa ile devam edebilir ya da görmek isteğiniz sayfayı aşağıdan seçebilirsiniz. Ayrıca CSS'in önemli bir bölümü yine aşağıda duruyor. Benim önerim CSS eğitimine sonraki sayfa ile devam etmeniz.
CSS Eğitimi - Temel Seviye
CSS Eğitimi - Seçiciler
Oluşturduğunuz etiketleri seçebilmelisiniz. Daha önce ziyaret edilen bağlantılar, ilk satır ve benzeri yalancı sınıflar, yalancı ögeler ve daha fazlası aşağıdaki bağlantılarda.
CSS İşlevlerine ve CSS Türlerine hızlıca bir göz atabilirsiniz.
Modelleme
Modelleme ile ilgili bilgi almak için öncelikle CSS Öbek - Modelleme belgesini ziyaret edin.
CSS, CSS Kutu Modeli, esnek model (flex) ya da Izgara Modeli (grid) gibi birden fazla modeli destekler. Bu modeller etiketlerin nasıl davranacağını belirler. Sayfa oluşturulurken sayfa genelde kutu modeliyle düşünülür ve taşınabilir aygıtlar ve benzeri için esneklik (flex) sağlanmak istenen noktalarda farklı modeller tasarımda devreye girer.
Konumlandırma
CSS eğitiminin en önemli bölümlerden birisidir konumlandırma. Oluşturduğunuz etiketlerin konumu farklı koşullarda istediğiniz yerde durmuyorsa, kutular taşıyorsa, ya da etiketler üst üste biniyorsa sorun var demektir. CSS eğitimine başladığınızda canınızı hemen sıkacak "dikeyde ortalama" sorunuyla karşılaşacaksınız. İçeriği, HTML Etiketlerini dikeyde ortalama sorununun çözümü artık çok kolay. Bunun için CSS Öbek - İçerik Ortalama belgesini ziyaret etmek isteyeceksiniz!
positionÖzelliğipaddingÖzelliğimarginÖzelliğifloatÖzelliğiclearÖzelliğitopÖzelliğirightÖzelliğibottomÖzelliğileftÖzelliğiz-indexÖzelliği
CSS Eğitimi - Arka Plan ve Görseller - Çerçeveler
Konumlandırılan kutulara çerçeve eklemek isteyebilir ya da CSS eğitimi sırasında etiketlerin sınırlarını kesin bir biçimde görmek isteyebilirsiniz. Farklı arka plan ve çerçeve renkleriyle etiketlerin nasıl davrandığının görülmesi CSS eğitiminde önemli kolaylık sağlar.
Boyutlandırma
CSS'in temelini öğrendiniz. Etiketleri konumlandırıp görsel ve arka plan renkleriyle düzenlediniz. Şimdi CSS eğitiminde sıra artık etiketleri boyutlandırmaya geldi :
widthÖzelliğiheightÖzelliğioverflowÖzelliğibox-sizingÖzelliği
Metin Biçimlendirme
CSS eğitiminde sıradaki bölüm yazılar. Yazı biçimlendirmek ve renklendirmek için başlıca CSS özellikleri:
font-familyÖzelliğifont-sizeÖzelliğiline-heightÖzelliğiletter-spacingÖzelliğitext-alignÖzelliğitext-decorationÖzelliğiword-spacingÖzelliğicolorÖzelliğitext-shadowÖzelliği
Görünürlük
Görünürlük ile ilgili bilgi almak için öncelikle CSS Öbek - Görünürlük belgesini ziyaret edin. Aşağıdaki CSS özelliklerinin yardımıyla etiketlerinin görünürlüğünü farklı biçimlerde ayarlayabilirsiniz :
CSS Eğitimi Bitiyor
CSS eğitiminin son bölümünde yalancı ögeleri kullanarak ögelerin başı ya da sonu gibi ögelere content özelliği ile içerik ekleyibilirsiniz ya da fare imlecini cursor özelliği ile düzenleyebilirsiniz. Kalıtsallıkla geçmeyen özelliklerin değerlerini inherit sözcüğü ile ata ögeden çekebilirsiniz. Etiket boyutlarının birden değil de yavaş yavaş değişmesi, kendi dikey ya da yatay ekseninde ve hatta 3 boyutlu olarak dönmesi, ya da animasyon yapımı gibi daha hareketli bir şeyler yapmak istereseniz geçiş efektleri için transition özelliğine, etiketi (3D dahil) döndürmek isterseniz transform özelliğine ve animasyon için ise animation özelliğine ve @keyframes işlevine göz atabilirsiniz.
Referanslar - CSS Eğitimi
Referanslar sayfasında referans olarak kullanabileceğiniz sayfalar ve açıklamaları gösteriliyor.