Seçiciler, CSS stillerinin HTML öğelerine nasıl atanacağını belirler. İlgili tanımlamada seçicinin erişmesini istediğiniz öğenin adını ilk olarak belirtirsiniz. Gerçek deklarasyon süslü parantezler içinde gerçekleşir. Bir deklarasyon içinde bir veya daha fazla özellik belirtilebilir. Genel sözdizimi şu şekildedir:
Seçici {
Özellik1: Değer;
Özellik2: Değer;
Özellik3: Değer;
}Benzer tanıma zaten daha önceki öğreticide rastladınız.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Her deklarasyonun kesinlikle bir noktalı virgülle sona erdiğinden emin olun
Mevcut Seçicilere Bir Bakış
Gerçekten CSS, size birçok seçiciyle bekliyor, size en önemli olanları tanıtacağım. Çünkü şu açık: Yalnızca seçicilerle çalışmayı öğrendiğinizde, CSS özelliklerini akıllıca tanımlayabilirsiniz.
Bir HTML belgesi içinde stiller atamanın en basit yolu, Element Seçicisidir.
Aşağıdaki sözdizimi kullanılarak tüm p öğelerine siyah renk atanır.
p {
color: #009966;
}
Birkaç öğeye aynı stili atamak isterseniz, bu da mümkündür.
Bu durumda ilgili öğeleri yan yana yazarak, her birini virgülle ayırarak not alırsınız.
p, h1, li {
color: #000;
}
Öğeleri farklı stillerle de donatabilirsiniz. Stiller, her biri noktalı virgülle ayrılmış şekilde not edilir.
p {
color: #000;
background-color: red;
}
Verilen varyantların bir kombinasyonu da mümkündür.
p, h1, li {
color: #009966;
background-color: red;
}
Sonuç şöyle olabilir:
Birden Fazla Öğe İçeren Alanlar
Çoğu zaman, birden fazla HTML öğesinden oluşan bir alanı biçimlendirmek gereklidir. Bu tür durumlar için HTML'de span ve div adında iki özel öğe bulunmaktadır. Bu öğeler size -bu arada bu seride de- sıkça karşınıza çıkacaktır.
Bir örnek:
<div class="artikel"> <h1>Renk Festivali</h1> <p class="thema">MarkusMelzer tarafından renk festivali oluşturma öğreticisi.<span class="autor">MarkusMelzer</span>.</p> </div>
div ve span arasındaki tek fark, div öğesinin metin akışında yeni bir satır zorlamasıdır. Öte yandan, span yeni bir satır oluşturmaz. Gösterilen örnek, başlık ve bir metin paragrafı içeren bir div alanı tanımlar. Metin paragrafının içinde de bir span alanı vardır.
ID ve Sınıf Seçicileri
Şimdiye kadar element seçicileri kullanıldı. Aşağıdaki örnekle, bir element seçici aracılığıyla tüm h1 başlıkları biçimlendirilir.
h1 {
color: #000;
background-color: red;
}
Ancak bu şekilde her zaman istenilen sonuç elde edilmez. Örneğin, belirli başlıklara belirli özellikler vermek isteyebilirsiniz. Bu tür durumlar için CSS'nin iki seçeneği vardır, yani sınıf ve ID seçicileri.
Sınıf seçicileriyle, HTML öğeleri sınıf niteliklerine göre çok özel olarak seçilebilir. İlgili HTML öğesinde bu amaçla class özniteliği belirtilmelidir. Sınıf tanımlamaları nokta ile başlar.
Bir örnek:
.kirmizi {
color: red;
}
Burada kirmizi sınıfı tanımlanmıştır. Verilen kırmızı özellikleri bir HTML öğesine eklemek için class ardından sınıf adını belirtirsiniz.
<p class="kirmizi">PSD-Tutorials.de</p>
ID seçici de benzer şekilde kolayca kullanılabilir. ID seçicisi çift çizgi tarafından tanınır.
#ustmenu {
color: mavi;
};Bu örnekte ustmenu ID'si tanımlanmıştır. Ancak Dikkat: Bir belgede bir ID gerçekten sadece bir kez atanabilir. Tanımlanan bir ID özelliğine erişim şu şekilde görünür:
<div id="ustmenu">Burada menü bulunuyor</div>
Özniteliğe ID adını atarız. Burada kare işaretinin (#) yazılmamasına dikkat edin.
Gösterilen bilgiler ayrıca birbiriyle kombinlenebilir. Örneğin, bir HTML öğesine birden fazla sınıf atayabilirsiniz.
<p class="kırmızı büyük">PSD-Tutorials.de</p>
Bu örnekte, metin paragrafına "kırmızı" ve "büyük" sınıfları atandı. Bir sınıf ve bir ID belirtmek isterseniz, aşağıdaki gibi olacaktır:
<p class="kırmızı" id="navi">PSD-Tutorials.de</p>
Ayrıca öğeleri ve ID'leri bir arada kullanabilirsiniz. Buna dair bir örnek:
div.navi {
color: mavi;
}
Bu sözdizimi yalnızca navi sınıfına sahip div öğeleri için geçerli olacaktır. Aynı zamanda navi sınıfına sahip p öğeler bundan etkilenmeyecektir.
CSS'de seçicilerin başka bir kombinasyon türü daha vardır. Bunun için aşağıdaki sözdizimine bir göz atın:
h1 {
color: kırmızı;
}
em {
color: mavi;
}
Burada birinci derece başlıklara kırmızı rengi atanmıştır. em öğeleri ise mavi rengini alır.
Bu iki talimatı bir araya getirerek, sadece em öğelerinin, içinde bulunduğu h1 öğelerine mavi olarak renklendirilmesini sağlayabilirsiniz.
h1 em {
color: mavi;
};
Öğe adları burada virgülle ayrılmadan yazılır.
Bu aslında sık karşılaşılan bir hata tuzaklarıdır, özellikle CSS başlangıç seviyesinde olanlar için. Burada aynı sözdizimi, ancak virgül eklenmiş hali:
h1, em {
color: mavi;
}
Bu sözdizimi ne anlama gelir? Hem h1- hem de em öğeleri hedeflenir. Bu, virgül olmadan olan sözdizimiyle tamamen farklıdır!
Bir diğer önemli seçici, Evrensel seçici olarak adlandırılır. Bu, herhangi bir öğenin seçimini sağlar. Bu seçici, bir yıldız (*) işaretiyle tanımlanır.
* {
color: kırmızı;
}
Bu sözdizimiyle tüm öğeler kırmızıya boyanır. Bu seçicide de dikkate alınması gereken bazı sözdizimi özellikleri bulunmaktadır.
#mainnavi * {
color: kırmızı;
}
Bu örnekte, "mainnavi" kimliğine sahip öğenin içindeki tüm öğelerin ön plan rengi kırmızı olarak ayarlanmıştır. Ancak bu öğe için değil.
Bir deklarasyonun başında Evrensel seçici yer alıyorsa, belirtilmeye gerek yoktur. Böyle bir şey gereksiz olacaktır:
* p {
color: kırmızı;
}
Bu sözdizimi şu ifade ile eşdeğerdir:
p {
color: kırmızı;
}
Sonraki öğreticilerde diğer seçicileri öğreneceksiniz.
