CSS seçicileri css de elemanlar nasıl seçilir?
26 Ağustos 2015 Furkan Atabaş 4.895 Okunma Yorum Yok

CSS seçicileri css de elemanlar nasıl seçilir?


CSS (3)

Yeniden merhaba önceki css yazım olan CSS nedir, ne işe yarar ve nasıl kullanılır? başlıklı makalemde css konusuna giriş yapmıştım. Şimdi sıra css ile elemanların nasıl seçileceğini anlatmaya geldi. Css ile stil uygulanacak nesneleri seçebilmek için  3 farklı yol vardır.

  • Eleman seçici
  • ID seçici
  • Class (sınıf) seçici

Bu 3 seçici dışında farklı operatörlerle yapılan değişik css nesne seçim türleri de var fakat diğer seçim türlerinde bile yukarıda söylediğim 3 seçeneği kullanacağımız için onları bu gruba katmıyorum.  Belki başka bir yazıda bahsedebilirim.

Anlatıma başlamadan önce vermem uyarmam gereken bir konu var. Eğer ki şuan css öğrenmeye karar vermiş iseniz önerimiz html bilmenizdir eğer bilmiyorsanız css eğitiminizden vazgeçin ve ilk önce html öğrenmeye başlayın. Çünkü css yazabilmek için id ve classın ne olduğunu bilmeniz gerekir. Eğer biliyorsanız bir alt paragraftan okumaya devam edin (:

Bilindiği üzere mantıklı olan her html elemanı id ve class adında iki özellik alabiliyor. Mantıklı olan derken anlatmaya çalıştığım <html> <head> gibi elemanlara bu değerleri vermenin bence bir anlamı olmayacağıdır. Yukarıda bahsettiğim 2 seçenekte bulunan css id seçici ve css sınf seçicinin yöntemi html elemanına girmiş olduğumuz id ve class değerlerinin yazılmasıdır.

• Başlamadan önce css kod yapısını hatırlamamız açısından şuraya bırakıyorum

seçilen_nesne {  özellik:değer;   özellik:değer;  özellik:değer }


1-Eleman Seçiciler

Css seçicilerinin ilk seçeneği olan eleman seçici yöntemi css uygulanacak olan html elemanının etiket adının yukarıdaki css kod yapısında seçilen_nesne yerine yazılmasıyla gerçekleşir. Örnek olarak bir web sitesinde resim göstermeye yarayan <img …/> nesnesine css uygulamak istersek css kodumuz img{ özellik:değer; özellik:değer; } şeklinde olmalıdır. Şimdi ise aşağıda ki kod örneğinde

  • “img” elemanına genişlik ve yükseklik
  • “p” elemanı içindeki yazılara kırmızı renk
  • “span” içerisindeki yazılara kalınlık
  • “textarea” elemanına mavi kenarlıklar ekleyelim.

Not: Parantez içinde bulunan css özelliklerini alt alta yada yan yana yazmanın herhangi bir büyük zararı yoktur ama eğer yan yana yazılıp satır araları fazla açılmaz ise daha hızlı yüklenip sitenizi yavaşlatmayacaktır. Bu gene de illa ki kodlarınızı yan yana yazın anlamına gelmez siz istediğiniz gibi yazın daha sonra çok kolay yöntemler ile boşluklar silinebiliyor.


2-ID Seçiciler

Css ile eleman seçmenin ikinci yolu olan ID seçiciler, seçilecek html elemanına girilmiş olan “id” değerini { süslü parantez başlangıcının önüne yazarak kullanılır. ID seçici olarak id değerinin başına “#” karakteri yazılır. Örnek olarak  id değeri kapak olan bir fotoğrafa css uygulayalım bunun için html elemanımızın kodu <img  id=”kapak” src=”..” /> css kodumuz #kapak{ özellik:değer; özellik:değer; } şeklinde olmalıdır. Aşağıdaki küçük örneğimizde id değerleri

  • “avatar” olan nesneye ovallik
  • “kapak” değeri verilmiş elemana dış boşluk
  • “sidebar” olan div nesnesine kenarlık
  • “footer” değerli div nesnesine arkaplan rengi verelim
  • “logo” olan resme genişlik ve yükseklik
  • “username” değeri olan inputa genişlik, yükseklik , ovallik, iç ve dış boşluk verelim

HTML elemanları içinde id değerleri nasıl verilir?

Şimdi html elemanlarına css id seçicisi ile stil uygulayalım

Not: Yukarıdaki bazı css nesne seçilmeleri esnasında #nesne_id bazılarında ise nesne#nesne_id şeklinde bir kullanım yapılmıştır.  Bu kullanım şekilleri arasında benimde bilmediğim çok istisna durumlar dışında  hiç bir fark yoktur istediğiniz gibi kullanabilirsiniz. nesne#nesne_id kullanımının nerelerde gerektiğini araştırıp öğrendiğimde sizin ile paylaşacağım.


 3- Class (Sınıf) seçiciler

Bu seçicilerin kullanımı ID seçiciye benzer. Bilmemiz gereken id seçici ile aralarında olan farklar  html nesnesinde ( id=”” ) yerine ( class=”” ) css dosyasında ise (#) yerine (.) kullanmaktır. Eğer html biliyorsanız html kodlarında  id ve class farkını biliyorsunuzdur zaten o yüzde örneğe geçiyorum. Şimdi ise class değerleri

  • “liste” olan li elemanlarına iç boşluk ve kenarlık
  • “menu” olan a elemanlarına yazı rengi
  • “thumbnail” olan img elemanlarıan ise genişlik ve yükseklik
  • “yesil” olan “span” nesnelerine de yeşil yazı rengi

HTML kodları

Css kodları