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.
Aşağıdaki örnekte , "city" değerine <div>sahip bir classözniteliğe sahip üç öğemiz var . Üç <div>öğenin tümü .city, başlık bölümündeki stil tanımına göre eşit olarak stillendirilecektir :
Aşağıdaki örnekte , "note" değerine <span>sahip bir classözniteliğe sahip iki öğemiz var . Her iki <span>öğe .notede başlık bölümündeki stil tanımına göre eşit şekilde stillendirilecektir :
Özetlersek:
Birden çok HTML öğesi aynı sınıfı paylaşabilir.
Sınıf Özniteliğini Kullanma
classNitelik genellikle stil sayfasında bir sınıf adına noktasına 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 classözniteliğe sahip üç öğemiz var . Üç <div>öğenin tümü .city, başlık bölümündeki stil tanımına göre eşit olarak stillendirilecektir :
Örnek:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!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 classözniteliğe sahip iki öğemiz var . Her iki <span>öğe .notede başlık bölümündeki stil tanımına göre eşit şekilde stillendirilecektir :
Örnek:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!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>Sınıf Sözdizimi
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:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "city":</p>
<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>Özetlersek:
- 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.
- classNitelik herhangi bir HTML öğesine 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 ile belirli bir sınıf adıyla elemanları erişebilir getElementsByClassName()yöntemle
Son düzenleme:
Rica Ederim..Yorum için Teşekkürler..Paylaşım için teşekkürler, ellerine sağlık