Εισαγωγή στα Cascading Style Sheets (CSS)

dimitris | Σάβ, 11/02/2013 - 09:05 | 29' | 1

Με τον όρο CSS (Cascading Style Sheets – ήαν προτιμάτε μια ελληνική μετάφραση Επικαλύπτοντα φύλλα μορφοποίησης) στην ουσία αναφερόμαστε σε μια γλώσσα μορφοποίησης σελίδων HTML. Για παράδειγμα, ένα φύλλο CSS μπορεί να ρυθμίσει την εμφάνιση των γραμματοσειρών, τα χρώματα, τα περιθώρια, τις γραμμές, το ύψος, το πλάτος, τις εικόνες φόντου μιας σελίδας web και πολλά άλλα πράγματα.

Της Άρτεμις Στεργίου

Ποια είναι η διαφορά μεταξύ CSS και HTML, XHTML;

Οι γλώσσες HTML και XHTML μπορεί να χρησιμοποιούνται για να φτιάξουμε δομή στο περιεχόμενο και να ορίσουμε την διάταξη των αντικειμένων μιας ιστοσελίδας. Οι εντολές και τα φύλλα των CSS προσφέρουν μορφοποίηση σε ήδη δομημένο περιεχόμενο, έχουν περισσότερες επιλογές εμφάνισης και καλύτερη ακρίβεια. Σήμερα τα CSS υποστηρίζονται από όλους τους browsers.

Αρχικά η γλώσσα HTML χρησιμοποιήθηκε μόνο για να προσδώσει δομή στο κείμενο. Ο συγγραφέας θα μπορούσε να βάλει ‘σήμανση’ σ’ ένα κείμενό του, πχ να δηλώσει ότι «αυτό είναι ένας τίτλος» ή «αυτό είναι μια παράγραφος" με τη χρήση HTML tags όπως <h1> και <p> κλπ.

Αυτό οδήγησε επίσης σε μια κατάσταση όπου οι αρχικές ετικέτες δομής, όπως είναι πχ η ετικέτα <table> χρησιμοποιείτο περισσότερο στις σελίδες προκειμένου να προσδιορίσει την εμφάνιση και όχι για να προσθέσει δομή σε κείμενο. Επίσης σε άλλες περιπτώσεις νέες ετικέτες διάταξης, όπως είναι πχ η <blink> υποστηρίζονταν μόνο από το ένα πρόγραμμα περιήγησης και όχι από όλα.

Η γλώσσα CSS εφευρέθηκε για να διορθωθεί αυτή η κατάσταση, παρέχοντας στους σχεδιαστές ιστοσελίδων δυνατότητες διάταξης οι οποίες να υποστηρίζονται από όλους τους browsers. Ακόμη, ο διαχωρισμός της μορφής παρουσίασης των εγγράφων από το περιεχόμενο των εγγράφων, κάνει την συντήρηση του δικτυακού τόπου να είναι πολύ πιο εύκολη.

Ποια οφέλη δίνει η CSS;

Τα CSS ήταν μια επανάσταση στον κόσμο του web design. Ποιο συγκεκριμένα μπορούμε να συνοψίσουμε ότι τα οφέλη τους είναι:

Ένα μόνο φύλλο CSS μπορεί να προσφέρει μορφοποίησης σε πολλά HTML και XHTML έγγραφα. Κάνει τον έλεγχο της διάταξης μιας web σελίδας με μεγαλύτερη ακρίβεια. Παρουσιάζουν διαφορετική διάταξη σε διαφορετικούς τύπους μέσων πχ σε οθόνη, σε εκτύπωση, κλπ. Χρησιμοποιούν πολλές νεότερες, προηγμένες και εξελιγμένες τεχνικές.

Στη συνέχεια θα δούμε πώς μπορούμε να χρησιμοποιούμε CSS ώστε να κάνουμε τον έλεγχο της μορφοποίησης των web σελίδων, όπως είναι για παράδειγμα τα χρώματα και το μέγεθος των γραμματοσειρών, το πλάτος και τα χρώματα των γραμμών, καθώς και το κενό χώρο μεταξύ αντικειμένων μιας σελίδας.

Για παράδειγμα, σε μια σελίδα html οι απαιτήσεις μορφοποίησης μπορεί να είναι ως εξής: να καθορίσετε ότι το φόντο της σελίδας είναι ένα ‘κρεμ’ χρώμα, το περιεχόμενο όλων των στοιχείων των διαφόρων παραγράφων (<p>) να εμφανίζονται με γκρι χρησιμοποιώντας τη γραμματοσειρά Arial, και όλοι οι τίτλοι πρώτου επιπέδου (<h1>) θα πρέπει να είναι με κόκκινο χρώμα και με την Times New Roman γραμματοσειρά.

Για να πετύχουμε τέτοιες απαιτήσεις θα πρέπει να ορίσουμε ανάλογους κάθε φορά κανόνες για κάθε στοιχείο που θέλουμε να μορφοποιήσουμε.

Στοιχεία CSS

Γι αυτό είναι αναγκαίο να γνωρίσουμε τα παρακάτω:
• Τι κάνει ένας κανόνας CSS
• Πώς τοποθετούμε CSS κανόνες μέσα σε μια web σελίδα ή πώς συνδέουμε την web σελίδα με ένα εξωτερικό έγγραφο CSS
• Πώς ελέγχονται οι ιδιότητες παρουσίασης και οι αντίστοιχες τιμές τους των διαφόρων στοιχείων μέσα στο web έγγραφό, ή στο φύλλο CSS.
• Πώς ελέγχεται γενική η παρουσίαση του κειμένου με τη χρήση CSS
• Πώς τα φύλλα CSS βασίζονται σε ένα μοντέλο κουτί (box model), και πώς ορίζονται διαφορετικές ιδιότητες για αυτά τα κουτιά (όπως πχ το πλάτος και το στυλ των box borders)

Στην συνέχεια παρουσιάζεται για παράδειγμα ένας κανόνας CSS ο οποίος εφαρμόζεται σε τρία διαφορετικά στοιχεία (σε αυτό το παράδειγμα η ιδιότητα εφαρμόζεται στα στοιχεία: <h1>, <h2> και <h3>). Ένα κόμμα διαχωρίζει το όνομα του κάθε στοιχείου για το οποίο θα ισχύει αυτός ο κανόνας. Ο κανόνας ορίζει ένα αριθμό ιδιοτήτων για αυτά τα στοιχεία. Κάθε ιδιότητα συνοδεύεται και από μία τιμή. Και κάθε ζεύγος ιδιότητας-τιμή διαχωρίζεται με ένα ερωτηματικό από το επόμενο ζεύγος ιδιότητας-τιμή. Όπως φαίνεται όλα τα ζεύγη ιδιότητα-τιμή παραμένουν μέσα στα άγκιστρα:

h1, h2, h3 {
font-weight:bold;
font-family:arial;
color:#000000;
background-color:#FFFFFF;}

Στον παραπάνω κανόνα υπάρχουν τρία στοιχεία επικεφαλίδας (<h1>, <h2> και <h3>), και ο κανόνας αυτός λέει ότι, όταν χρησιμοποιούνται αυτές οι ετικέτες το κείμενο θα γραφτεί με μια έντονη γραμματοσειρά Arial, με μαύρο χρώμα και με λευκό φόντο. Παρατηρείστε ότι τα χρώματα σημειώνονται με χρήση 16-δικού κωδικού.

Ένα Βασικό Παράδειγμα

Ας δούμε τώρα ένα παράδειγμα που δείχνει πώς ένα σύνολο από κανόνες CSS μπορούν να αλλάξουν την εμφάνιση μιας XHTML σελίδας. Οι CSS κανόνες μπορεί να βρίσκονται μέσα σε μια σελίδα XHTML, αλλά σε αυτό το παράδειγμα όλοι οι κανόνες CSS θα αποθηκευθούν σε ένα ξεχωριστό αρχείο, και στην σελίδα XHTML θα υπάρχει ένας μόνο σύνδεσμος που θα συσχετίζει το αρχείο αυτό με το style sheet.

Το παρακάτω Σχήμα 1 δείχνει το αποτέλεσμα της εμφάνισης μιας σελίδας XHTML η οποία έχει μορφοποιηθεί με κανόνες CSS.

Και στη συνέχεια παρουσιάζεται ο κώδικας για τη σελίδα η οποία εμφανίζεται στο Σχήμα 1 (ex1.html). Η web σελίδα έχει ως περιεχόμενο έναν τίτλο, μια παράγραφο, και έναν Πίνακα. Μέσα στο <head> υπάρχει η ετικέτα <link> η οποία λέει στο πρόγραμμα περιήγησης που βρίσκεται το φύλλο μορφοποίησης CSS το οποίο και θα διαμορφώσει αυτή την σελίδα. Η θέση του φύλλου μορφοποίησης δίνεται από την τιμή που έχει την ετικέτα href.

Σχήμα 1 Μορφοποιημένη web σελίδα με χρήση κανόνων CSS

Επίσης, παρατηρήστε στον κώδικα xhtml ότι μερικά από τα στοιχεία <td> (δηλαδή τα κελιά του πίνακα) φέρουν ένα χαρακτηριστικό κλάσης της οποίας η τιμή δηλώνεται με το όνομα code. Αυτό χρησιμοποιείται στο έγγραφο για να διακρίνει αυτά τα κελιά του πίνακα τα οποία μορφοποιούνται με άλλο τρόπο .

XHTML κώδικας
 - ex1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" lang="en" >
<head>
<title> CSS Example </title>
<link rel="stylesheet" type="text/css" href="ex1.css" />
</head>
<body>
<h1> Έλεγχος Εμφάνισης Γραμματοσειρών με χρήση CSS</h1>
<p> Αυτή είναι μια τυπική παράγραφος κειμένου. Ο επόμενος
Πίνακας μας δείχνει μερικές ιδιότητες συγκεκριμένων
γραμματοσειρών οι οποίες -ιδιότητες- δηλώνονται με χρήση
CSS.
</p>
<table>
<tr>
<th> Ιδιότητα</th>
<th> Περιγραφή Ιδιότητας</th>
</tr>
<tr>
<td class="code"> font-family </td>
<td> Καθορίζει την γραμματοσειρά που θα
χρησιμοποιηθεί. </td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
<td class="code"> font-size </td>
<td> Καθορίζει το μέγεθος της γραμματοσειράχρηιμοποιηθεί. </td>
που θα
<td class="code"> font-style </td>
<td> Καθορίζει την εμφάνιση των γραμματοσειρών δηλ.
αν θα είναι normal, italic ή oblique. </td>
<td class="code"> font-weight </td>
<td> Καθορίζει αν η γραμματοσειρά θα είναι normal,bold, bolder, ή lighter </td>

Έχοντας δημιουργήσει ένα XHTML φύλλο στη συνέχει μπορούμε να δημιουργήσουμε ένα φύλλο στυλ CSS στο ίδιο επεξεργαστή που χρησιμοποιούμε και έτσι να ολοκληρώσουμε την εμφάνιση της XHTML σελίδας. Το αρχείο διαμόρφωσης (CSS style) αποθηκεύεται με την επέκταση αρχείου ‘*. CSS’.

Έστω ότι το φύλλο μορφοποίησης ή αλλιώς το αρχείο το οποίο χρησιμοποιεί διάφορους κανόνες CSS για αυτό το παράδειγμα, έχει το όνομα ‘ex1.css’.Στην συνέχεια θα αναλύσουμε τι κάνει κάθε στοιχείο του παρόντος style sheet.

CSS Κώδικας

 - ex1.css
 

/* Style sheet for ex1.html */
body {
color:##6495ed;
background-color:blue #dddddd;
font-family:arial,verdana,sans-serif;}
h1{font-size:11pt;}
p{font-size:12pt;}
table {
background-color:#efefef;
border-style:solid; /*dashed,border-width:3px;
border-color:#999999;}
dotted */
th{
background-color:#aaaaaa;
font-weight:bold;
padding:8px;}
td{padding:5px;}
td.code {
padding:5px;
color:red;
font-family:courier,font-weight:bold;}
courier-new,serif;

Η πρώτη σειρά είναι στην ουσία ένα σχόλιο το οποίο αγνοείται από το σύστημα. Οτιδήποτε μεταξύ των ετικετών: ‘/*’ και ‘*/’ θα αγνοηθεί από το πρόγραμμα περιήγησης και, συνεπώς, δεν θα έχουν επίδραση στην εμφάνιση της σελίδας:

/* Style sheet for excer9.html */

Μετά την πρώτη γραμμή υπάρχει, ο πρώτος κανόνας ο οποίος αφορά το στοιχείο <body> της XHTML σελίδας. Με τον κανόνα αυτόν δηλώνεται ότι το προεπιλεγμένο χρώμα του κάθε κειμένου της σελίδας καθώς και οι γραμμές που χρησιμοποιούνται στη σελίδα θα είναι μαύρο (#000000) και επίσης δηλώνεται ότι το φόντο της σελίδας θα πρέπει να είναι λευκό (#ffffff). Τα χρώματα που χρησιμοποιούνται εδώ δηλώνονται με δεκαεξαδικό κώδικα.

Επίσης στον ίδιο κανόνα του ‘body’, δηλώνεται ότι η γραμματοσειρά που χρησιμοποιείται σε ολόκληρο το έγγραφο θα πρέπει να είναι Arial. Αν όμως η γραμματοσειρά Arial δεν είναι διαθέσιμη, τότε θα χρησιμοποιηθεί η Verdana. Και αν δεν υπάρχει ούτε αυτή τότε θα χρησιμοποιηθεί η προεπιλεγμένη γραμματοσειρά που έχει το σύστημα.

body{
color: #000000;
background-color:#ffffff;
font-family:arial, verdana,sans-serif; }

Οι επόμενοι δύο κανόνες προσδιορίζουν απλώς το μέγεθος των περιεχομένων των στοιχείων – ετικετών <h1> και <p> αντίστοιχα:

h1 {font-size:18pt;}
p {font-size:12pt;}

Στη συνέχεια, παρουσιάζονται μερικές ρυθμίσεις οι οποίες αφορούν την εμφάνιση του Πίνακα της web σελίδας. Με το στοιχείο background-color, δίνουμε στο φόντο ένα ανοιχτό γκρι χρώμα. Στη συνέχεια, με την δήλωση border-style θα δηλώσουμε solid περίγραμμα για τον πίνακα. Στη δήλωση border-style η οποία δηλώνει τον τύπο της γραμμής του περιγράμματος μπορεί να χρησιμοποιηθεί μια από τις τρεις τιμές (solid, dashed ή dotted). Με την τιμή solid δηλώνουμε ότι θα έχουμε σταθερή γραμμή, με την dashed έχουμε διακεκομμένη γραμμή ή γραμμή με τελείες όταν δηλώνεται η μεταβλητή αυτή ως dotted. Η δήλωση border-width λέει ότι το πάχος της γραμμής πρέπει να είναι 1 pixel. Και τέλος η ιδιότητα border-color ορίζει ότι το χρώμα της γραμμής του περιγράμματος θα πρέπει να είναι ανοιχτό γκρι:

table{
background-color:#efefef;
border-style:solid;
border-width:1px;
border-color:#999999;}

Με τον επόμενο κανόνα th προσδιορίζεται η εμφάνιση των επικεφαλίδων του Πίνακα. Και συγκεκριμένα με την πρώτη δήλωση προσδιορίζεται το χρώμα του φόντου καθώς επίσης με την δεύτερη δήλωση (font-weight) ότι το κείμενο θα πρέπει να εμφανίζεται με έντονα (bold) γράμματα, και τέλος με την δήλωση padding καθορίζεται ότι το χώρος μεταξύ του περιγράμματος του κελιού του πίνακα και του κειμένου, θα πρέπει να υπάρχουν 5 pixels.

th {
background-color:#cccccc;
font-weight:bold;
padding:5px;}

Το κάθε κελί δεδομένων του πίνακα έχει επίσης συμπλήρωμα (padding) 5 pixels (όπως και οι τίτλοι του πίνακα). Η προσθήκη αυτού του κενού ή συμπληρώματος καθιστά το κείμενο πολύ πιο εύκολο να διαβαστεί, και χωρίς αυτό το κενό το κείμενο σε μία στήλη θα μπορούσε να τρέξει μέχρι το κείμενο της διπλανής ή γειτονικής στήλης:

td {padding:5px;}

Στο Σχήμα 1 ας παρατηρήσουμε ότι τα κελιά τα οποία περιέχουν τα ονόματα των CSS ιδιοτήτων είναι σε μια γραμματοσειρά Courier. Ας κοιτάξετε τώρα τα αντίστοιχα κελιά πίνακα στο έγγραφο XHTML, έχουν ένα χαρακτηριστικό κλάσης (class) του οποίου η τιμή ήταν code. Από μόνο του, το χαρακτηριστικό της κλάσης δεν αλλάζει την εμφάνιση του εγγράφου, αλλά το χαρακτηριστικό κλάσης σας επιτρέπει να συσχετίζονται κανόνες CSS με στοιχεία των οποίων το χαρακτηριστικό της κλάσης έχει μια συγκεκριμένη τιμή. Γι αυτό, ο παρακάτω κανόνας ισχύει μόνο για κελιά δεδομένων <td> που φέρουν ένα χαρακτηριστικό κλάσης (class) του οποίου η τιμή είναι code, και όχι για όλα τα <td> κελιά:

td.code {
font-family:courier,font-weight:bold;}
courier-new, serif;

Όταν θέλετε να δηλώσετε ένα στοιχείο (attribute) με μια τιμή κλάσης, τότε βάζετε το όνομα του στοιχείου (attribute- εν προκειμένω td), ακολουθεί τελεία και τέλος γράφουμε την τιμή της κλάσης με συμβολικό όνομα (στην προκειμένη περίπτωση συμβολικό όνομα code). Στη συνέχεια μέσα σε άγκιστρα, δηλώνετε τις ιδιότητες που θέλετε να προσδώσετε σε αυτό το στοιχείο.

Το παραπάνω παράδειγµα που παρουσιάσαµε εδώ σας παρέχει µια εικόνα του πώς  χρησιµοποιείται και πως εργάζεται ένα CSS φύλλο.

Στοιχεία CSS

Για να αποκτήσουμε μια πλήρη εικόνα του πως μπορούμε να χρησιμοποιήσουμε τα διάφορα στοιχεία των CSS sheets θα πρέπει να ξεκαθαρίσουμε τα εξής:
• Τις διάφορες ιδιότητες που μπορούμε να χρησιμοποιήσουμε για να ελέγξουμε την εμφάνιση των διαφόρων στοιχείων μιας XHTML σελίδας καθώς επίσης και τις τιμές που μπορεί να πάρει το κάθε στοιχείο. Οι διαφορετικές ιδιότητες μπορούν να ομαδοποιηθούν για λόγους ευκολότερης μελέτης. Για παράδειγμα, όλες οι ιδιότητες που επηρεάζουν την εμφάνιση των γραμματοσειρών να είναι σε μία ομάδα, και εκείνες που επηρεάζουν τα περιγράμματα σε μια άλλη ομάδα και ούτω καθεξής.
• Τους διαφόρους επιλογείς που μας επιτρέπουν να καθορίζουμε σε ποια στοιχεία εφαρμόζονται αυτές οι ιδιότητες. Το παραπάνω παράδειγμα, χρησιμοποίησε μερικές μόνο από τις μεθόδους τις οποίες μπορεί να χρησιμοποιηθούν για να δείξουμε ποια στοιχεία ελέγχονται και από ποιους κανόνες μορφοποίησης.
• Πώς αντιμετωπίζει ένα φύλλο CSS κάθε στοιχείο μιας ιστοσελίδας και το πώς αυτό επηρεάζει την τρόπο με τον οποίο θα παρουσιάσει τις ιστοσελίδες. Πέρα από το πώς χρησιμοποιούμε τους κανόνες CSS στα διάφορα έγγραφά μας, ιδιαίτερο ενδιαφέρον έχει να γίνουν αντιληπτές οι μονάδες μέτρησης που χρησιμοποιούνται σε φύλλα CSS (όπως pixels, και ποσοστά).

Επίσης θα πρέπει να γίνει κατανοητό και μια άλλη πολύ ισχυρή έννοια που αφορά το πώς εφαρμόζονται οι κανόνες CSS και η οποία ονομάζεται κληρονομικότητα.

Κληρονομικότητα (Inheritance)

Ένα από τα ισχυρά χαρακτηριστικά των CSS είναι ότι, όταν μια ιδιότητα έχει εφαρμοστεί σε ένα στοιχείο, τότε μπορεί αυτή η ιδιότητα θα να κληρονομείται στα επι μέρους στοιχεία (δηλ. στοιχεία που περιέχονται μέσα στο στοιχείο στο οποίο δηλώθηκαν οι κανόνες). Για παράδειγμα, όταν η γραμματοσειρά –είχε δηλωθεί για στο στοιχείο <body> όπως το στοιχείο στο προηγούμενο παράδειγμα, τότε εφαρμόζεται σε όλα τα στοιχεία στο εσωτερικό του <body>. Αυτό σας γλυτώνει από την επανάληψη των ίδιων κανόνων για κάθε επι μέρους στοιχείο που έχει μια ιστοσελίδα.

Στο προηγούμενο παράδειγμα, οι περισσότερες εμφανίσεις κειμένου ήταν με γραμματοσειρά Arial, όπως ορίζεται στον κανόνα ορίζεται στο στοιχείο <body>. Όμως σε μερικά κελιά του πίνακα χρησιμοποιείται η γραμματοσειρά Courier. Τα κελιά του πίνακα που έχουν διαφορετική εμφάνιση, οφείλεται στο ότι τα κελιά αυτά έχουν έχουν μια class ιδιότητα της οποίας η τιμή είναι code. Και αυτό δηλώνεται στο XHTML κείμενο με την παρακάτω δήλωση:

<tdclass=”code”> font-size </td>
Here you can see the rule associated withtd.code {
font-family:courier, courier-new, serif;
font-weight:bold;}
these elements:

Ο κανόνας αυτός υπερισχύει από έναν αντίστοιχο γενικό κανόνα ο οποίος έχει οριστεί στο στοιχείο <body>, επειδή ο επιλογέας είναι πιο ειδικός και το ειδικό υπερισχύει του γενικού.

Ο τρόπος με τον οποίο κληρονομούνται οι ιδιότητες σε απαλλάσσει από τον κόπο να γράψεις κανόνες και όλα τα στοιχεία της xhtml σελίδας και έτσι δημιουργείται ένα πιο συμπαγές φύλλο μορφοποίησης.

Που γράφονται οι κανόνες CSS

Στο παράδειγμα που παρουσιάστηκε εδώ, οι κανόνες CSS τοποθετούνται σε ένα ξεχωριστό αρχείο - εξωτερικό φύλλο μορφοποίησης με δικό του όνομα. Επίσης κανόνες CSS μπορεί να εμφανιστούν σε δύο σημεία μέσα στο έγγραφο XHTML:
Είτε μέσα στο εσωτερικό τoυ <head>, είτε άμεσα στο κυρίως κείμενο της σελίδας XHTML.
Στην πρώτη περίπτωση ορίζουμε μια ετικέτα (tag) με όνομα <style>, στο εσωτερικό του <head> ενός εγγράφου. Ως τιμή στο στοιχείο style ορίζονται συγκεκριμένα χαρακτηριστικά. Όταν οι κανόνες της μορφοποίησης εμπεριέχονται μέσα σε ένα <style>, τότε αναφέρονται και σαν internal style sheet.

<head>
<title> Internal Style sheet </title>
<style type=”text/css”>
body {
color:#000000;
background-color:#ffffff;
font-family:arial, verdana, sans-serif;h1 {font-size:18pt;}
p {font-size:12pt;}
</style>
</head>
}

Οι ιδιότητες μορφοποίησης (style) οι οποίες χρησιμοποιούνται για στοιχεία μιας XHTML σελίδας, είναι γνωστές και ως inline style rules. Για παράδειγμα:

<td style=”font-family:courier; padding:5px; border-style:solid;
border-width:1px; border-color:#000000;”>

Εδώ μπορείτε να δείτε ότι μαζί με κάθε ιδιότητα μορφοποίησης (style) προστίθεται και μια τιμή της ιδιότητας. Θα πρέπει να διαχωρίζεται κάθε ιδιότητα από την τιμή της με χρήση της άνω και κάτω τελείας (:). Και ακόμη κάθε ζεύγος ιδιότητα-τιμή θα πρέπει να διαχωρίζεται με ένα ερωτηματικό (;). Ωστόσο, δεν υπάρχει καμία ανάγκη για ένα επιλογέα (selector) εδώ (επειδή το style εφαρμόζεται άμεσα και αυτόματα στο στοιχείο που φέρει τις ιδιότητες του style), και γι αυτό δεν υπάρχουν άγκιστρα.

Το στοιχείο διασύνδεσης (< link > Element)

H ετικέτα <link> στις σελίδες XHTML χρησιμοποιείται, για να δηλώσει τη σύνδεση μεταξύ δύο εγγράφων. Για παράδειγμα, μπορεί να χρησιμοποιηθεί σε μια ιστοσελίδα XHTML για να προσδιορίσει την χρήση ενός φύλλου μορφοποίησης CSS που πρέπει να χρησιμοποιηθεί για να προσδώσει διαμόρφωση στην xhtml σελίδα. Επίσης είναι δυνατόν να δείτε να χρησιμοποιείται η ετικέτα <link> σε XHTML σελίδες και για άλλους σκοπούς. Για παράδειγμα, να χρησιμοποιείται προκειμένου να δηλώσει ένα RSS feed το οποίο αντιστοιχεί στην συγκεκριμένη web σελίδα.

Αυτός ο τρόπος διασύνδεσης είναι πολύ διαφορετικό είδος σύνδεσης απ ότι ο σύνδεσμος που δημιουργείται με την χρήση του στοιχείου <a>, επειδή τα δύο αυτά έγγραφα συνδέονται αυτόματα - και ο χρήστης δεν χρειάζεται να κάνει κάτι το ιδιαίτερο πχ να ενεργοποιήσει αυτή την σύνδεση ή οτιδήποτε άλλο.

Η ετικέτα <link> όταν χρησιμοποιείται με φύλλα μορφοποίησης CSS θα πρέπει να φέρει τρία χαρακτηριστικά: type, rel, και href. Εδώ είναι ένα παράδειγμα της ετικέτας <link> που χρησιμοποιείται σε μια σελίδα XHTML και το οποίο δείχνει ότι η παρούσα σελίδα θα πρέπει να διαμορφωθεί από ένα αρχείο CSS που ονομάζεται interface.css, το οποίο βρίσκεται μέσα σε έναν κατάλογο που ονομάζεται CSS:

<link rel=”stylesheet” type=”text/css” href=”../CSS/interface.css” />

Εκτός από τις βασικές ιδιότητες, η ετικέτα <link> μπορεί επίσης να λάβει και άλλα χαρακτηριστικά όπως: charset dir href href lang media rel rev κλπ.

Επίλογος

Η κατασκευή δικτυακών τόπων είναι χώρος που εξελίσσεται συνεχώς. Παρ’ όλα αυτά μέχρι και σήμερα η δημιουργία δημιουργία των βασικών ιστοσελίδων γίνεται με την χρήση των HTML ή XHTML. Όμως για να φαίνονται αυτές περισσότερο ελκυστικές η τεχνική των CSS ανταποκρίνεται πλήρως. Η ανανέωση της εμφάνισης των σελίδων με CSS μπορεί πλέον να γίνει πολύ σύντομα και αποτελεσματική. Επίσης η χρήση των CSS ελαχιστοποιεί την συντήρηση των web sites εφ όσον επιτρέπει των διαχωρισμό του περιεχομένου των σελίδων από την μορφοποίησης. Ακόμη η χρήση των JavaScript θα συμπληρώσει το puzzle της κατασκευής ενός καλού Web site, αφού με το στοιχείο αυτό εξασφαλίζεται διαδραστικότητα στο υλικό που παρουσιάζεται.

 

Η Άρτεμις Στεργίου είναι φοιτήτρια του Τμήματος Πληροφορικής και Τηλεπικοινωνιών του Πανεπιστημίου Αθηνών

Φόρουμ
Δώσε αστέρια!

MO: 5 (ψήφοι: 2)

Σχόλια