CSS: kurallar, seçiciler, özellikler

CSS – Basamaklı Stil Sayfaları (Cascading Style Sheets), web sayfalarını tasarlamak için kullanılan bir stil dilidir. Sayfa içeriğini sunumundan ayırmanıza olanak tanıyarak mizanpajlar ve tasarımla çalışmayı kolaylaştırır.

CSS, her biri bir web sayfasındaki belirli bir öğenin stilinin nasıl olması gerektiğini belirleyen bir dizi kuraldan oluşur. Kurallar, seçicileri kullanarak öğelerin seçilmesini ve bu öğeler üzerinde özelliklerin ayarlanmasını içerir. CSS’nin ana bileşenlerine – kurallar, seçiciler ve özellikler – bakalım.

Kurallar

Bir CSS kuralı, bir seçici ve bir özellik bloğundan oluşur. Kural, tarayıcıya web sayfasının hangi öğelerine stil verileceğini ve bunların nasıl stillendirilmesi gerektiğini söyler. Her kural, öğeleri seçen bir seçiciyle başlar ve seçilen öğelere uygulanan bir özellikler bloğuyla sona erer.

İşte basit bir kural örneği:

Burada `p`, sayfadaki tüm paragrafları seçen bir seçicidir. Özellik bloğunun içinde paragraf stilleri ayarlanır: mavi metin rengi ve yazı tipi boyutu 16 piksel.

Seçiciler

Seçiciler, belirli stilleri uygulamak için bir web sayfasındaki bir veya daha fazla öğeyi seçmenize olanak tanır. Seçiciler çok basit veya daha karmaşık olabilir ve öğeleri türlerine, sınıflarına, kimliklerine, niteliklerine ve hatta sayfadaki konumlarına göre seçmenize olanak tanır.

Basit seçicilere örnekler:

• `p` – tüm paragrafları seçer.
• `.header` – “başlık” sınıfına sahip tüm öğeleri seçer.
• `#logo` – kimliği “logo” olan öğeyi seçer.

Daha karmaşık seçicilere örnekler:

• `ul li` – `li` listesindeki `ul` öğesinin çocukları olan tüm öğeleri seçer.
• `input` – sayfadaki tüm metin alanlarını seçer.

Özellikler

Özellikler, seçiciler kullanılarak seçilen öğelerin görünümünü belirler. Her özelliğin, öğenin nasıl görünmesi gerektiğini belirten bir değeri vardır.

Emlak örnekleri:

• `color` – öğenin metin rengini tanımlar.
• `font-size` – yazı tipi boyutunu ayarlar.
• `background-color` – öğenin arka plan rengini ayarlar.
• `border` – öğenin kenarlığının stilini, kalınlığını ve rengini tanımlar.

İşte özelliklerin kullanımına bir örnek:

Bu kural, tüm h1 başlıklarını seçer ve metin rengini kırmızı, yazı tipi boyutu 24 piksel, sarı arka plan ve 1 piksel kalınlığında siyah kenarlık olarak ayarlar.

Birleştiriciler

CSS’deki birleştiriciler, seçicileri birleştirmenize ve daha spesifik kurallar oluşturmanıza olanak tanır. İşte bazı birleştirici örnekleri:

• `div p` – ‘div’ öğelerinin çocukları olan tüm ‘p’ öğelerini seçer.
• `.menu-item > a` – `.menu-item` sınıfına sahip öğelerin doğrudan alt öğesi olan tüm `a` öğelerini seçer.
• `h2 + p` – doğrudan “h2” öğelerinden sonra gelen tüm “p” öğelerini seçer.

Birleştiricileri kullanmak, stillerin bir sayfadaki öğelere nasıl uygulanacağına dair ince ayar yapmanızı sağlar.

Sözde sınıflar ve sözde öğeler

Sözde sınıflar ve sözde öğeler, belirli durumlarda olan veya belirli bölümleri olan öğeleri seçmenize olanak tanır. Ana seçiciden sonra belirtilirler ve iki nokta üst üste ile gösterilirler.

Sözde sınıf örnekleri:

• `:hover` – İmleç bir öğenin üzerine geldiğinde stilleri uygular.
• `:active` – öğe etkinken (örneğin, bir düğmeyi tıklatarak) stilleri uygular.
• `:odak` – öğe odağa sahip olduğunda stilleri uygular (örneğin, tıklandığında bir giriş alanı).

Sözde öğelere örnekler:

• `::before` – seçilen öğenin içeriğinden önce içerik ekler.
• `::after` – seçilen öğenin içeriğinden sonra içerik ekler.
• `::first-line` – öğedeki metnin ilk satırına stiller uygular.
• `::ilk-harf` – öğedeki metnin ilk harfine stiller uygular.

CSS dosyalarını içe aktarın

Kodunuzu daha yapılandırılmış ve bakımı daha kolay hale getirmek için CSS, diğer dosyalardan stilleri içe aktarmanıza olanak tanır. Bu, CSS dosyasının en üstüne yerleştirilebilen `@import` komutuyla elde edilir.

Bu şekilde, stilleri farklı dosyalara ayırabilirsiniz, bu da onları düzenlemeyi kolaylaştıracak ve her birinin boyutunu küçültecektir.

Basamaklı ve öncelikler

CSS basamaklandırma ilkesine dayanır, bu da stillerin farklı yerlerde ve kaynaklarda tanımlanabileceği ve tarayıcının önceliklere göre hangi stilin uygulanacağına karar vereceği anlamına gelir. Basamaklı şunları içerir:

• Seçici Önceliği: Tarayıcı, seçicilerin özelliklerine saygı duyar. Seçici ne kadar spesifik olursa önceliği o kadar yüksek olur.
• Stil Sırası: İki kural aynı özgüllüğe sahipse öğeye son kural uygulanır.
• Stil Önemi: `!important` kullanarak bir stilin önemini ayarlayabilirsiniz. Bu, stilin öncelikli olmasını sağlar.

Gelecekteki kod bakımı sorunlarından kaçınmak için `!important` öğesini dikkatli bir şekilde kullanmak önemlidir.

Medya sorguları

CSS, stillerin ekran genişliği ve çözünürlük gibi cihaz ayarlarına göre uyarlanmasına olanak tanır. Medya sorguları, cep telefonlarından masaüstü bilgisayarlara kadar çeşitli cihazlarda iyi görünen duyarlı tasarımlar oluşturmanıza olanak tanır.

Medya sorgusu örneği:

Bu örnekte, ekran genişliği 768 pikseli geçmediğinde stiller sayfa öğelerine uygulanacaktır.

CSS, güçlü bir web tasarım aracıdır ve bu temel bilgiler, onu güzel ve işlevsel tasarımlar oluşturmak için kullanmaya başlamanıza yardımcı olacaktır. Alıştırma ve deneyim, becerilerinizi geliştirmenize ve deneyimli bir ön uç geliştirici olmanıza yardımcı olacaktır.