Η ιδιότητα color περιγράφει το χρώμα προσκηνίου (χρώμα κειμένου) των στοιχείων. Η καθορισμένη χρήση των χρωμάτων είναι δυνατή μέσω πολύ διαφορετικών τρόπων. Συνήθως χρησιμοποιούμε εξαδεκαδικές τιμές. Αυτές οι τιμές ξεκινούν πάντα με έναν προεπιλεγμένο #. Συνήθως ακολουθούν τρία ζεύγη αριθμών και/ή χαρακτήρων. Αυτοί αντιστοιχούν στο Κόκκινο, το Πράσινο και το Μπλε. Επομένως, οι καθορισμοί των χρωμάτων συμβαίνουν πάντα βάσει του ακόλουθου σχήματος:
RRGGBB
Η τιμή #ffffff παράγει ένα λευκό χρώμα. Αντίθετα, χρησιμοποιώντας το #000000, παρουσιάζεται μαύρο χρώμα. Σε "σοβαρούς" επεξεργαστές HTML υπάρχουν αντίστοιχοι επιλογείς χρωμάτων.
Με το μπορείτε να εντοπίσετε τους εξαδεκαδικούς κώδικες. Επίσης, σε πολλές ιστοσελίδες (π.χ. http://www.farbtabelle.net/) υπάρχουν αντίστοιχοι πίνακες για τα χρώματα.
Στο CSS υπάρχει η δυνατότητα συντομεύσεις των εξαδεκαδικών τιμών χρωμάτων. Αυτή η αρχή όμως δεν μπορεί να εφαρμοστεί σε όλες τις χρωματικές τιμές. Αυτή η μέθοδος λειτουργεί πραγματικά μόνο όταν η τιμή αποτελείται από τρία ίδια ζεύγη. Τυπικά παραδείγματα αυτού είναι περιγραφές χρώματος για το Μαύρο και το Λευκό. Συνήθως καταγράφονται ως εξής:
.schwarz {
color: #000000;
}
.weiss {
color: #ffffff;
}
Αυτή η σύνταξη μπορεί επίσης να συντομευθεί.
.schwarz {
color: #000;
}
.weiss {
color: #fff;
}
Στο CSS επιτρέπονται επίσης οι τιμές RGB. Εδώ καταγράφονται οι δεκαδικές τιμές από 0 έως 255, οι οποίες διαχωρίζονται με κόμματα. Η σειρά των χρωματικών προδιαγραφών είναι ίδια με εκείνη των εξαδεκαδικών χρωμάτων.
a {
color: rgb(100%, 100%, 100%);
background: rgb(0, 0, 0);
}
Όπως δείχνει το παράδειγμα, είναι επίσης δυνατές και ποσοστιαίες τιμές, αν και στην πράξη είναι σπάνιο να τις βρούμε.
Μια άλλη παραλλαγή για τις προδιαγραφές χρώματος αποτελούν οι λέξεις-κλειδιά χρώματος. Μερικά παραδείγματα αυτών είναι:
• black
• red
• blue
• yellow
• white
• green
Μια αντίστοιχη παρουσίαση μπορεί να είναι ως εξής:
p {
color: white;
background: black;
}
Να σημειώσετε ότι με το CSS3 η παλέτα των διαθέσιμων λέξεων-κλειδιών χρωμάτων επεκτάθηκε ακόμη περισσότερο. Το CSS3 έχει υιοθετήσει τα ονόματα χρωμάτων από το πρότυπο SVG. Μια επισκόπηση των διαθέσιμων ονομάτων χρωμάτων μπορείτε να τη βρείτε στο http://www.w3.org/TR/SVG/types.html#ColorKeywords.
Ορισμός φόντου
Με το background πρόκειται για μια σύνοψη των ακόλουθων πιθανών τιμών, οι οποίες θα παρουσιαστούν αναλυτικά στη συνέχεια αυτού του οδηγού:
• background-attachment
• background-color
• background-image
• background-position
• background-repeat
Οι μεμονωμένες πληροφορίες διαχωρίζονται από κενά. Δεν έχει σημασία η σειρά με την οποία γίνονται αυτές οι καταχωρήσεις. Δεν είναι απαραίτητο να δοθούν όλες οι τιμές.
Ένα παράδειγμα:
p {
background: transparent
url(logo.jpg)
scroll repeat 0% 0%;
}Χρώματα φόντου
Για να αναθέσετε ένα χρώμα φόντου σε ένα στοιχείο, χρησιμοποιείται η ιδιότητα background-color.
div {
background-color: #009999;
}
Ως τιμή δίνετε το επιθυμητό χρώμα.
Οπίσθια εικόνα φόντου
Το background-image καθορίζει μια εικόνα ως φόντο. Αν αυτή η ιδιότητα είναι καταγεγραμμένη σε έναν εξωτερικό CSS αρχείο, οι σχετικές διαδρομές αναφέρονται στον κατάλογο όπου βρίσκεται το CSS αρχείο.
• none - καμία εικόνα ως φόντο
• URI - διαδρομή προς την εικόνα
Ένα παράδειγμα:
<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
Καλώς ήρθατε στο PSD-Tutorials.de!
</div>
Ωστόσο, παρακαλούμε να είστε προσεκτικοί με τη χρήση φόντων. Επειδή υπερβολικά εντυπωσιακά φόντα δεν διευκολύνουν ακριβώς την αναγνωσιμότητα των κειμένων.
Φυσικά, υπάρχουν ιστοσελίδες στις οποίες η εμφάνιση είναι το μόνο μέλημα. Εκεί μπορείτε σίγουρα να δουλέψετε με εντυπωσιακά φόντα.
Κυλιόμενα φόντα
Σε μεγαλύτερα στοιχεία, η εικόνα φόντου περιηγείται όταν κυλάτε στη σελίδα. Με το background-attachment μπορείτε να το αποτρέψετε.
• fixed - κινείται μαζί
• scroll - η εικόνα φόντου παραμένει στάσιμη και είναι ευθυγραμμισμένη στο παράθυρο του προγράμματος (Viewport).
Η ιδιότητα background-attachment συνήθως χρησιμοποιείται σε συνδυασμό με το background-image.
Ένα παράδειγμα:
div.fest {
background-image: url(background.gif);
background-repeat: no-repeat;
}Η θέση του φόντου
Με την ιδιότητα background-repeat καθορίζεται η θέση από την οποία θα ξεκινήσει το φόντο. Το σημείο αναφοράς είναι το στοιχείο για το οποίο έχει οριστεί η γραφική απεικόνιση.
• Ποσοστιαία αναφορά - ένας ή δύο τιμές που καθορίζουν την απόσταση της γραφικής απεικόνισης από την πάνω αριστερή γωνία του στοιχείου. Σε περίπτωση δύο τιμών, η πρώτη αντιστοιχεί στην οριζόντια απόσταση, ενώ η δεύτερη στην κάθετη απόσταση. Το σημείο αναφοράς δεν είναι η επάνω αριστερή γωνία της γραφικής απεικόνισης, αλλά ένα σημείο μέσα στην απεικόνιση που καθορίζεται επίσης από τις τιμές x/y.
• Αναφορά με μήκος - καθορίζει την απόσταση της γραφικής απεικόνισης από την πάνω αριστερή γωνία της έως την πάνω αριστερή γωνία του στοιχείου. Επιτρέπονται μία ή δύο τιμές. Σε περίπτωση δύο τιμών, η πρώτη καθορίζει την οριζόντια απόσταση, ενώ η δεύτερη την κατακόρυφη απόσταση.
Επιπλέον, είναι δυνατή η χρήση των ακόλουθων λέξεων-κλειδιών:
• left - οριζόντια αριστερή στοίβας
• center - κεντρική
• right - οριζόντια δεξιά στοίβας
• top - κατακόρυφα από πάνω στοίβας
• bottom - κατακόρυφα από κάτω στοίβας
Εδώ ένα παράδειγμα, πώς μπορεί να φαίνεται κάτι τέτοιο:
p {
background-position: 8em top;
}Επαναλαμβανόμενες γραφικές απεικονίσεις φόντου
Αν και πώς μια γραφική απεικόνιση φόντου θα επαναλαμβάνεται, αν είναι μικρότερη από την εμφανιζόμενη περιοχή, καθορίζεται με τη χρήση της background-repeat.
• repeat - η γραφική απεικόνιση φόντου επαναλαμβάνεται οριζόντια και κατακόρυφα γεμίζοντας το στοιχείο.
• repeat-x - η γραφική απεικόνιση επαναλαμβάνεται μόνο οριζόντια.
• repeat-y - η γραφική απεικόνιση επαναλαμβάνεται μόνο κατακόρυφα.
• no-repeat - η γραφική απεικόνιση δεν επαναλαμβάνεται.
Επίσης ένα παράδειγμα εδώ:
body {
background-repeat: repeat-y;
}
Σε αυτήν την περίπτωση, η γραφική απεικόνιση επαναλαμβάνεται μόνο κατακόρυφα.
Αν χρησιμοποιηθεί το repeat-y, η επανάληψη γίνεται αποκλειστικά οριζόντια.
Αυτό το μάθημα έχει δείξει πόσο ισχυρός είναι ο ΚSS στον τομέα των χρωμάτων και των εικόνων.
