Παρουσίαση και περιγραφή των στιλ
Όπως αναφέρθηκε, με τα στιλ μπορείτε να μορφοποιήσετε ένα έγγραφο html με τον τρόπο που εσείς θέλετε ξεπερνώντας τους περιορισμούς της html. Στη συνέχεια, γίνεται παρουσίαση περιγραφή όλων των κατηγοριών των στιλ και των επί μέρους ιδιοτήτων καθώς και των τιμών που μπορεί να πάρει κάθε ιδιότητα.
Ιδιότητες και στιλ
Συνήθως όταν λέμε στιλ εννούμε ένα σύνολο από χαρακτηριστικά ή ιδιότητες που έχει ένα στοιχείο html, όπως για παράδειγμα μια παράγραφος.
Ιδιότητες για στιλ
Οι ιδιότητες είναι καταχωρημένες σε κατηγορίες. Έτσι έχουμε, ιδιότητες για περιγράμματα, ιδιότητες για διαστάσεις, ιδιότητες για κείμενα κλπ.
Στην παρακάτω λίστα αναφέρονται σχεδόν όλες οι κατηγορίες.
- Background (ιδιότητα για χρώμα και εικόνα φόντου)
- Color (ιδιότητα για χρώμα κειμένου)
- Text (ιδιότητα για μορφοποίηση κειμένου)
- Font (ιδιότητα για τις γραμματοσειρές)
- Border (ιδιότητα για περιγράμματα)
- Margin (ιδιότητα για εξωτερικά περιθώρια)
- Padding (ιδιότητα για εσωτερικά περιθώρια)
- List (ιδιότητα για λίστες)
- Dimension (ιδιότητα για διαστάσεις και διαστήματα)
- Classification (ιδιότητα για την εμφάνιση αντικειμένων)
- Position (ιδιότητα για τη θέση και στοίχιση των αντικειμένων)
- Pseudo-classes (ιδιότητα για εφέ σε υπερσυνδέσεις κλπ)
- Pseudo-elements (ιδιότητα για εφέ σε τμήματα αντικειμένων)
Στιλ χρώματος
| Ιδιότητα στιλ | Τιμή |
|---|---|
| color | red, green, yellow κλπ ή δεκαεξαδική τιμή χρώματος ή τιμή χρώματος rgb. Πχ rgb(120,0,0) |
| background-color | Κάποιο χρώμα ή transparent. Πχ.: color:transparent |
Τιμές χρώματος
Γενικά, ως τιμή χρώματος μπορείτε να χρησιμοποιήσετε:
- Όνομα χρώματος (Ένα όνομα από το σετ των 256 χρωμάτων όπως: red, green, yellow, blue κλπ. πχ.: color:white)
- Δεκαεξαδική τιμή χρώματος (π.χ.: color:#ff8009)
- Τιμή χρώματος rgb (πχ: color:rgb(100%, 50%, 0%) ή color:rgb(255, 40, 100))
Στην τιμή χρώματος rgb, μπορείτε να ορίσετε για κάθε χρώμα (r, g και b) αντίστοιχα μια τιμή χρώματος. Έτσι, μπορείτε να δημιουργήσετε το χρώμα που επιθυμείτε.
Οι τιμές για τα τρία χρώματα μπορεί να είναι ποσοστιαίες ή απόλυτες. Οι ποσοστιαίες τιμές κυμαίνονται από 0% μέχρι 100% και οι απόλυτες Από 0 μέχρι 255.
Στιλ κειμένου
| Ιδιότητα στιλ | Τιμή |
|---|---|
| word-spacing | normal/(αριθμητική τιμή) |
| letter-spacing | normal/(αριθμητική τιμή) |
| text-decoration | none/underline/overline/line-through/blink |
| vertical-align | baseline/sub/super/top/text-top/middle/bottom/text-bottom/(ποσοστιαία τιμή) |
| text-transform | capitalize/uppercase/lowercase/none |
| text-align | left/right/center/justify |
| text-indent | (αριθμητική τιμή)/(ποσοστιαία τιμή) |
| line-height | normal/(αριθμητική τιμή)/(ποσοστιαία τιμή) |
Μονάδες μήκους ή διαστάσεων
Στα στιλ, μπορείτε να χρησιμοποιήσετε μια μεγάλη σειρά από διαφορετικές μονάδες μήκους. Κάθε μονάδα μήκους συμβολίζεται με δυο χαρακτήρες. Οι μονάδες αυτές μπορούν να χωριστούν σε δυο κατηγορίες, τις απόλυτες και τις σχετικές.
Κατά κανόνα χρησιμοποιούμε τη μονάδα px (pixels)
Απόλυτες μονάδες μήκους είναι:
| Μονάδα | σύμβολο | Περιγραφή |
|---|---|---|
| pixel | px | Ιχνοστοιχείο |
| millimiter | mm | Χιλιοστό |
| centimeter | cm | Εκατοστό (1cm = 10 mm) |
| inch | in | Ίντσα (1in=2,54cm) |
| point | pt | Στιγμή (72pt=1in) |
| pica | pc | Πίκα (1pc=12pt) |
Σχετικές μονάδες μήκους είναι:
| σύμβολο | Περιγραφή |
|---|---|
| rem | 1rem είναι ίσο με το ύψος της προκαθορισμένης γραμματοσειράς όπως αυτή έχει δηλωθεί στο root. |
| em | 1em είναι ίσο με το ύψος της γραμματοσειράς του γονικού στοιχείου |
| ex | ex είναι ίσο με το ύψος του χαρακτήρα "x" της γραμματοσειράς του αντίστοιχου στοιχείου |
Στιλ διαστάσεων και συντεταγμένων
Μέχρι τώρα, όλα τα στοιχεία html που περιέχονταν σε ένα έγγραφο html, εμφανίζονταν σε μία συνεχή ροή σύμφωνα με τη σειρά που είχαν τοποθετηθεί μέσα στο έγγραφο.
Με τα στιλ, μπορείτε να ορίσετε συγκεκριμένες διαστάσεις που θα καλύπτει ένα στοιχείο html αλλά και τις συντεταγμένες του επάνω στο φόντο του προγράμματος περιήγησης.
Ακόμη, με τα στιλ, μπορείτε να ορίσετε τη διάταξη των στοιχείων όταν ένα στοιχείο πέφτει επάνω σε άλλο. Μπορείτε για παράδειγμα, να έχετε μια παράγραφο επάνω σε μια φωτογραφία.
Στιλ για διαστάσεις και συντεταγμένες και οι αντίστοιχες τιμές
| Ιδιότητα στιλ | Τιμή |
|---|---|
| position | static, relative, absolute |
| left | τιμή μήκους (απόλυτη ή ποσοστιαία) ή auto |
| top | τιμή μήκους (απόλυτη ή ποσοστιαία) ή auto |
| height | τιμή μήκους (απόλυτη ή ποσοστιαία) ή auto |
| width | τιμή μήκους (απόλυτη ή ποσοστιαία) ή auto |
| visibility | visible, hidden, inherit |
| z-index | ακέραια αριθμητική τιμή ή auto |
| clip | rec(x1, x2, x3, x4) ή auto |
| overflow | visible, hidden, scroll, auto |
Τα στιλ left, top, height, width και z-index ισχύουν μόνο όταν έχει οριστεί το στιλ position. Για παράδειγμα: style="position:absolute; width:300px"
Το στιλ z-index ορίζει τη διάταξη των στοιχείων. Στοιχεία με μεγαλύτερη τιμή καλύπτουν τα στοιχεία με μικρότερη τιμή. Για παράδειγμα: style="z-index:10"
Το στιλ clip λειτουργεί σαν μάσκα. Εμφανίζει μόνο το ορθογώνιο τμήμα που ορίζεται από τη συνάρτηση rec. Η rec δέχεται τέσσερις παραμέτρους οι οποίες και καθορίζουν τις διαστάσεις του ορθογωνίου. Οι παράμετροι ακολουθούν τη σειρά: top, right, bottom, left. Για παράδειγμα: style="clip:rec(0, 300, 200, 0)".