0 gün Seviye 1 Avar Teknolojileri

id, class ve Genel Nitelikler

Ders 22/45 · 5 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda elemanlara doğru şekilde id ve class verebileceksiniz.

id: Tek bir eleman

id bir elemana benzersiz bir ad verir. Sayfa İçi Bağlantılar dersinde kullanmıştık. Aynı id sayfada yalnızca bir kez yazılabilir.

<nav id="ana-menu">...</nav>

class: Birçok eleman

class elemanları gruplar. Aynı class birçok elemanda kullanılabilir ve bir elemanın birden fazla class değeri olabilir. Değerlerin arasına boşluk konur.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Class</title>
</head>
<body>
  <p class="uyari">Bu bir uyarı.</p>
  <p class="uyari onemli">Bu hem uyarı hem önemli.</p>
  <p>Bu sıradan bir paragraf.</p>
</body>
</html>

Önizlemede bir fark görmediniz, çünkü id ve class kendi başlarına görünümü değiştirmez. Bunlar, CSS ve JavaScript’in elemanları bulmasını sağlayan etiketlerdir.

İsim verme kuralları

  • Küçük harf kullanın, kelimeleri tireyle ayırın: ana-menu
  • Değerde boşluk kullanmayın. class içindeki boşluk, iki ayrı değer anlamına gelir.
  • Görünümünü değil, ne olduğunu yazın: kirmizi-yazi yerine uyari
  • Büyük ve küçük harf farklı sayılır: Uyari ile uyari aynı değildir.
  • Türkçe karakter kullanmamak en güvenli yoldur.

Diğer genel nitelikler

Aşağıdaki nitelikler hemen hemen her elemanda kullanılabilir:

  • title Fare ile üzerine gelince görünen açıklama.
  • hidden Elemanı gizler.
  • lang Yalnızca o elemanın dilini belirtir. Örneğin Türkçe bir sayfadaki İngilizce bir cümle için.
  • data-* Kendi verilerinizi saklamanızı sağlar. * yerine istediğiniz adı yazarsınız.
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Genel nitelikler</title>
</head>
<body>
  <p title="Ben bir açıklamayım">Farenizi bu yazının üzerine getirin.</p>
  <p hidden>Bu paragraf görünmez.</p>
  <p lang="en">Hello, world!</p>
  <p data-puan="10">Bu paragrafta görünmeyen bir puan bilgisi var.</p>
</body>
</html>
Sık yapılan hatalar

Aynı id değerini iki kez yazmak. Birden çok eleman için class kullanın.

class değerine boşluk koymak. class="ana menu" tek bir değer değil, ana ve menu adında iki ayrı değerdir.

Soru 1

Sayfada on tane kartın aynı şekilde görünmesini istiyorsunuz. Hangisini kullanırsınız?

  • id :: id yalnızca bir elemanda kullanılabilir.
  • class :: Doğru.
  • title :: title açıklama içindir.
Soru 2

<p class="kart onemli"> için hangisi doğrudur?

  • Elemanın iki class değeri vardır :: Doğru.
  • class değeri hatalıdır :: Boşlukla ayrılan birden çok değer geçerlidir.
  • Elemanın iki id değeri vardır :: Burada id yazılmamış.
Etiketleyin

Hedefteki kodu yazın. Yalnızca body içine yazılacak kodu yazın. Başlığın id değeri baslik olsun. İki paragrafın da class değeri haber olsun.

<h1 id="baslik">Okul Gazetesi</h1>
<p class="haber">Kütüphane yenilendi.</p>
<p class="haber">Spor salonu açıldı.</p>

Bu derste öğrendikleriniz

  • id tek bir elemanı, class bir grup elemanı işaretler.
  • İsimler küçük harfle ve tireyle yazılır, görünümü değil anlamı anlatır.
  • title, hidden, lang ve data-* hemen her elemanda kullanılabilir.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.