Altın Konu Web Geliştirme CSS Giriş

[Nizam-ı Alem]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

Merhaba Değerli Turkmmo Ailesi Kafamda css üzerine bir eğitim serisi tasarlamayı düşünüyorum elimde bulunan kaynaklarla siz değerli forum arkadaşlarıma Bu konularla elimden geldiğince anlatım yapmaya çalışıcam.
​

CSS Nedir?​

CSS (Basamaklı Stil Sayfaları), web sayfalarının sunulabilir hale getirilmesi sürecini basitleştirmek için tasarlanmış bir dildir.

Renkleri, yazı tiplerini, aralıkları ve konumlandırmayı belirleyerek HTML belgelerine stiller uygulamanıza olanak tanır.
Başlıca avantajları, içeriğin (HTML'de) ve stilin (CSS'de) ayrılması ve aynı CSS kurallarının tüm sayfalarda kullanılabilmesi ve yeniden yazılmasına gerek olmamasıdır.
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 HTML dosyasını ister.
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.
Üstün Stiller: HTML'ye kıyasla daha geniş bir özellik yelpazesi sunar.
Çevrimdışı Tarama: CSS, çevrimdışı bir önbellek kullanarak web uygulamalarını yerel olarak depolayabilir ve çevrimdışı görüntülemeye olanak tanır.​

 

[Lightning]

Eline sağlık

 

[Testraller]

Paylaşım için teşekkürler.

 

[BGame]

Eline sağlık