CSS ID Yapısı ve Kullanımı
CSS id yapısı çokça kullanılan bir özelliktir. Bu yapı sayesinde istenilen HTML etiketine istenilen stil özellikleri kazandırılabilir.
Id seçicisi class seçicisinden farklıdır. Class seçicisi sayfada birden fazla elemana atanırken id seçicisi sadece bir tane elemana atanabilir. Id seçiciler tanımlanırken adının basına #(diyez) işareti konulur.
Bir örnek verecek olursak;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS'in yapısı</title>
<style type="text/css">
#nesne1{
background-color: blue;
}
#nesne2{
background-color: red;
}
</style>
</head>
<body>
<p id="nesne1">Bu yazının Artalan rengi mavi</p>
<p id="nesne2">Bu yazının Artalan rengi kırmızı</p>
</body>
</html>
Yukarıda yazılan örnek kodlamanın ekran görüntüsü aşağıda görüldüğü gibi olacaktır.
Yukarıdaki örnekte görüldüğü gibi bir uyari sınıfımız birde onemli sınıfımız mevcut. Bazı metinlerin önemli bazılarının ise uyarı olacağı düşüncesi ile böyle bir atama yapılabilir. önemli metinler için kalın, uyarı için yazının şeklini eğik olarak belirliyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken CSS seçicisinde “.onemli .uyari” seklinde yazıyoruz
Class ve id seçicileri küçük-büyük harfe karsı duyarlıdırlar. CSS kısmında ismini nasıl yazdıysak HTML etiketinin içinde de aynı şekilde yazmak zorundayız. Aksi takdirde o class ve id’ye ulaşamaz ve vermek istediğimiz stil özelliklerini veremeyiz.
Örnek verecek olursak;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
p.onemliBilgi {
font-weight: bold;
}
</style>
</head>
<body>
<p class="onemlibilgi">Uygulama olmaz .</p>
</body>
</html>
Yukarıdaki id seçicisi bulunamaz. Çünkü CSS ksımında onemliBilgi olarak yazılmış iken HTML etiketi içinde onemlibilgi olarak yazılmıştır. ‘b’ harfindeki yanlış yazımdan dolayı class yapısı işlemeyecektir.
CSS id yapısı nedir ve nasıl kullanılır gördük. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
