CSS’in Tarihçesi
CSS ilk olarak 1996 yılında World Wide Web Consortium (W3C) tarafından tanıtıldı. O zamanlar web tasarımı daha basit ve sınırlıydı. CSS, geliştiricilere web sayfalarını daha etkili bir şekilde tasarlama fırsatı sundu. HTML tek başına stil ve düzenleme seçenekleri açısından sınırlıydı ve CSS’in tanıtılmasıyla birlikte tasarım dünyası büyük bir devrim yaşadı. O günden bu yana CSS birçok sürümle güncellendi ve geliştirildi. CSS2 ve CSS3, CSS’in daha gelişmiş sürümleridir ve özellikle CSS3 ile birlikte animasyonlar ve daha karmaşık düzenleme özellikleri hayatımıza girdi.CSS Nasıl Çalışır?
CSS, web sayfalarının HTML yapısına entegre edilen stil kurallarından oluşur. Bu kurallar, belirli HTML elementlerini seçer ve bu elementlerin nasıl görüneceğini tanımlar. CSS üç ana yolla bir web sayfasına eklenebilir: 1-Inline CSS: Stil kuralları doğrudan HTML elementlerinin içinde tanımlanır. Bu yöntem genellikle küçük değişiklikler için kullanılır. Ancak, büyük projelerde önerilmez, çünkü sayfanın bakımını zorlaştırabilir.<h1 style=color: blue; font-size: 24px;>Başlık</h1>
2-Internal CSS (Dahili CSS): CSS kuralları, HTML sayfasının<head> bölümünde <style> etiketi içinde tanımlanır. Bu yöntem, tek bir sayfa için stil tanımlamak istediğinizde kullanılır.
<style> h1 { color: blue; font-size: 24px; } </style>
3-External CSS (Harici CSS): CSS dosyası ayrı bir dosyada tutulur ve HTML dosyasına bağlanır. Bu, en yaygın kullanılan yöntemdir, çünkü birden fazla sayfa için ortak bir stil dosyası kullanma olanağı tanır. Bu, sayfa yönetimini ve stil değişikliklerini çok daha kolay hale getirir.<link rel=stylesheet href=styles.css>
CSS Box Model Nedir?
CSS Box Model, her HTML elementinin, bir dikdörtgen kutu olarak ele alındığı bir modeldir. Bu model, sayfadaki elementlerin yerleşimini ve boyutlarını belirlerken çok önemlidir. Box Model, bir elementin kenar boşlukları (margin), dolgu (padding), kenarlıklar (border) ve içerik alanını (content) kapsar. Bu dört bileşen, web sayfalarının düzenini ve görselliğini kontrol etmek için kullanılır. Box Model'i anlamak, özellikle tasarımla ilgili sorunların çözümünde ve daha karmaşık düzenlerin oluşturulmasında büyük bir avantaj sağlar. İşte Box Model'in temel bileşenleri:- Content (İçerik): HTML elemanının asıl içeriği. Bu bölümde metin, resim ya da başka öğeler yer alır.
- Padding (Dolgu): İçerik ile kenarlık arasındaki boşluktur. Padding değerleri, içerikten kenarlığa olan uzaklığı belirler.
- Border (Kenarlık): Elementin etrafında yer alan ve stil verilebilen çizgidir.
- Margin (Dış Boşluk): Elementin etrafındaki boşluktur. Diğer elementlerden olan uzaklığı ayarlamak için kullanılır.
Örneğin, bir elementin Box Model’ine şu şekilde stil verebiliriz:
div { width: 200px; padding: 20px; border: 5px solid black; margin: 10px; }
Yukarıdaki kod, bir elementin toplam genişliğinipadding, border ve margin değerlerini dikkate alarak hesaplar. Bu hesaplama, elementlerin ekrandaki konumlarını doğru bir şekilde yerleştirmek için önemlidir.
CSS’in Avantajları
- Esneklik: CSS, bir web sayfasının stilini değiştirmeyi çok daha kolay hale getirir. Sadece bir CSS dosyasını düzenleyerek, tüm web sitesinin stilini değiştirebilirsiniz.
- Küresel Değişiklikler: Birden fazla sayfa üzerinde stil değişikliği yapmak, harici bir CSS dosyası ile oldukça basittir. Bir dosyada yapılan bir değişiklik, o dosyaya bağlı tüm sayfalarda anında güncellenir.
- Daha Hızlı Yüklenme Süresi: CSS dosyası tek bir yerden yüklenir, bu da web sayfasının daha hızlı yüklenmesini sağlar. Ayrıca, sayfa başına tekrarlanan stil kodlarından kaçınılır.
- Karmaşık Düzenler: CSS Grid ve Flexbox gibi modern düzen sistemleri, karmaşık ve dinamik web sayfası düzenleri oluşturmayı kolaylaştırır.
Henüz hiç yorum yapılmamış. İlk yorumu sen yap!
