Πώς να χρησιμοποιήσετε τις επιλογές διάταξης στον πίνακα ιδιοτήτων CSS του Dreamweaver

Στο επάνω μέρος του πίνακα CSS Designer Properties, βρίσκετε τις ιδιότητες CSS που χρησιμοποιούνται συνήθως για τη δημιουργία διατάξεων σελίδων. Χρησιμοποιείτε αυτές τις επιλογές για να καθορίσετε ύψος, πλάτος, ευθυγράμμιση, θέση και απόσταση. Αυτές οι ρυθμίσεις είναι ιδανικές για τη δημιουργία διατάξεων σελίδων με στυλ κλάσης και ταυτότητας για να κάνετε πράγματα όπως στοίχιση εικόνων και θέσης

ετικέτες για τη δημιουργία διατάξεων πολλαπλών στηλών.

Μπορείτε να χρησιμοποιήσετε τις επιλογές διάταξης στον πίνακα ιδιοτήτων CSS για να ορίσετε αυτές τις τιμές:

• Πλάτος: Καθορίστε ένα πλάτος για κάθε στοιχείο που μπορεί να έχει καθορισμένες διαστάσεις, όπως α

  ετικέτα. Οι επιλογές μεγέθους είναι pixel (px), point (pt), pica (pc), % (%), em, rem, ex και ch.

• Ύψος: Καθορίστε ένα ύψος για οποιοδήποτε στοιχείο που μπορεί να έχει καθορισμένες διαστάσεις.

  • Ελάχιστο και μέγιστο πλάτος: Καθορίστε το ελάχιστο και μέγιστο πλάτος για

    ετικέτες και άλλα στοιχεία μπλοκ. Αυτές οι επιλογές είναι χρήσιμες όταν καθορίζετε το πλάτος ως ποσοστό του παραθύρου του προγράμματος περιήγησης. Για παράδειγμα, μπορείτε να ορίσετε το πλάτος της σχεδίασης στο 80 τοις εκατό του παραθύρου του προγράμματος περιήγησης και, στη συνέχεια, να ορίσετε ένα μέγιστο πλάτος 1000 px για να αποτρέψετε τη διάταξή σας σε μεγαλύτερη από 1000 pixel.

  • Ελάχιστο και μέγιστο ύψος: Καθορίστε το ελάχιστο και το μέγιστο ύψος για

    ετικέτες και άλλα στοιχεία μπλοκ.

  • Περιθώριο: Ορίστε την ποσότητα χώρου γύρω από ένα στοιχείο. Τα περιθώρια μπορούν να χρησιμοποιηθούν για τη δημιουργία χώρου μεταξύ της άκρης ενός στοιχείου και άλλων στοιχείων στη σελίδα, όπως μεταξύ μιας εικόνας και κειμένου ή μεταξύ δύο

    ετικέτες. Μπορείτε να ορίσετε το περιθώριο ξεχωριστά για το πάνω, το δεξί, το κάτω και το αριστερό. Το padding μετριέται σε pixel, σημεία, ίντσες, εκατοστά, χιλιοστά, picas, ems, exs και ποσοστά.

  • Επένδυση: Ορίζει την ποσότητα χώρου εντός των ορίων ενός στοιχείου. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε padding για να δημιουργήσετε χώρο μεταξύ των περιγραμμάτων του a

    ετικέτα και το περιεχόμενό της. Μπορείτε να ρυθμίσετε το padding ξεχωριστά για πάνω, δεξιά, κάτω και αριστερά. Το padding μετριέται σε pixel, σημεία, ίντσες, εκατοστά, χιλιοστά, picas, ems, exs και ποσοστά.

    Η ρύθμιση της επένδυσης και της απόστασης περιθωρίων μπορεί να είναι δύσκολη. Όταν προσθέτετε περιθώριο και συμπλήρωμα σε ένα στοιχείο, όπως μια εικόνα ή

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

• Θέση: Η επιλογή Θέση, διαθέσιμη στο κάτω μέρος της ενότητας Διάταξη του πίνακα Ιδιότητες, αλλάζει τον τρόπο με τον οποίο τοποθετούνται τα στοιχεία σε μια σελίδα. Η τοποθέτηση μπορεί να αλλάξει δραματικά τον τρόπο με τον οποίο τα στοιχεία σε επίπεδο μπλοκ (όπως πίνακας, λίστα, κεφαλίδα, παράγραφος και

  ετικέτες) εμφανίζονται σε ένα πρόγραμμα περιήγησης.

  • Διαδοχή: Δεν χρειάζεται να καθορίσετε αυτήν την προεπιλεγμένη επιλογή. Αν δεν επιλεγεί άλλη επιλογή, κάθε στοιχείο κληρονομεί την τοποθέτηση του γονικού στοιχείου του.

  • Στατική: Τοποθετήστε το περιεχόμενο στη θέση του εντός της ροής του εγγράφου. Από προεπιλογή, όλα τα στοιχεία HTML που μπορούν να τοποθετηθούν είναι στατικά.

  • Απόλυτο: Χρησιμοποιήστε τις επάνω και τις αριστερές συντεταγμένες για να ελέγξετε τη θέση ενός στοιχείου σε σχέση με την επάνω αριστερή γωνία του παραθύρου του προγράμματος περιήγησης ή την επάνω αριστερή γωνία ενός στοιχείου που περιέχει το στοιχείο.

  • Διορθώθηκε: Τοποθετήστε ένα στοιχείο σε σχέση με την επάνω αριστερή γωνία του προγράμματος περιήγησης. Το περιεχόμενο ενός στοιχείου που χρησιμοποιεί σταθερή τοποθέτηση παραμένει σταθερό ακόμα κι αν ο χρήστης κάνει κύλιση προς τα κάτω ή κατά μήκος της σελίδας.

  • Σχετική: Χρησιμοποιήστε μια θέση σε σχέση με το σημείο όπου εισάγετε το στοιχείο στη σελίδα ή σε σχέση με το κοντέινερ του.

    

  • Float: Στοίχιση στοιχείων, όπως εικόνες και

    ετικέτες, στα αριστερά ή στα δεξιά μιας σελίδας ή άλλου κοντέινερ που προκαλούν την αναδίπλωση κειμένου ή άλλων στοιχείων γύρω από αυτό. Κάντε κλικ στα εικονίδια στο πεδίο Float για να καθορίσετε τις ακόλουθες τέσσερις επιλογές: Inherit, Right, Left ή None.

  • Απαλοιφή: Αποτρέψτε το κυμαινόμενο περιεχόμενο να επικαλύπτει μια περιοχή προς τα αριστερά ή προς τα δεξιά ή και στις δύο πλευρές ενός στοιχείου. Αυτή η επιλογή είναι χρήσιμη όταν ένα αιωρούμενο στοιχείο, όπως α

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

  • Overflow-x και -y: Πείτε στο πρόγραμμα περιήγησης πώς να εμφανίζει τα περιεχόμενα ενός στοιχείου εάν το κοντέινερ, όπως

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

  • Ορατό: Διατηρήστε το περιεχόμενο, όπως μια εικόνα ή ένα κείμενο, ορατό, ακόμα κι αν επεκτείνεται πέρα ​​από το καθορισμένο ύψος ή πλάτος ενός κοντέινερ.

  • Κρυφό: Κόψτε το περιεχόμενο εάν υπερβαίνει το μέγεθος του δοχείου. Αυτή η επιλογή δεν παρέχει γραμμές κύλισης.

  • Κύλιση: Προσθέστε γραμμές κύλισης στο κοντέινερ ανεξάρτητα από το αν το περιεχόμενό του υπερβαίνει το μέγεθος του στοιχείου.

  • Auto: Κάντε τις γραμμές κύλισης να εμφανίζονται μόνο όταν το περιεχόμενο ενός κοντέινερ υπερβαίνει τα όριά του.

• Εμφάνιση: Υποδείξτε εάν ή πώς θα αποδοθεί ένα στοιχείο σε ένα πρόγραμμα περιήγησης. Για παράδειγμα, αλλάζετε τη θέση μιας μη ταξινομημένης λίστας από οριζόντια σε κατακόρυφη επιλέγοντας Inline ή αποκρύπτετε ένα στοιχείο, καθιστώντας το αόρατο, επιλέγοντας Κανένα. Μπορείτε να χρησιμοποιήσετε την επιλογή Εμφάνιση με μια γλώσσα σεναρίου για να αλλάξετε δυναμικά την εμφάνιση των στοιχείων.

• Ορατότητα: Ελέγξτε εάν το πρόγραμμα περιήγησης εμφανίζει ένα στοιχείο ή όχι. Οι επιλογές ορατότητας είναι

  • Διαδοχή: Το στοιχείο έχει την ορατότητα του στοιχείου στο οποίο περιέχεται (η προεπιλογή).

  • Ορατό: Εμφανίζεται το στοιχείο.

  • Κρυφό: Το στοιχείο δεν εμφανίζεται.

  • Σύμπτυξη: Για χρήση με πίνακες HTML. Η σύμπτυξη μπορεί να χρησιμοποιηθεί για την κατάργηση μιας στήλης ή μιας γραμμής χωρίς να επηρεαστεί η υπόλοιπη διάταξη του πίνακα.

• Z-Index: Έλεγχος της θέσης ενός στοιχείου στη συντεταγμένη Z, η οποία ελέγχει τη σειρά στοίβαξης των στοιχείων μεταξύ τους. Τα στοιχεία με μεγαλύτερο αριθμό επικαλύπτουν στοιχεία με χαμηλότερο αριθμό.

• Αδιαφάνεια: Ελέγξτε το επίπεδο αδιαφάνειας για ένα στοιχείο από 0,0 (πλήρως διαφανές) έως 1,0 (πλήρως αδιαφανές). Για παράδειγμα, εάν εισαγάγετε 0,5 στο πεδίο αδιαφάνειας, η αδιαφάνεια ενός στοιχείου θα μειωθεί στο 50 τοις εκατό.