HTML Class ( Sınıf )

tarafından

sınıf Özellik Kullanımı

HTML classözelliği aynı sınıf adıyla elemanlar için eşit stillerini tanımlamak için kullanılır.

Yani, aynı tüm HTML öğelerini classöznitelik aynı formata ve stile sahip olacak.

Burada üç var <div>aynı sınıf adına işaret unsurları:

Örnek

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class=”cities”>
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class=”cities”>
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class=”cities”>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Inline Elementler üzerinde sınıf Özellik Kullanımı

HTML classniteliği de satır içi elemanlarında kullanılabilir:

Örnek

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>

<h1>My <span class=”note”>Important</span> Heading</h1>
<p>This is some <span class=”note”>important</span> text.</p>

</body>
</html>

İpucu:class nitelik üzerinde kullanılabilir herhangi bir HTML öğesine.

Not: Sınıf ismi harf duyarlıdır!

İpucu: Bizim CSS hakkında çok daha fazla bilgi edinebilirsiniz CSS Öğreticisi .


Belirli Bir Class seç Elemanları

(.) CSS yılında sınıfın adından bir döneme karakteri, yazma, belirli bir sınıfla elemanlarını seçmek için:

Örnek

sınıf adı “şehir” olan tüm unsurları görünümünün CSS kullanın:

<style>
.city{
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<h2class=”city”>London</h2>
<p>London is the capital of England.</p>

<h2class=”city”>Paris</h2>
<p>Paris is the capital of France.</p>

<h2class=”city”>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Birden Sınıflar

HTML öğeleri her sınıf adı boşlukla ayrılmalıdır, birden fazla sınıf adı olabilir.

Örnek

sınıf adı “şehir” ile Stil elemanları, sınıf adı “ana” ile de stil elemanlar:

<h2 class=”city main”>London</h2>
<h2 class=”city”>Paris</h2>
<h2 class=”city”>Tokyo</h2>

Yukarıdaki örnekte, ilk <h2>unsur “şehir” sınıfı ve “ana” sınıfı hem aittir.


Farklı Etiketler Aynı Class paylaş Can

Farklı etiketlerin gibi <h2>ve <p>aynı sınıf adına sahip ve böylece aynı stili paylaşabilirsiniz:

Örnek

<h2 class=”city”>Paris</h2>
<p class=”city”>Paris is the capital of France</p>

JavaScript sınıf Özellik Kullanımı

sınıf adı belirtilen sınıf adıyla elemanları belirli görevleri gerçekleştirmek için JavaScript tarafından da kullanılabilir.

JavaScript kullanarak belirli bir sınıf adıyla elemanları erişebilirsiniz getElementsByClassName()yöntemi:

Örnek

Bir düğmeye tıklayan kullanıcılar genellikle, sınıf adı “şehir” olan tüm öğeleri gizlemek zaman:

<script>
function myFunction() {
var x = document.getElementsByClassName(“city”);
for (var i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
}
</script>

Yorum Yap

Your email address will not be published.

Şunlar da hoşunuza gidebilir