CSS Nedir?
CSS Nedir ? — Madde Madde Açıklama
Aşağıdaki metin, CSS’in (Cascading Style Sheets) ne olduğu, temel kavramları, nasıl kullanıldığı ve modern web geliştirmede ne amaçlarla tercih edildiğini madde madde ve açık biçimde anlatır. Renkli başlıklar dışında görsel veya ikon yoktur.
Temel Tanım
- CSS (Cascading Style Sheets), HTML ile oluşturulmuş içeriğin görünümünü ve düzenini tanımlamak için kullanılan stil dilidir.
- HTML yapı (semantik) sağlar; CSS ise bu yapının tasarımını yapar — renkler, yazı tipi, boşluklar, düzen gibi.
- Tarayıcılar CSS kurallarını okuyarak sayfanın görsel sunumunu oluşturur.
Sözdizimi ve Temel Yapı
- CSS kuralları
seçici { özellik: değer; }şeklinde yazılır. - Örnek:
h1 { color: #1e88e5; font-size: 24px; } - Seçiciler (selectors): element, sınıf (.class), id (#id), atanan ilişkilere (descendant, child) göre farklı elemanları hedefler.
- Birden fazla özellik nokta üst üste okunur ve noktalı virgül ile ayrılır.
Box Model (Kutu Modeli)
- Her HTML elementi bir kutudur ve kutu modeli şu katmanlardan oluşur: content (içerik), padding, border ve margin.
- Box sizing:
content-box(varsayılan) veyaborder-boxolarak ayarlanabilir; bu, genişlik/yükseklik hesaplama şeklini değiştirir. - Box model, layout ve boşluk yönetiminde temel yapı taşlarından biridir.
CSS’in Öne Çıkan Kavramları
- Seçiciler ve Spesifiklik: Hangi kuralın uygulanacağını belirler; id’ler, sınıflar ve elementlere göre öncelik değişir.
- Özellikler (Properties): color, background, margin, padding, display, position, transform vb.
- Positioning: static, relative, absolute, fixed, sticky; öğelerin konumlandırılmasını sağlar.
- Display: block, inline, inline-block, none; elemanın davranış biçimini kontrol eder.
- Flexbox ve Grid: Modern düzen yöntemleri; esnek (flex) ve ızgara (grid) tabanlı yerleşimler sağlar.
- Responsive Tasarım: Media queries ile farklı ekran boyutlarına uygun düzenleme yapılır.
- Animasyon ve Geçişler: CSS ile basit animasyonlar ve geçişler (transitions, animations) oluşturulabilir.
Uygulama Yöntemleri
- Inline CSS: HTML etiketinin style özniteliğinde yazılır (
). - Internal (Dahili) CSS: HTML belgesinin
bölümünde
