Bu kursta CSS'nin temelleri anlaşılır ve kolayca takip edilebilen parçalar halinde açıklanmaktadır. Önümüzdeki birkaç modülde, CSS'nin temel yönlerinin nasıl çalıştığını ve projelerinizde bunları nasıl etkili bir şekilde kullanacağınızı öğreneceksiniz. Modüller arasında gezinmek için "CSS'yi öğrenin" logosunun yanındaki menü bölmesini kullanın.
Kutu modeli, basamaklandırma ve özgüllük, esnek kutu, ızgara ve z-indeksi gibi CSS temellerini öğreneceksiniz. Ayrıca, iyi bir ön uç geliştirici olmanızı ve herhangi bir kullanıcı arayüzüyle başa çıkmaya hazır olmanızı sağlayacak işlevler, renk türleri, gradyanlar, mantıksal özellikler ve devralma hakkında bilgi edineceksiniz.
Her modülde, bilginizi test etmeniz için etkileşimli demolar ve kendi kendinizi değerlendirebileceğiniz testler bulunur. Okuyarak ve demolarla öğrenmenin yanı sıra, her konuya eşlik eden bir podcast bölümü de bulunur. Bu sayede, bilginizi genişletmeye devam edebilir ve farklı bir öğrenme yöntemi deneyebilirsiniz.
Bu kurs, hem başlangıç seviyesindeki hem de ileri düzey CSS geliştiricileri için hazırlanmıştır. CSS'yi baştan sona genel olarak anlamak için seriyi baştan sona inceleyebilir veya belirli stil konuları için referans olarak kullanabilirsiniz. Web geliştirmeye yeni başlayanlar, işaretleme yazma ve stil sayfalarınızı bağlama hakkında bilgi edinmek için HTML'yi öğrenin başlıklı makaleye göz atabilir.
Öğrenecekleriniz:
Kutu Modeli
CSS'nin gösterdiği her şey bir kutu olduğundan CSS kutu modelinin nasıl çalıştığını anlamak, CSS'nin temelini oluşturur.
Seçiciler
Bir öğeye CSS uygulamak için öğeyi seçmeniz gerekir. CSS, bunu yapmanız için çeşitli yollar sunar. Bu yolları bu modülde inceleyebilirsiniz.
İç içe yerleştirme
CSS stil kurallarını iç içe yerleştirmek, stil sayfalarınızı daha düzenli, okunması daha kolay ve bakımı daha kolay hale getirebilir.
Basamaklı dağıtım
Bazen iki veya daha fazla rakip CSS kuralı bir öğeye uygulanabilir. Tarayıcının hangisini kullanacağını nasıl seçtiğini ve bu seçimi nasıl kontrol edeceğinizi öğrenin.
Belirginlik (Specificity)
Bu modülde, basamaklı sistemin önemli bir parçası olan özgüllük daha ayrıntılı bir şekilde ele alınmaktadır.
Devralma
Bazı CSS özellikleri, değer belirtmezseniz devralınır. Bu özelliğin işleyiş şeklini ve nasıl kullanabileceğinizi bu modülde öğrenebilirsiniz.
Renk
CSS'de rengi belirtmenin birkaç farklı yolu vardır. Bu modülde, en sık kullanılan renk değerleri incelenir.
Boyutlandırma Birimleri
Web'in esnek ortamında CSS kullanarak öğeleri nasıl boyutlandıracağınızı öğrenin.
Düzen
Bileşen veya sayfa düzeni oluştururken aralarından seçim yapabileceğiniz çeşitli düzen yöntemlerine genel bakış.
Flexbox
Flexbox, öğe gruplarını tek boyutta düzenlemek için tasarlanmış bir düzen mekanizmasıdır. Bu modülde nasıl kullanacağınızı öğrenebilirsiniz.
Izgara
CSS Grid Layout, satır ve sütunlardaki düzeni kontrol eden iki boyutlu bir düzen sistemi sağlar. Izgaranın sunduğu tüm avantajları keşfedin.
Logical Properties
Mantıksal, akışa göre özellikler ve değerler, metin akışıyla bağlantılıdır. Ekranın fiziksel şekliyle bağlantılı değildir. CSS'ye yönelik bu yeni yaklaşımdan nasıl yararlanacağınızı öğrenin.
Özel Özellikler
Özel özellikler veya CSS değişkenleri, CSS'nizdeki değerleri düzenlemenize ve yeniden kullanmanıza olanak tanır. Böylece stilleriniz daha esnek ve anlaşılması daha kolay olur.
Aralık
Kullandığınız düzen yöntemi ve oluşturduğunuz bileşen için öğeleri aralandırmanın en iyi yöntemini nasıl seçeceğinizi öğrenin.
Sözde öğeler
Sözde öğe, daha fazla HTML eklemenize gerek kalmadan ek bir öğe eklemek veya hedeflemek gibidir. Çeşitli rolleri vardır ve bu roller hakkında bu modülde bilgi edinebilirsiniz.
Sözde sınıflar
Sözde sınıflar, durum değişikliklerine göre CSS uygulamanıza olanak tanır. Bu, tasarımınızın geçersiz bir e-posta adresi gibi kullanıcı girişlerine tepki verebileceği anlamına gelir.
Kenarlıklar
Kenarlık, kutularınız için çerçeve sağlar. CSS kullanarak kenarlıkların boyutunu, stilini ve rengini nasıl değiştireceğinizi öğrenin.
Gölgeler
CSS'de metne ve öğelere gölge eklemenin çeşitli yolları vardır. Her seçeneğin nasıl kullanılacağını ve hangi görevler için tasarlandığını öğrenin.
Focus
Web uygulamalarınızda odaklanmanın önemini anlayın. Odaklanmayı nasıl yöneteceğinizi ve sayfanızdaki yolun hem fare kullanan hem de klavye ile gezinen kullanıcılar için nasıl çalışacağını öğreneceksiniz.
İmleçler ve işaretçiler
Kullanıcılarınızın neyle etkileşimde bulunduğunu bilmesi için imleç çok önemlidir. Bu modülde, belirli durumlarda imleçleri nasıl şekillendirebileceğinizi öğreneceksiniz.
Z-endeksi ve yığın bağlamları
Z-endeksi ve yığın bağlamını kullanarak öğelerin birbirlerinin üzerinde katman oluşturma sırasını nasıl kontrol edeceğinizi öğrenin.
Sabitleme konumu
CSS sabit öğe konumlandırma, bir öğeyi başka bir öğeye göre bildirimli olarak konumlandırmanın bir yolunu sağlar.
Pop-up ve iletişim kutusu
Popover, popover özelliği olan herhangi bir öğedir ve ipuçları, uyarılar, bildirimler gibi çok çeşitli etkileşimli desenler için kullanışlıdır.
İşlevler
CSS'de çeşitli yerleşik işlevler bulunur. Temel işlevlerden bazıları ve bunların nasıl kullanılacağı hakkında bilgi edinin.
Yollar, şekiller, kırpma ve maskeleme
Yollar, şekiller, kırpma ve maskeleme, geliştiricilere çeşitli işlevler aracılığıyla CSS'de karmaşık şekiller oluşturma olanağı tanır. Bu işlevler, kullanıcılarınız için unutulmaz deneyimler oluşturabilir.
Renk geçişleri
Bu modülde, CSS'de bulunan çeşitli gradyan türlerini nasıl kullanacağınızı öğreneceksiniz. Gradyanlar, resim oluşturmak için grafik uygulamalarına gerek kalmadan çok sayıda faydalı efekt oluşturabilir.
Animasyonlar
Animasyon, etkileşimli öğeleri vurgulamanın ve tasarımlarınıza ilgi çekici ve eğlenceli bir hava katmanın harika bir yoludur. CSS ile animasyon efektlerini nasıl ekleyeceğinizi ve kontrol edeceğinizi öğrenin.
Filtreler
CSS'deki filtreler, yalnızca bir grafik uygulamasında mümkün olduğunu düşündüğünüz efektleri uygulayabileceğiniz anlamına gelir. Bu modülde, kullanabileceğiniz özellikleri keşfedebilirsiniz.
Karıştırma Modları
İki veya daha fazla katmanı karıştırarak kompozisyon efektleri oluşturun ve bu modüldeki karıştırma modları bölümünde beyaz arka planlı bir resmi nasıl izole edeceğinizi öğrenin.
Listeler
Yapısal olarak liste, liste öğeleriyle doldurulmuş bir liste kapsayıcı öğesinden oluşur. Bu modülde, bir listenin tüm bölümlerine stil vermeyi öğreneceksiniz.
Sayaçlar
CSS, farklı kullanım alanları için bir listedeki sayaçları kontrol etmenin çeşitli yollarını sunar. Bu modülde, listedeki sayaçları nasıl kontrol edeceğinizi öğreneceksiniz.
Geçişler
Bir öğenin durumları arasındaki geçişleri nasıl tanımlayacağınızı öğrenin. Kullanıcı etkileşimi için görsel geri bildirim sağlayarak kullanıcı deneyimini iyileştirmek amacıyla geçişleri kullanın.
Tek Sayfa Uygulamaları için Görünüm Geçişleri
Görünüm geçişleri, tek sayfalık uygulamanızdaki sayfalar arasında süreklilik veya bağlam göstermenizi sağlar.
Overflow
Taşma, belirlenen üst boyuta sığmayan içeriklerle nasıl başa çıkacağınızı ifade eder. Bu modülde, kalıpların dışında düşünmeyi ve taşan içeriği nasıl şekillendireceğinizi öğreneceksiniz.
Arka planlar
CSS kullanarak kutuların arka planlarını nasıl şekillendireceğinizi öğrenin.
Metin ve tipografi
Web'de metinleri nasıl biçimlendireceğinizi öğrenin.
Container sorguları
Kapsayıcı sorguları, medya sorgularının aksine, öğelerde atalarının (veya kapsayıcıların) boyutuna ve durumuna göre daha ayrıntılı ayarlamalar yapmanıza olanak tanır.
Sonuç ve sonraki adımlar
Sonraki adımlarınızı atmanıza yardımcı olacak diğer kaynaklar
Peki CSS öğrenmeye hazır mısınız? Haydi başlayalım.