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

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

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

• Πλάτος: Καθορίστε ένα πλάτος για οποιοδήποτε στοιχείο που μπορεί να έχει καθορίσει τις διαστάσεις του,. Οι επιλογές μεγέθους είναι pixel (px), σημείο (pt), pica (pc), ποσοστό (%), em, rem, ex και ch.

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

  • Min και Max Πλάτος: Καθορίστε ελάχιστο και μέγιστο πλάτος για ετικέτες και άλλα στοιχεία μπλοκ. Αυτές οι επιλογές είναι χρήσιμες όταν καθορίζετε το πλάτος ως ποσοστό του παραθύρου του προγράμματος περιήγησης. Για παράδειγμα, μπορείτε να ορίσετε το πλάτος σχεδίασης στο 80 τοις εκατό του παραθύρου του προγράμματος περιήγησης και, στη συνέχεια, να ορίσετε ένα μέγιστο πλάτος των 1000 px για να εμποδίσετε τη διάταξή σας να εκτείνεται σε πλάτος μεγαλύτερου από 1000 pixels.

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

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

  • Υπόθεση: Ορίζει το μέγεθος του χώρου μέσα στα όρια ενός στοιχείου. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε την επένδυση για να δημιουργήσετε χώρο ανάμεσα στα όρια μιας ετικέτας και των περιεχομένων της. Μπορείτε να ρυθμίσετε ξεχωριστά την επένδυση για την κορυφή, δεξιά, κάτω και αριστερά. Το πάχος μετράται σε pixel, σημεία, ίντσες, εκατοστά, χιλιοστά, picas, ems, exs και ποσοστά.

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

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

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

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

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

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

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

    

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

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

  • Υπερχείλιση-x και -y: Πείτε στο πρόγραμμα περιήγησης πώς να εμφανίσετε τα περιεχόμενα ενός στοιχείου αν το δοχείο, όπως μια ετικέτα, δεν μπορεί να χωρέσει ολόκληρο το ύψος ή το πλάτος του στοιχείου. Οι επιλογές υπερχείλισης είναι

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

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

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

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

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

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

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

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

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

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

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

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