Sefik.net - Css ID Class ve Etiket Seçiciler

Css Arkaplan Özellikleri (Css Background)

Css ID Class ve Etiket Seçiciler

Sitillerin etki edeceği nesneleri belirlemek için seçiciler kullanılır. Üç farklı türde seçici vardır. Bunlar Class seçici , id seçici ve etiket seçicidir.

Sınıf (Class) Seçicisi

Sınıf seçicileri birden fazla ögeye uygulanabilir ve birden fazla kullanılabilir. Sınıf seçicilerde seçici adının öncesine "." (nokta) işareti konulmalıdır.

Örnek :kirmizi adında bir sınıf seçicisi oluşturularak, yazının biçimi kalın ve rengi kırmızı olan özellikler verilmiştir.

<html>
<head>
<title>Css Örnekleri</title>
<style type="text/css">
   .kirmizi {
      color:#ff0000;
      font-weight:bold;
   }
</style>
</head>
<body>
<p class="kirmizi">Burası kirmizi sitili ile biçimlendirildi</p>
<h1 class="kirmizi">Burası kirmizi sitili ile biçimlendirildi</h1>
</body>
</html>

Çıktısı :

Burası kirmizi sitili ile biçimlendirildi

Görüldüğü üzere iki farklı öge için (p ve h1) aynı sınıf (class) seçicisini uygulamış olduk. Aynı şekilde bu stili herhangi bir ögenin sınıf (class) özniteliğine atayarak defalarca kullanabiliriz. Bu sebeple bu tür seçiciler çoğul seçici olarak da adlandırılır.

ID Seçicisi

Sınıf (class) seçicilerini birden fazla ögeye atayarak kullanabiliyorduk; ID seçiciler ise yalnız bir ögeye atanır ve bir kez kullanılırlar.
ID seçicisi olarak belirlediğimiz ismin önüne “#” koymamız gerekmektedir. ID'ye verdiğimiz isim, sayfa içinde aynı ID ye sahip ögeye (etiket) uygulanmış olacaktır.

Örnek :Örneğimiz için #baslik ID seçicisi p etiketine uygulanmışdır. P etiketinin id adı bizim tanımladığımız seçici adı (baslik) ile aynı olduğuna dikkat ediniz.

<html>
<head>
<title>Css Örnekleri</title>
<style type="text/css">
    #baslik {
      color:#000080;
      font-size:16px;
      font-weight:bold;
   }
</style>
</head>
<body>
<p id="baslik">Burası başlık id seçicisi ile biçimlendirildi</p>
</body>
</html>

Çıktısı :

Burası başlık id seçicisi ile biçimlendirildi

Not: Gerek sınıf (class) seçici olsun, gerekse ID seçici olsun isim verirken Türkçe karakter kullanılmamalı ve isimlendirme rakamla başlamamalıdır.

Etiket (Tag ) Seçicisi
Etiket seçicileri aynı türden tüm ögelere (etiketlere), istediğimiz stili uygulamak için kullanılır. :

Örnek : sayfamızdaki paragraflarda yazı büyüklüğünün 16px, yazı tipinin Arial ve kalın olmasını sağlamamak için, stilimiz aşağıdaki şekilde oluşturulur.

p {
   font-size:16px;
   font-family:Arial;
   font-weight:bold;
}

Bu şekilde etiket seçici kullanıldığında stil özellikleri , sayfa içerisinde bulunan tüm p etiketlerine etki edecektir.

Örnek : Etiket seçici örnek uygulama

Not : p ve h1 etiketlerine aşağıdaki gibi stil ayarları yapıldığında html sayfamız içerisinde kullanılan tüm h1 ve p etiketleri verilmiş olan stil özelliklerinden etkilenir.

 <html>  
<head>  
<title>Css Örnekleri</title>  
<style type="text/css">  
  /*p etiketi için stilimizi belirliyoruz*/
  p {  
	  color:#000080;  /* lacivert renk */
	  font-size:12px;  /* 12 pixel yazı puntosu */
   }

  /*h1 etiketi için stilimizi belirliyoruz*/
  h1 {  
	  color:#ff0000;  /* kırmızı renk */
	  font-size:16px;  /* 16 pixel yazı puntosu */
   }

</style>  
</head>  
<body>  
<h1>H1 etiketi ile oluşturulmuş başlık </h1>
<p>Burası p etiketi içerisinde yer alan metindir. Bu metin p etiketine verilmiş olan stil özellikleri ile biçimledirilmiştir.</p>
<h1>Başka Bir Başlık</h1>
<p>Burası başka bir p etiketi içerisidir. </p>  
</body>  
</html>

Çıktısı :

H1 etiketi ile oluşturulmuş başlık
Burası p etiketi içerisinde yer alan metindir. Bu metin p etiketine verilmiş olan stil özellikleri ile biçimledirilmiştir.
Başka Bir Başlık
Burası başka bir p etiketi içerisidir.

Ekleyen:admin