Css classes - inheritance

Ένας καλός τρόπος να αυξήσουμε την ποικιλία και την ευελιξία των styles που χρησιμοποιούμε είναι η χρήση των classes. Δίνουμε δηλαδή ονόματα στα διάφορα Styles και τα χρησιμοποιούμε κατά περίπτωση. Στο παράδειγμα που ακολουθεί δημιουργήσαμε το style .foo και το εφαρμόζουμε σε μια DIV .και το style .foobar που το εφαρμόζουμε σε μια P.

Τα ονόματα των classes ξεκινούν από τελεία και περιέχουν μόνο αλφαριθμητικούς χαρακτήρες. Επίσης, διαθέτουν την πολύ χρήσιμη δυνατότητα της κληρονομιάς. Έτσι, με την τιμή inherit δηλώνουμε σε ένα style πως θα ενεργήσει όπως του ορίζει το μητρικό τους. Στο παράδειγμα το <div class="foo"> είναι το μητρικό και το <p class="bar"> είναι το κατιόν (παιδί).

Προσοχή: Η τελεία στην αρχή του ονόματος μιας κλάσης (class) δεν αναγράφεται όταν την καλούμε (π.χ. <p class="foobar">).

.foo {
background-color: white;
color: black;
}

.bar {
background-color: inherit;
color: inherit;
font-weight: normal;
}
.foobar {
background-color: green;
color: blue;
}
</STYLE>
<HEAD><TITLE>Ο Τίτλος</TITLE></HEAD>
<BODY bgcolor=red>
<h3>Μια Δοκιμή</h3>
<div class="foo">
<p class="bar">
Λίγο κείμενο σε μία παράγραφο
</p>

<p class="foobar">
Λίγο ακόμη κείμενο σε μία άλλη παράγραφο
</p>
</div>
</BODY></HTML>

Css classes - inheritance

Τρέχουσα Ενότητα: Προχωρημένο HTML - Dreamweaver