Στην ενότητα αυτή θα δούμε πως, με χρήση CSS, ορίζουμε πλαίσιο γύρω απο τα στοιχεία μιας σελίδας. Η παρακάτω παράγραφος περικλείεται από πλαίσιο πάχους 5px και χρώματος κόκκινου:
Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο.
Πάχος γραμμής του πλαισίου
Με την ιδιότητα border-width ορίζουμε το πάχος του πλαισίου. Οι τιμές που μπορεί να πάρει η ιδιότητα είναι:
- αριθμός σε px (pixels)
- μια από τις τιμές thin (πολύ λεπτή γραμμή), medium (μεσαίου μεγέθους γραμμή) ή thick (πολύ χοντρή γραμμή)
Εικόνα με πλαίσιο με πάχος 10px
img.image_double_border {
border-style: solid;
border-width: 10px;
}
border-style: solid;
border-width: 10px;
}
Στυλ γραμμής του πλαισίου
Με την ιδιότητα border-style ορίζουμε το στυλ του πλαισίου γύρω από ένα στοιχείο.
Πλαίσιο με διακεκομμένη γραμμή
p.dotted {
border-style: dotted
}
border-style: dotted
}
Δείτε όλα τα διαθέσιμα στυλ που μπορεί να έχει ένα πλαίσιο
Χρώμα της γραμμής του πλαισίου
Με την ιδιότητα border-color ορίζουμε το χρώμα της γραμμής του πλαισίου γύρω από ένα στοιχείο. Οι τιμές που μπορεί να πάρει η ιδιότητα είναι:
- το όνομα του χρώματος (πχ. yellow, green, black, red κτλ)
- τιμή σε RGB (πχ. rgb(0,255,0)) ή σε Hex (πχ. #00ff00. Περισσότερες πληροφορίες για τις τιμές RGB και Hex θα βρείτε στην ενότητα Χρώματα της Σειράς Μαθημάτων HTML)
Πίνακας με πλαίσιο το οποίο έχει στυλ (border-style) solid, πάχος γραμμής (border-width) 3px και χρώμα (border-color) κόκκινο
table.table_with_border {
border-width: 3px;
border-style: solid;
border-color: red;
}
border-width: 3px;
border-style: solid;
border-color: red;
}
Ορισμός ξεχωριστής εμφάνισης για κάθε πλευρά του πλαισίου
Η CSS μας δίνει την δυνατότητα να ορίσουμε διαφορετική εμφάνιση της γραμμής του πλαισίου για κάθε μία από τις τέσσερεις πλευρές του. Για παράδειγμα η εμφάνιση του πλαισίου της παρακάτω παραγράφου διαφέρει στις τέσσερεις πλευρές της.
Η σύνταξη των τριών ιδιοτήτων που είδαμε παραπάνω (border-width, border-style και border-color) μπορούν να γραφούν και με τους παρακάτω τρόπους ώστε να αναφέρονται μόνο σε ΜΙΑ πλευρά του πλαισίου:
border-top-width, border-right-width, border-bottom-width, border-left-width
border-top-style, border-right-style, border-bottom-style, border-left-style
border-top-color, border-right-color, border-bottom-color, border-left-color
Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο.
Η σύνταξη των τριών ιδιοτήτων που είδαμε παραπάνω (border-width, border-style και border-color) μπορούν να γραφούν και με τους παρακάτω τρόπους ώστε να αναφέρονται μόνο σε ΜΙΑ πλευρά του πλαισίου:
border-top-width, border-right-width, border-bottom-width, border-left-width
border-top-style, border-right-style, border-bottom-style, border-left-style
border-top-color, border-right-color, border-bottom-color, border-left-color
Πίνακας με διαφορετική γραμμή πλαισίου στις τέσσερεις πλευρές του
p.table_with_border {
border-top-width: 3px;
border-top-style: solid;
border-top-color: red;
border-right-width: thick;
border-right-style: dotted;
border-right-color: #0045ff;
border-bottom-width: 10px;
border-bottom-style: dashed;
border-bottom-color: #ff0057;
border-left-width: 1px;
border-left-style: double;
border-left-color: grey;
}
border-top-width: 3px;
border-top-style: solid;
border-top-color: red;
border-right-width: thick;
border-right-style: dotted;
border-right-color: #0045ff;
border-bottom-width: 10px;
border-bottom-style: dashed;
border-bottom-color: #ff0057;
border-left-width: 1px;
border-left-style: double;
border-left-color: grey;
}
Σύντομοι τρόποι σύνταξης των ιδιοτήτων border-width, border-style και border-color
Στο παραπάνω παράδειγμα είδαμε πως μπορούμε να γράψουμε τις ιδιότητες border-style, border-width και border-color ώστε να αναφέρονται σε συγκεκριμένη πλευρά του πλαισίου.
Η CSS μας δίνει την δυνατότητα να συντάξουμε τις τρεις αυτές ιδιότητες ώστε να χρησιμοποιούμε λιγότερες ιδιότητες για να πετύχουμε το ίδιο αποτέλεσμα. Πιο συγκεκριμένα, κάθε μια από τις τρεις αυτές ιδιότητες μπορεί να έχει από μια έως τέσσερεις τιμές οι οποίες αναφέρονται στις πλευρές του πλαισίου. Παρακάτω θα δούμε με παραδείγματα τους τρόπους σύνταξης της ιδιότητας border-style. Οι τρόποι σύνταξης αυτοί ισχύουν το ίδιο και για τις ιδιότητες border-width και border-color:
Δοκιμάστε τα παραπάνω παραδείγματα και με τις ιδιότητες border-width και border-style.
Στο παρακάτω παράδειγμα υπάρχουν δύο στυλ, το p.tropos1 και το p.tropos2 τα οποία επιφέρουν ακριβώς το ίδιο αποτέλεσμα στις δύο παραγράφους που εφαρμόζονται. Προσέξτε πόσο πιο σύντομος και πιο εύκολα διαχειρήσιμος είναι ο τρόπος σύνταξης του στυλ p.tropos2
Στο παραπάνω παράδειγμα έχω προσθέσει τον αύξοντα αριθμό των γραμμών ώστε να μπορώ να αναφερθώ εύκολα σε κάθε γραμμή του παραδείγματος. Ας δούμε αναλυτικά το στυλ p.tropos2 και να το συγκρίνουμε με το στυλ p.tropos1 ώστε να γίνει πιο κατανοητή η σύντομη σύνταξη του στυλ p.tropos2:
Στην γραμμή 17 συνοψίζονται οι τιμές των ιδιοτήτων border-x-width (όπου x=top,right,bottom,left) του στυλ p.tropos1 που βρίσκονται στις γραμμές 2, 5, 8 και 11.
Αντίστοιχα στην γραμμή 18 συνοψίζονται οι τιμές των ιδιοτήτων border-x-style (όπου x=top,right,bottom,left) του στυλ p.tropos1 που βρίσκονται στις γραμμές 3, 6, 9 και 12.
Στην γραμμή 19 συνοψίζονται οι τιμές των ιδιοτήτων border-x-color (όπου x=top,right,bottom,left) του στυλ p.tropos1 που βρίσκονται στις γραμμές 4, 7, 10 και 13.
Η CSS μας δίνει την δυνατότητα να συντάξουμε τις τρεις αυτές ιδιότητες ώστε να χρησιμοποιούμε λιγότερες ιδιότητες για να πετύχουμε το ίδιο αποτέλεσμα. Πιο συγκεκριμένα, κάθε μια από τις τρεις αυτές ιδιότητες μπορεί να έχει από μια έως τέσσερεις τιμές οι οποίες αναφέρονται στις πλευρές του πλαισίου. Παρακάτω θα δούμε με παραδείγματα τους τρόπους σύνταξης της ιδιότητας border-style. Οι τρόποι σύνταξης αυτοί ισχύουν το ίδιο και για τις ιδιότητες border-width και border-color:
Ιδιότητα border-style με μία τιμή
p {
border-style: dotted;
}
border-style: dotted;
}
Το πλαίσιο θα έχει γραμμή με στυλ dotted και στις τέσσερεις πλευρές του στοιχείου
Ιδιότητα border-style με δύο τιμές
p {
border-style: dotted solid;
}
border-style: dotted solid;
}
Όταν η ιδιότητα έχει δύο τιμές, η πρώτη αναφέρεται στην πάνω και κάτω πλευρά, ενώ η δεύτερη στην δεξιά και αριστερή
Ιδιότητα border-style με τρεις τιμές
p {
border-style: dotted solid double;
}
border-style: dotted solid double;
}
Όταν η ιδιότητα έχει τρεις τιμές, η πρώτη αναφέρεται στην πάνω, η δεύτερη στην δεξιά και αριστερή και η τρίτη στην κάτω
Ιδιότητα border-style τέσσερεις τιμές
p {
border-style: dotted solid double dashed;
}
border-style: dotted solid double dashed;
}
Όταν η ιδιότητα έχει τέσσερεις τιμές, η πρώτη αναφέρεται στην πάνω, η δεύτερη στην δεξιά, η τρίτη στην κάτω και η τέταρτη στην αριστερή
Δοκιμάστε τα παραπάνω παραδείγματα και με τις ιδιότητες border-width και border-style.
Στο παρακάτω παράδειγμα υπάρχουν δύο στυλ, το p.tropos1 και το p.tropos2 τα οποία επιφέρουν ακριβώς το ίδιο αποτέλεσμα στις δύο παραγράφους που εφαρμόζονται. Προσέξτε πόσο πιο σύντομος και πιο εύκολα διαχειρήσιμος είναι ο τρόπος σύνταξης του στυλ p.tropos2
Σύγκριση δύο τρόπων σύνταξης των ιδιοτήτων border-style, border-width και border-color
1. p.tropos1 {
2. border-top-width: 3px;
3. border-top-style: solid;
4. border-top-color: red;
5. border-right-width: thick;
6. border-right-style: dotted;
7. border-right-color: #0045ff;
8. border-bottom-width: 10px;
9. border-bottom-style: dashed;
10. border-bottom-color: #ff0057;
11.border-left-width: 1px;
12. border-left-style: double;
13. border-left-color: grey;
14. }
15.
16. p.tropos2 {
17. border-width: 3px thick 10px 1px;
18. border-style: solid dotted dashed double;
19. border-color: red #0045ff #ff0057 grey;
20. }
2. border-top-width: 3px;
3. border-top-style: solid;
4. border-top-color: red;
5. border-right-width: thick;
6. border-right-style: dotted;
7. border-right-color: #0045ff;
8. border-bottom-width: 10px;
9. border-bottom-style: dashed;
10. border-bottom-color: #ff0057;
11.border-left-width: 1px;
12. border-left-style: double;
13. border-left-color: grey;
14. }
15.
16. p.tropos2 {
17. border-width: 3px thick 10px 1px;
18. border-style: solid dotted dashed double;
19. border-color: red #0045ff #ff0057 grey;
20. }
Στο παραπάνω παράδειγμα έχω προσθέσει τον αύξοντα αριθμό των γραμμών ώστε να μπορώ να αναφερθώ εύκολα σε κάθε γραμμή του παραδείγματος. Ας δούμε αναλυτικά το στυλ p.tropos2 και να το συγκρίνουμε με το στυλ p.tropos1 ώστε να γίνει πιο κατανοητή η σύντομη σύνταξη του στυλ p.tropos2:
Στην γραμμή 17 συνοψίζονται οι τιμές των ιδιοτήτων border-x-width (όπου x=top,right,bottom,left) του στυλ p.tropos1 που βρίσκονται στις γραμμές 2, 5, 8 και 11.
Αντίστοιχα στην γραμμή 18 συνοψίζονται οι τιμές των ιδιοτήτων border-x-style (όπου x=top,right,bottom,left) του στυλ p.tropos1 που βρίσκονται στις γραμμές 3, 6, 9 και 12.
Στην γραμμή 19 συνοψίζονται οι τιμές των ιδιοτήτων border-x-color (όπου x=top,right,bottom,left) του στυλ p.tropos1 που βρίσκονται στις γραμμές 4, 7, 10 και 13.
Η ιδιότητα border
Στην ιδιότητα border συνοψίζονται οι ιδιότητες border-width, border-style και border-color με αυτήν ακριβώς την σειρά. Έτσι αντι να χρησιμοποιούμε σε ένα στυλ τις τρεις αυτές ιδιότητες, χρησιμοποιούμε μόνο την ιδιότητα border.
Σύγκριση δύο τρόπων ορισμού πλαισίου σε παράγραφο
p.tropos2 {
border-width: 3px;
border-style: solid;
border-color: red;
}
p.tropos3 {
border: 3px solid red;
}
border-width: 3px;
border-style: solid;
border-color: red;
}
p.tropos3 {
border: 3px solid red;
}
Ιδιότητες της CSS για το πλαίσιο των στοιχείων
Οι ιδιότητες της CSS για τον ορισμό πλαισίων γύρω από κάποιο στοιχείο, μας επιτρέπουν να ορίσουμε το στυλ του πλασίου, το πάχος του και το χρώμα του.
Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες διαμόρφωσης των πλαισίων ενός στοιχείου της σελίδας:
Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες διαμόρφωσης των πλαισίων ενός στοιχείου της σελίδας:
| Ιδιότητα | Τιμές | Περιγραφή |
|---|---|---|
| border | border-width border-style border-color |
Η ιδιότητα αυτή είναι συντομογραφία των τριών βασικότερων ιδιοτήτων των πλαισίων: border-width, border-style και border-color Δοκίμασε το |
| border-color | χρώμα | Ορίζει το χρώμα του πλαισίου του στοιχείου της σελίδας Δοκίμασε το Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-style |
| border-style | none hidden dotted dashed solid double groove ridge inset outset |
Ορίζει το στυλ του πλαισίου του στοιχείου της σελίδας Δοκίμασε το |
| border-width | thin medium thick αριθμός σε pixels |
Ορίζει το μήκος του πλαισίου του στοιχείου της σελίδας. Δοκίμασε το Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-style |
| border-bottom | border-bottom-width border-bottom-style border-bottom-color |
Η ιδιότητα αυτή είναι συντομογραφία των τριών βασικότερων ιδιοτήτων της κάτω πλευράς του πλαισίου: border-bottom-width, border-bottom-style και border-bottom-color Δοκίμασε το |
| border-bottom-color | χρώμα | Ορίζει το χρώμα της κάτω πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-bottom-style |
| border-bottom-style | none hidden dotted dashed solid double groove ridge inset outset |
Ορίζει το στυλ της κάτω πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το |
| border-bottom-width | thin medium thick αριθμός σε pixels |
Ορίζει το μήκος της κάτω πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-bottom-style |
| border-left | border-left-width border-left-style border-left-color |
Η ιδιότητα αυτή είναι συντομογραφία των τριών βασικότερων ιδιοτήτων της αριστερής πλευράς του πλαισίου: border-left-width, border-left-style και border-left-color Δοκίμασε το |
| border-left-color | χρώμα | Ορίζει το χρώμα της αριστερής πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-left-style |
| border-left-style | none hidden dotted dashed solid double groove ridge inset outset |
Ορίζει το στυλ της αριστερής πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το |
| border-left-width | thin medium thick αριθμός σε pixels |
Ορίζει το μήκος της αριστερής πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-left-style |
| border-right | border-right-width border-right-style border-right-color |
Η ιδιότητα αυτή είναι συντομογραφία των τριών βασικότερων ιδιοτήτων της δεξιάς πλευράς του πλαισίου: border-right-width, border-right-style και border-right-color Δοκίμασε το |
| border-right-color | χρώμα | Ορίζει το χρώμα της δεξιάς πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-right-style |
| border-right-style | none hidden dotted dashed solid double groove ridge inset outset |
Ορίζει το στυλ της δεξιάς πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το |
| border-right-width | thin medium thick αριθμός σε pixels |
Ορίζει το μήκος της δεξιάς πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-right-style |
| border-top | border-top-width border-top-style border-top-color |
Η ιδιότητα αυτή είναι συντομογραφία των τριών βασικότερων ιδιοτήτων της πάνω πλευράς του πλαισίου: border-top-width, border-top-style και border-top-color Δοκίμασε το |
| border-top-color | χρώμα | Ορίζει το χρώμα της πάνω πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το |
| border-top-style | none hidden dotted dashed solid double groove ridge inset outset |
Ορίζει το στυλ της πάνω πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-top-style |
| border-top-width | thin medium thick αριθμός σε pixels |
Ορίζει το μήκος της πάνω πλευράς του πλαισίου του στοιχείου της σελίδας Δοκίμασε το Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα border-top-style |
Παραδείγματα
Ορισμός πλαισίου σε εικονα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε μια εικόνα στην σελίδα μας.
Ορισμός πλαισίου στα κελιά ενός πίνακα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε κελιά του πίνακα.
Ορισμός πλαισίου σε πίνακα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε πίνακα
Ορισμός πλαισίου σε παράγραφο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε μια παράγραφο
Ορισμός πλαισίου στις επιλογές μιας λίστας
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε κάθε επιλογή μιας λίστας
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε μια εικόνα στην σελίδα μας.
Ορισμός πλαισίου στα κελιά ενός πίνακα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε κελιά του πίνακα.
Ορισμός πλαισίου σε πίνακα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε πίνακα
Ορισμός πλαισίου σε παράγραφο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε μια παράγραφο
Ορισμός πλαισίου στις επιλογές μιας λίστας
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε πλαίσιο σε κάθε επιλογή μιας λίστας
