ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ
Η Βίβλος των CSS - Μέρος 2 - Κείμενο, Links, Class και Id
Το Κείμενο (Text)
Η μορφοποίηση και η προσθήκη στυλ σ’ ένα κείμενο (text) αποτελούν ένα πολύ βασικό κομμάτι στο Web design. Θα δούμε τις εκπληκτικές δυνατότητες που μας δίνουν τα CSS για να μπορέσουμε να προσθέσουμε διάταξη (layout) στο κείμενο μιας ιστοσελίδας.
Η ιδιότητα text-indent
Με την ιδιότητα text-indent μπορούμε να κάνουμε το κείμενο των παραγράφων να είναι πιο εμφανίσιμο εφαρμόζοντας μια εσοχή (indent) στην πρώτη γραμμή της παραγράφου. Στο επόμενο παράδειγμα, εφαρμόζουμε μια απόσταση 30px στην πρώτη γραμμή του κειμένου όλων των παραγράφων που σημειώνονται με το tag <p> :
p {
text-indent: 30px;
}
Η ιδιότητα text-align
Η ιδιότητα text-align αντιστοιχεί με την ιδιότητα align που χρησιμοποιείται σε παλαιότερες εκδόσεις της HTML. Ένα κείμενο μπορεί να είναι στοιχισμένο (aligned) στα αριστερά (left) ή στα δεξιά (right) ή και στο κέντρο (center). Υπάρχει και η τιμή justify για να έχουμε ταυτόχρονα δεξιά και αριστερή, δηλ. πλήρη στοίχιση.
Στο επόμενο παράδειγμα, το κείμενο που περιέχεται στις επικεφαλίδες ενός πίνακα (table headings <th>) είναι στοιχισμένο στα δεξιά ενώ τα δεδομένα του πίνακα (table data <td>) είναι κεντραρισμένα. Επίσης, το κείμενο των κανονικών παραγράφων είναι πλήρως στοιχισμένο (justified).
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Η ιδιότητα text decoration
Με την ιδιότητα text-decoration μπορούμε να προσθέσουμε διαφορετική διακόσμιση ή και εφέ σ’ ένα κείμενο. Για παράδειγμα, μπορούμε να υπογραμμίσουμε (underline) ένα κείμενο, να βάλουμε μια γραμμή διαμέσου (line-through) ή πάνω από το κείμενο (overline) κλπ.
Στο επόμενο παράδειγμα, τα <h1> είναι κεφαλίδες με υπογράμμιση (underlined headlines), τα <h2> είναι κεφαλίδες με μια γραμμή πάνω από το κείμενο (overline) και τα <h3> είναι κεφαλίδες με μια γραμμή διαμέσου του κειμένου (line-through).
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Η ιδιότητα letter-spacing
Η απόσταση ανάμεσα στους χαρακτήρες του κειμένου μπορεί να ορισθεί με την ιδιότητα letter-spacing, η τιμή της οποίας είναι το επιθυμητό πλάτος. Για παράδειγμα, αν θέλουμε μια απόσταση 3px ανάμεσα στα γράμματα σε μια παράγραφο κειμένου <p> και 6px ανάμεσα στα γράμματα στις κεφαλίδες <h1>, θα πρέπει να γράψουμε τον εξής κώδικα :
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Η ιδιότητα text-transform
Με την ιδιότητα text-transform μπορούμε να ελέγχουμε τον τρόπο γραφής ενός κειμένου όσον αφορά το αν τα γράμματα θα εμφανίζονται ως πεζά ή κεφαλαία (capitalization). Μπορούμε να επιλέξουμε να είναι κεφαλαίο μόνο το πρώτο γράμμα της κάθε λέξης (capitalize) ή όλα τα γράμματα κεφαλαία (uppercase) ή όλα τα γράμματα πεζά (lowercase) ανεξάρτητα από το πώς είναι το αρχικό κείμενο στον HTML κώδικα.
Για παράδειγμα, αν έχουμε τη λέξη "florina", μπορούμε να επιλέξουμε να την εμφανίσουμε ως "FLORINA" ή και ως "Florina". Υπάρχουν τέσσερις δυνατές τιμές για την ιδιότητα text-transform :
capitalize
Κάνει κεφαλαίο μόνο το πρώτο γράμμα της κάθε λέξης. Για παράδειγμα, το "florina per sempre" θα γίνει "Florina Per Sempre".
uppercase
Κάνει όλα τα γράμματα κεφαλαία (uppercase), δηλ. το "florina per sempre" θα γίνει "FLORINA PER SEMPRE".
lowercase
Κάνει όλα τα γράμματα πεζά (lowercase), δηλ. το "FLORINA PER SEMPRE" θα γίνει " florina per sempre".
none
Δεν κάνει κανέναν μετασχηματισμό, δηλ. το κείμενο εμφανίζεται όπως και στον HTML κώδικα.
Μπορούμε να χρησιμοποιήσουμε αυτήν την ιδιότητα για να κάνουμε τα ονόματα κάποιων ατόμων να είναι με το πρώτο γράμμα κεφαλαίο. Θα πρέπει να έχουμε υπόψη μας ότι το αρχικό κείμενο στον HTML κώδικα παραμένει όπως ήταν, άσχετα από το πώς εμφανίζεται στην ιστοσελίδα.
Ακολουθεί ένα χαρακτηριστικό παράδειγμα.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Οι Σύνδεσμοι (Links)
Μπορούμε να εφαρμόσουμε αυτά που μάθαμε έως τώρα και στο κείμενο των συνδέσμων (links), όπως να αλλάξουμε χρώματα, γραμματοσειρές (fonts), να υπογραμμίσουμε κ.ά. Με τη βοήθεια των CSS μπορούμε να επηρεάσουμε αυτές τις ιδιότητες ανάλογα με το αν το link δεν έχει ακόμα γίνει κλικ (unvisited) ή έχει γίνει κλικ (visited) ή είναι ενεργό (active) ή τέλος αν ο δρομέας βρίσκεται πάνω από το link χωρίς να έχουμε κάνει κλικ ακόμα (hover).
Μπορούμε έτσι να προσθέσουμε πολύ ωραία εφέ στις ιστοσελίδες μας. Για να μπορέσουμε να ελέγξουμε αυτά τα εφέ χρησιμοποιούμε τις λεγόμενος ψευδο-τάξεις (pseudo-classes). Μια ψευδο-τάξη (pseudo-class) μάς δίνει τη δυνατότητα να λάβουμε υπόψη μας διαφορετικές καταστάσεις (conditions) ή συμβάντα (events) όταν ορίζουμε μια ιδιότητα (property) για ένα tag της HTML.
Θα δούμε ένα παράδειγμα. Όπως ήδη γνωρίζουμε, οι σύνδεσμοι (links) ορίζονται στην HTML με το tag <a>, το οποίο μπορούμε να χρησιμοποιήσουμε ως επιλογέα (selector) στα CSS :
a {
color: blue;
}
Ένα link μπορεί να έχει διαφορετικές καταστάσεις. Για παράδειγμα, μπορεί να το έχουμε επισκεφθεί (visited) ή να μην το έχουμε επισκεφθεί (not visited). Μπορούμε να χρησιμοποιήσουμε τα pseudo-classes για να εκχωρήσουμε διαφορετικά styles στα visited και unvisited links, ως εξής :
a:link {
color: blue;
}
a:visited {
color: red;
}
Χρησιμοποιούμε τα a:link και a:visited για τα unvisited και visited links αντίστοιχα. Τα links που είναι ενεργά (active) έχουν την pseudo-class a:active και το a:hover είναι όταν ο δρομέας βρίσκεται πάνω από το link.
Θα δούμε τώρα και τις τέσσερις ψευδο-τάξεις με παραδείγματα και επεξηγήσεις.
Pseudo-class: link
Η pseudo-class :link χρησιμοποιείται για τα links που οδηγούν σε ιστοσελίδες που ο χρήστης δεν έχει επισκεφθεί ακόμα (not visited). Στο επόμενο παράδειγμα, τα unvisited links θα έχουν χρώμα ελαφρύ μπλε (light blue).
a:link {
color: #6699CC;
}
Pseudo-class: visited
Η pseudo-class :visited χρησιμοποιείται για τα links που οδηγούν σε ιστοσελίδες που ο χρήστης έχει επισκεφθεί (visited). Στο επόμενο παράδειγμα, ο κώδικας θα κάνει όλα τα visited links να έχουν χρώμα σκούρο μωβ (dark purple).
a:visited {
color: #660099;
}
Pseudo-class: active
Η pseudo-class :active χρησιμοποιείται για τα links που είναι ενεργά (active), δηλ. ο χρήστης έχει κάνει κλικ πάνω τους και δεν έχει ακόμα απομακρύνει το ποντίκι. Το επόμενο παράδειγμα κάνει τα active links να έχουν ένα κίτρινο χρώμα φόντου (yellow background color). Θα πρέπει να έχουμε υπόψη μας ότι το χρώμα φόντου γίνεται κίτρινο τη στιγμή που κάνουμε κλικ στο link.
a:active {
background-color: #FFFF00;
}
Pseudo-class: hover
Η pseudo-class :hover χρησιμοποιείται όταν ο δείκτης του ποντικιού βρίσκεται πάνω από ένα link (hover) και μπορούμε έτσι να δημιουργήσουμε πολύ ωραία εφέ. Για παράδειγμα, αν θέλουμε τα links να είναι πορτοκαλί (orange) και με πλάγια γράμματα (italics) όταν ο δρομέας βρεθεί από πάνω τους, ο κώδικας των CSS θα πρέπει να είναι ως εξής :
a:hover {
color: orange;
font-style: italic;
}
Θα δούμε μερικά ακόμα ενδιαφέροντα παραδείγματα όταν ο δρομέας βρεθεί πάνω από ένα link. Θα χρησιμοποιήσουμε την ιδιότητα letter-spacing για να αλλάξουμε την απόσταση ανάμεσα στους χαρακτήρες του κειμένου του link αλλά και τις ιδιότητες font-weight και color, ως εξής :
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Στο επόμενο παράδειγμα θα χρησιμοποιήσουμε την ιδιότητα text-transform για να κάνουμε τα γράμματα του κειμένου του link κεφαλαία (uppercase) όταν ο δρομέας βρεθεί πάνω από ένα link, ως εξής :
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Αφαίρεση της Υπογράμμισης από τους Συνδέσμους
Κάτι που ζητάνε πολλοί χρήστες είναι η αφαίρεση της υπογράμμισης από τους συνδέσμους (underlining of links). Βέβαια, θα πρέπει να έχουμε υπόψη μας ότι αν αφαιρέσουμε την υπογράμμιση από τα links, υπάρχει ο φόβος να μην μπορούν εύκολα οι επισκέπτες της ιστοσελίδας μας να αντιληφθούν τα σημεία όπου βρίσκονται οι σύνδεσμοι.
Για να αφαιρέσουμε την υπογράμμιση από τους συνδέσμους θα χρησιμοποιήσουμε την ιδιότητα text-decoration, στην οποία θα δώσουμε την τιμή none, ως εξής :
a {
text-decoration:none;
}
Μια καλή λύση είναι να δώσουμε την τιμή none στην ιδιότητα text-decoration αλλά διαφορετικά χρώματα για τις τέσσερις καταστάσεις των ψευδο-τάξεων, ως εξής :
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
Το Class και το Id
Μερικές φορές θέλουμε να εφαρμόσουμε ένα ειδικό στυλ (style) σ’ ένα συγκεκριμένο στοιχείο (element) ή σε μια συγκεκριμένη ομάδα στοιχείων (group of elements). Θα δούμε το πώς μπορούμε να χρησιμοποιήσουμε το class και το id για να ορίσουμε ιδιότητες για επιλεγμένα στοιχεία.
Για παράδειγμα, θα μας απασχολήσουν θέματα όπως το πώς μπορούμε να χρωματίσουμε μια συγκεκριμένη κεφαλίδα (headline) διαφορετικά από τις άλλες κεφαλίδες της ίδιας ιστοσελίδας ή το πώς μπορούμε να ομαδοποιήσουμε τα links σε διαφορετικές κατηγορίες και να δώσουμε σε κάθε κατηγορία ένα ειδικό στυλ.
Ομαδοποίηση Στοιχείων με το Class
Ας υποθέσουμε ότι έχουμε δύο λίστες από links για διαφορετικά σταφύλια που χρησιμοποιούνται για άσπρο κρασί (white wine) και για κόκκινο κρασί (red wine).
Ο HTML κώδικας θα είναι ως εξής :
<p>Σταφύλια για άσπρο κρασί : </p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Σταφύλια για κόκκινο κρασί : </p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Θέλουμε τώρα οι σύνδεσμοι για το άσπρο κρασί (white wine links) να έχουν κίτρινο χρώμα (yellow), οι σύνδεσμοι για το κόκκινο κρασί (red wine links) να έχουν κόκκινο χρώμα (red) και οι υπόλοιποι σύνδεσμοι της ιστοσελίδας να παραμείνουν μπλε (blue).
Για να το επιτύχουμε αυτό, θα διαιρέσουμε τα links σε δύο κατηγορίες, εκχωρώντας μια τάξη (class) σε κάθε link κάνοντας χρήση της ιδιότητας (attribute) class, ως εξής :
<p>Σταφύλια για άσπρο κρασί : </p>
<ul>
<li><a href="ri.htm" class="whitewine">
Riesling</a></li>
<li><a href="ch.htm" class="whitewine">
Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">
Pinot Blanc</a></li>
</ul>
<p>Σταφύλια για κόκκινο κρασί : </p>
<ul>
<li><a href="cs.htm" class="redwine">
Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">
Merlot</a></li>
<li><a href="pn.htm" class="redwine">
Pinot Noir</a></li>
</ul>
Μπορούμε τώρα να ορίσουμε ξεχωριστές ιδιότητες για τα links που ανήκουν στις τάξεις whitewine και redwine, αντίστοιχα, ως εξής :
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Όπως βλέπουμε από το παραπάνω παράδειγμα, μπορούμε να ορίσουμε τις ιδιότητες των στοιχείων που ανήκουν σε μια συγκεκριμένη τάξη (class) χρησιμοποιώντας το επίθεμα .classname στο style sheet του εγγράφου.
Εκτός από την ομαδοποίηση των στοιχείων, μπορούμε να αναγνωρίσουμε και ένα στοιχείο μεμονωμένα με την ιδιότητα (attribute) id. Εκείνο που θα πρέπει να έχουμε υπόψη μας είναι ότι δεν μπορούν να υπάρχουν δύο στοιχεία (elements) στην ίδια ιστοσελίδα με το ίδιο id.
Δηλαδή το κάθε id θα πρέπει να είναι μοναδικό. Αν αυτό αποτελεί πρόβλημα, μπορούμε να χρησιμοποιήσουμε την ιδιότητα (attribute) class. Ακολουθεί ένα παράδειγμα χρήσης του id :
<h1>Κεφάλαιο 1</h1>
...
<h2>Κεφάλαιο 1.1</h2>
...
<h2>Κεφάλαιο 1.2</h2>
...
<h1>Κεφάλαιο 2</h1>
...
<h2>Κεφάλαιο 2.1</h2>
...
<h3>Κεφάλαιο 2.1.2</h3>
...
Ο παραπάνω κώδικας μπορεί να χρησιμοποιηθεί για τις επικεφαλίδες (headings) ενός εγγράφου που είναι χωρισμένο σε κεφάλαια ή παραγράφους.
Έχουμε τη δυνατότητα να εκχωρήσουμε ένα id σε κάθε κεφάλαιο για να μπορούμε να το ξεχωρίσουμε, ως εξής :
<h1 id="c1">Κεφάλαιο 1</h1>
...
<h2 id="c1-1">Κεφάλαιο 1.1</h2>
...
<h2 id="c1-2">Κεφάλαιο 1.2</h2>
...
<h1 id="c2">Κεφάλαιο 2</h1>
...
<h2 id="c2-1">Κεφάλαιο 2.1</h2>
...
<h3 id="c2-1-2">Κεφάλαιο 2.1.2</h3>
...
Αν θέλουμε τώρα να κάνουμε μόνο την επικεφαλίδα του Κεφαλαίου 1.2 να έχει χρώμα κόκκινο (red) και όχι όλες τις επικεφαλίδες του επιπέδου h2, θα πρέπει να γράψουμε το εξής CSS :
#c1-2 {
color: red;
}
Όπως βλέπουμε από το παραπάνω παράδειγμα, μπορούμε να ορίσουμε τις ιδιότητες ενός συγκεκριμένου στοιχείου (element) κάνοντας χρήση του #id στο stylesheet του εγγράφου.
Η Ομαδοποίηση των Στοιχείων (Span και Div)
Τα στοιχεία <span> και <div> χρησιμοποιούνται για να ομαδοποιήσουν και να δομήσουν ένα έγγραφο και συνδυάζονται συχνά με τις ιδιότητες class και id.
Θα δούμε από κοντά τη χρήση των <span> και <div> καθώς αυτά τα δύο στοιχεία της HTML έχουν μεγάλη σπουδαιότητα για τα CSS.
Ομαδοποίηση με το Span
Το στοιχείο <span> είναι αυτό που μπορούμε να αποκαλέσουμε ουδέτερο στοιχείο καθώς δεν προσθέτει τίποτα στο ίδιο το έγγραφο. Αλλά με τα CSS, το <span> μπορεί να χρησιμοποιηθεί για να προσθέσουμε οπτικά χαρακτηριστικά σε συγκεκριμένα κομμάτια κειμένου των εγγράφων μας.
Ακολουθεί ένα παράδειγμα :
<p>Στην Περιφέρεια Δυτικής Μακεδονίας ανήκουν οι Νομοί Γρεβενών, Καστοριάς, Κοζάνης και Φλώρινας.</p>
Ας υποθέσουμε ότι θέλουμε στο παραπάνω κομμάτι κειμένου να εμφανίζονται οι τέσσερις νομοί της Δυτικής Μακεδονίας με κόκκινο χρώμα (red). Για να γίνει αυτό, μπορούμε να απομονώσουμε τους νομούς με το <span> και σε κάθε span να αντιστοιχίσουμε μια τάξη (class), στην οποία μπορούμε να προσδώσουμε ένα χρώμα με το style sheet.
<p> Στην Περιφέρεια Δυτικής Μακεδονίας ανήκουν οι Νομοί
<span class="nomos"> Γρεβενών</span>,
<span class="nomos"> Καστοριάς</span>,
<span class="nomos"> Κοζάνης</span> και
<span class="nomos"> Φλώρινας</span>.</p>
Το CSS θα είναι το εξής :
span.nomos {
color:red;
}
Ένας άλλος τρόπος για να πετύχουμε το παραπάνω αποτέλεσμα, θα ήταν να αποδώσουμε ένα id σε κάθε νομό, αλλά αυτό θα πρέπει να είναι μοναδικό για τον κάθε νομό, οπότε σε περίπτωση που έχουμε πολλά τέτοια στοιχεία, δεν αποτελεί και την καλύτερη δυνατή λύση η χρήση του id.
Ομαδοποίηση με το Div
Ενώ το <span> χρησιμοποιείται μέσα σ’ ένα στοιχείο επιπέδου μπλοκ, το <div> χρησιμοποιείται για να ομαδοποιήσει ένα ή περισσότερα στοιχεία επιπέδου μπλοκ. Εκτός απ’ αυτή τη μικρή διαφορά, τα δύο αυτά στοιχεία κάνουν την ίδια περίπου δουλειά.
Θα δούμε ένα παράδειγμα με τις δύο λίστες των νομών που ανήκουν στις περιφέρειες Θεσσαλίας και Ηπείρου :
<div id="thessaly">
<ul>
<li>Καρδίτσα</li>
<li>Λάρισα</li>
<li>Μαγνησία</li>
<li>Τρίκαλα</li>
</ul>
</div>
<div id="epirus">
<ul>
<li>Άρτα</li>
<li>Θεσπρωτία</li>
<li>Ιωάννινα</li>
<li>Πρέβεζα</li>
</ul>
</div>
Θέλουμε τώρα το φόντο της λίστας με τους νομούς της Θεσσαλίας να έχει χρώμα μπλε και το φόντο της λίστας με τους νομούς της Ηπείρου να έχει χρώμα κόκκινο. Ο κώδικας για το style sheet θα πρέπει να είναι ο εξής :
#thessaly {
background:blue;
}
#epirus {
background:red;
}