HTML sınıfı Özelliği
HTML classniteliği, bir HTML öğesi için bir sınıf belirtmek için kullanılır.
Birden çok HTML öğesi aynı sınıfı paylaşabilir.
Sınıf Özniteliğini Kullanma
Nitelik classgenellikle bir stil sayfasında bir sınıf adına işaret etmek için kullanılır. Belirli sınıf adına sahip öğelere erişmek ve bunları değiştirmek için bir JavaScript tarafından da kullanılabilir.
Aşağıdaki örnekte , "city" değerine <div>sahip bir özniteliğe sahip üç öğemiz var. classÜç öğenin tümü
, başlık bölümündeki stil tanımına <div>
göre eşit olarak stillendirilecektir :.city
Örnek
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Aşağıdaki örnekte , "note" değerine <span>sahip bir özniteliğe sahip iki öğemiz var. classHer iki öğe
de başlık bölümündeki stil tanımına <span>
göre eşit olarak stillendirilecektir :.note
Örnek
<!DOCTYPE html>
<html>
<head>
<style>
.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: Nitelik class, herhangi bir HTML öğesinde kullanılabilir.
Not: Sınıf adı büyük/küçük harf duyarlıdır!
İpucu: CSS Eğitimimizde CSS hakkında çok daha fazla bilgi edinebilirsiniz .
Sınıf Sözdizimi
Bir sınıf oluşturmak için; bir nokta (.) karakteri ve ardından bir sınıf adı yazın. Ardından, küme parantezleri {} içinde CSS özelliklerini tanımlayın:
Örnek
"Şehir" adında bir sınıf oluşturun:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Çoklu Sınıflar
HTML öğeleri birden fazla sınıfa ait olabilir.
Birden çok sınıf tanımlamak için sınıf adlarını bir boşlukla ayırın, örneğin <div class="city main">. Öğe, belirtilen tüm sınıflara göre şekillendirilecektir.
Aşağıdaki örnekte, ilk öğe hem sınıfa <h2>hem de sınıfa aittir ve her iki sınıftan da CSS stillerini alacaktır:
citymain
Örnek
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Farklı Öğeler Aynı Sınıfı Paylaşabilir
Farklı HTML öğeleri aynı sınıf adına işaret edebilir.
Aşağıdaki örnekte, hem <h2>ve <p>
"city" sınıfını işaret eder ve aynı stili paylaşır:
Örnek
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
JavaScript'te Sınıf Niteliğinin Kullanımı
Sınıf adı, belirli öğeler için belirli görevleri gerçekleştirmek için JavaScript tarafından da kullanılabilir.
JavaScript, belirli bir sınıf adına sahip öğelere şu getElementsByClassName()yöntemle erişebilir:
Örnek
"Şehir" sınıf adına sahip tüm öğeleri gizlemek için bir düğmeye tıklayın:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Yukarıdaki örnekteki kodu anlamadıysanız endişelenmeyin.
JavaScript hakkında daha fazlasını HTML JavaScript bölümümüzde öğreneceksiniz veya JavaScript Eğitimimizi inceleyebilirsiniz .
Bölüm özeti
- HTML
classözelliği, bir öğe için bir veya daha fazla sınıf adını belirtir. - Sınıflar, belirli öğeleri seçmek ve bunlara erişmek için CSS ve JavaScript tarafından kullanılır.
- Nitelik
class, herhangi bir HTML öğesinde kullanılabilir - Sınıf adı büyük/küçük harf duyarlıdır
- Farklı HTML öğeleri aynı sınıf adına işaret edebilir
- JavaScript, belirli bir sınıf adına sahip öğelere
getElementsByClassName()yöntemle erişebilir