HTML Blok Elemanlarında Class Özelliği
Html class özelliği, tek seferde bir çok elemana stil vermek için kullanılır. Örneğin üç tane div elemanına, class özelliği ile bir defada stil verebiliriz.
Öcelikle bir class oluşturmamız gerekir. Klas oluşturmak için bir isim belirleriz, bu ismin başına bir nokta koyarak bir klas adı oluşturmuş oluruz. Mesela .benimKlasim bir klas adı olabilir. (Türkçe karakter kullanmamaya özen göstermeliyiz.)
Oluşturduğumuz klasa CSS stil özellikleri atamak zorundayız. Bunun için yapmamız gerekenler, iki süslü parantez arasında {}, istediğimiz CSS özelliklerini ve değerlerini aralarına noktalı virgül koyarak yazmaktır.
Aşağıda bir klas örneği vardır:
background-color:black;
color:white;
margin:20px;
padding:20px;
}
Bir klası bir html elemanına uygulamak istersek yapmamız gereken tek şey; başlangıç tagına bu klası class="klasAdi" şeklinde atamaktır. Bu aşamada klas adının önündeki noktayı kullanmıyoruz.
Mesela <div class="benimKlasim"> ifadesi ile div elemanına bu klası atamış oluruz.
Klas oluşturuken, klas adının önüne bir html tagı da yazabiliriz:
Örneğin;
div.benimKlasim {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
background-color:black;
color:white;
margin:20px;
padding:20px;
}
klası, class="benimKlasim" özelliğine sahip olan <div> elemanları için geçerli olurdu (<div class="benimKlasim"> şeklindeki divlerde yani). Yani bu klas, bir <span> elemanında, bir başlık veya bir <p> elemanında çalışmazdı.
Aşağıdaki örneğe dikkat edelim:
<!DOCTYPE html>
<html>
<head>
<style>
div.sehirler {
background-color:black;
color:white;
margin:20px;
padding:20px;
border-radius: 50px 0 50px 0;
border-radius: 50px 0 50px 0;
}
</style>
</head>
<body>
<div class="sehirler">
<h2>İstanbul</h2>
<p>İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.</p>
<p>İstanbul güzel bir şehirdir.</p>
</div>
<div class="sehirler">
<h2>İzmir</h2>
<p> İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. </p>
<p> İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. </p>
</div>
<div class="sehirler">
<h2>Ankara</h2>
<p> Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir.</p>
<p>Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir</p>
</div>
</body>
</html>
Yukarıdaki html dökümanı, tarayıcımızda şöyle görünecektir:
İstanbul
İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.
İzmir
İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir.İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir. İzmir ege bölgesinin bir şehridir.
Ankara
Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir.Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir. Ankara Türkiye'nin başkentidir.
Yukarıda, border-radius özelliği kullanılarak oval köşeli arkaplanlar oluşturulmuş ve tek bir CSS class kodu ile stil verilmiş üç tane <div> elemanı vardır.
Hiç yorum yok:
Yorum Gönder