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

Κεφάλαιο 5: CSS Divs

Ωραία, τώρα που έχετε τελειώσει με τα πρώτα τέσσερα κεφάλαια, έχετε μάθει τα απολύτως βασικά των CSS, πως λειτουργεί το συντακτικό τους, καθώς και μερικά πράγματα για τα ID και τις κλάσεις.

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

Στο κεφάλαιο αυτό θα μάθουμε μερικά πράγματα για τα στοιχεία της HTML div ενώ στο επόμενο κεφάλαιο θα μάθουμε για τα span.

Τα στοιχεία div

Τα στοιχεία div είναι εξ ορισμού πλαίσια τα οποία χρησιμοποιούνται για να ορίζουν τμήματα της δομής ενός εγγράφου HTML. Ένα div μπορεί να περιέχει κάθε άλλη ετικέτα που είναι διαθέσιμη στην HTML. Ανάμεσα στις ετικέτες που μπορείτε να χρησιμοποιήσετε μέσα σε μία ετικέτα div είναι άλλες ετικέτες div, span, εικόνες, κείμενο και ότι άλλο μπορείτε να φανταστείτε.

Η δημιουργία μιας ετικέτας div μπορεί να γίνει οπουδήποτε μέσα σε ένα έγγραφο HTML ανάμεσα στις ετικέτες <body></body>.

Παράδειγμα

Ας υποθέσουμε πως έχουμε τον ακόλουθο κώδικα HTML

<div id="sidebar">
    Αυτή είναι μια πλευρική μπάρα
 </div>

και στο CSS μας έχουμε τον ακόλουθο κώδικα

#sidebar
 {
    width: 25%;
     margin-left: 25px;
     padding: 20px;
     border-left: 1px solid #DEDEDE;
     background: #FFF;
 }

Έτσι με τον παραπάνω κώδικα θα μορφοποιήσουμε το div με id container έτσι ώστε να έχει για πλάτος το 25% του γονικού στοιχείου, να έχει 25px κενό από τα αριστερά, το εσωτερικό περιθώριο θα είναι 20px, θα έχει μια περίγραμμα μόνο από τα αριστερά με χρώμα γκρι, και το χρώμα φόντου θα είναι λευκό.

Προηγούμενο : CSS ID
Επόμενο :  CSS Span Elements