Temel CSS Seçicileri

Temel CSS Seçicileri

CSS’de, XHTML ögeleri şekillendirebilmek için öncelikle onları seçmemiz gerekir. Bu seçme işlemini CSS’in bize sağladığı seçicileri (selectors) kullanarak gerçekleştiririz. İsterseniz hızlıca seçicilerimizi tanıyalım.

Tip Seçiciler

XHTML doküman içerisindeki ilgili elemetleri topluca seçmemizi sağlar.

/*Bütün h1 etiketleri mor olsun*/
h1{
	color:purple;
}

/*Bütün h2 etiketleri kırmızı olsun*/
h2{
	color:red;
}

Pratikte tip seçiciler, bir web uygulamasına dair genel tanımlamalar yapılırken kullanılır. Örneklemek gerekirse web uygulamamızın arka plan rengi, genel font özellikleri, yazı rengi gibi tanımlamaları body{} tip seçicisini kullanarak gerçekleştirebiliriz.

body{
	font:75%/normal Arial, Verdana, Tahoma, sans-serif;
	background:#024978  url(../images/standart/general/body_bg.jpg) repeat-x;
	color: #333;
	margin:0 0 20px 0;
}

Ya da web uygulamasındaki genel link tanımlamalarını tip seçicileri ile gerçekleştiririz.

a 	    {color:#1845AD; cursor:pointer; text-decoration:underline;}
a:hover {color:#000; text-decoration:none;}

ID Seçiciler

ID seçiciler, bir XHTML doküman içerisinde ID özelliğine sahip elemetleri seçmemizi sağlar. XHTML doküman içerisinde herhangi bir ID, sadece bir kere kullanılmalıdır.

/* ID Seçiciler */
#ID_Adi{}

Gerçek dünyadan örnek vermek gerekirse; ID seçicileri mesela <ol> tabanlı bir navigasyon oluşturmak için kullanılabilir. İlgili sıralı listeye (<ol>) bir ID verilerek, sayfa içerisinde onun özel olması sağlanır. Böylece CSS içerisinden ID seçiciler ile, navigasyonu temsil eden sıralı listeye ulaşılmış olur.

<ol id="Navigasyon">
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#">Hizmetler</a></li>
      <li><a href="#">İnsan Kaynakları</a></li>
      <li><a href="#">İletişim</a></li>
</ol>
/* ID Seçiciler  Küçük-Büyük Harf Duyarlıdır.*/
#Navigasyon {
	margin:0;
	padding:0;
}
/* Ya da */
ol#Navigasyon {
	margin:0;
	padding:0;
}

Sınıf (Class) Seçiciler

ID Seçicilerden farklı olarak genel bir CSS kuralını, birden fazla elemente uygulamak istiyorsak sınıf seçicileri kullanırız.

/* Sınıf Seçiciler */
.Sinif_Adi{}

Sayfa içerisinde eğer tekrarlayan unsurlarımız varsa, bunlara dair genel CSS kurallarını sınıf seçiciler ile tanımlarız. Mesela haber başlık ve spot yazılarının alt alta sıralandığı bir web sayfasında, bu haber başlık ve spotlarını sınıf seçiciler ile seçebiliriz.

/* Sınıf Seçiciler Küçük-Büyük Harf Duyarlıdır */
<h2 class="haber">Haber Başlığı</h2>
<p class="spot">Haber Spot Yazısı</p>

<h2 class="haber">Haber Başlığı</h2>
<p class="spot">Haber Spot Yazısı</p

<h2 class="haber">Haber Başlığı</h2>
<p class="spot">Haber Spot Yazısı</p
/* Sınıf Seçiciler  Küçük-Büyük Harf Duyarlıdır.*/
h2.haber {
	font-size:12px;
	font-weight:bold;
}

p.spot {
	margin:15px 0 ;
	line-height:16px;
}

/* Ya da*/
.haber {
	font-size:12px;
	font-weight:bold;
}

.spot {
	margin:15px 0 ;
	line-height:16px;
}
Hemen Paylaş!
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Live
  • MySpace
  • LinkedIn
  • Technorati
  • Netvibes
  • FriendFeed
  • Reddit
  • Yahoo! Bookmarks

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.

Yorumla Bakalım

Yorumlara Git

Daha Fazlasını Oku!

Makale Detayı

Bu Makale için toplam 3 adet yorum bulunmaktadır...

Bu Makale 20 February, 2009 ve saat 12:23 itibariyle CSS kategorisi altına kaydedilmiştir. Bu makale ile ilgili yorumları RSS 2.0 beslemesinden takip edebilirsiniz.. Bu makale için yorum yapabilir, veya kendi web sitenize trackback sağlayabilirsiniz...

Temel CSS Seçicileri için toplam 3 yorum var...

  1. Wavatar yakuter Diyorki:

    Gayet faydalı bir yazı. Örnekler ve kodlar oldukça güzel. Ellerine sağlık…

    1
  2. Wavatar yedincisenol Diyorki:

    Oldukça basit ve kısa olmuş.
    Senden konuyu daha geniş anlatan bir makale bekleniyor. :D

    2
  3. Wavatar oztecnic Diyorki:

    @yakuter ilgin için teşekkür ederim…

    @yedincisenol, CSS Seçicileri konusunda bunu takip eden bir kaç yazı daha hazırlıyorum, umarım senin gönlünü bu yazılarla almış olurum ;)

    3

Yorumla

Yorumunuzu ve katkılarınızı sabırsızlıkla bekliyoruz :)

Yukarıya Çık