CSS
Basamaklı Stil Sayfaları
Kısaca
CSS, HTML içeriğinin ekranda renk, yazı tipi, boşluk, yerleşim ve animasyon gibi yönlerden nasıl görüneceğini belirleyen stil sayfası dilidir.
CSS nedir?
CSS, tarayıcıya HTML'de tanımlanan öğelerin nasıl gösterileceğini söyler. Öğeleri seçen kurallar yazar ve color, font-size ya da margin gibi özelliklere (property) değer verirsiniz; tarayıcı da sayfayı çizerken bunları uygular.
Basamaklı (cascading) ifadesi, birden fazla kural aynı öğeyi hedeflediğinde tarayıcının hangisinin geçerli olacağına nasıl karar verdiğini anlatır. Tarayıcı her kuralın nereden geldiğine, seçicisinin ne kadar belirleyici (specific) olduğuna (ID sınıftan, sınıf etiket adından güçlüdür) ve kuralların yazılış sırasına bakar. Basamak (cascade) ve belirleyiciliği (specificity) anlamak, görmezden gelinmiş gibi duran stilleri ayıklamanın anahtarıdır.
Modern CSS güçlü yerleşim sistemleri sunar: tek bir satır ya da sütundaki öğeleri düzenlemek için Flexbox, satır ve sütunlarla iki boyutlu yerleşimler için Grid. Media query'ler ve container query'ler bir tasarımın farklı ekran boyutlarına uyum sağlamasını mümkün kılar; buna duyarlı tasarım (responsive design) denir. CSS değişkenleri olarak da bilinen özel özellikler (custom properties) ise marka renkleri gibi değerleri tüm sitede yeniden kullanmanıza olanak tanır.
CSS çoğu zaman Sass gibi ön işlemcilerle ya da Tailwind gibi yardımcı sınıf framework'leriyle karıştırılır. Bunlar CSS üreten veya düzenleyen araçlardır; tarayıcının kendisi ise yalnızca düz CSS'i anlar.
Önemli noktalar
- CSS, HTML'in görsel sunumunu kontrol eder.
- Kural, bir seçici ile bir veya daha fazla özellik-değer çiftinden oluşur.
- Basamak ve belirleyicilik, çakışma durumunda hangi kuralın kazanacağını belirler.
- Flexbox ve Grid, sayfa yerleşiminin ana araçlarıdır.
- Media query'ler tasarımları ekran boyutuna duyarlı hale getirir.
Örnek
/* A reusable color stored in a custom property */
:root {
--brand: #2563eb;
}
/* Select every element with the class "button" */
.button {
background-color: var(--brand);
color: white;
padding: 0.5rem 1rem;
}
/* Slightly fade the button on mouse hover */
.button:hover { opacity: 0.9; }Sık sorulan sorular
CSS bir programlama dili midir?
CSS genellikle genel amaçlı bir programlama dili değil, stil sayfası dili olarak tanımlanır. Bildirimseldir (declarative): şeylerin nasıl görünmesi gerektiğini siz tarif edersiniz, nasıl çizileceğini tarayıcı çözer.
Flexbox ile Grid arasındaki fark nedir?
Flexbox öğeleri tek bir satır ya da sütun boyunca düzenler; bu da gezinme çubukları ve araç çubukları için uygundur. Grid ise öğeleri aynı anda satır ve sütunlar halinde düzenler; bu da tam sayfa yerleşimleri ve kart galerileri için uygundur.
CSS'te specificity ne demektir?
Specificity (belirleyicilik), birden fazla kural aynı öğeyle eşleştiğinde hangisinin uygulanacağına karar vermek için tarayıcının her seçiciye verdiği ağırlıktır. ID seçiciler sınıf seçicilerden, sınıf seçiciler de öğe seçicilerinden daha belirleyicidir.
İlgili sayfalar
- HTMLWeb Geliştirme, s. 19HTML, başlık, paragraf, bağlantı, görsel ve form gibi öğelerle web sayfalarının yapısını ve içeriğini tanımlayan işaretleme dilidir.
- JavaScriptWeb Geliştirme, s. 25JavaScript, web tarayıcılarında sayfaları etkileşimli hale getiren ve Node.js gibi çalışma ortamlarıyla sunucularda da çalışan programlama dilidir.
- DOMWeb Geliştirme, s. 14DOM, tarayıcının bir web sayfasını temsil eden ve JavaScript'in okuyup değiştirerek kullanıcının gördüğünü güncelleyebildiği bellek içi nesne ağacıdır.
- FrameworkProgramlamanın Temelleri, s. 22Framework, bir uygulamanın yapısını sağlayan, yeniden kullanılabilir kod, araç ve kural temelidir; geliştiriciler yalnızca kendi mantıklarını doldurur.
- Duyarlı TasarımWeb Geliştirme, s. 15Duyarlı tasarım, web sayfalarının yerleşimini, görsellerini ve metnini telefondan büyük monitöre her ekran boyutuna otomatik uyduran yaklaşımdır.
- Tailwind CSSWeb Geliştirme, s. 47Tailwind CSS, utility-first bir CSS framework'üdür: özel stil dosyaları yerine öğeleri doğrudan HTML'de küçük, tek amaçlı sınıflarla biçimlendirirsiniz.
Kaynaklar
Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin