CSS SuperHero : Στύλ με τα CSS
Στο δεύτερο μέρος της νέας μας σειράς CSS SuperHero, ειδαμε τα βασικά χαρακτηριστικά των Ids και των Class ενώ είδαμε και πως συνδέουμε το CSS αρχείο μας με τις σελίδες μας. Σε αυτό το μέρος θα δούμε πως μπορούμε να αρχίσουμε να δίνουμε στύλ στα διάφορα δομικά στοιχεία της σελίδας μας όπως το κείμενο, τους συνδέσμους και τις εικόνες
Ας αρχίσουμε λοιπόν βλέποντας κάποια από τα πιο βασικά στοιχεία που θα βρούμε στις διάφορες ιστοσελίδες.
Σύνδεσμοι
Οι σύνδεσμοι (links) είναι μακράν τα πιο σημαντικά στοιχεία που υπάρχουν στην HTML αφού ουσιαστικά είναι αυτά που κάνουν τις σελίδες μας διαδραστικές. Στην HTML οι σύνδεσμοι δημιουργούνται χρησιμοποιόντας τα <a> (anchor) tags με τον εξής τρόπο:
<a href="http://www.greektuts.net">Σύνδεσμος</a>
Το παραπάνω στοιχείο θα εμφανίσει στον φυλλομετρητή μας την λέξη “Σύνδεσμος” στην οποία αν κάνουμε κλικ θα μας μεταφέρει στην ιστοσελίδα που έχουμε ορίσει (σε αυτό το παράδειγμα στο GreekTuts).
Όλοι οι φυλλομετρητές (browsers) έρχονται με κάποια προεγκατεστημένα στύλ για στοιχεία στα οποία μπορεί εμείς να μην έχουμε δώσει μορφοποίηση. Έτσι αν γράψουμε το παραπάνω παράδειγμα και το δούμε σε κάποιον browser πρίν δώσουμε στύλ, κατά πάσα πιθανότητα η λέξη “Σύνδεσμος” θα είναι μωβ και υπογραμμισμένη.
Ας δούμε λοιπόν πως μπορούμε να δώσουμε στύλ σε αυτό το στοιχείο. Για να στοχεύσουμε το anchor tag του παραδείγματος με τα CSS θα γράψουμε:
a { color:#000; text-decoration:none; }
H παραπάνω γραμμή θα δώσει στον σύνδεσμο μάυρο χρώμα και θα απομακρύνει την υπογράμμιση.
Επειδή τα anchor tags έχουν πολλές καταστάσεις λοιπόν ας δούμε και τις υπόλοιπες δυνατότητες που μας δίνουν τα CSS.
a:hover { text-decoration:underline; }
O σύδεσμος θα υπογραμιστεί όταν περάσουμε το mouse από πανω του
a:visited { color:red; }
Ο σύνδεσμος θα πάρει κόκκινο χρώμα αν τον έχουμε ξαναπατήσει
a:active { color:green; }
Ο σύνδεσμος θα πάρει στιγμιαία πράσινο χρώμα όταν κάνουμε κλίκ πάνω του
Ας δούμε για τέλος πώς μπορούμε να στοχεύσουμε το link μας αν αυτό βρίσκεται μέσα σε μια παράγραφο με κλάση όπως για παράδειγμα
<p class="test">This is a <a href="http://greektuts.net">link</a> </p>
και θα το στοχεύσουμε με τα CSS με τον εξής τρόπο:
p.test a { color:#000; text-decoration:none; }
Παράγραφοι
Οι παράγραφοι είναι αρκετά πιο απλές στο να τους δώσουμε στύλ. Επειδή μια παράγραφος περιέχει κείμενο, ότι μορφοποίηση δώσουμε θα μεταφερθεί σε όλο το κείμενο της.
Αν λοιπόν για παράδειγμα έχουμε μια παράγραφο
<p>Αυτή είναι μια μικρή παράγραφος</p>
μπορούμε να της δώσουμε στύλ με τον εξής τρόπο
p { color:#000; text-align:justify; font-size:14px; font-family:Tahoma,Arial; }
O παραπάνω CSS κώδικας θα δώσει στην παράγραφο μας μαύρο χρώμα, μέγεθος γραμματοσειράς 14 εικονοστοιχεία, Tahoma γραμματοσειρά με δευτερεύουσα γραμματοσειρά τα Arial, και τέλος θα κάνει πλήρη στοίχηση του κειμένου.
Αν λοιπόν η παράφραφος μας έχει κάποια κλάση όπως για παράδειγμα
<p class="weird">Αυτή είναι μια περίεργη παράγραφος</p>
μπορούμε να την στοχεύσουμε με τα CSS γράφοντας:
p.weird { color:hotPink; font-size:20px; }
Backgrounds
Χρησιμοποιόντας τα CSS μπορούμε να δώσουμε χρώμα και εικόνα στο παρασκήνιο της σελίδας μας ή κάποιου στοιχείου της. Ας δούμε λοιπόν πιο αναλυτικά.
Έστω ότι έχουμε την εξής HTML σελίδα
<html> <body> <h1>Επικεφαλίδα</h1> <p>Παράγραφος</p> </body> </html>
Για να δώσουμε χρώμα παρασκηνίου γράφουμε
body { background-color:#f9f9f9; }
Απλό έτσι; Ας δούμε πως μπορούμε να δώσουμε μια εικόνα ως παρασκήνιο και να την κάνουμε να επαναλαμβάνεται στον άξονα των Χ
body { background:url(image.jpg) repeat-x scroll top center #fff; }
όπου σαν ιδιότητα του URL βάζουμε το μονοπάτι της εικόνας που θέλουμε να χρησιμοποιήσουμε. Οι τιμές Top και Center δηλώνουν πως η εικόνα μας θα τοποθετηθεί στην κορυφή της ιστοσελίδας χωρίς να αφήνει κανένα κενό. Τέλος ο δεκαεξαδικός κωδικός χρώματος υποδηλώνει το χρώμα που θα έχει η υπόλοιπη σελίδα που δεν καλύπτεται από την εικόνα (στο συγκεκριμένο παράδειγμα άσπρο)
Στο επόμενο μέρος
Στο επόμενο μέρος θα επικεντρωθούμε στο Box Model και θα εξηγήσουμε πως χρησιμοποιείται. Θα δούμε παραδείγματα και αναλυτικές μεθόδους χρήσης του
