Bu noktaya kadar CSS’nin temellerini, metinlerin nasıl biçimlendirileceğini ve içeriğinizin içinde bulunduğu kutuların nasıl biçimlendirileceğini ve değiştirileceğini inceledik. Şimdi kutularınızı görüntü alanına ve birbirlerine göre nasıl doğru bir şekilde düzenleyeceğinize bakmanın zamanı geldi. Gerekli ön koşulları ele aldık, şimdi CSS düzenine derinlemesine dalalım ve farklı görüntüleme ayarları, konumlandırma, flexbox ve CSS grid gibi modern düzen araçları ve hala bilmek isteyebileceğiniz bazı eski teknikler gibi çeşitli özelliklere bakalım.
Ön Koşullar
Bu modüle başlamadan önce şunları yapmalısınız:
- HTML’ye Giriş klavuzunda tartışıldığı gibi HTML ile temel aşinalığa sahip olun.
- CSS’ye Giriş klavuzunda tartışıldığı gibi CSS temelleri konusunda rahat olun.
- Kutuların nasıl şekillendirileceğini anlayın.
Not: Kendi dosyalarınızı oluşturamadığınız bir bilgisayar/tablet/diğer bir cihaz üzerinde çalışıyorsanız, kod örneklerinin çoğunu JSBin veya Glitch gibi çevrimiçi bir kodlama programında deneyebilirsiniz.
Makaleler
Bu makaleler, CSS’de bulunan temel düzen araçları ve teknikleri hakkında bilgi verecektir. Derslerin sonunda, bir web sayfası düzenleyerek düzen yöntemlerini anladığınızı kontrol etmenize yardımcı olacak bir değerlendirme de yer almaktadır.
CSS sayfa düzenine giriş
Bu makale, farklı görüntüleme değerleri gibi önceki modüllerde değindiğimiz CSS düzen özelliklerinden bazılarını özetleyecek ve bu modül boyunca ele alacağımız bazı kavramları tanıtacaktır.
Normal Akış
Web sayfalarındaki öğeler, biz bunu değiştirecek bir şey yapana kadar, normal akışa göre kendilerini düzenler. Bu makale, normal akışın nasıl değiştirileceğini öğrenmek için bir temel olarak normal akışın temellerini açıklamaktadır.
Flexbox
Flexbox, öğeleri satırlar veya sütunlar halinde düzenlemek için kullanılan tek boyutlu bir düzen yöntemidir. Öğeler ek alanı doldurmak için esner ve daha küçük alanlara sığmak için küçülür. Bu makale tüm temelleri açıklar.
Izgaralar – Grid
CSS Izgara Düzeni, web için iki boyutlu bir düzen sistemidir. İçeriği satırlar ve sütunlar halinde yerleştirmenizi sağlar ve karmaşık düzenler oluşturmayı kolaylaştıran birçok özelliğe sahiptir. Bu makale size sayfa düzenine başlamak için bilmeniz gereken her şeyi verecek.
Float
Başlangıçta metin blokları içindeki görüntüleri kaydırmak için kullanılan float özelliği, web sayfalarında çoklu sütun düzenleri oluşturmak için en sık kullanılan araçlardan biri haline geldi. Flexbox ve Grid’in ortaya çıkmasıyla birlikte, bu makalede açıklandığı gibi artık orijinal amacına geri döndü.
Konumlandırma – Positioning
Konumlandırma, öğeleri normal belge düzeni akışının dışına çıkarmanıza ve örneğin birbirlerinin üzerine oturtarak veya tarayıcı görüntü alanı içinde her zaman aynı yerde kalarak farklı davranmalarını sağlamanıza olanak tanır. Bu makalede farklı position değerleri ve bunların nasıl kullanılacağı açıklanmaktadır.
Çoklu-sütun düzeni
Çoklu sütun düzeni özelliği, bir gazetede görebileceğiniz gibi içeriği sütunlar halinde yerleştirme yöntemi sunar. Bu makalede bu özelliğin nasıl kullanılacağı açıklanmaktadır.
Duyarlı Tasarım – Responsive Design
Web özellikli cihazlarda daha çeşitli ekran boyutları ortaya çıktıkça, duyarlı web tasarımı (RWD) kavramı ortaya çıktı: web sayfalarının düzenlerini ve görünümlerini farklı ekran genişliklerine, çözünürlüklerine vb. uyacak şekilde değiştirmelerine olanak tanıyan bir dizi uygulama. Bu, çok cihazlı bir web için tasarım yapma şeklimizi değiştiren bir fikirdi ve bu makalede bu konuda uzmanlaşmak için bilmeniz gereken ana teknikleri anlamanıza yardımcı olacağız.
Medya sorguları için başlangıç kılavuzu
CSS Ortam Sorgusu, CSS’yi yalnızca tarayıcı ve cihaz ortamı belirttiğiniz bir kuralla eşleştiğinde (örneğin, “görüntü alanı 480 pikselden daha geniş”) uygulamanız için bir yol sunar. Ortam sorguları duyarlı web tasarımının önemli bir parçasıdır çünkü görüntü alanının boyutuna bağlı olarak farklı düzenler oluşturmanıza olanak tanır. Ayrıca sitenizin üzerinde çalıştığı ortamın diğer özelliklerini, örneğin kullanıcının fare yerine dokunmatik ekran kullanıp kullanmadığını tespit etmek için de kullanılabilirler. Bu içerikte önce medya sorgularında kullanılan sözdizimi hakkında bilgi edinecek ve ardından bunları basit bir tasarımın nasıl duyarlı hale getirilebileceğini gösteren etkileşimli bir örneğe bakacağız.
Eski düzen yöntemleri
Izgara sistemleri CSS düzenlerinde kullanılan çok yaygın bir özelliktir. CSS Izgara Düzeni’nden önce, float’lar veya diğer düzen özellikleri kullanılarak uygulanma eğilimindeydik. İlk olarak düzeninizi belirli sayıda sütun (örneğin 4, 6 veya 12) olarak hayal eder ve ardından içerik sütunlarınızı bu hayali sütunların içine sığdırırdınız. Bu makalede, bu eski yöntemlerin nasıl çalıştığını inceleyeceğiz, böylece eski bir proje üzerinde çalışıyorsanız bunların nasıl kullanıldığını anlayabileceksiniz.
Eski Tarayıcıları Destekleme
Bu modülde, tasarımlarınız için ana düzen yöntemleri olarak Flexbox ve Grid kullanmanızı öneririz. Ancak, gelecekte geliştirdiğiniz bir sitenin eski tarayıcıları veya kullandığınız yöntemleri desteklemeyen tarayıcıları kullanan ziyaretçileri olacaktır. Bu durum web’de her zaman geçerli olacaktır – yeni özellikler geliştirildikçe, farklı tarayıcılar farklı özelliklere öncelik verecektir. Bu makale, eski teknoloji kullanıcılarını dışlamadan modern web tekniklerinin nasıl kullanılacağını açıklamaktadır.
Uygulama
Aşağıdaki değerlendirme, yukarıdaki kılavuzlarda ele alınan CSS düzen yöntemlerini ne kadar anladığınızı test edecektir.
Temel düzen bilgisi kavrama
Bir web sayfasını düzenleyerek farklı düzen yöntemleri hakkındaki bilginizi test etmek için bir uygulama.