Web Geliştirme CSS Başlangıç Hazırlığı

Merhaba değerli MMOZirve ailesi, kafamda MMOZirve'nun yeni eğitim serisi oluşturmayı düşünüyorum ve elimdeki kaynaklar ile bu konularda elimden geldiğince anlatabileceğim.
​

CSS Nedir?​

CSS, web uygulamalarının görsel sunumunu şekillendirmek için kullanılan bir dildir ve özellikle web sayfalarının tasarımını basitleştirir.

CSS ile HTML belgelerini stillendiklerinde renkleri, yazı tiplerini, aralıkları ve konumlandırmayı belirleyerek stil uygulayarak HTML belgelerimize estetik bir görünüm kazandırabiliriz.
Açıkçası, CSS'nin en büyük avantajlarından biri, içerik ve stilin ayrılmasıdır; böylece aynı kuralları tüm sayfalarda kolayca uygulayabilir ve yeniden yazmanıza gerek kalmaz.
HTML etiketleri, CSS ise kural kümelerini kullanır.
CSS stilleri seçiciler kullanılarak HTML öğesine uygulanır.

​

Basamaklı Düzenlemeyi Anlamak​

CSS'de basamaklı düzenleme, aynı öğeyi hedefleyen birden fazla kural olduğunda stillerin öğelere uygulanma biçimini ifade eder.
Önem, özgüllük ve kaynak sırası gibi bir dizi ilkeye göre hangi CSS kuralının öncelikli olacağını belirler.

CSS, Satır İçi, Dahili ve Harici stiller şeklinde bir hiyerarşi izler.
Özgüllük, hangi seçicinin daha fazla ağırlığa sahip olduğuna karar verir.
Daha sonraki kurallar, eşit önceliğe sahiplerse öncekileri geçersiz kılar.
​

CSS Seçici​

CSS seçici, HTML öğelerini hedeflemek ve böylece belirli stillerin uygulanabilmesini sağlamak için kullanılan bir kalıptır. Seçiciler, geliştiricilerin öğeleri etiket adı, sınıf, kimlik, öznitelikler, durum veya konuma göre seçmelerine olanak tanır ve web sayfalarının görünümünü ve davranışını verimli bir şekilde kontrol etmelerini sağlar.

Seçiciler, öğeleri etiket, sınıf veya kimliğe göre hedefleyebilir.
Birleştiriciler, öğeleri hiyerarşiye veya kardeş ilişkilerine göre seçmeyi sağlar.
Öznitelik seçiciler, belirli özniteliklere veya değerlere sahip öğeleri hedefler.
Sözde sınıflar, öğeleri belirli bir durumda (örneğin, :hover, :first-child) biçimlendirir.
Sözde öğeler, bir öğenin belirli bölümlerine stil verir (örneğin, ::first-letter, ::after).
:not() veya :nth-child() gibi gelişmiş seçiciler, hassas ve karmaşık seçimlere olanak tanır.
Seçicilerin verimli kullanımı, temiz, bakımı kolay ve ölçeklenebilir CSS sağlar.CSS'nin Çalışma Prensibi
CSS, HTML öğelerine stiller uygulayarak, sade bir web sayfasını görsel olarak çekici bir düzene dönüştürerek çalışır. Stilleri öğelerle eşleştirmek, konumlarını hesaplamak ve ekranda görüntülemek için tarayıcıyla birlikte çalışır.

Aşağıdaki diyagram, CSS'nin çalışma prensibini daha basit bir şekilde açıklamaktadır.


​

1. HTML Yükle​

Tarayıcı, sunucudan alınmış olan HTML dosyasını ister ve bu dosyayı sayfa olarak gösterir.
HTML belgesini metin olarak alır.
​

2. HTML'yi Ayrıştır​

Tarayıcı, HTML'yi okur ve belirteçlere ayırır.
Etiketleri DOM ağacı için düğümlere dönüştürür.
​

3. DOM (Belge Nesne Modeli) Oluştur​

Ayrıştırılan HTML öğeleri, DOM yapısını oluşturur.
Tüm sayfa öğelerini ve hiyerarşisini temsil eder.
​

4. CSS Yükle​

Tarayıcı bir <link> veya <style> bulduğunda, CSS dosyalarını yükler.
Harici CSS, görüntülemeyi engeller (sayfa yüklenene kadar bekler).
​

5. CSS Ayrıştır​

CSS metni, CSSOM'a (CSS Nesne Modeli) ayrıştırılır.
Tarayıcı, tüm CSS kurallarını ve seçicilerini anlar.
​

6. Stilleri Hesapla (Eşleştir + Basamaklı)​

Tarayıcı, CSS kurallarını DOM öğeleriyle eşleştirir.
Basamaklı kuralları uygular ve son hesaplanan stilleri hesaplar. 7. Render Ağacı Oluşturma

Render Ağacı'nı oluşturmak için DOM + CSSOM'u birleştirir.
Yalnızca görünür öğeleri içerir (örneğin, görüntülemeyi atlar: yok).
​

8. Düzen (Yeniden Akış)​

Her öğenin tam konumunu ve boyutunu hesaplar.
Öğelerin sayfada nerede görüneceğini belirler.
​

9. Boyama​

Render ağacı öğelerini gerçek piksellere dönüştürür.
Renkleri, kenarlıkları, metni, görüntüleri vb. çizer.
​

10. Görüntüleme (Birleştirme)​

Tarayıcı, boyalı katmanları birleştirerek son görüntüyü oluşturur.
Son görsel çıktı ekranda görüntülenir.
​

CSS'nin Avantajları​

Web tasarımını ve bakımını basitleştirir.
Web sitesi performansını ve kullanıcı deneyimini geliştirir.
Tüm cihazlar için duyarlı ve uyarlanabilir tasarımları destekler.
​

Neden CSS?​

Zaman Kazandırır: CSS'yi bir kez yazın ve birden fazla HTML sayfasında yeniden kullanın.
Kolay Bakım: Tek bir değişiklikle stili genel olarak değiştirin.
Arama Motoru Dostu: Arama motorları için okunabilirliği artıran temiz kodlama tekniği.
CSS ile birlikte daha fazla kontrol ediyorsunuz, böylece sayfa tasarımınızı ve görünümünüzü daha detaylı bir şekilde oluşturabiliyorsunuz.
Çevrimdışı Tarama: CSS, çevrimdışı bir önbellek kullanarak web uygulamalarını yerel olarak depolayabilir ve çevrimdışı görüntülemeye olanak tanır.​