CSS Sözdizimi ve Seçiciler

CSS, tarayıcı tarafından yorumlanan ve daha sonra belgenizdeki karşılık gelen öğelere uygulanan stil kurallarından oluşur. Stil kuralı üç bölümden oluşur:

  • Seçici (Selector) – Seçici, stilin uygulanacağı HTML etiketidir. Bu <h1> veya <table> gibi herhangi bir etiket olabilir.
  • Özellik (Property) – Özellik, HTML etiketinin bir tür özelliğidir. Basitçe söylemek gerekirse, tüm HTML özellikleri CSS özelliklerine dönüştürülür. Renk, yazı tipi vb. olabilirler.
  • Değer (Value) – Değerler özelliklere atanır. Örneğin, renk (color) özelliğinin değeri mavi veya #0000FF vb. olabilir.

CSS Stil Kuralı Sözdizimini aşağıdaki gibidir:

selector { property: value }

seçici { özellik: değer }

Örnek: Bir tablo kenarlığını aşağıdaki gibi tanımlayabilirsiniz.

table{ border : 1px solid #CC0000; }

Burada tablo bir seçicidir ve border bir özelliktir ve 1px solid #CC0000 bu özelliğin değeridir.

Tip Seçiciler

Yukarıda gördüğümüzle aynı seçicidir. Yine, tüm seviye 1 başlıklarına renk vermek için bir örnek yapalım:

h1 {
   color: #36CFFF; 
}

Evrensel Seçiciler

Belirli bir türdeki elemanları seçmek yerine, evrensel seçici tüm elemanları seçer.

* { 
   color: #000000; 
}

Bu kural, belgedeki her öğenin içeriğini siyah yapar.

Torun Seçicileri

Bir stil kuralını belirli bir öğeye yalnızca belirli bir öğenin içinde olduğunda uygulamak istediğinizi varsayalım. Aşağıdaki örnekte verildiği gibi, style kuralı <em> öğesine yalnızca <ul> etiketinin içinde olduğunda uygulanır.

ul em {
   color: #000000; 
}

Sınıf Seçicileri

Stil kurallarını öğelerin sınıf niteliğine göre tanımlayabilirsiniz. Bu sınıfa sahip tüm öğeler, tanımlanan kurala göre biçimlendirilir.

.siyah{
   color: #000000; 
}

Bu kural, belgemizde sınıf özniteliği siyah olarak ayarlanmış her öğe için yazı rengini siyah yapar.

h1.siyah{
   color: #000000; 
}

Bu kural, yazı rengini yalnızca sınıf özniteliği siyah olarak ayarlanmış <h1> öğeleri için siyah yapar.

Belirli bir öğeye birden fazla sınıf seçici uygulayabilirsiniz. Aşağıdaki örnekteki gibi:

<p class="center bold">
   Bu paragraf center ve bold sınıfları tarafından şekillendirilecektir.
</p>

ID (kimlik) Seçicileri

Stil kurallarını öğelerin id niteliğine göre tanımlayabilirsiniz. Bu kimliğe sahip tüm öğeler, tanımlanan kurala göre biçimlendirilir.

#siyah{
   color: #000000; 
}

Bu kural, id niteliği belgemizde siyah olarak ayarlanmış her öğe için içeriği siyah yapar.

h1#siyah{
   color: #000000; 
}

Bu kural, içeriği yalnızca id niteliği siyah olarak ayarlanmış <h1> öğeleri için siyah yapar. Id seçicilerin gerçek gücü, alt seçiciler için temel olarak kullanıldıkları zamandır. Örneğin:

#siyah h2 {
   color: #000000; 
}

Bu örnekte, id niteliği siyah olarak ayarlanmış tüm <h2> başlıkları siyah renkte görüntülenecektir.

Çocuk Seçiciler

Torun seçicileri görmüştük. Torunlara çok benzeyen ancak farklı işlevselliğe sahip bir tür daha seçici var. Aşağıdaki örneğe bakalım:

body > p {
   color: #000000; 
}

Bu kural, <body> öğesinin doğrudan alt öğesi olan tüm paragrafları siyah yapar. <div> veya <td> gibi diğer öğelerin içine yerleştirilen diğer paragraflara bu kuralın herhangi bir etkisi olmaz.

Özellik (nitelik) Seçicileri

Belirli özelliklere sahip HTML öğelerine stiller de uygulayabilirsiniz. Aşağıdaki stil kuralı, type özelliğinin değeri text olan tüm öğeler için uygulanacaktır.

input[type="text"] {
   color: #000000; 
}

Bu yöntemin avantajı, <input type = “submit” /> öğesinin etkilenmemesidir ve rengin yalnızca istenen metin alanlarına uygulanmasıdır.

Çoklu Stil Kuralları

Tek bir öğe için birden fazla stil kuralı tanımlamanız gerekebilir. Birden çok özelliği ve onlara karşılık gelen değerleri, aşağıdaki örnekte tanımlandığı gibi tek bir blokta birleştirebiliriz.

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Burada tüm özellik ve değer çiftleri noktalı virgül (;) ile ayrılır. Bunları tek bir satırda veya birden çok satırda tutabilirsiniz. Daha iyi okunabilirlik için, bunları ayrı satırlarda tutmanızı tavsiye ederim.

Gruplama Seçicileri

Seçicileri virgülle ayırarak birçok seçiciye bir stil uygulayabilirsiniz. Örneğin:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Bu stili kuralı h1, h2 ve h3 elemanlarına da uygulanacaktır. Listenin sırası önemsizdir.

Son olarak, çeşitli id seçicileri aşağıda gösterildiği gibi bir araya getirebilirsiniz.

#icerik, #footer, #yazi{
   position: absolute;
   left: 510px;
   width: 200px;
}

Tüm CSS dersleri için tıklayınız.