MWN9LGx8LGF4NWZcMqR5NWVdLTcsynIkynwbzD1c

CSS ID ve Class Seçimi

Ak Blog SEO
4349759590016280108

CSS ID ve Class Seçimi

3 Haziran 2017 Cumartesi

CSS ID ve Class Seçimi

HTML elementleri için stiller belirleyebildiğiniz gibi size özel stiller belirleyip elementlerin "id" ve "class" özelliklerinde bu stili belirterek de kullanabilirsiniz.

Class Kullanımı


CSS ID ve Class Seçimi

Bir HTML kaynağına baktığınızda bir element (tag) özelliği olarak class="stil" şeklinde bir özellik belirtildiğini görebilirsiniz. Peki neden buna gerek duymuşlar? Örneğin aşağıdaki HTML kodunu inceleyelim:
   <div class="stil">Hoş Geldiniz!</div>

Yukarıdaki div elementi içinde yer alan class="stil", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur. CSS dosyamızda şu şekilde bir ifade varsa:

   .stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

Nokta (.) ile başlayan bir stil oluşturduk ve adını biz verdik. Bu demektir ki class="stil" ile belirttiğimiz tüm elementler 10 punto Tahoma yazı tipinde ve mavi (blue) renginde olacaktır. Tabi istersek sadece tek bir elementte geçerli olmasını sağlayabiliriz. Örneğin sadece DIV elementlerinde geçerli olmasını istiyorsak:

   div.stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

".stil" yani seçim adımızın başına div getirmemiz yeterli olacaktır. Bu durumda bu CSS kodu sadece DIV elementlerinde kullanılabilir olacaktır.


CLASS özelliği kullanmanın bize sağlayacağı yararlara şöyle bir bakalım:

  • Kendimizin adlandırdığı özel stiller yaratmak ve kullanmak
  • Bir stili birden fazla elementte kullanabilmek
  • Stillere CSS de yer verip HTML kodlarımızı sürekli tekrarlanan uzun CSS kodlarından arındırmak

ID Kullanımı

ID özelliği ile de stiller yaratabiliriz. CLASS'tan farklı yanları:
  • Sadece tek bir elementte kullanılabilir.
  • Aynı id değeri iki elemente verilemez (Her id sadece tek bir elementte kullanılabilir).
  • Stil dosyamızda CLASS'da . (nokta) kullanırdık, ancak id özelliğine göre stilleme yapacaksak # (diyez) kullanırız.
Şimdi bu anlattıklarımızı örnek üzerinde görelim:
   <div id="stil">Hoş Geldiniz!</div>

Örnekte ID değeri "stil" olan bir DIV elementi görüyoruz. CSS dosyamızda bu elemente özel stil tasarlarken aşağıdaki şekilde kod yapısını oluşturmalıyız:

   #stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

Görüldüğü gibi bu kez diyez (#) ile başlattık. Sadece tek bir elemente özel stil tasarlamış olduk (Neden? Çünkü başka bir elementte yine id değeri "stil" belirtilemez.)

Ayrıca unutmadan söyleyelim hiçbir ID değeri rakamla başlamaz. ID, HTML dosyasında o elementi bulmamızı sağlar, bu nedenle aynı ismi veremeyiz. Aynı ismi vermemizin diğer yaratacağı sorun Java Script'te bu elementi id özelliğine göre kullanamamak olacaktır. Son olarak bazı tarayıcılar birden fazla aynı id kullanılan HTML dosyalarında stilleri görmezden gelebilir.





Sponsor Bağlantılar - Reklam
Ak Blog SEO - Google SEO Eğitimleri Dokümanları
Konu hakkında sormak istediklerinizi yazabilirsiniz.
AK Blog SEO

Read. Think. Exercise (Oku. Düşün. Uygula.)

SEO | SEO | Hukuk | İngilizce Kursu |
Siz hayal edin. Biz Hayata geçirelim.
Akblog.NET
Whatsapp İletişim Formu×
Bilgileriniz
İstek Bilgileriniz
iletişime geç

Merhaba!

Webekle@gmail.com adresine e-posta gönderin veya aşağıdaki temsilcilerimizden biriyle WhatsApp ile iletişime geçin.

Yönetim Ekibi Yönetici ile iletişim geçin.
+905050251428
Destek Ekibi Eva ile iletişime geçin.
+905050251428
Doğrudan arayabilirsiniz +905050251428
Destek Saatleri 09:30 - 17:30
Merhaba! Nasıl Yardımcı Olabiliriz?
×
Nasıl Yardımcı olabilirim?