Bu yazımızda Css ID Seçici Kullanımı ve Css Class Seçici Kullanımı nasıl olduğunu anlatacağız. Aralarındaki farkın ne olduğundan bahsedeceğiz.
CSS ID Seçici Kullanımı
Css de ID benzersiz kimliktir. Yani bir elemana verdiğimiz ID başka bir yerde kullanılmaz. Sadece bir elemana ait bir değişiklik yapacaksak kullanılır. ID değeri verilirken türkçe karakter kullanılmamalı. Css de kod yazarken id değerinin önüne “#” karakteri yazılır.
İki şekilde kullanımı vardır. Birincisi html etiketinin “id” attribute değerine verdiğimiz id adını css de direk yazıp kullanırız. İkincisi ise önce etiket ismini yazıp hemen ardından id ismini de ekleyerek yazmak.
Örnek verelim:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#baslik{ /* id kullanımı 1.yöntem */
background-color:red;
}
p#paragraf{ /* id kullanımı 2.yöntem */
background-color:blue;
}
</style>
</head>
<body>
<h1 id="baslik"> Örnek Başlık </h1>
<p id="paragraf">Örnek bir paragraf.</p>
</body>
</html>Tarayıcıda Sonucu:
Yukarıda gördüğümüz gibi her iki kullanımda da seçim yapabiliriz.
CSS Class (Sınıf) Seçici Kullanımı
CSS de class (sınıf) tanımlarken önüne nokta(.) koyarız. Tanımladığımız sınıfları istersek bir elemanda istersek birden fazla elemanda kullanabiliriz. Birden fazla elemanda kullanmak bize çok kolaylık sağlar.
Sınıfların da ID ler iki şekilde kullanımı vardır. Bu kullanımlara aşağıda örnek vereceğiz.
Örneğin “.red” diye bir class tanımlayalım ve tanımladığımız sınıfın içerisinde “color:red;” rengini tanımlayalım. Bu class ı kırmızı renk vermek istediğimiz her yerde kullanabiliriz. Bu da bize css de bir kez kırmızı rengi tanımlayıp defalarca kullanmamıza olanak veriyor. Diğer türlü kırmızı olmasını istediğimiz her yere tek tek renk tanımlaması yapmamız gerekecekti.
Örnek Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.red{ /* class kullanımı 1.yöntem */
color:red;
}
p.paragraf{ /* class kullanımı 2.yöntem */
font-size:14px;
color:blue;
}
</style>
</head>
<body>
<h1 class="red"> Örnek Başlık </h1>
<p class="paragraf">Örnek bir paragraf.</p><!-- dikkat ederseniz bir class iki yerde kullandık -->
<p class="paragraf">Örnek bir paragraf.</p><!--dikkat ederseniz bir class iki yerde kullandık -->
</html>Tarayıcıda Sonucu:
Yukarıdaki örnekte “.paragraf” sınıfı iki yerde kullandık. Html sayfamız uzun olsaydı ve 1000 tane paragraf olsaydı hepsinde de kullanabilirdik. Bu da bize defalarca stil kodlarını yazmaktan kurtarır.
Bir Elementte Birden Fazla Css Class Kullanımı
Html etiketlerine birden fazla sınıf verebiliriz. Renk verme, boyut verme gibi sınıflar oluşturup, hem bir sınıfı birden fazla elementte kullanabiliriz, hem de bir elementte hem renk sınıfını hem de boyut verme sınıfını kullanabiliriz.
Örnek Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.red{
color:red;
}
.blue{
color:blue;
}
.baslik{
font-size: 36px;
text-align:center;
}
p.paragraf{
font-size:18px;
}
.arkaPlan{
background-color:yellow;
}
.yazi-tipi{
font-style:italic;
}
</style>
</head>
<body>
<h1 class="red baslik arkaPlan"> Örnek Başlık </h1><!-- elementte 3 class kullandık -->
<p class="paragraf blue">Örnek bir paragraf.</p><!-- elementte 2 class kullandık -->
<p class="paragraf yazi-tipi">Örnek bir paragraf.</p><!-- elementte 2 class kullandık -->
</body>
</html>Tarayıcıda Sonucu:
CSS ID ve Class Arasındaki Farklar
ID ve Class ı Html elementlerini seçmek ve özelliklerini düzenlemek için kullanırız. Ana amaç bu iken aralarında farklılıklar vardır bunlara değinelim.
ID ler benzersiz bir kimliktir. Sadece bir kez kullanılabilir. Class lar ise istediğiniz kadar kullanabilirsiniz.
ID yi sadece bir element kullanabilirsiniz. Class ise istediğiniz elementlere uygulayabilirsiniz. Örneğin hem <h2> etiketine hemde <p> etiketine uygulayabilirsiniz.
Bir elemente bir ID verilebilir. Class ise bir elementte birden fazla verilebilir.
Diğer Seçici Yazılarımız
- Genel Seçici (*) ler, tüm Html elemanlarını seçmemize olanak verir. Seçmeyi “*” karakteri ile yaparız.
- Element Seçici (Element), seçtiğimiz Html Elementini seçer. Yani seçmek istediğimiz elementi yazarız ve seçmiş oluruz.Örneğin <h1> elementini seçmek için “h1” yazmak gibi.
- Child Seçici (Element>Element), Html etiketinin altındaki (çocuk) elementi seçmek için.
- Descendant Seçici(Element Element), Html etiketinin altındaki (torun düzeyinde) descendant elementi seçmek için.
- Genel Kardeş ( Sibling ) Seçici (Element ~ Element), Html etiketinin belirtiğimiz sibling etiketini seçer.
- Bitişik Sibling (Kardeş) Seçici (Element + Element), Html etiketinin belirtiğimiz bitişik sibling etiketini seçer.
- Çoklu ( Multiple ) Seçici (Element, Element), Bir veya daha fazla Html etiketlerini seçebiliriz.
- Attribute ( Özellik)Seçici (Element[özellik-adı]), Html Etiketini özellik değeri ile seçmemize olanak veriyor.
- CSS Sözde Sınıf (Pseudo Class) Seçiciler, sınıf olmayıp sınıf gibi davranan ve seçim yapmamızı sağlayan yapılardır.
- CSS Sözde Element(Pseudo Element) Seçiciler, Element olmayıp element gibi davranan ve seçim yapmamızı sağlayan yapılardır.
Başka bir yazımızda görüşmek dileğiyle…
