Saltar al contenido

Στυλ διάρθρωσης CSS

6 de junio de 2021

Η ιδιότητα περίγραμμα CSS είναι μια σύγχυση ιδιότητα. Όταν το μαθαίνετε για πρώτη φορά, είναι δύσκολο να καταλάβετε πώς διαφέρει ακόμη και από την ιδιοκτησία του περιγράμματος. Το W3C το εξηγεί ότι έχει τις ακόλουθες διαφορές:

  • Τα περιγράμματα δεν καταλαμβάνουν χώρο.
  • Τα περιγράμματα μπορεί να είναι μη ορθογώνια.

Τα περιγράμματα δεν καταλαμβάνουν χώρο

Αυτή η δήλωση, από μόνη της, προκαλεί σύγχυση. Πώς ένα αντικείμενο στην ιστοσελίδα σας δεν καταλαμβάνει χώρο στην ιστοσελίδα; Αλλά αν νομίζετε ότι η ιστοσελίδα σας είναι σαν κρεμμύδι, κάθε στοιχείο της σελίδας μπορεί να έχει στρώσεις πάνω από ένα άλλο στοιχείο. Η ιδιότητα περιγράμματος δεν καταλαμβάνει χώρο επειδή τοποθετείται πάντα πάνω από το πλαίσιο του στοιχείου. Όταν ένα περίγραμμα τοποθετείται γύρω από ένα στοιχείο, δεν επηρεάζει τον τρόπο με τον οποίο αυτό το στοιχείο εκτίθεται στη σελίδα. Δεν αλλάζει το μέγεθος ή τη θέση του στοιχείου. Εάν βάλετε ένα περίγραμμα σε ένα στοιχείο, θα καταλάβει τον ίδιο χώρο όπως και αν δεν έχετε ένα περίγραμμα αυτού του στοιχείου. Αυτό δεν ισχύει για τα σύνορα. Ένα περίγραμμα σε ένα στοιχείο προστίθεται στο εξωτερικό πλάτος και ύψος του στοιχείου. Έτσι, εάν είχατε μια εικόνα πλάτους 50 pixel, με περίγραμμα 2 pixel, θα χρειαζόταν 54 pixel (2 pixel για κάθε πλευρικό περίγραμμα). Η ίδια εικόνα με περίγραμμα 2 εικονοστοιχείων θα έχει μόνο πλάτος 50 εικονοστοιχείων στη σελίδα σας, το περίγραμμα θα εμφανίζεται πάνω από το εξωτερικό άκρο της εικόνας.

Τα περιγράμματα ενδέχεται να μην είναι ορθογώνια

Προτού αρχίσετε να σκέφτεστε «δροσερό, τώρα μπορώ να σχεδιάσω κύκλους», ξανασκεφτείτε το. Αυτή η δήλωση έχει διαφορετική σημασία από ό, τι νομίζετε. Όταν τοποθετείτε ένα περίγραμμα σε ένα στοιχείο, το πρόγραμμα περιήγησης ερμηνεύει το στοιχείο σαν να ήταν ένα τεράστιο ορθογώνιο πλαίσιο. Εάν το πλαίσιο χωριστεί σε πολλές γραμμές, το πρόγραμμα περιήγησης αφήνει ανοιχτά τις άκρες επειδή το πλαίσιο δεν είναι κλειστό. Είναι σαν το πρόγραμμα περιήγησης να βλέπει το περίγραμμα με απέραντη ευρεία οθόνη – αρκετά ευρύ ώστε αυτό το περίγραμμα να είναι ένα συνεχές ορθογώνιο. Αντίθετα, η ιδιότητα περιγράμματος λαμβάνει υπόψη τις άκρες. Εάν ένα περιγραμμένο στοιχείο εκτείνεται σε πολλές γραμμές, το περίγραμμα κλείνει στο τέλος της γραμμής και ανοίγει ξανά στην επόμενη γραμμή. Εάν είναι δυνατόν, το περίγραμμα θα παραμείνει πλήρως συνδεδεμένο επίσης, δημιουργώντας ένα μη ορθογώνιο σχήμα.

Χρήσεις της ιδιότητας διάρθρωσης

Μία από τις καλύτερες χρήσεις της ιδιότητας περίγραμμα είναι να επισημάνετε τους όρους αναζήτησης. Πολλοί ιστότοποι το κάνουν αυτό με χρώμα φόντου, αλλά μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα περιγράμματος και να μην ανησυχείτε για την προσθήκη επιπλέον αποστάσεων στις σελίδες σας. Η ιδιότητα χρώματος περιγράμματος αποδέχεται τον όρο «αναστροφή» που καθιστά το χρώμα περιγράμματος αντίστροφο του τρέχοντος φόντου. Αυτό σας επιτρέπει να επισημάνετε στοιχεία σε δυναμικές ιστοσελίδες χωρίς να χρειάζεται να γνωρίζετε ποια χρώματα χρησιμοποιούνται. Μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα διάρθρωσης για να αφαιρέσετε τη διακεκομμένη γραμμή γύρω από τους ενεργούς συνδέσμους. Αυτό το άρθρο από το CSS-Tricks δείχνει πώς να αφαιρέσετε το διάστικτο περίγραμμα.

Αναφέρετε αυτό το άρθρο

Μορφή mla apa chicago Η αναφορά σας

Kyrnin, Jennifer. «Στυλ διάρθρωσης CSS.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/css-outline-styles-3466217.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Στυλ διάρθρωσης CSS. Ανακτήθηκε από το https://www.thoughtco.com/css-outline-styles-3466217
Kyrnin, Jennifer. «Στυλ διάρθρωσης CSS.» ThoughtCo. https://www.thoughtco.com/css-outline-styles-3466217 (πρόσβαση στις 6 Ιουνίου 2021).

αντιγραφή παραπομπής