Σύνδεση
Μενού

Κεφάλαιο 4: CSS ID

Τα ID είναι παρόμοια με τις κλάσεις. Η διαφορά με τις κλάσεις είναι πως από τι στιγμή που δηλώνετε ένα ID δεν μπορείτε να δηλώσετε ξανά το ίδιο ID σε άλλο στοιχείο μέσα στο ίδιο έγγραφο HTML.

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

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

Δείτε για παράδειγμα το ακόλουθο παράδειγμα

<div id="header">
    <div id="menu">
        <ul id="main_menu">
            <li><a href="#">Αρχική</a></li>
            ...
            <li><a href="#">Επικοινωνία</a></li>
        </ul>
    </div>
    <div id="content">
        <div id="articles">
        </div>
        <div id="sidebar">
        </div>
    </div>
    <div id="footer">
    </div>
</div>

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

#header
{
    display: block;
    width: 960px;
    height: 250px;
    margin: 0 auto;
}
#content
{
    display: block;
    width: 960px;
    margin: 0 auto;
}

#articles
{
    display: block
    width: 700px;
    margin-right: 20px;
    float: left;
}

#sidebar
{
    display: block;
    width: 140px;
    float: left;
}
#footer
{
    display: block;
    width: 960px;
    height: 70px;
    margin: 0 auto;
}

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

Προηγούμενο : CSS Κλάσεις
Επόμενο :  CSS Divs