Στο CSS τα χρώματα μπορούν να προσδιοριστούν με τους παρακάτω τρόπους:
με ένα έγκυρο όνομα χρώματος – για παράδειγμα “red”
με μια RGB τιμή – για παράδειγμα “rgb(255, 0, 0)”
με δεκαεαξαδικές HEX τιμές – για παράδειγμα “#ff0000”
Ονόματα χρωμάτων
Τα χρώματα μπορούν να προσδιοριστούν χρησιμοποιώντας έγκυρα ονόματα χρώματος
Ακολουθεί παράδειγμα στο οποίο βλέπουμε τη χρήση των πιο συνηθισμένων ονομάτων χρωμάτων:
———————————————-
<!DOCTYPE html>
<html>
<body>
<h2>Color Names Examples</h2>
<p>Note: You will learn more about the background-color and the color property later in our tutorial.</p>
<h2 style=”background-color:red”>
Red background-color
</h2>
<h2 style=”background-color:green”>
Green background-color
</h2>
<h2 style=”background-color:blue;color:white”>
Blue background-color and white text color
</h2>
<h2 style=”background-color:orange”>
Orange background-color
</h2>
<h2 style=”background-color:yellow”>
Yellow background-color
</h2>
<h2 style=”background-color:cyan”>
Cyan background-color
</h2>
<h2 style=”background-color:black;color:white”>
Black background-color and white text color
</h2>
</body>
</html>
———————————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Στα ονόματα χρωμάτων μπορούμε να χρησιμοποιήσουμε είτε πεζά γραάμματα, είτε κεφαλαία γραάμματα, είτε συνδυασμό αυτών. Δηλαδή τα ονόματα χρωμάτων δεν είναι case-insensitive. Για παράδειγμα το “Red” είναι το ίδιο με το “red” και με το “RED”.
Χρώματα στη γλώσσα html
Η γλώσσα HTML και το CSS υποστηρίζουν 140 ονόματα χρωμάτων. Μπορείτε να ενημερωθείτε από το άρθρο μας σχετικά με τα χρώματα στη γλώσσα html.
RGB (Red, Green, Blue)
Οι τιμές RGB των χρωμάτων μπορούν να αναπαρασταθούν χρησιμοποιώντας τον τύπο: rgb(red, green, blue).
Κάθε παράμετρος (red, green, blue) καθορίζει το ποσοστό συνεισφοράς του κάθε χρώματος και κυμαίνεται ανάμεσα στο 0 και στο 255.
Για παράδειγμα ο τύπος rgb(255,0,0) αντιπροσωπεύει το κόκκινο. Επειδή το ποσοστό του κόκκινου είναι το μέγιστο (255) ενώ το ποσοστό των άλλων δυο χρωμάτων βρίσκεται στο μηδέν.
Ακολουθεί παράδειγμα που δείχνει την ανάμιξη των χρωμάτων. Χρησιμοποιούμε CSS για να αλλάξουμε το χρώμα φόντου των επικεφαλίδων της σελίδας html:
————————-
<!DOCTYPE html>
<html>
<body>
<h2>RGB Color Examples</h2>
<h2 style=”background-color:rgb(255, 0, 0)”>
Background-color set by using rgb(255, 0, 0)
</h2>
<h2 style=”background-color:rgb(0, 255, 0)”>
Background-color set by using rgb(0, 255, 0)
</h2>
<h2 style=”background-color:rgb(0, 0, 255)”>
Background-color set by using rgb(0, 0, 255)
</h2>
<h2 style=”background-color:rgb(255, 165, 0)”>
Background-color set by using rgb(255, 165, 0)
</h2>
<h2 style=”background-color:rgb(255, 255, 0)”>
Background-color set by using rgb(255, 255, 0)
</h2>
<h2 style=”background-color:rgb(0, 255, 255)”>
Background-color set by using rgb(0, 255, 255)
</h2>
</body>
</html>
————————-
Και εδώ βλέπουμε το αποτέλεσμα:
Οι αποχρώσεις του γκρι προκύπτουν εάν χρησιμοποιήσουμε ίσες τιμές για όλα τα χρώματα, όπςω στο παράδειγμα που ακολουθεί:
————————-
<!DOCTYPE html>
<html>
<body>
<h2>RGB Color Examples</h2>
<h2 style=”background-color:rgb(0, 0, 0);color:white”>
Background-color set by using rgb(0,0,0)
</h2>
<h2 style=”background-color:rgb(128, 128, 128);color:white”>
Background-color set by using rgb(128,128,128)
</h2>
<h2 style=”background-color:rgb(255, 255, 255)”>
Background-color set by using rgb(255,255,255)
</h2>
</body>
</html>
————————-
Και προκύπτει το αποτέλεσμα:
Δεκαεξαδικές τιμές Hexadecimal Colors
Οι RGB τιμές των χρωμάτων μπορούν αν προσδιοριστούν χρησιμοποιώντας δεκαεξαδικές τιμές, όπως στον τύπο: #RRGGBB.
Στον τύπο αυτό οι τιμές RR (red), GG (green) και BB (blue) αντιστοιχούν σε δεκαεξαδικές τιμές και κυμαίνονται από 00 μέχρι FF.
Οι τιμές αυτές είναι τα δεκαεξαδικά ισοδύναμα των δεκαδικών 0 και 255
Για παραάδειγμα, η τιμή #FF0000 αναπαριστά το κόκκινο.
Αυτό συμβαίνει επειδή η τιμή που αντιστοιχεί στο κόκκινο έχει τη μέγιστη τιμή (FF) ενώ οι τιμές που αντιστοιχούν στα άλλα δυο χρώματα έχουν την ελάχιστη τιμή (00).
Στις τιμές των χρωμάτων δεν γίνεται διαχωρισμός ανάμεσα σε πεζά και κεφαλαία, δηλαδή δεν είναι case-insensitive. Για παράδειγμα το “#ff0000” είναι ίδιο με το “FF0000″.
Αυτό φαίνεται στο ακόλουθο παράδειγμα:
————————-
<!DOCTYPE html>
<html>
<body>
<h2>HEX Color Examples</h2>
<h2 style=”background-color:#FF0000″>
Background-color set by using #FF0000
</h2>
<h2 style=”background-color:#00FF00″>
Background-color set by using #00FF00
</h2>
<h2 style=”background-color:#0000FF”>
Background-color set by using #0000FF
</h2>
<h2 style=”background-color:#FFA500″>
Background-color set by using #FFA500
</h2>
<h2 style=”background-color:#FFFF00″>
Background-color set by using #FFFF00
</h2>
<h2 style=”background-color:#00FFFF”>
Background-color set by using #00FFFF
</h2>
</body>
</html>
————————-
Που δημιουργεί το παρακάτω αποτέλεσμα στο φυλλομετρητή:
Καλή χρήση χρωμάτων CSS στην προώθηση ιστοσελίδων
Όλοι όσοι έχουν ασχοληθεί με την προώθηση ιστοσελίδων έχουν χρησιμοποιήσει τις ιδιότητες των χρωμάτων. Μια περίπτωση χρησιμοποίησης των χρωμάτων στην προώθηση ιστοσελίδων είναι όταν θέλουμε να αφαιρέσουμε το διαφορετικό χρώμα του συνδέσμου. Σε αυτή την περίπτωση θα πρέπει να δηλώσουμε το χρώμα του συνδέσμου ίδιο με το χρώμα των υπόλοιπων γραμμάτων. Αυτή η περίπτωση δεν δημιουργεί προβλήματα στην προώθηση της ιστοσελίδας διότι απλά βοηθάει την καλύτερη εμφάνιση της ιστοσελίδας.
Κακή χρήση χρωμάτων CSS στην προώθηση ιστοσελίδων
Όμως υπάρχει και μια δεύυερη περίπτωση χρήσης χρωμάτων στην προώθηση ιστοσελίδων. Πολλοί βάζουν κείμενο στο χρώμα του φόντου. Το κάνουν αυτό επειδή θέλουννα βάλουν σύνδεσμο τον οποίο θα τον δει το google αλλά δεν θα τον δει ο χρήστης. Νομίζουν οτι έτσι θα ξεγελάσουν το google. Όμως το google έχει γίνει αρκετά έξυπνο ώστε να καταλαβαίνει τέτοιου είδους πονηριές. Όποιος επιδιώξει να ξεγελάσει το google με αυτό τον τρόπο, είναι σίγουρο οτι θα τιμωρηθεί με penalty από το google.
