CSS Seçiciler

Css de anlattığımız kadarıyla,kullandığımız <style> elementi ile her element için ayrı ayrı stiller tanımlıyorduk.Mesela <p> etiketi için bir stil belirliyorduk ve her <p> etiketi için bu stiller kullanılıyordu.Fakat biz bazı <p> elementleri için farklı stilleri kullanmak istiyorsak ne yapacağız? Bunun için seçiciler kullanılmaktadır.2 tür seçici vardır;

1) Id Selector

2) Class Selector

Id selector kullanımında her id,bir sayfada sadece bir kez kullanıldığı için biz daha pratik olması amacıyla Class Selector kavramını anlatacağız.Böylece class’larımızı bir sayfada istediğimiz kadar kullanabileceğiz

CLASS SELECTOR KULLANIMI

Class selector kullanımı şu şekildedir.<head> etiketinin olduğu kısımda classlarımızı tanımlarız,her birine birer isim veririz ve içine, vereceğimiz stillerimizi yazarız

–>Class seçicisi,başına nokta (.) koyularak tanımlanır.Class seçicisine bir örnek vererek , örnek üzerinden açıklayalım;

 

<html>
 <head>
  <style type="text/css">
  .deneme1
  {
  text-align:left;
  color:green;
  background-color:aqua;
  }
  .deneme2
  {
  text-align:left;
  color:blue;
  background-color:orange;

  }
  </style>
 </head>
<body>
   <h2 class="deneme1">Deneme1 class'ı için bir örnek </h2>
   <h4 class="deneme2">Deneme2 class'ı için bir örnek</h4>
</body>
</html>

 

Burada .deneme1 ve .deneme adlı 2 adet class tanımladık.Bunların başına nokta koyulduğunu unutmayalım…!

Bu sınıflarımız içine {  }  parantezleri arasına istediğimiz stilleri yazdık.Bu classlarımızı <head> etiketinde <style> etiketi arasına yazdığımızı ve <style> etiketini kapatmayı unutmayalım…!

–> Bu hazırladığımız classları hangi element üzerinde kullanmak istiyorsak o elementin <class> özelliğine yazıyoruz.Bu verdiğimiz örnekte biz h4 ve h2 elementleri üzerinde classlarımızı kullandık

<h2 class="deneme1">Deneme1 class'ı için bir örnek </h2>

Bu satırda class=” ”   ile hangi classımızı kullanacaksak parantezler içine onu yazıyoruz.Biz bunun için deneme1 classını kullandık.Şimdi yukardaki kodumuzun tarayıcıda çıktısını görelim;

 

css seçiçiler
Selector konusunda daha geniş bir örnek yapalım.Farklı classlar kullanalım ve bunları farklı etiketler için uygulayalım;

 

<html>
 <head>
  <style type="text/css">
  .deneme1
  {
   text-align:left;
   color:green;
   border-style:inset;
   border-width:10px;
   border-color:grey;
   background-color:aqua;
  }
  .deneme2
  {
   text-align:left;
   color:blue;
   background-color:orange;
   font-size:20px;
   text-decoration:underline;
   border-style:solid;
   border-width:5px;
   border-color:green;
   height:40px;

  }
  </style>
 </head>
<body>
  <h2 class="deneme1">Deneme1 class'ı için bir örnek </h2>
  <h4 class="deneme2">Deneme2 class'ı için bir örnek</h4>
</body>
</html>

 

Sayfamızın Çıktısını Görelim;

css seçiçiler

Burada 2 tane class (sınıf) tanımladık.Rastgele stiller uyguladık.Örneğin arkaplan rengi,çerçeve stili,çerçeve kalınlığı,font büyüklüğü gibi özellikler verdik.Artık bu özelliklerimizi istediğimiz yerde istediğimiz etikete uygulayabiliriz.  Uygulamak istediğimiz etikette   class = ”  “   yapısıyla bu parantez içine ,kullanacağımız sınıfı ekleyerek uygulayabiliriz.

Benzer Yazılar

Henüz yorum yapılmamış

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla