Τα πλαίσια που τοποθετούνται γύρω από εικόνες ή κείμενο διακοσμούν τον ιστότοπο και προσθέτουν ποικιλία στο σχεδιασμό του. Εάν χρησιμοποιείτε πίνακες για να δημιουργήσετε περιγράμματα, τότε ο κώδικας για κάθε περίγραμμα θα καταλάβει πολύ χώρο. Επίσης, σε αυτήν την περίπτωση, θα πρέπει να ξαναγράψετε τον κώδικα HTML για κάθε πλαίσιο. Με το CSS, μπορείτε εύκολα να δημιουργήσετε ένα περίγραμμα οποιουδήποτε πάχους και χρώματος που θέλετε γράφοντας έναν απλό κωδικό μία φορά για όλα τα στοιχεία που θα περιβάλλουν αυτό το περίγραμμα. Αυτή η τεχνολογία θα επιτρέψει, εάν είναι απαραίτητο, να αλλάξει τον τύπο των καρέ στον ιστότοπο σε λίγα λεπτά.
Είναι απαραίτητο
- - έχετε τον δικό σας ιστότοπο.
- - ξέρετε τι είναι το CSS και πού γράφονται αυτά τα στυλ στον ιστότοπο.
Οδηγίες
Βήμα 1
Για να δημιουργήσετε ένα περίγραμμα, γράψτε πρώτα τον ακόλουθο κώδικα στο CSS:
ramka {}
Βήμα 2
Για να ορίσετε το περίγραμμα στο μέγεθος που θέλετε, χρησιμοποιήστε την παράμετρο πλάτους περιγράμματος, η οποία ορίζει το πλάτος γραμμής σε εικονοστοιχεία. Για παράδειγμα, εάν η γραμμή του πλαισίου πρέπει να έχει πλάτος 3 εικονοστοιχεία, τότε η καταχώρηση θα έχει την εξής μορφή:
ramka {περίγραμμα-πλάτος: 3 εικονοστοιχεία;}
Βήμα 3
Τώρα ορίστε το στυλ του περιγράμματος χρησιμοποιώντας την παράμετρο στυλ περιγράμματος. Εάν θέλετε να δημιουργήσετε ένα περίγραμμα του οποίου οι πλευρές είναι κανονικές συμπαγείς γραμμές, τοποθετήστε την ακόλουθη καταχώριση στον κώδικα μεταξύ των σγουρών τιράντες - στυλ περιγράμματος: συμπαγής
Βήμα 4
Ένα διάστικτο περίγραμμα μπορεί να ληφθεί γράφοντας το ως εξής: περίγραμμα-στυλ: τελείες. Έλεγχος στυλ περιγράμματος: διακεκομμένη θα σας δώσει διακεκομμένο περίγραμμα.
Βήμα 5
Μπορείτε να κάνετε το περίγραμμα μια διπλή συμπαγή γραμμή όπως αυτό: στυλ περιγράμματος: διπλό. Χρησιμοποιήστε στυλ περιγράμματος: αυλάκι ή στυλ περιγράμματος: κορυφογραμμή για να πλαισιώσετε κείμενο ή εικόνες σε πλαίσια με τρισδιάστατες παρενέργειες. Η διαφορά μεταξύ αυτών των δύο επιλογών είναι ότι στην πρώτη περίπτωση, το πλαίσιο αποτελείται από εσοχές, και στη δεύτερη, κυρτές.
Βήμα 6
Χρησιμοποιήστε αυτόν τον κωδικό: border-style: inset για να δημιουργήσετε το αποτέλεσμα ενός ένθετου με το περίγραμμα ενός στοιχείου ιστότοπου. Για να κάνετε το περιεχόμενο του περιγράμματος, μαζί με το περίγραμμα, αντίθετα, κυρτό, γράψτε στυλ περιγράμματος: αρχή.
Βήμα 7
Μπορείτε να προσθέσετε το επιθυμητό χρώμα στο πλαίσιο χρησιμοποιώντας την παράμετρο χρώματος περιγράμματος, τοποθετημένη επίσης μεταξύ των σγουρών τιράντες. Εάν θέλετε να κάνετε το περίγραμμα κόκκινο, γράψτε χρώμα περιγράμματος: κόκκινο, μπλε - χρώμα περιγράμματος: μπλε, πορτοκαλί - χρώμα περιγράμματος: πορτοκαλί.
Βήμα 8
Ο κώδικας περιγράμματος CSS, συμπεριλαμβανομένων όλων των επιλογών, μοιάζει με αυτόν:
ramka {border-width: 3px; στυλ περιγράμματος: συμπαγές? περίγραμμα-χρώμα: μπλε;}
Βήμα 9
Τώρα, σε HTML, γράψτε το:
Περιεχόμενο καρέ Αντί για τη φράση "Περιεχόμενο καρέ", εισαγάγετε το κείμενο ή τον κωδικό της επιθυμητής εικόνας.
Βήμα 10
Έτσι, μπορείτε να σχεδιάσετε απεριόριστο αριθμό στοιχείων στον ιστότοπο. Για να αλλάξετε την εμφάνιση του καρέ, πρέπει μόνο να αλλάξετε τον κωδικό CSS.
