CSS

CSS Dersleri 4 – Seçiciler ve söz dizimi

cssicimage - CSS Dersleri 4 - Seçiciler ve söz dizimi

Css Seçiciler ve Sözdizimi

Seçiciler başlığında ele alacağımız konuları Alt başlıklara ayıracak olursak :

1- Sınıf Seçicisi (Class Selector)
2- Tekil Seçiciler (ID selector)
3- Torun Seçiciler (Descendant Selectors)
4- Çocuk Seçiciler (Direct Child Selectors)
5- Bitişik Kardeş Seçiciler (Next Sibling Selector)
6- Global Seçiciler (Universal Selector)
7- Nitelik Seçiciler (Attribute Selectors)
8-Evrensel Seçiciler(Universal Selector)
9-Özellik Seçicileri(Attribute Selectors)
10-Sözde Sınıflar ve Sözde Elemanlar.

Olarak 10 ana başlığa ayırabiliriz. Şimdi seçicilerimizi ve özelliklerini tanımadan önce Seçici konusuna bi göz gezdirelim.

Css’de Seçici ne demektir : Kısaca css de seçici html içerisindeki tüm tag ve elemanlara verilen css tasnifidir. (heading Tagları, p, span, body… vb). Seçici Konularımızı inceleyecek olursak;

Sınıf Seçicileri (class selector)

Sözdizimi

.class-adi { <em>style özellikleri</em> }

Örnek

p.siyah{ color:#000;}

Yukardaki Örneğimizde bulunan karakterleri tanımlayacak olursak:

p         : Seçici
siyah  : Sınıflandırma ismi
{ color:#000;} : Bildirim Bloğu

Bu örneğimizde Class Name’i siyah olan html Bloğumuza Bu siyah class’ının içerisindeki p tagı (parapgraph) ile ayrılmış alandaki yazıların renklerini siyah yap diyoruz.

Bir örnek daha yapalım fakat bu örneğimizde belirli bir html elemanı yerine istediğimiz kadar html elemanına değer tanımlayalım.

.sagayasla {text-align:right;}

Bu örnekte sagayasla class’ına sahip olan html elemanımıza içeriğindeki yazıların sağ tarafa yaslı olması gerektiğini bildiriyoruz.

Birden Fazla Sınıf kullanımı : Bu tür kullanımlarda sınıflarımızı birden çok html elemanı için kullanabilmekteyiz. örnek vermek gerekirse:

<style type="text/css">
<span style="line-height: 1.5;">
.gerekli {font-weight:normal;}
.mesaj {color:#000;}
.gerekli .mesaj {background-color:#ff0022;}
</style>

yukarıdaki örnekte daha önce tanımladığımız css lerimizi html elemanlarına atadık ve iki css içeriğini tek bir html elemanına yansıtmış olduk.

Tekil Seçiciler (ID selector)

Sözdizimi:

#id-adı {style özellikleri}

Tanım:
Tekil seçiciler sınıf seçicilerle her ne kadar aynı gibi görünse de kullanılabilirlik açısından farklıdır. Sınıf seçiciler aynı yazılım dökümanında birden fazla elemana atanabilirken tekil seçiciler tek bir elemana atanırlar. Sınıf seçicileri tanımlarken . (nokta) kullandığımızı ve tekil seçicileri tanımlarken # (diyez) kullandığımızı hatırlatmak isterim.
Örnek:

#tekilsecici {color:#222;}
<title>CSS Tekil Seçiciler</title>
<style type="text/css">
#tekil1{ color: 000;}
#tekil2{color: ff0022;}
</style>
</head>
<body>
<p id="tekil1">Makale yazı Rengimiz siyah</p>
<p id="tekil2">Makale yazı Rengimiz kırmızı</p>
</body>
</html>

Tekil Seçiciler de bir dökümanda sadece bir elemana uygulanır demiştim. Aslında birden fazla yerde aynı tekil seçiciyi kullanabilirsiniz, browserlar buna müsade etmektedir, Fakat ! javascript ya da jquery gibi veya php gibi yazım dillerinde bu ID leri kullandığınızda sayfa da hatalarla karşılaşabilirsiniz, bu yüzden tek yerde kullanmanız daha temiz bir yazılım sağlayacaktır.

İç içe Seçiciler (Descendant selector)

Sözdizimi:

selector1 selector2 { style properties }

Tanım:
iç içe seçicilerde yapılan tanımlamalar sadece hedef yani tek bir elemana yapılmaktadır. Örneğin h1 tagının altındaki em elemanına bir sınıf tanımlaması yapacak olsak bunun için normalde bir css tanımlayıp bunu her bir html içerisindeki h1 tagına uygulamamız gerekecekti ama iç içe seçicilerde bunu tek bir css komutu ile aşıyoruz ve böylece kod kirliliğinden de kurtulmuş oluyoruz.

Örnek:

 h1 em {color:#000;}

Yukardaki örneğe göre dökümamız içerisindeki tüm h1 tagları altında bulunan em torun seçicileri içerisindeki text ler siyah renk alacaktır.

İç içe seçiciler sadece iki adet tanımlamayla sınırlı değil hatta sınırsızdır da diyebiliriz.

ul ol il em {color:#ff0022;}

Atamalar arasına virgül koyarak ta istediğimiz kadar html elemanına css tanımı uygulayabiliriz.

h1 em, h4 em, h3 strong {color:#ff0022}

Bu örnekte göreceğiniz üzere hepsine ayrı ayrı tanımlamalar yapıp kod fazlalığı yaratmak yerine araya attığımız virgülle bu elemanların css lerini tanımlamış olduk.

Çocuk Seçiciler (Child selector)

Sözdizimi:

seçici1 > seçici2 {style özellikleri}

Açıklama:
Aşağıdaki Örneğimizde net bir şekilde olayı göreceksiniz. Örnekte farkettiyseniz  Büyüktür işareti ile (>) h1 tagı ve strong html elemanı ayrılmışlardır. Burada H1 tagı altındaki strong elemanı çocuk seçicidir ve sadece direk olarak h1 altında bulunan strong elemanları etkilenecektir. Yine kodda gördüğünüz gibi ikinci satırdaki h1 tagı içerisinde em içinde bulunan strong bu css tanımından etkilenmemiştir.

Örnek:

<title>CSS Çocuk Seçiciler</title>
<style type="text/css">
h1 > strong {color: black}
</style>
</head>
<body>
<h1>Buradaki <strong>yazılar</strong> çocuk seçicidir.</h1>
<h1>Buradakiler <em>yazılar<strong> çocuk seçici </strong></em> değildir </h1>
</body>
</html>

Bitişik Kardeş Seçiciler (Next Sibling Selector)

Sözdizimi:

İlk-eleman+hedef-eleman { style özellikleri }

Açıklama:

Bitişik kardeş seçiciler, aynı değerdeki ard arda gelen html elemanlarından sonraki elemana değer atamak için kullanılmaktadır.

Örnek:

Css Kısmı

li + li {
  color: Blue;
  font-weight:Bold;
}

Html Kısmı

<ul>
  <li>Ali</li>
  <li>Berkin</li>
  <li>Ethem</li>
</ul>

Çıktısı:

  • Ali
  • Berkin
  • Ethem

Gördüğünüz Gibi Artıdan (+) önce gelen Ali Elemanımızdan Sonra gelen Berkin Elamnımız Mavi ve kalın olarak tanımlanmış oldu.

Seçicilere Sonraki dersimizde Devam edeceğiz, sonraki dersimizde işleyeceğimiz konular.

-Evrensel Seçiciler(Universal Selector)
-Özellik Seçicileri(Attribute Selectors)
-Sözde Sınıflar ve Sözde Elemanlar.

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

Başa dön tuşu