Στυλ διάρθρωσης CSS: Όχι απλώς ένα περίγραμμα

click fraud protection

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

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

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

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

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

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

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

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

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

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

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

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

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

instagram story viewer