Κλάσεις του HTML

Κατηγοριοποίηση του HTML (ρύθμιση κλάσης) ώστε να μπορούμε να ορίσουμε στυλ CSS για την κλάση του στοιχείου.

Ρύθμιση των ίδιων στοιχείων με την ίδια κλάση ή διαφορετικών στοιχείων με διαφορετική κλάση.

Παράδειγμα

<!DOCTYPE html>
<html>
<head>
<style>
.πόλεις {
    χρώμα υποβάθρου:μαύρο;
    χρώμα:λευκό;
    μαργίνα:20px;
    χώρος:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>Λονδίνο</h2>
<p>
Λονδίνο είναι η πρωτεύουσα της Αγγλίας. 
Είναι η πιο πληθυσμιακή πόλη του Ηνωμένου Βασιλείου, 
με μια αστική περιοχή με πάνω από 13 εκατομμύρια κατοίκους.
</p>
</div> 
</body>
</html>

Δοκιμάστε Εξ ολοκλήρου

Κατηγορία στοιχείων κλάσης

Το στοιχείο HTML <div> είναιΣτοιχεία κλάσηςΜπορεί να χρησιμοποιηθεί ως κουτί περιεχομένων για άλλα στοιχεία HTML.

Ρύθμιση της κλάσης του στοιχείου <div> ώστε να μπορούμε να ρυθμίσουμε την ίδια κλάση για τα ίδια στοιχεία <div>:

Παράδειγμα

<!DOCTYPE html>
<html>
<head>
<style>
.πόλεις {
    χρώμα υποβάθρου:μαύρο;
    χρώμα:λευκό;
    μαργίνα:20px;
    χώρος:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>Λονδίνο</h2>
<p>Λονδίνο είναι η πρωτεύουσα της Αγγλίας. 
Είναι η πιο πληθυσμιακή πόλη του Ηνωμένου Βασιλείου, 
με αστική περιοχή πάνω από 13 εκατομμύρια κατοίκους.</p>
</div>
<div class="cities">
<h2>Παρίσι</h2>
<p>Το Παρίσι είναι η πρωτεύουσα και η πιο πληθυσμιακή πόλη της Γαλλίας.</p>
</div>
<div class="cities">
<h2>Τόκιο</h2>
<p>Το Τόκιο είναι η πρωτεύουσα της Ιαπωνίας, ο κέντρος της Μεγάλης Περιοχής Τόκιο,</p>
και η πιο πληθυσμιακή αστική περιοχή στον κόσμο.</p>
</div>
</body>
</html>

Δοκιμάστε Εξ ολοκλήρου

Κατηγορία στοιχείων γραμμής

Το στοιχείο <span> HTML είναι στοιχείο γραμμής, μπορεί να χρησιμοποιηθεί ως κάδος κειμένου.

Η ρύθμιση της κλάσης του στοιχείου <span>, μπορεί να ορίσει τα ίδια στυλ για τα ίδια στοιχεία <span>.

Παράδειγμα

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

Δοκιμάστε Εξ ολοκλήρου