Κεφάλαιο 3: CSS Κλάσεις

• 23 Αυγούστου 2012
• by: Georgios
• in: Web Design

Οι κλάσεις στα CSS σας επιτρέπουν να μορφοποιήσετε στοιχεία μέσα στην ίδιο HTML έγγραφο με διαφορετικό τρόπο. Μπορείτε να πετύχετε αυτό το στόχο, ακολουθώντας μια ποιο βελτιωμένη τεχνική από αυτή των ενσωματωμένων μορφοποιήσεων πάνω σε μια HTML ετικέτα.

Η διαφορά με τις κλάσεις και τις ενσωματωμένες μορφοποιήσεις, είναι πως με τις κλάσεις μπορείτε εύκολα να μορφοποιήσετε όλα τα στοιχεία της ιστοσελίδας σας απλά κάνοντας μόνο μια αλλαγή στο αρχείο CSS, ενώ στις ενσωματωμένες μορφοποιήσεις θα πρέπει να αλλάξετε μία μία κάθε ετικέτα.

Επίσης οι κλάσεις είναι ποιο ευέλικτες καθώς μπορείτε να τις χρησιμοποιήσετε επανειλημμένα μέσα σε μια ιστοσελίδα.

Για να το κάνουμε ποιο κατανοητό ας υποθέσουμε πως έχουμε στη σελίδα μας μια φράση που περιέχει μέσα τη λέξη μορφοποίηση η οποία είναι μέσα σε ένα στοιχείου παραγράφου το οποίο μορφοποιείτε με τον ακόλουθο κώδικα:

p
{
   font-size: 11px;
   color: #333;
}

Ο παραπάνω κώδικας μορφοποιεί κάθε παράγραφο μέσα στο έγγραφο και κάνει το μέγεθος της γραμματοσειράς 11px και το χρώμα της γραμματοσειράς να είναι σκούρο γκρι.

Τι συμβαίνει όμως αν θέλω να αλλάξω το χρώμα της λέξης μορφοποίηση από σκούρο γκρι σε κόκκινο χωρίς να επηρεάσω την υπόλοιπη παράγραφο;

Η λύση είναι απλή. Θα προσθέσω ένα span στοιχείο γύρο από τη λέξη μορφοποίηση, θα της αναθέσω το όνομα της κλάσης που θα κάνει το κείμενο μου κόκκινο και μετά στο CSS αρχείο μου θα δημιουργήσω ένα block κώδικα που θα μορφοποιεί τα στοιχεία με την ίδια κλάση.

Η παράγραφος μας είναι η ακόλουθη:

<p>
 Αυτή είναι μία παράγραφος που
 η <span class="fontRed">μορφοποίηση</span>
 της είναι πολύ απλή
 </p>

και στο αρχείο CSS μας θα βάλουμε τον ακόλουθο κώδικα

.fontRed
{
   color: red;
}

Με τον παραπάνω κώδικα, σε όποιο στοιχείο της HTML μας βάλουμε την κλάση fontRed το κείμενο θα εμφανίζεται με κόκκινα γράμματα.

Θα πρέπει να σημειωθεί πως οι επιλογείς κλάσης στα αρχεία CSS αρχίζουν με τελεία (.).

Το όνομα κλάσης fontRed που επέλεξα είναι τυχαίο και εσείς είστε ελεύθεροι να ονομάσετε τις κλάσεις σας όπως θέλετε. Ωστόσο η πρόταση μου είναι να χρησιμοποιείτε πάντα ονόματα για κλάσεις που να περιγράφουν το σκοπό τους.

Προηγούμενο : Συντακτικό CSS
Επόμενο : CSS ID