CSS id seçicisi, bir HTML etiketine benzersiz bir tanımlayıcı atamak için kullanılır. id seçicisi, bir HTML sayfasında yalnızca bir kez kullanılabilir ve genellikle, sayfadaki tek bir özel elemanı stillemek için kullanılır. id seçicisi, etiketin id özelliğine atanır ve # işaretiyle başlar. Örneğin, aşağıdaki CSS kodu, id özelliği “paragraf1” olan bir “p” etiketini mavi renkli bir fontla gösterir:
<!– CSS Kodu–>
<style>
#paragraf1 {
color: blue;
}
</style>
<!–HTML Kodu–>
<p id=”paragraf1″>Bu bir örnek paragraftır ve mavi renkli bir fontla gösterilir.</p>
|
<!– CSS Kodu–> <style> #paragraf1 { color: blue; } </style>
<!–HTML Kodu–> <p id=“paragraf1”>Bu bir örnek paragraftır ve mavi renkli bir fontla gösterilir.</p>
|
id seçicisi, HTML etiketlerine benzersiz bir tanımlayıcı atamak için kullanılır ve sayfadaki tek bir elemanı stillemek için genellikle kullanılır. Bu seçici, etiketin id özelliğine atanır ve # işaretiyle başlar.
İlginizi çekebilir: CSS sınıf Seçiciler ve Örnekleri
CSS id Seçici Örnekleri
CSS id seçicisi, bir HTML etiketine benzersiz bir tanımlayıcı atamak için kullanılır. Aşağıda, bazı CSS id seçicisi örnekleri ve bunların HTML dosyalarında nasıl kullanılacağı verilmiştir:
Örnek 1: #baslik: Bu id, bir başlığı kalın ve büyük bir fontla gösterir.
<!– CSS Kodu–>
<style>
#baslik {
font-size: 32px;
font-weight: bold;
}
</style>
<!–HTML Kodu–>
<h1 id=”baslik”>Bu bir örnek başlıktır</h1>
|
<!– CSS Kodu–> <style> #baslik { font-size: 32px; font-weight: bold; } </style>
<!–HTML Kodu–> <h1 id=“baslik”>Bu bir örnek başlıktır</h1>
|
Örnek 2: #alt-baslik: Bu id, bir alt başlığı kalın ve orta büyüklükte bir fontla gösterir.
<!– CSS Kodu–>
<style>
#alt-baslik {
font-size: 24px;
font-weight: bold;
}
</style>
<!–HTML Kodu–>
<h2 id=”alt-baslik”>Bu bir örnek alt başlıktır</h2>
|
<!– CSS Kodu–> <style> #alt-baslik { font-size: 24px; font-weight: bold; } </style>
<!–HTML Kodu–> <h2 id=“alt-baslik”>Bu bir örnek alt başlıktır</h2>
|
Örnek 3: #paragraf: Bu id, bir paragrafı normal bir font büyüklüğünden 2 punto daha büyük gösterir.
<!– CSS Kodu–>
<style>
#paragraf {
font-size: 18px;
}
</style>
<!–HTML Kodu–>
<p id=”paragraf”>Bu bir örnek paragraftır</p>
|
<!– CSS Kodu–> <style> #paragraf { font-size: 18px; } </style>
<!–HTML Kodu–> <p id=“paragraf”>Bu bir örnek paragraftır</p>
|
Örnek 4: #link: Bu id, bir linki yeşil ve altı çizgili gösterir.
<!– CSS Kodu–>
<style>
#link {
color: green;
text-decoration: underline;
}
</style>
<!–HTML Kodu–>
<a href=”#” id=”link”>Bu bir örnek linktir</a>
|
<!– CSS Kodu–> <style> #link { color: green; text-decoration: underline; } </style>
<!–HTML Kodu–> <a href=“#” id=“link”>Bu bir örnek linktir</a>
|
Daha fazla CSS konusu için bakınız: CSS Dersleri
