Περιγραφή

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

Σύνταξη

Αξίες

Η τιμή πλάτους περιγράμματος καθορίζει το πάχος του περιγράμματος. Παρέχονται διάφορες τιμές σε στυλ περιγράμματος για τον έλεγχο της εμφάνισής του. Τα ονόματά τους και το αποτέλεσμα της δράσης παρουσιάζονται στο Σχ. 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 δεν υποστηρίζουν την τιμή κληρονομιάς.

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

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

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

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

Σε αυτό το παράδειγμα, κάθε πλευρά του μπλοκ έχει διαφορετικό πάχος περιγράμματος, στυλ και χρώμα.

Σκεφτείτε πώς θα μπορούσατε να δημιουργήσετε ένα σχήμα όπως αυτό χρησιμοποιώντας CSS:

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

• σύνορα - στυλ περιγράμματος.
• περίγραμμα-πλάτος - πλάτος περιγράμματος.
• χρώμα περιγράμματος - χρώμα περιγράμματος.

Ας εξετάσουμε κάθε μία από τις τιμές ξεχωριστά.

ιδιοκτησία συνόρων Στυλ συνόρων.

Η ιδιότητα τύπου border ορίζει το στυλ του περιγράμματος. Στο CSS, σε αντίθεση με την HTML, το περίγραμμα ενός στοιχείου μπορεί να είναι όχι μόνο συμπαγές. Οι ακόλουθες τιμές γίνονται δεκτές για το στυλ περιγράμματος:

1. κανένα - χωρίς περίγραμμα (προεπιλογή).
2. συμπαγές - συμπαγές περίγραμμα.
3. διπλό - διπλό περίγραμμα.
4. διακεκομμένο - διάστικτο περίγραμμα.
5. διακεκομμένο - ένα περίγραμμα που αποτελείται από έναν αριθμό κουκκίδων.
6. κορυφογραμμή - σύνορο "ράχη".
7. αυλάκι - περίγραμμα "αυλάκι".
8. ένθετο - πιεσμένο περίγραμμα.
9. αρχή - εξωθημένο περίγραμμα.

Παραδείγματα για το πώς μοιάζουν.

χωρίς σύνορα (κανένα)

συμπαγές περίγραμμα

διπλό περίγραμμα

περίγραμμα μιας σειράς κουκκίδων (στιγμένο)

διακεκομμένο περίγραμμα

αυλάκι περίγραμμα

σύνορο κορυφογραμμής

εσοχή περιγράμματος (ένθετο)

εξωθημένο περίγραμμα (αρχή)

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

Ένα μπλοκ div με μαύρο περίγραμμα και στυλ κορυφογραμμής.

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

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

Μία τιμή (συμπαγής) - το στυλ περιγράμματος ορίζεται για όλες τις πλευρές του μπλοκ.

Δύο τιμές (συμπαγές διπλό) - η πρώτη τιμή ορίζει το στυλ για την επάνω και την κάτω πλευρά, η δεύτερη για την πλευρά.

Τρεις τιμές (συμπαγή διπλή διάστικτη) - η πρώτη τιμή για την επάνω πλευρά, η δεύτερη για τις πλευρές, η τρίτη για την κάτω πλευρά.

Τέσσερις τιμές (συμπαγή διπλή διακεκομμένη διακεκομμένη) - κάθε τιμή για τη μία πλευρά δεξιόστροφα ξεκινώντας από την κορυφή.

Η ιδιότητα πλάτους συνόρων. Πάχος περιγράμματος.

Για να ορίσετε το πλάτος του περιγράμματος ενός στοιχείου, χρησιμοποιήστε την ιδιότητα border-width. Το πάχος του περιγράμματος μπορεί να καθοριστεί σε οποιεσδήποτε απόλυτες μονάδες μέτρησης, για παράδειγμα σε pixel.

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

Παράδειγμα κώδικα:

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

• λεπτό - λεπτό περίγραμμα?
• μεσαίο - μέσο πάχος.
• παχύ - χοντρό περίγραμμα?

Πάχος περιγράμματος: λεπτό.

Πάχος περιγράμματος: μέτριο.

Πάχος περιγράμματος: παχύ.

Η ιδιότητα χρώματος περιγράμματος. Χρώμα πλαισίου.

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

• Δεκαεξαδικός συμβολισμός (#ff00aa) του χρώματος.
• Η μορφή RGB είναι rgb(255,12,110) . Μορφή RGBA για CSS3.
• Μορφές HSL και HSLA για CSS3.
• Όνομα χρώματος, για παράδειγμα μαύρο. Για μια πλήρη λίστα ονομάτων χρωμάτων, ανατρέξτε στον πίνακα Ονόματα χρωμάτων CSS.

Η ιδιότητα χρώματος περιγράμματος μπορεί επίσης να έχει μία έως τέσσερις τιμές και να τις αντιμετωπίζει παρόμοια με τις προηγούμενες ιδιότητες.

Μία τιμή (κόκκινο).

Δύο τιμές (κόκκινο μαύρο).

Τρεις τιμές (κόκκινο μαύρο κίτρινο).

Τέσσερις τιμές (κόκκινο μαύρο κίτρινο μπλε).

Τώρα ας επιστρέψουμε στο πρόβλημα που αναφέρθηκε παραπάνω και ας σχεδιάσουμε ένα σχήμα:

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

Ρύθμιση τιμών για τις πλευρές ξεχωριστά

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

• border-top (επάνω περίγραμμα)
• σύνορα-δεξιά
• σύνορο-κάτω
• περίγραμμα-αριστερά (αριστερό περίγραμμα)

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

Επιλογές επάνω περιγράμματος (border-top).

• border-top-color - ορίζει το χρώμα του επάνω περιγράμματος του στοιχείου.
• border-top-width - ορίζει το πάχος του άνω περιγράμματος του στοιχείου.
• border-top-style - ορίζει το στυλ του επάνω περιγράμματος του στοιχείου.

Επιλογές δεξιού περιγράμματος (περίγραμμα-δεξιά).

• περίγραμμα-δεξιά-χρώμα - ορίζει το χρώμα του δεξιού περιγράμματος του στοιχείου.
• border-right-width - ορίζει το πάχος του δεξιού περιγράμματος του στοιχείου.
• border-right-style - ορίζει το στυλ του δεξιού περιγράμματος του στοιχείου.

Επιλογές κάτω περιγράμματος (περίγραμμα-κάτω).

• border-bottom-color - ορίζει το χρώμα του κάτω περιγράμματος του στοιχείου.
• border-bottom-width - ορίζει το πάχος του κάτω περιγράμματος του στοιχείου.
• border-bottom-style - ορίζει το στυλ του κάτω περιγράμματος του στοιχείου.

Επιλογές αριστερού περιγράμματος (περίγραμμα-αριστερά).

• border-left-color - ορίζει το χρώμα του αριστερού περιγράμματος του στοιχείου.
• border-left-width - ορίζει το πάχος του αριστερού περιγράμματος του στοιχείου.
• border-left-style - ορίζει το στυλ του αριστερού περιγράμματος του στοιχείου.

Ένα παράδειγμα χρήσης αυτών των ιδιοτήτων:

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

Η ιδιότητα border-radius προορίζεται να στρογγυλεύει τις γωνίες των περιγραμμάτων ενός στοιχείου. Αυτή η ιδιότητα εισήχθη στο CSS3 και λειτουργεί σωστά σε όλα τα σύγχρονα προγράμματα περιήγησης εκτός από τον Internet Explorer 8 (και παλαιότερες εκδόσεις).

Οι τιμές μπορούν να είναι οποιοιδήποτε αριθμοί χρησιμοποιούνται στο CSS.

Ιδιότητα ακτίνας περιγράμματος: 15 εικονοστοιχεία.

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

Ιδιότητα ακτίνας περιγράμματος: 15 εικονοστοιχεία.

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

Περίγραμμα-πάνω-αριστερά-ακτίνα: 15px; περίγραμμα-πάνω-δεξιά-ακτίνα: 0; περίγραμμα-κάτω-δεξιά-ακτίνα: 15 εικονοστοιχεία; περίγραμμα-κάτω-αριστερά-ακτίνα: 0;

Ιδιότητα ακτίνας περιγράμματος: 15 εικονοστοιχεία.

Παρόλο που αυτός ο κωδικός μπορεί να γραφτεί σε μία δήλωση: border-radius : 15px 0 15px 0 . Το γεγονός είναι ότι η ιδιότητα border-radius μπορεί να οριστεί από μία έως τέσσερις τιμές. Ο παρακάτω πίνακας περιγράφει τους κανόνες που διέπουν τέτοιες ανακοινώσεις.

Έχοντας μελετήσει προσεκτικά αυτόν τον πίνακα, μπορείτε να καταλάβετε ότι η συντομότερη καταχώρηση για το επιθυμητό στυλ θα είναι ως εξής: περίγραμμα-ακτίνα : 15px 0 . Υπάρχουν μόνο δύο έννοιες.

Λίγη εξάσκηση

Σχεδιάζοντας ένα λεμόνι χρησιμοποιώντας CSS.

Εδώ είναι ο κώδικας για ένα τέτοιο μπλοκ:

Περιθώριο: 0 αυτόματο; /* Κεντράρετε το μπλοκ */ πλάτος: 200 px; ύψος: 200 px; φόντο: #F5F240; περίγραμμα: 1px στερεό #F0D900; περίγραμμα-ακτίνα: 10px 150px 30px 150px;

Έχουμε ήδη σχεδιάσει το σχήμα:

Τώρα ας αφήσουμε ένα τρίγωνο από αυτό:

Ο κωδικός του τριγώνου είναι:

Περιθώριο: 0 αυτόματο; /* Κεντράρετε το μπλοκ */ padding: 0px; πλάτος: 0px; ύψος: 0; περίγραμμα: 30 px συμπαγές λευκό. περίγραμμα-κάτω-χρώμα: κόκκινο;

Ιδιοκτησία CSS – « σύνορο", σας επιτρέπει να ορίσετε το πάχος, το χρώμα και τον τύπο της περιμετρικής γραμμής γύρω από το στοιχείο. Οι παράμετροι αυτής της ιδιότητας μπορούν να γραφτούν σε μία γραμμή, διαχωρισμένες με κενό διάστημα και με οποιαδήποτε σειρά.

• - Πάχος γραμμής ένα pixel
• - συμπαγής γραμμή
• - Ασπρο χρώμα
• - μαύρο χρώμα
• - γκρι χρώμα

Περίγραμμα συμπαγούς στοιχείου

Περίγραμμα στοιχείου παύλας

Περίγραμμα με κουκκίδες

Περίγραμμα στοιχείου με διπλή γραμμή

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

Πιεσμένο αυλακωτό πλαίσιο σε όγκο

Κυρτό κυματοειδές πλαίσιο σε όγκο

Ογκομετρικό πρεσαριστό πλαίσιο

Ογκομετρικό κυρτό πλαίσιο

Μαθήματα / CSS /

Μάθημα 7: Περίγραμμα στοιχείων CSS

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

σύνορο

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

Η σύνταξη για την ιδιότητα περιγράμματος είναι η εξής:

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

Το πάχος (πλάτος) του πλαισίου πρέπει να προσδιορίζεται σε pixel (px) ή σε ποσοστό (%).
Το χρώμα μπορεί να καθοριστεί είτε σε μορφή RGB (Κόκκινο Πράσινο Μπλε) είτε σε κώδικα HTML HEX.

Παρακάτω είναι ΕΙΔΗ ΓΡΑΜΜΩΝμε τα ονόματά τους:

Πώς να ορίσετε όρια για ένα στοιχείο; Το κάνουμε ως εξής:

#ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ (
περίγραμμα: 3px στερεό #0085ss; /* ορίστε τη γραμμή σε πάχος 3 pixel και μπλε */
}

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

σύνορα-κορυφή- πλαίσιο στην κορυφή.
σύνορο-κάτω- κάτω πλαίσιο
σύνορα-αριστερά- πλαίσιο στα αριστερά.
σύνορα-δεξιά- πλαίσιο στα δεξιά.

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ (
περίγραμμα δεξιά: 3px στερεό #0085cc;
περίγραμμα-κάτω: 2px διακεκομμένη #0085cc;
}

Αν θέλεις αφαιρέστε τα πλαίσιαστοιχείο στο CSS και, στη συνέχεια, γράψτε στην ιδιότητα περιγράμματος - κανένα

Άδειο (
σύνορα: κανένα; /* ένα στοιχείο με κενή κλάση δεν θα έχει περίγραμμα */
}

περίγραμμα

Το Outline είναι μια ιδιότητα που απαιτείται για να ορίσετε το εξωτερικό περίγραμμα ενός στοιχείου.

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

περίγραμμα: 2 εικονοστοιχεία με κουκκίδες #0085cc; /* καρέ 2 εικονοστοιχεία με μπλε κουκκίδες */
Για περίγραμμα, καθώς και για περίγραμμα, μπορείτε να αφαιρέσετε πλαίσια γράφοντας κανένα:

Σας ευχαριστώ για την προσοχή σας!

Προηγούμενο άρθρο
Μάθημα 6.

Όρια στοιχείων.

Επένδυση και περιθώρια στο CSS. Τι είναι το περιθώριο και το padding; Επόμενο άρθρο
Μάθημα 8. Πώς να ορίσετε το χρώμα κειμένου και το φόντο ενός στοιχείου στο CSS;

Σχόλια στο άρθρο (vk.com)

σύνορο

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

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Περιγραφή

Η ιδιότητα CSS σάς επιτρέπει να ορίσετε ταυτόχρονα το πλάτος, το στυλ και το χρώμα του περιγράμματος ενός μπλοκ. Το περίγραμμα μπλοκ είναι μια κανονική γραμμή/πλαίσιο που περιβάλλει το μπλοκ από όλες τις πλευρές. Αξίζει να ληφθεί υπόψη ότι κατά την προσθήκη ενός πλαισίου, θα επηρεάσει το συνολικό μέγεθος του μπλοκ.

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

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

Συμβουλή: Συνήθως, όταν χρησιμοποιείτε περίγραμμα, θα πρέπει να προσθέσετε padding.

Ιδιότητα CSS: περίγραμμα

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

Σύνταξη

περίγραμμα: περιγράμματος-πλάτους περιγράμματος-στυλ περιγράμματος-χρώμα|κληρονομιά;

Αξίες ακινήτων

Παράδειγμα

Υπάρχει κάποιο κείμενο εδώ.

Το αποτέλεσμα αυτού του παραδείγματος στο παράθυρο του προγράμματος περιήγησης:

Πώς να ορίσετε το χρώμα, το στυλ και το μέγεθος του περιγράμματος σε κουτάκια.

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

χαρακτηριστικό περιγράμματος

Τα cascading style sheets μας δίνουν περισσότερες επιλογές, αλλά πρώτα πρώτα.

Στο CSS μπορούμε να ελέγξουμε το πλάτος του περιγράμματος χρησιμοποιώντας πλάτος συνόρων, ή για να είμαστε πιο ακριβείς, μπορούμε να ελέγξουμε το πάχος κάθε πλευράς ξεχωριστά:
περίγραμμα-πάνω-πλάτος- πάχος του άνω περιγράμματος
περίγραμμα-δεξιά-πλάτος— πάχος του δεξιού περιγράμματος
περίγραμμα-κάτω-πλάτος- πάχος του κάτω περιγράμματος
περίγραμμα-αριστερό-πλάτος— πάχος του αριστερού κράσπεδου
Αλλά μπορεί επίσης να υπάρχει μια συντομευμένη μορφή:
P (πλάτος περιγράμματος: επάνω δεξιά κάτω αριστερά;)(πάνω δεξιά κάτω αριστερά).
Το πλάτος του περιγράμματος μπορεί να οριστεί:
σε αριθμούς DIV (πλάτος περιγράμματος: 5 px), από το μηδέν έως το άπειρο, δηλ. θετικός.
λεπτός— λεπτό περίγραμμα, DIV (πλάτος περιγράμματος: λεπτό)
Μεσαίο- μεσαίο περίγραμμα, DIV (πλάτος περιγράμματος: μεσαίο)
πυκνός- παχύ περίγραμμα, DIV (πλάτος περιγράμματος: πάχος)
Οι αριθμοί είναι σαφείς, αλλά με αυτές τις τιμές όλα εξαρτώνται από το πρόγραμμα περιήγησης, αλλά ακόμα λεπτός<= medium <= thick .

Μπορούμε επίσης να ελέγξουμε το χρώμα του περιγράμματος χρησιμοποιώντας χρώμα πλαισίουή για να είμαστε πιο ακριβείς, το χρώμα κάθε πλευράς:
περίγραμμα-πάνω-χρώμαεπάνω χρώμα περιγράμματος?
περίγραμμα-δεξιά-χρώμαχρώμα δεξιού περιγράμματος.
περίγραμμα-κάτω-χρώμαχρώμα κάτω περιγράμματος?
περίγραμμα-αριστερό-χρώμαχρώμα περιγράμματος στην αριστερή πλευρά.
Η τιμή χρώματος ορίζεται όπως για χρώμα, δηλ. ένα από τα 16 χρώματα: aqua, μαύρο, μπλε, φούξια, γκρι, πράσινο, λάιμ, καφέ, ναυτικό, ελιά, μωβ, κόκκινο, ασημί, γαλαζοπράσινο, λευκό ή κίτρινο, μπορείτε επίσης να ορίσετε χρώματα: χρώμα:#000000, χρώμα:#AF0 , χρώμα:rgb(255,0,0)ή χρώμα:rgb(100%, 0%, 0%).
Ανεξάρτητα από το συνδυασμό χρωμάτων που θα επιλέξετε, τα προγράμματα περιήγησης θα εξακολουθήσουν να τον μετατρέπουν χρώμα:rgb(255,0,0). Για παράδειγμα χρώμα: ασβέστη = χρώμα:#00ff00 = χρώμα:#0F0 = χρώμα:rgb(0%, 100%, 0%), αλλά για το πρόγραμμα περιήγησης είναι το ίδιο χρώμα:rgb(0,255,0), δηλ. θα υπολογίσει αυτή την τιμή.

Εάν το πάχος και το χρώμα του περιγράμματος μπορούν να ελεγχθούν από HTML, τότε το στυλ( συνόρων) Μόνο CSS!!!
Το στυλ μπορεί να ελεγχθεί σε κάθε πλευρά ξεχωριστά:
σύνορα-top-styleεπάνω στυλ περιγράμματος?
σύνορο-δεξιό στυλστυλ δεξιού περιγράμματος?
σύνορα-κάτω-στυλστυλ κάτω περιγράμματος?
σύνορο-αριστερό στυλστυλ περιγράμματος αριστερής πλευράς.
Τώρα ας δούμε τις τιμές στυλ:
1)σύνορα: κανένα- Αυτή είναι η προεπιλεγμένη τιμή, παρόμοια με το περίγραμμα-πλάτος:0.
2)σύνορα: κρυφό- Το ίδιο, εκτός από πίνακες, που θα δούμε αργότερα.
3)στιλ περιγράμματος: διάστικτη— Περίγραμμα από κουκκίδες.
4)σύνορα: διακεκομμένη— Περίγραμμα κατασκευασμένο από διακεκομμένη γραμμή.
5)σύνορο: συμπαγές— Περίγραμμα κατασκευασμένο από συμπαγή γραμμή, δηλ. όπως στην HTML.
6)σύνορα: διπλό— Ένα περίγραμμα κατασκευασμένο από διπλή συμπαγή γραμμή, εδώ χρειάζεστε ένα πλάτος περιγράμματος τουλάχιστον 3 pixel.
7)σύνορα: αυλάκι— Το περίγραμμα μοιάζει σαν να είναι κομμένο από καμβά.
8)σύνορο: κορυφογραμμή— Το περίγραμμα μοιάζει σαν να προεξέχει πάνω από τον καμβά.
9)στιλ περιγράμματος: ένθετο— Ολόκληρο το κουτί μοιάζει σαν να είναι πιεσμένο στον καμβά.
10)σύνορα: outset- Το αντίθετο από το προηγούμενο.
Ορισμένα προγράμματα περιήγησης ενδέχεται να αγνοούν τις τιμές: διακεκομμένη, διακεκομμένη, διπλή, αυλάκωση, κορυφογραμμή, εισαγωγή και αρχή και να τις εμφανίζουν ως συμπαγείς, π.χ. ένα συνηθισμένο σύνορο.

Όλα αυτά είναι αλήθεια, φυσικά, αλλά όλα τα παραπάνω παραδείγματα είναι μόνο η αρχή της λειτουργίας, όχι ο μηχανισμός.
Ιδιότητα κανόνα σύνορουπονοεί (περίγραμμα: χρώμα στυλ μεγέθους;), αυτός ο κανόνας ικανοποιείται εάν υπάρχουν και οι τρεις τιμές και μόνο σε αυτήν την ακολουθία, για παράδειγμα H1 (περιθώριο: 5 εικονοστοιχεία διπλό κόκκινο;), αλλά μπορεί να υπάρχουν εξαιρέσεις εάν αυτές οι τιμές παρέχονται από γλώσσες σήμανσης, για παράδειγμα για έναν πίνακα TABLE (περίγραμμα: 2 εικονοστοιχεία), δηλ. Καθορίζεται μόνο μία τιμή.

Για να διαχειριστείτε όχι ολόκληρο το περίγραμμα, αλλά κάθε τμήμα ξεχωριστά, υπάρχουν κανόνες:
(περιθώριο: χρώμα στυλ μεγέθους;)Έλεγχος άνω κράσπεδου.
(περιθώριο-δεξιά: χρώμα στυλ μεγέθους;)Χειριστήριο κράσπεδου στα δεξιά.
(περιθώριο-κάτω: χρώμα στυλ μεγέθους;)Έλεγχος κάτω κράσπεδου.
(περιθώριο-αριστερά: χρώμα στυλ μεγέθους;)Έλεγχος κραδασμών στα αριστερά.
Αυτοί οι κανόνες μπορούν να χρησιμοποιηθούν μεμονωμένα ή όλοι μαζί.

Η εξαίρεση είναι αυτός ο κανόνας:
H1(
περίγραμμα: 4 εικονοστοιχεία σταθερό πράσινο.
}
Το θέμα είναι ότι στο CSS ο τελευταίος κανόνας έχει την υψηλότερη προτεραιότητα, σε αυτήν την περίπτωση η ιδιότητα του περιγράμματος περιέχει το border-left και επομένως ο κανόνας του border-left θα αγνοηθεί, σωστά ως εξής:
H1(
περίγραμμα: 4 εικονοστοιχεία σταθερό πράσινο.
περίγραμμα-αριστερά: 2px διπλό κόκκινο.
}
Πρώτα, ορίσαμε κανόνες για ολόκληρο το περίγραμμα και, στη συνέχεια, για μεμονωμένες ενότητες.

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

CSS: περίγραμμα. Όρια στοιχείων.

Σύνορα CSS3

Σύνορα CSS3

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

Σε αυτό το μάθημα, θα μάθετε για τις ακόλουθες ιδιότητες ενός περιγράμματος:

• σύνορα-ακτίνα
• κουτί-σκιά
• εικόνα συνόρων

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

Ιδιοκτησία	Υποστήριξη προγράμματος περιήγησης
σύνορα-ακτίνα
κουτί-σκιά
εικόνα συνόρων

Ο Internet Explorer 9 υποστηρίζει ορισμένες από τις νέες ιδιότητες περιγράμματος.

Ο Firefox απαιτεί το πρόθεμα -moz- για την εικόνα περιγράμματος.

Το Chrome και το Safari απαιτούν το πρόθεμα -webkit- για την εικόνα περιγράμματος.

Η Opera απαιτεί το πρόθεμα -o- για εικόνα περιγράμματος.

Το Safari απαιτεί επίσης το πρόθεμα -webkit- για box-shadow.

Η Opera υποστηρίζει νέες ιδιότητες περιγράμματος.

CSS3 Στρογγυλεμένες Γωνίες

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

Στο CSS3, η δημιουργία στρογγυλεμένων γωνιών είναι εύκολη.

Στο CSS3, η ιδιότητα border-radius χρησιμοποιείται για τη δημιουργία στρογγυλεμένων γωνιών:

Αυτό το μπλοκ έχει στρογγυλεμένες γωνίες!

Σκιά κοντέινερ CSS3

Στο CSS3, η ιδιότητα box-shadow χρησιμοποιείται για την προσθήκη σκιάς σε κοντέινερ:

CSS3 Border-Image

Μέσω της ιδιότητας border-image CSS3, μπορείτε να χρησιμοποιήσετε μια εικόνα για να δημιουργήσετε ένα περίγραμμα:

Η ιδιότητα border-image σάς επιτρέπει να καθορίσετε ένα περίγραμμα εικόνας!

Η αρχική εικόνα που χρησιμοποιήθηκε για τη δημιουργία του περιγράμματος είναι δική σας:

New Border Properties

χαρακτηριστικό περιγράμματος

χαρακτηριστικό περιγράμματος, ετικέτα

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

Σύνορα HTML

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

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

Αξίες

Η τιμή του χαρακτηριστικού μπορεί να είναι οποιοσδήποτε μη αρνητικός αριθμός που καθορίζει το μέγεθος σε pixel.

Προεπιλεγμένη τιμή: 0.

Σύνταξη

Απαιτούμενο χαρακτηριστικό: κανένα.

Παράδειγμα HTML: Χρήση του χαρακτηριστικού περιγράμματος

Παράδειγμα αποτελέσματος

Αποτέλεσμα. Εφαρμογή του χαρακτηριστικού περιγράμματος.

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

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

Ενημέρωση:Ο Firefox λειτουργεί ξεκινώντας από την έκδοση 29.

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

Εάν ορίσετε μόνο border-image-source , η εικόνα θα γεμίσει τις γωνίες, χωρίς να ξέρετε τι να κάνετε στη συνέχεια:

Περίγραμμα: 80px συμπαγές διαφανές. border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Σύνορα-εικόνα-φέτα

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

Πιθανές τιμές:

<проценты>- υπολογίζεται σε σχέση με το μέγεθος της εικόνας. Οριζόντια σε σχέση με το πλάτος, κάθετη - σε σχέση με το ύψος.<числа>- pixel (για μια εικόνα ράστερ) ή συντεταγμένες (για μια διανυσματική εικόνα). Οι μονάδες μέτρησης δεν υποδεικνύονται. Fill είναι μια λέξη-κλειδί που συμπληρώνει προηγούμενες τιμές. Εάν ορίζεται, η εικόνα δεν αποκόπτεται από την εσωτερική άκρη του πλαισίου, αλλά γεμίζει και την περιοχή μέσα στο πλαίσιο. Πολύ χρήσιμο για στρογγυλεμένα κουφώματα.

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

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

Περίγραμμα: 80px συμπαγές διαφανές. border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); περίγραμμα-εικόνα-φέτα: 100;

Σύνορο-εικόνα-επανάληψη

Η ιδιότητα καθορίζει πώς θα καλυφθούν τα κενά μεταξύ των γωνιών.

Πιθανές τιμές: τέντωμα - τεντώνει την περιοχή πλήρωσης της εικόνας. Προεπιλεγμένη τιμή;

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

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

Border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); περίγραμμα-εικόνα-φέτα: 100; σύνορο-εικόνα-επανάληψη: επανάληψη;

Αριστερά είναι η επανάληψη, στα δεξιά είναι στρογγυλή.

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

Περίγραμμα-εικόνα-πλάτος

περίγραμμα-εικόνα-πλάτος

Η ιδιότητα ελέγχει το πλάτος του ορατού τμήματος του πλαισίου και το κλιμακώνει. Εάν αυτή η τιμή είναι μεγαλύτερη από το πλάτος περιγράμματος , η εικόνα περιγράμματος θα ανιχνευτεί κάτω από το περιεχόμενο, ακόμα κι αν δεν έχει οριστεί η ιδιότητα γέμισης.<длина>Πιθανές τιμές:<%>- τιμές σε px ή em.<числа>- ποσοστιαίες τιμές σε σχέση με το μέγεθος της εικόνας.

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

Περίγραμμα: 60px στερεό διαφανές. border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); περίγραμμα-εικόνα-φέτα: 80; περίγραμμα-εικόνα-επανάληψη: στρογγυλό; περίγραμμα-εικόνα-πλάτος: 160 εικονοστοιχεία;

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

Σύνορα-εικόνα-αρχή

Η ιδιότητα ελέγχει το πλάτος του ορατού τμήματος του πλαισίου και το κλιμακώνει. Εάν αυτή η τιμή είναι μεγαλύτερη από το πλάτος περιγράμματος , η εικόνα περιγράμματος θα ανιχνευτεί κάτω από το περιεχόμενο, ακόμα κι αν δεν έχει οριστεί η ιδιότητα γέμισης.<длина>Πιθανές τιμές:<числа>Μια ενδιαφέρουσα ιδιότητα που σας επιτρέπει να μετακινήσετε το πλαίσιο έξω από το στοιχείο. Οι αρνητικές τιμές δεν υποστηρίζονται.

Περίγραμμα: 60px στερεό διαφανές. border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); περίγραμμα-εικόνα-φέτα: 120; περίγραμμα-εικόνα-επανάληψη: στρογγυλό; border-image-outset: 60px 10px 50px 120px;

Στα δεξιά είναι ένα παράδειγμα με border-image-outset . Αυτή η ιδιότητα δεν επηρεάζει το μέγεθος του στοιχείου και το πλαίσιο μπορεί να επικαλύπτει γειτονικά στοιχεία.

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

Πάχος πλαισίου

Το πλάτος του περιγράμματος καθορίζεται από την ιδιότητα πλάτους περιγράμματος, η οποία μπορεί να έχει τις τιμές thin, medium και thick, ή μια αριθμητική τιμή σε pixel. Το σχήμα δείχνει αυτό το σύστημα:

Χρώμα πλαισίου

Η ιδιότητα χρώματος περιγράμματος καθορίζει το χρώμα του περιγράμματος. Οι τιμές είναι κανονικές τιμές χρώματος, για παράδειγμα: "#123456", "rgb(123,123,123)" ή "κίτρινο" .

Τύποι κουφωμάτων

Υπάρχουν διάφοροι τύποι κουφωμάτων. Οι οκτώ τύποι πλαισίων και η ερμηνεία τους στον Internet Explorer 5.5 φαίνονται παρακάτω. Όλα τα παραδείγματα εμφανίζονται σε "χρυσό" χρώμα και "χοντρό" πάχος, αλλά μπορούν, φυσικά, να εμφανίζονται σε άλλα χρώματα και πάχη.

Οι τιμές none ή hidden μπορούν να χρησιμοποιηθούν εάν δεν θέλετε να εμφανιστεί το περίγραμμα.

Παραδείγματα καθορισμού πλαισίων

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

,

,

Και

Το αποτέλεσμα μπορεί να μην είναι και τόσο εντυπωσιακό, αλλά δείχνει κάποιες δυνατότητες:

H1 ( πλάτος περιγράμματος: παχύ, στιλ περιγράμματος: διακεκομμένο, χρώμα περιγράμματος: χρυσό; ) h2 ( πλάτος περιγράμματος: 20 εικονοστοιχεία, στυλ περιγράμματος: αρχή, χρώμα περιγράμματος: κόκκινο; ) p ( πλάτος περιγράμματος: 1 εικονοστοιχεία; στιλ περιγράμματος: διακεκομμένο χρώμα περιγράμματος: μπλε ) ul (πλάτος περιγράμματος: λεπτό; σύνορα: συμπαγές; χρώμα περιγράμματος: πορτοκαλί;)

Μπορείτε επίσης να ορίσετε ειδικές ιδιότητες για το επάνω, το κάτω, το δεξί και το αριστερό άκρο του πλαισίου. Δείτε πώς γίνεται:

H1 ( περίγραμμα-πάνω-πλάτος: χοντρό, περίγραμμα-πάνω-στυλ: συμπαγές, περίγραμμα-πάνω-χρώμα: κόκκινο, περίγραμμα-κάτω-πλάτος: χοντρό, περίγραμμα-κάτω-στυλ: συμπαγές, περίγραμμα-κάτω-χρώμα: μπλε; περίγραμμα-δεξιά-πλάτος: χοντρό περίγραμμα-δεξιά-χρώμα: πράσινο περίγραμμα-αριστερά;

Σύντομη σημειογραφία

Όπως συμβαίνει με πολλές άλλες ιδιότητες, μπορείτε να συνδυάσετε πολλές ιδιότητες σε μία χρησιμοποιώντας τη λέξη περίγραμμα. Παράδειγμα:

P (πλάτος περιγράμματος: 1 εικονοστοιχεία, στυλ περιγράμματος: συμπαγές, χρώμα περιγράμματος: μπλε, )

μπορούν να συνδυαστούν σε:

P ( περίγραμμα: 1 εικονοστοιχείο συμπαγές μπλε; )

Περίληψη

Σε αυτό το σεμινάριο, μάθατε για τις απεριόριστες δυνατότητες του CSS όταν χρησιμοποιείτε περιγράμματα.

Στο επόμενο μάθημα θα δούμε πώς να ορίσουμε τις διαστάσεις σε ένα μοντέλο κουτιού - ύψος και πλάτος.




Έχετε ερωτήσεις;
Ονομα
ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ *
Μήνυμα *
Στείλετε
Αναφέρετε ένα τυπογραφικό λάθος
Κείμενο που θα σταλεί στους συντάκτες μας:
Το σχόλιό σας (προαιρετικό):
Στείλετε Ματαίωση