HTML sınıfı Özelliği..

ByESiNTi · 25 Tem 2021

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

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