Id Seçiciler (Tekil Seçiciler) Css Ders 4
Id Seçiciler (Tekil Seçiciler) Css Ders 4
Id Seçiciler (Tekil Seçiciler) : Sınıf seçicilerde olduğu gibi id seçicilerde istediğiniz herhangi bir html etiketine belirli özellikler vererek çağırabilirsiniz.Sınıf seçicilerden farkı tanımlandıktan sonra bir defa kullanılırlar. Css ile ilgili örnekleri daha önce anlattağımız harici css yöntemi ile oluşturacağız. Harici css hakkında bilgi almak için tıklayınız.
Kullanımı : Tanımlanırken # (diyez) işareti , çağrılırken id kullanılır.
Örnek : #italik
Örnek:
Aşağıdaki kodları notpad’de yazıp a.css olarak kaydediyoruz.
#alticizili{text-decoration:underline}
#italik{font-style:italic}
#mavi{color:blue}
#yesil{color:green}
Aşağıdaki kodları notpad’de yazıp index.html olarak kaydediyoruz
<html> <head><title>www.gorselprogramlama.com</title> <style type="text/css"> @import "a.css"; </style></head> <p id="alticizili">gorselprogramlama.com</p> <h3 id="italik">gorselprogramlama.com</h3> <h2 id="mavi">gorselprogramlama.com</h2> <p id="yesil">gorselprogramlama.com</p> </html>
index.html dosyasını çalıştıralım
Yukarıdaki kodlara baktımızda şunu söyleyebiliriz.Çağırırıken etiket içerisinde id yazıp eşittir diyoruz ve çift tırnak içinde tekil seçicimizin ismini yazıyoruz
css dosyası kodlarını açıklayalım.
#alticizili{text-decoration:underline} : alticizili id içindeki yazıların altını çiz.
#italik{font-style:italic} : italik id içindeki yazıların stilini italik yap.
#mavi{color:blue} : mavi id içindeki yazıların rengini mavi yap.
#yesil{color:green} : yesil id içindeki yazıların rengini yeşil yap.
index dosyamıza baktığımızda css dosyasında belirtilen yerdeki yazıların özelliklerinin değiştiğini görürüz. Birinci gorselprogramlama.com yazısında alticizili id’yi çağırıyoruz.Çalıştırılmış haline dikkat ederseniz altı çizili bir şekilde yansır.Diğer yazıların uygulanışıda çağrılan id’ye göre değişiyor.
