Πώς να εφαρμόσετε διαφορετικά σύνορα στο CSS;

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

• Πότε να χρησιμοποιήσετε το Borders
• Σύνορα στο CSS
• Χαρακτηριστικά του CSS Border
• Προεπιλεγμένες τιμές για τα χαρακτηριστικά περιγράμματος
• Ορίστε τα σύνορα στο Shorthand
• Σημεία που πρέπει να θυμάστε κατά το σχεδιασμό των συνόρων στο CSS

Πότε να χρησιμοποιήσετε το Borders

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

• Περίπου σημαντικές επικεφαλίδες
• Για να επισημάνετε postcript ή σημαντικές σημειώσεις
• Για να επισυνάψετε εικόνες, εικονογραφήσεις, αποσπάσματα από άτομα, βίντεο
• Για να επιστήσει την προσοχή στις τιμές, στα χρονοδιαγράμματα ή σε τέτοιες σημαντικές πληροφορίες

Ίσως θέλετε να διαβάσετε στο πριν ξεκινήσετε να μαθαίνετε για τα σύνορα CSS.

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

μαριονέτα εναντίον σεφ εναντίον

Σύνορα στο CSS

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

body {background-color: lightblue} h1 {text-align: center-border-style: solid} p {font-family: verdana font-size: 20px περίγραμμα-στυλ: τελείες}
Περίγραμμα και της παραγράφου!
 

Χαρακτηριστικά του CSS Border

Τα σύνορα CSS έχουν 3 βασικά χαρακτηριστικά

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

Στο παραπάνω παράδειγμα, είδαμε ότι ορίζεται μόνο ένα χαρακτηριστικό περίγραμμα, δηλαδή το στυλ του. Τα άλλα χαρακτηριστικά, όταν δεν ορίζονται, λαμβάνουν τις προεπιλεγμένες τιμές. Υπάρχει ένα άλλο χαρακτηριστικό που ονομάζεται ακτίνα, το οποίο χρησιμοποιείται λιγότερο συχνά. Χρησιμοποιείται για να κάνει τις άκρες του περιγράμματος στρογγυλεμένες.

• στα σύνορα Χαρακτηριστικό

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

Τα στυλ περιγράμματος μπορούν να αναμιχθούν και σε ένα στοιχείο. Για το σκοπό αυτό, οι 4 μεμονωμένες πλευρικές πλευρές μπορούν να οριστούν ξεχωριστά με διαφορετικά στυλ. Αυτό μπορεί να γίνει με 2 τρόπους. Ορίστε και τις 4 πλευρές σε μία ετικέτα. Σε αυτήν την περίπτωση, η μέτρηση ξεκινά από την επάνω γραμμή και μετά κινείται δεξιόστροφα. Εναλλακτικά, καθένα από τα 4 περιγράμματα μπορεί να οριστεί και σε μεμονωμένες ετικέτες. Και οι δύο περιπτώσεις εμφανίζονται στο επόμενο παράδειγμα.

• χρώμα πλαισίου Χαρακτηριστικό

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

τύπος μετατροπής c ++

• όνομα - καθορίστε ένα όνομα χρώματος, όπως 'μπλε'. Μπορείτε επίσης να δοκιμάσετε μερικές φανταχτερές επιλογές χρωμάτων όπως το 'BlanchedAlmond'!
• Μαγεύω - καθορίστε μια δεκαεξαδική τιμή, όπως '# ff0000'
• RGB - ορίστε τον κωδικό RGB. Για παράδειγμα, το rgb (255.255,0) σημαίνει Κίτρινο.
• σύνθεση - όπως 'διαφανές' ή 'αδιαφανές'

• πλάτος περιγράμματος Χαρακτηριστικό:

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

Το πλάτος μπορεί να καθοριστεί σε οποιαδήποτε από τις τυπικές μονάδες, όπως pixel (‘px’), σημεία (‘pt’) ή σε εκατοστά (‘cm’). Μπορείτε επίσης να καθορίσετε το πλάτος χρησιμοποιώντας προκαθορισμένες τιμές «παχιά», «λεπτή» και «μέση».

• ακτίνα περιγράμματος Χαρακτηριστικό

Ο σκοπός του καθορισμού της ακτίνας είναι να πάρει στρογγυλεμένες γωνίες για τα σύνορα. Ο συντελεστής ακτίνας καθορίζει την έκταση της στρογγυλοποίησης. Όσο μεγαλύτερη είναι η τιμή, γίνονται πιο κυρτές οι γωνίες. Ως συνήθης πρακτική, οι τιμές ακτίνας διατηρούνται μεταξύ 1-3 φορές το πλάτος του περιθωρίου.

Ο παρακάτω κώδικας θα δημιουργήσει:

πλάτος περιγράμματος: 10 εικονοστοιχεία
ακτίνα περιγράμματος: 30 εικονοστοιχεία

Προεπιλεγμένες τιμές για χαρακτηριστικά περιγράμματος

• Το μόνο υποχρεωτικό χαρακτηριστικό είναι το στυλ . Εάν το στυλ λείπει, το περίγραμμα δεν θα εμφανιστεί.

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

• Η προεπιλεγμένη τιμή για το πλάτος είναι «μεσαίο».

Ορίστε τα σύνορα στο Shorthand

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

Χρησιμοποιείται ο ακόλουθος κωδικός:

Σεμινάριο για προγραμματιστές salesforce για αρχάριους

περίγραμμα-στυλ: διακεκομμένη
χρώμα περιγράμματος: πράσινο
πλάτος περιγράμματος: 5 εικονοστοιχεία
περίγραμμα: διακεκομμένο πράσινο 5px

Σημεία που πρέπει να θυμάστε κατά το σχεδιασμό των συνόρων στο CSS

• Μην χρησιμοποιείτε πάρα πολλά περιγράμματα σε μια σελίδα, μπορεί να αποσπά την προσοχή και να δυσκολεύεται να εστιάσει ο χρήστης.

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

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

Ελπίζω να βρείτε τις πληροφορίες που αναζητούσατε στα σύνορα CSS, και wμε αυτό, φτάνουμε στο τέλος αυτού του άρθρου Borders στο CSS.

Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του blog 'Border in CSS' και θα επικοινωνήσουμε μαζί σας.