Yazar: Merhaba değerli arkadaşlar!
Bu yazımda sizlere css seçicilerinden olan ve sıkça kullanacağımız class ve id yapısından bahsedeceğim.
Css’de elemanlara stil özelliği kazandırırken her elemanın farklı özelliklere sahip olmasını isteyebiliriz, böyle durumlarda seçiciler bize yol gösterecektir.
css seçicilerini genel olarak bir html elementini seçmek için kullanırız, ancak ben bu yazımda id ve class olan elementlerin nasıl seçeceğimizi anlatacağım.
örnek verecek olursak sayfamızda birden fazla paragrafımız var ve bu paragraflara ve ya h1 elemanlarına farklı özellikler kazandırmamız gereken durumlar olabilir, işte tam bu noktada seçicileri kullanıyoruz.
css’de çok sayıda seçici bulunmaktadır. basit düzeyden gelişmiş düzeye onlarca seçici bulunmaktadır.
Şimdi dilerseniz en sık kullanılan iki css seçiciye bakalım.
Class
Css’de elemanlara stil özelliği kazandırmak için seçicileri kullandığımızı yukarıda belirtmiştik. ilk olarak ele alacağımız css seçicisi class yapısıdır.
sayfamızda aynı tip iki eleman olduğunu varsayalım, bu iki elemana farklı özellikler kazandırmak için class kullanıyoruz böylelikle iki aynı eleman farklı stillere sahip oluyor.
aslında bu ifade size biraz karışık gelebilir, ancak örnek yaptığımızda daha iyi anlayacaksınız.
örnek:
<doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> css class örneği </title>
<style>
.p1 {
color: red;
background-color: white;
}
p2 {
color; blue;
background-color: purple;
}
</style>
</head>
<body>
<p class=”p1″>
birinci elemanımız bu şekilde gözükücektir.
</p>
<p class=”p2″>
ikinci elemanımız ise bu şekilde gözükecektir.
</p>
</body>
</html>
Örneğimizde ikitane p elementini kullandık ilk elementimizin yazı rengini kırmızı arkaplan rengini ise beyaz olarak ayarladık.
İkinci elementimizde ise yazı renginin mavi arkaplan renginin ise mor olduğunu göreceksiniz.
Bu yazımda class yapısının temelini anlatmak olduğu için örnekler yaparak class yapısını iyice pekiştirebilirsiniz.
En sık kullandığımız ikinci seçicimiz ise id seçicisidir. id kullanırken dikkat etmemiz gereken bir nokta şudur: id ismi verirken aynı id ismini ikikez kullanamayız, yani benzersiz olması gerekmektedir.
id seçicisinide bir örnek yaparak açıklayalım.
örnek:
<doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> css id seçicisi </title>
<style>
#ust {
color: red;
}
#alt {
color: blue;
}
</style>
</head>
<body>
<div id=”ust”>
sayfamızın üst kısmı kırmızı olarak ayarlanmıştır.
</div>
<div id=”alt”>
sayfamızın alt kısmımavi olarak ayarlanmıştır.
</div>
</body>
</html>
Bu örneğimizde ikitane id oluşturup sayfamızın üst ve alt kısmını belirledik ve iki farklı yazı rengi vererek stil özelliği kazandırmış olduk.
not: class seçicilerini tanımlarken . işaretini class isminin başına yazarız.
not 2:
id tanımlarken ise id tanımının başına # işareti konulmaktadır. yukarıdaki iki örneği dikkatli incelediğinizde sizlerde bunu farkedeceksiniz.
css class ve id yapısını bu şekilde açıklamış oldum soru ve sorunlarınızı yorum olarak bana iletebilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan css position özellikleri ve kullanımı detaylı anlatım başlıklı makalemizde css position kullanımı, css position özelikleri ve position absolute hakkında bilgiler verilmektedir.