Μιχαήλ 2016-06-11 1 HTML και CSS 0

Πώς γίνεται το διπλό περίγραμμα στο css;

Γεια σε όλους. Ξέρετε πώς να διπλασιάζετε περίγραμμα σε css; Εάν όχι, διαβάστε αυτό το μικρό σημείωμα. Το θέμα είναι ότι δεν μπορείτε να το κάνετε αυτό με το συνηθισμένο περίγραμμα, εδώ πρέπει να πάτε από την άλλη.

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

Διπλό περίγραμμα με κουτί-σκιά

Γενικά, αν θέλετε να μάθετε περισσότερα για τη σκιά στο css, τότε σας συμβουλεύω να διαβάσετε για το σχετικό θέμα. Σε αυτό το άρθρο, δεν θα εξηγήσω λεπτομερώς τη σύνταξη της ιδιότητας, αλλά απλώς θα σας δείξω ένα κόλπο για το πώς να δημιουργήσετε ένα διπλό περίγραμμα. Λοιπόν, ας δημιουργήσουμε ένα συνηθισμένο μπλοκ, στο οποίο θα αντιστοιχίσω μερικά στυλ. Το μπλοκ μπορεί να είναι οποιοδήποτε και με οποιοδήποτε περιεχόμενο. Στην περίπτωσή μου, είναι ένα απλό div, οπότε δεν θα δείξω καν τον κώδικα html. Και εδώ είναι τα στυλ:

Div (
φόντο: # E0D8A3;
πλάτος: 180 px;
ύψος: 110 px;
padding: 12px;
}

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

Σκιά κουτιού: 0 0 0 1 εικονοστοιχεία # 000, 0 0 0 10 εικονοστοιχεία # E0D8A3;

Έτσι φαίνεται:

Όπως μπορείτε να δείτε, βγήκε πολύ ωραία. Υπάρχουν μόνο 5 παράμετροι στο πλαίσιο-σκιά. Το πρώτο είναι η οριζόντια μετατόπιση της σκιάς, το δεύτερο είναι η κατακόρυφη. Η τρίτη και η τέταρτη παράμετρος είναι θαμπάδα και τέντωμα. Όπως καταλαβαίνετε, τα τρία πρώτα δεν τα αγγίζουμε καθόλου. Δεν χρειαζόμαστε blur γιατί θέλουμε μια έντονη σκιά. Όπως μπορείτε να δείτε, συνέταξα την τέταρτη παράμετρο - τέντωμα. Καθορίζει πόσο η σκιά θα είναι μεγαλύτερη από το στοιχείο στο οποίο είναι προσαρτημένο.

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

Όπως μπορείτε να δείτε, απλώς απαρίθμησα τις παραμέτρους για κάθε νέα σκιά, διαχωρισμένες με κόμματα. Νομίζω ότι έχετε ήδη μαντέψει ότι μπορείτε να δημιουργήσετε ένα τριπλό περίγραμμα κ.λπ. με τον ίδιο τρόπο. Δεν υπάρχουν περιορισμοί εδώ. Στην πραγματικότητα, όπως για μένα, η ερώτηση έχει κλείσει, αλλά αν έχετε ερωτήσεις, μπορείτε να τις γράψετε στα σχόλια.

Μόνο μια στιγμή της προσοχής σας:Όλοι θέλουμε να φιλοξενήσουμε τους ιστότοπούς μας σε μια αξιόπιστη φιλοξενία. Έχω αναλύσει εκατοντάδες φιλοξενίες και βρήκα το καλύτερο - HostIQΥπάρχουν εκατοντάδες θετικές κριτικές σχετικά με αυτόν στο διαδίκτυο, η μέση βαθμολογία των χρηστών είναι 4,8 στα 5. Μακάρι οι ιστότοποί σας να είναι χαρούμενοι.

Βλαντ Μέρζεβιτς

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

Περιγραφή ιδιοκτησίας

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

• σχεδιάζεται περίγραμμα γύρω από το στοιχείο (το περίγραμμα είναι μέσα).
• το περίγραμμα δεν επηρεάζει τις διαστάσεις του στοιχείου (το περίγραμμα προστίθεται στο πλάτος και το ύψος του στοιχείου).
• Το περίγραμμα μπορεί να ρυθμιστεί μόνο γύρω από ολόκληρο το στοιχείο, όχι σε μεμονωμένες πλευρές (το περίγραμμα μπορεί να χρησιμοποιηθεί σε οποιαδήποτε πλευρά ή όλα ταυτόχρονα).
• το περίγραμμα δεν επηρεάζεται από την ακτίνα στρογγυλοποίησης που ορίζεται από την ιδιότητα border-radius (επηρεάζεται το περίγραμμα).

Τίθεται το ερώτημα - σε ποιες περιπτώσεις χρειάζεται περίγραμμα, όταν ο ρόλος του, παρά τις παρατιθέμενες διαφορές, αναλαμβάνεται πλήρως κατά σύνορα; Δεν υπάρχουν τόσες πολλές καταστάσεις, αλλά συμβαίνουν:

• δημιουργία σύνθετων πολύχρωμων πλαισίων.
• προσθέτοντας ένα περίγραμμα σε ένα στοιχείο όταν τοποθετείτε το δείκτη του ποντικιού πάνω από αυτό με τον κέρσορα του ποντικιού.
• απόκρυψη του πλαισίου που προστέθηκε αυτόματα από το πρόγραμμα περιήγησης για ορισμένα στοιχεία όταν λάβουν εστίαση.
• για ένα περίγραμμα, μπορείτε να ορίσετε την απόσταση από την άκρη ενός στοιχείου στο πλαίσιο χρησιμοποιώντας την ιδιότητα outline-offset για δημιουργία.

Πολύχρωμες κορνίζες

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

Παράδειγμα 1. Δημιουργία πλαισίου

Σε αυτό το παράδειγμα, προστίθεται ένα μαύρο περίγραμμα γύρω από το στοιχείο, το οποίο διαχωρίζεται από το φόντο με ένα λευκό περίγραμμα (Εικ. 1).

Ρύζι. 1. Πλαίσιο γύρω από το στοιχείο

Πλαίσιο κατά τη χρήση: τοποθετήστε το δείκτη του ποντικιού

Η προσθήκη περιγράμματος μέσω περιγράμματος αυξάνει το πλάτος του στοιχείου, το οποίο είναι αρκετά αισθητό όταν συνδυάζουμε περίγραμμα και την ψευδοκλάση: hover. Υπάρχουν δύο τρόποι για να "κερδίσετε" αυτό. Το πιο απλό πράγμα είναι να αντικαταστήσουμε το περίγραμμα με περίγραμμα, το οποίο γνωρίζουμε ότι δεν επηρεάζει τις διαστάσεις του στοιχείου (παράδειγμα 2).

Παράδειγμα 2. Περίγραμμα στο δείκτη του ποντικιού

Το περίγραμμα δεν είναι πάντα κατάλληλο, έστω και μόνο επειδή η στρογγυλοποίηση της γωνίας δεν το επηρεάζει. Εδώ η δεύτερη μέθοδος είναι κατάλληλη - προσθέστε ένα αόρατο πλαίσιο ή πλαίσιο που ταιριάζει με το χρώμα του φόντου και, στη συνέχεια, αλλάξτε τις παραμέτρους του κατά την τοποθέτηση του δείκτη (παράδειγμα 3). Τότε δεν θα υπάρξει μετατόπιση του στοιχείου, αφού το πλαίσιο υπάρχει ήδη από την αρχή. Αλλά να θυμάστε πάντα ότι το πλάτος του στοιχείου είναι το άθροισμα των τιμών του πλάτους, του περιγράμματος στα αριστερά και του περιγράμματος στα δεξιά. Η κατάσταση είναι παρόμοια με το ύψος.

Παράδειγμα 3. Πλαίσιο σε αιώρηση

Περίγραμμα γύρω από πεδία φόρμας

Σε ορισμένα προγράμματα περιήγησης (Chrome, Safari, οι πιο πρόσφατες εκδόσεις του Opera), εμφανίζεται ένα μικρό έγχρωμο περίγραμμα γύρω από τα πεδία της φόρμας όταν λαμβάνουν εστίαση (Εικόνα 2). Για να το αφαιρέσετε, απλώς προσθέστε την τιμή none στην ιδιότητα περίγραμμα σε στυλ, όπως φαίνεται στο παράδειγμα 4.

Ρύζι. 2. Πλαίσιο γύρω από τα πεδία

Παράδειγμα 4. Αφαίρεση του πλαισίου

Κορνίζες μέσω κουτιού-σκιάς

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

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

Το Παράδειγμα 4 δείχνει πώς να προσθέσετε δύο περιθώρια και ένα περίγραμμα στα δεξιά χρησιμοποιώντας μία ιδιότητα box-shadow.

Παράδειγμα 4. Χρήση κουτιού-σκιάς

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 3.

Ρύζι. 3. Πλαίσια που δημιουργούνται από την ιδιότητα box-shadow

Περιγραφή

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

Σύνταξη

Οι αξίες

Η τιμή πλάτους περιγράμματος καθορίζει το πάχος του περιγράμματος. Παρέχονται πολλές τιμές σε στυλ περιγράμματος για τον έλεγχο της εμφάνισής του. Τα ονόματά τους και το αποτέλεσμα της δράσης φαίνονται στο Σχ. 1.

Εικ. 1. Στυλ πλαισίων

border-color ορίζει το χρώμα του περιγράμματος, η τιμή μπορεί να είναι σε οποιαδήποτε έγκυρη μορφή CSS.

κληρονομεί κληρονομεί την αξία του γονέα.

HTML5 CSS2.1 IE Cr Op Sa Fx

Αυτό το παράδειγμα προσθέτει ένα διπλό περίγραμμα γύρω από το επίπεδο. Το αποτέλεσμα φαίνεται στο Σχ. 2.

Ρύζι. 2. Εφαρμογή της ιδιότητας συνόρων

Μοντέλο αντικειμένου

document.getElementById ("elementID") .style.border

Προγράμματα περιήγησης

Ο Internet Explorer έως και την έκδοση 6 περιλαμβάνει διακεκομμένες κουκκίδες με πάχος περιγράμματος 1 εικονοστοιχείο. Εάν το πάχος είναι 2 px ή περισσότερο, η διακεκομμένη τιμή λειτουργεί σωστά. Αυτό το σφάλμα διορθώθηκε στον IE7, αλλά μόνο για όλα τα περιγράμματα 1 px. Εάν ένα από τα περιγράμματα του πλαισίου έχει πάχος 2 px ή περισσότερο, τότε στο IE7 η τιμή με τις κουκκίδες γίνεται διακεκομμένη.

Ο Internet Explorer έως και 7.0 δεν υποστηρίζει την τιμή κληρονομιάς.

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

Περιγραφή

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

Σύνταξη

σύνορα: (1,4) | κληρονομώ

Οι αξίες

Παρέχονται πολλές τιμές ιδιοκτησίας τύπου περιγράμματος για τον έλεγχο της εμφάνισης του περιγράμματος. Η εμφάνιση εξαρτάται από το πρόγραμμα περιήγησης που χρησιμοποιείται και το καθορισμένο πάχος περιγράμματος. Τραπέζι Το 1 δείχνει τα ονόματα των στυλ και το πλαίσιο που προκύπτει σε διαφορετικές τιμές πάχους - 1, 3, 5 και 7 pixel.

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

Κανένα Δεν εμφανίζει το περίγραμμα και το πλάτος του (πλάτος περιγράμματος) είναι μηδενικό. κρυφό Έχει το ίδιο εφέ με κανένα εκτός από την εφαρμογή του στυλ περιγράμματος σε κελιά πίνακα στα οποία η ιδιότητα σύμπτυξης περιγράμματος έχει οριστεί σε σύμπτυξη. Σε αυτήν την περίπτωση, το περίγραμμα γύρω από το κελί δεν θα εμφανίζεται καθόλου. inherit Κληρονομεί την τιμή από τον γονέα.

Επιτρέπεται η χρήση μίας, δύο, τριών ή τεσσάρων τιμών, χωρίζοντάς τες με κενό. Το αποτέλεσμα εξαρτάται από την ποσότητα και αναφέρεται στον πίνακα. 2.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 1.

Ρύζι. 1. Εφαρμογή της ιδιότητας τύπου περιγράμματος

Μοντέλο αντικειμένου

document.getElementById ("elementID") .style.borderStyle

Προγράμματα περιήγησης

Ο Internet Explorer έως και την έκδοση 6 περιλαμβάνει διακεκομμένες κουκκίδες με πάχος περιγράμματος 1 εικονοστοιχείο. Εάν το πάχος είναι 2 px ή περισσότερο, η διακεκομμένη τιμή λειτουργεί σωστά. Αυτό το σφάλμα διορθώθηκε στον IE7, αλλά μόνο για όλα τα περιγράμματα 1 px. Εάν ένα από τα περιγράμματα του πλαισίου έχει πάχος 2 px ή περισσότερο, τότε στο IE7 η τιμή με τις κουκκίδες γίνεται διακεκομμένη.

Ο Internet Explorer μέχρι και την έκδοση 7.0 δεν υποστηρίζει κρυφές και κληρονομικές τιμές.

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

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

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

Παράμετροι που χαρακτηρίζουν το πλαίσιο: 1) Πάχος πλαισίου, 2) Στυλ πλαισίου και 3) Χρώμα πλαισίου. Και πάμε με τη σειρά:

• 1. Πάχος πλαισίου: πλάτος συνόρων: 2 εικονοστοιχεία;
• 2. Στυλ πλαισίου: στιλ συνόρων: στερεός;
• 3. Χρώμα πλαισίου: χρώμα πλαισίου: # ff0000;

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

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

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

Html

Δημιουργεί ένα περίγραμμα γύρω από τον τίτλο.

Και το ίδιο το στυλ για το πλαίσιο.

H2 (πλάτος περιγράμματος: 2 εικονοστοιχεία, στυλ περιγράμματος: συμπαγής, χρώμα περιγράμματος: # FF0000;)

Ως αποτέλεσμα, ένα συμπαγές κόκκινο περίγραμμα με πάχος 2 εικονοστοιχεία.

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

• μπλουζα - Μπλουζα.
• σωστά - Σωστά
• κάτω μέρος - Κάτω μέρος
• αριστερά - Αριστερά

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

H2 (πλάτος περιγράμματος-κάτω: 2 εικονοστοιχεία, στιλ περιγράμματος-κάτω: διπλό, χρώμα περιγράμματος-κάτω: # FF0000;)

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

H2 (πλάτος περιγράμματος-κάτω: 2 εικονοστοιχεία, στιλ περιγράμματος-κάτω: διπλό, χρώμα περιγράμματος-κάτω: # FF0000; πλάτος περιγράμματος-πάνω: 2 εικονοστοιχεία, στιλ περιγράμματος-πάνω-στυλ: διπλό, χρώμα-κάτω περιγράμματος: # FF0000;)

Ο τίτλος θα έχει τώρα ένα κόκκινο περίγραμμα γύρω από το πάνω και το κάτω μέρος. Το ίδιο μπορεί να γίνει και για άλλα κόμματα.

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

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

Δηλαδή, όταν το πρόγραμμα περιήγησης βλέπει μια τέτοια συντομευμένη σημείωση σύνορο: 2px στερεό # ff0000; , θα δημιουργήσει επίσης ένα περίγραμμα και στις τέσσερις πλευρές του τίτλου. Αυτή η σύντομη σημειογραφία είναι ισοδύναμη με αυτήν που χρησιμοποιήσαμε παραπάνω (όπου εφαρμόστηκαν τρεις ιδιότητες).

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

H2 (περιθώριο-κορυφή: 2px συμπαγές # ff0000;)

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

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