Bu kılavuz, CSS’nin ilk adımlarının kaldığı yerden devam ediyor – artık dile ve sözdizimine aşina olduğunuza ve bunları kullanma konusunda bazı temel deneyimlere sahip olduğunuza göre, biraz daha derine dalmanın zamanı geldi. Bu kılavuz, kademe ve kalıtım özelliklerine, elimizdeki tüm seçici türlerine, birimlere, boyutlandırmaya, stil arka planlarına ve kenarlıklarına, hata ayıklamaya ve çok daha fazlasına bakacak.
Buradaki amaç, size CSS yazmak için bir araç takımı sağlamak ve metin stili ve CSS düzeni gibi daha spesifik disiplinlere geçmeden önce tüm temel teorileri anlamanıza yardımcı olmaktır.
Önkoşullar
Bu kılavuza başlamadan önce aşağıdakileri bilmenizi bekliyoruz:
- Bilgisayar kullanma ve Web’i pasif olarak kullanma (yani webde dolaşma, içeriği tüketme) ile ilgili temel aşinalık.
- Temel yazılımı yükleme bölümünde ayrıntılı olarak açıklandığı gibi temel bir çalışma ortamı ve Dosyalarla başa çıkma bölümünde ayrıntılı olarak açıklandığı gibi dosyaların nasıl oluşturulup yönetileceğine ilişkin bir anlayış.
- HTML’ye Giriş kılavuzunda tartışıldığı gibi, HTML ile temel aşinalık.
- CSS ilk adımlar kılavuzunda tartışıldığı gibi, CSS’nin temellerinin anlaşılması.
Not: Kendi dosyalarınızı oluşturamadığınız bir bilgisayar/tablet veya başka bir cihaz üzerinde çalışıyorsanız, kod örneklerini (çoğu) JSBin veya Glitch gibi çevrimiçi bir kodlama programında deneyebilirsiniz.
Bu kılavuz, CSS dilinin en önemli kısımlarını kapsayan aşağıdaki makaleleri içerir. Yol boyunca, anlayışınızı test etmenize izin verecek birçok alıştırmayla karşılaşacaksınız.
Kademe ve kalıtım
Bu yazının amacı, CSS’nin HTML’ye nasıl uygulandığını ve çakışmaların nasıl çözüldüğünü kontrol eden, CSS’nin en temel kavramlarından bazılarına (kademe, özgünlük ve kalıtım) ilişkin anlayışınızı geliştirmektir.
Bu yazı kılavuzun diğer bölümleri ile daha az ilgili ve biraz daha akademik görünse de, bunları anlamak daha sonra size çok fazla fayda sağlayacak! Bu bölümü dikkatli bir şekilde incelemenizi ve devam etmeden önce kavramları anladığınızı kontrol etmenizi öneririz.
CSS seçicileri
CSS seçicileri HTML öğelerini hedeflemek için kullanılır. Stil için öğeleri seçerken hassasiyete izin veren çok çeşitli CSS seçicileri bulunur. Bu makalede ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak inceleyeceğiz: Alt makaleler şunları içerir:
Kutu modeli
CSS’deki her şeyin etrafında bir kutu vardır ve bu kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin veya öğeleri diğer öğelerle hizalamanın anahtarıdır. Bu yazıda kutu modelinin nasıl çalıştığını ve onunla ilgili terminolojiyi anlayarak daha karmaşık mizanpaj görevlerine geçebilmeniz için bir giriş yapacağız.
Arka planlar ve kenarlıklar
Bu yazıda CSS arka planları ve kenarlıkları ile yapabileceğiniz bazı yaratıcı şeylere göz atacağız. Gradyanlar, arka plan resimleri, yuvarlatılmış köşeler, arka planlar ve kenarlıklar gibi CSS’deki birçok stil öğesine bakacağız.
Farklı metin yönlerini işleme
Son yıllarda CSS, sağdan sola ve aynı zamanda yukarıdan aşağıya içerik (Japonca gibi) dahil olmak üzere farklı yönlülüğünü daha iyi desteklemek için gelişti – bu farklı yönlere yazma modları denir. Çalışmanızda ilerledikçe ve mizanpajla çalışmaya başladığınızda, yazma modlarını anlamak size çok yardımcı olacaktır.
Taşan içerik
Bu yazıda CSS’deki bir diğer önemli kavrama bakacağız — taşma. Taşma, bir kutunun içinde rahatça barındırılamayacak kadar çok içerik olduğunda meydana gelir. Bu yazıda, taşmanın ne olduğunu ve nasıl yönetileceğini öğreneceksiniz.
CSS’de öğeleri boyutlandırma
Şimdiye kadarki yazılarda CSS kullanarak bir web sayfasındaki öğeleri boyutlandırmanın çeşitli yollarıyla karşılaştınız. Ancak, tasarımınızdaki farklı özelliklerin ne kadar büyük olacağını anlamak önemlidir ve bu yazıda, öğelerin CSS aracılığıyla boyut almasının çeşitli yollarını özetleyeceğiz. Gelecekte size yardımcı olacak boyutlandırmayla ilgili birkaç terim tanımlayacağız.
Görüntüler, medya ve form öğeleri
Bu yazıda, CSS’de belirli özel öğelerin nasıl ele alındığına bir göz atacağız. Resimler, diğer ortamlar ve form öğeleri normal kutulara göre CSS ile stillendirme yeteneğiniz açısından biraz farklı davranır. Neyin mümkün olup olmadığını anlamak biraz hayal kırıklığı yaratabilir. Bu yüzden bu yazı bilmeniz gereken bazı temel şeyleri vurgulayacak.
Tablo stilleri
Bir HTML tablosu tasarlamak dünyadaki en göz alıcı iş olmasa da bazen bunu yapmak zorundayızdır. Bu makale, bazı özel tablo stil teknikleri ile HTML tablolarının iyi görünmesi için bir kılavuz sağlar.
CSS’de hata ayıklama
Bazen CSS yazarken CSS’nizin beklediğiniz gibi davranmadığı bir sorunla karşılaşırsınız. Bu makale, bir CSS sorununun nasıl ayıklanacağı konusunda size rehberlik edecek. Tüm modern tarayıcılarda bulunan geliştirme araçları ile neler olup bittiğini anlamanıza yardımcı olacak.
CSS’nizi düzenleme
Daha büyük stil sayfaları ve büyük projeler üzerinde çalışmaya başladığınızda, büyük bir CSS dosyasını korumanın zor olabileceğini keşfedeceksiniz. Bu makalede, CSS’nizi kolayca bakımı yapılabilir kılmak için en iyi uygulamalara bakacağız. Ayrıca bakımın kolaylaştırılmasına yardımcı olmak için başkaları tarafından da kullanımda olacak çözümlerden bazılarına kısa bir göz atacağız.
Değerlendirmeler
CSS becerilerinizi test etmek ister misiniz? Aşağıdaki değerlendirmeler, yukarıdaki yazılarda kapsanan CSS’yi ne kadar anladığınızı test edecek.
Bu değerlendirme, temel söz dizimi, seçiciler, özgüllük, kutu modeli ve daha fazlasını anladığınızı test eder.
If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we’ll challenge you to create an online template to achieve such a look.
Burada, göz alıcı bir kutu oluşturmak için arka plan ve kenarlık stilini kullanma konusunda biraz pratik yapacaksınız.