Στην ενότητα αυτή θα δούμε τους τρόπους με τους οποίους εισάγουμε τα στυλ στις σελίδες HTML
Στον παρακάτω κώδικα θα δείτε ένα απλό στυλ το οποίο θα χρησιμοποιήσουμε στα παραδείγματα της ενότητας. Μην ανησυχείτε αν δεν μπορείτε να ερμηνέψετε τον κώδικα αυτόν. Διαβάζοντας τις επόμενες ενότητες θα είστε έτοιμοι όχι μόνο να ερμηνέψετε αλλά και να γράφετε αρχεία με δεκάδες στυλ:
Με το παραπάνω στυλ ορίζουμε το χρώμα του φόντου της σελίδας μας.
Υπάρχουν τρεις τρόποι να ορίσουμε στυλ σε μια σελίδα:
1. ορισμός των στυλ μέσα στην σελίδα (Internal Style Sheet)
2. ορισμός των στυλ σε εξωτερικό αρχείο (External Style Sheet)
3. ορισμός στυλ μέσα στις ετικέτες
Στον παρακάτω κώδικα θα δείτε ένα απλό στυλ το οποίο θα χρησιμοποιήσουμε στα παραδείγματα της ενότητας. Μην ανησυχείτε αν δεν μπορείτε να ερμηνέψετε τον κώδικα αυτόν. Διαβάζοντας τις επόμενες ενότητες θα είστε έτοιμοι όχι μόνο να ερμηνέψετε αλλά και να γράφετε αρχεία με δεκάδες στυλ:
Χρώμα στο φόντο της σελίδας
body {
background-color: blue;
}
background-color: blue;
}
Δοκιμάστε να αντικαταστήσετε το χρώμα blue με ένα άλλο. Μπορείτε να χρησιμοποιήσετε και τιμές RGB των χρωμάτων
Υπάρχουν τρεις τρόποι να ορίσουμε στυλ σε μια σελίδα:
1. ορισμός των στυλ μέσα στην σελίδα (Internal Style Sheet)
2. ορισμός των στυλ σε εξωτερικό αρχείο (External Style Sheet)
3. ορισμός στυλ μέσα στις ετικέτες
1. Ορισμός των στυλ μέσα στην σελίδα (Internal Style Sheet)
Ο πρώτος τρόπος είναι να ορίσουμε το στυλ στο τμήμα HEAD της σελίδας χρησιμοποιώντας την HTML ετικέτα <style>, όπως ο παρακάτω κώδικας:
Μέσα στην ετικέτα <style> γράφουμε τα στυλ που θα εφαρμοστούν στην σελίδα.
Δοκίμασε το - Δοκιμάστε να αντικαταστήσετε το χρώμα blue με ένα άλλο. Μπορείτε να χρησιμοποιήσετε και τιμές RGB των χρωμάτων
Τίτλος
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
body {
background-color: blue;
}
</style>
</head>
<body>
Κείμενο...
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
body {
background-color: blue;
}
</style>
</head>
<body>
Κείμενο...
</body>
</html>
Δοκίμασε το - Δοκιμάστε να αντικαταστήσετε το χρώμα blue με ένα άλλο. Μπορείτε να χρησιμοποιήσετε και τιμές RGB των χρωμάτων
2. Ορισμός των στυλ σε εξωτερικό αρχείο (External Style Sheet)
Ο δεύτερος τρόπος είναι να δημιουργήσουμε ένα εξωτερικό αρχείο στυλ με επέκταση .css στο οποίο γράφουμε τα στυλ που θέλουμε το ένα κάτω απο το άλλο. Η σύνδεση του εξωτερικού αρχείου στυλ και της σελίδας HTML γίνεται με την χρήση της HTML ετικέτας <link> στο τμήμα HEAD της HTML σελίδας, όπως στον παρακάτω κώδικα. Η ετικέτα <link> εισάγει στην σελίδα τα στυλ που βρίσκονται στο εξωτερικό αρχείο .css
Με τον δεύτερο τρόπο μπορούμε να εισάγουμε τα στυλ, που περιέχονται σε ένα αρχείο .css, μέσα σε όσες σελίδες html επιθυμούμε, δημιουργώντας έτσι ένα ενιαίο στυλ για τις σελίδες αυτές. Παρακάτω θα δοκιμάσουμε στην πράξη πως λειτουργεί αυτός ο τρόπος ορισμού στυλ, χρησιμοποιώντας ένα αρχείο .css, το οποίο περιέχει ένα στυλ, και δύο αρχεία .html, τα οποία κάνουν εισαγωγή το εξωτερικό αρχείο .css.
Αποθηκέψτε τα παρακάτω τρία αρχεία σε έναν φάκελο στον υπολογιστή σας:
to_diko_mou_style.css
selida1.html
selida2.html
Έπειτα ανοίξτε με τον web browser σας τα δύο αρχεία html (είτε σε δύο διαφορετικά παράθυρα, είτε σε δύο διαφορετικά tabs του browser). Θα παρατηρήσετε ότι και οι δύο σελίδες έχουν χρώμα φόντου μπλε. Ανοίξτε τώρα το αρχείο to_diko_mou_style.css με το Σημειωματάριο (Notepad) των Windows, στο παράθυρο του οποίου πρέπει να βλέπετε τον παρακάτω κώδικα:
Στον κώδικα αυτόν αλλάξτε το χρώμα blue σε οποιοδήποτε άλλο (μπορείτε να χρησιμοποιήσετε και τιμές RGB των χρωμάτων) και αποθηκέψτε το αρχείο. Επιστρέψτε στο παράθυρο του browser σας και κάντε ανανέωση (reload) και τις δύο σελίδες που ανοίξατε. Αν όλα πήγαν καλά θα πρέπει να άλλαξε το χρώμα του φόντου και των δύο σελίδων.
Στο παράδειγμα αυτό, το εξωτερικό αρχείο .css περιέχει μόνο ένα στυλ, το οποίο αναφέρετε στο χρώμα του φόντου της σελίδας. Θα μπορούσαμε στο αρχείο αυτό να προσθέταμε και άλλα στυλ, όπως το χρώμα, την γραμματοσειρά και το μέγεθος των κειμένων που βρίσκεται μέσα στις ετικέτες <em> και </em> ή το χρώμα και το μέγεθος των πλαισίων ( borders) των πινάκων κτλ., αποκτώντας έτσι την δυνατότητα της ομαδικής διαχείρισης πολλών σελίδων. Για να πάρετε μια γεύση απο ένα ολοκληρωμένο αρχείο CSS, δείτε το εξωτερικό αρχείο στυλ που χρησιμοποιεί το site του WLearn.gr
Η διαφορά μεταξύ του πρώτου και του δεύτερου τρόπου ορισμού στυλ είναι ότι στον πρώτο τρόπο τα στυλ που ορίζονται μέσα στις ετικέτες <style> και </style> εφαρμόζονται μόνο στην σελίδα στην οποία ορίζονται αυτά, ενώ στο δεύτερο τρόπο τα στυλ που ορίζονται στο εξωτερικό αρχείο .css εφαρμόζονται σε όλες τις σελίδες που εισάγουν αυτό το εξωτερικό αρχείο με την ετικέτα <link>
Τίτλος
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<link type="text/css" rel="STYLESHEET" xhref="mystyle.css" />
</head>
<body>
Κείμενο...
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<link type="text/css" rel="STYLESHEET" xhref="mystyle.css" />
</head>
<body>
Κείμενο...
</body>
</html>
Με τον δεύτερο τρόπο μπορούμε να εισάγουμε τα στυλ, που περιέχονται σε ένα αρχείο .css, μέσα σε όσες σελίδες html επιθυμούμε, δημιουργώντας έτσι ένα ενιαίο στυλ για τις σελίδες αυτές. Παρακάτω θα δοκιμάσουμε στην πράξη πως λειτουργεί αυτός ο τρόπος ορισμού στυλ, χρησιμοποιώντας ένα αρχείο .css, το οποίο περιέχει ένα στυλ, και δύο αρχεία .html, τα οποία κάνουν εισαγωγή το εξωτερικό αρχείο .css.
Αποθηκέψτε τα παρακάτω τρία αρχεία σε έναν φάκελο στον υπολογιστή σας:
to_diko_mou_style.css
selida1.html
selida2.html
Έπειτα ανοίξτε με τον web browser σας τα δύο αρχεία html (είτε σε δύο διαφορετικά παράθυρα, είτε σε δύο διαφορετικά tabs του browser). Θα παρατηρήσετε ότι και οι δύο σελίδες έχουν χρώμα φόντου μπλε. Ανοίξτε τώρα το αρχείο to_diko_mou_style.css με το Σημειωματάριο (Notepad) των Windows, στο παράθυρο του οποίου πρέπει να βλέπετε τον παρακάτω κώδικα:
Τίτλος
body {
background-color: blue;
}
background-color: blue;
}
Στο παράδειγμα αυτό, το εξωτερικό αρχείο .css περιέχει μόνο ένα στυλ, το οποίο αναφέρετε στο χρώμα του φόντου της σελίδας. Θα μπορούσαμε στο αρχείο αυτό να προσθέταμε και άλλα στυλ, όπως το χρώμα, την γραμματοσειρά και το μέγεθος των κειμένων που βρίσκεται μέσα στις ετικέτες <em> και </em> ή το χρώμα και το μέγεθος των πλαισίων ( borders) των πινάκων κτλ., αποκτώντας έτσι την δυνατότητα της ομαδικής διαχείρισης πολλών σελίδων. Για να πάρετε μια γεύση απο ένα ολοκληρωμένο αρχείο CSS, δείτε το εξωτερικό αρχείο στυλ που χρησιμοποιεί το site του WLearn.gr
Η διαφορά μεταξύ του πρώτου και του δεύτερου τρόπου ορισμού στυλ είναι ότι στον πρώτο τρόπο τα στυλ που ορίζονται μέσα στις ετικέτες <style> και </style> εφαρμόζονται μόνο στην σελίδα στην οποία ορίζονται αυτά, ενώ στο δεύτερο τρόπο τα στυλ που ορίζονται στο εξωτερικό αρχείο .css εφαρμόζονται σε όλες τις σελίδες που εισάγουν αυτό το εξωτερικό αρχείο με την ετικέτα <link>
3. Ορισμός στυλ μέσα στις ετικέτες
Μπορούμε να ορίσουμε στυλ στις ετικέτες που επιθυμούμε, χρησιμοποιώντας την κοινή ιδιότητα style της HTML. Η ιδιότητα style μπορεί να μπει σχεδόν σε όλες τις HTML ετικέτες της ενότητας <body>.
Με αυτόν τον τρόπο όμως χάνουμε το μεγάλο πλεονέκτημα της CSS, δηλαδή αυτό της εύκολης διαχείρισης των στυλ των σελίδων μας, καθώς στην περίπτωση αυτή το στυλ εφαρμόζεται μόνο στην ετικέτα στην οποία ορίζεται και πουθενά αλλού. Μην χρησιμοποιείτε συχνά τον τρόπο αυτό, ιδιαίτερα σε περιπτώσεις που ξέρετε ότι το στυλ θα το χρησιμοποιήσετε και σε κάποιο άλλο σημείο του site.
Τίτλος
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το <ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em style="color: #228b22;">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em style="color: #228b22;">type</em> είναι οι εξής:
<em style="color: #ffa074;">disc</em>,
<em style="color: #ffa074;">circle</em>,
<em style="color: #ffa074;">square</em>
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το <ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em style="color: #228b22;">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em style="color: #228b22;">type</em> είναι οι εξής:
<em style="color: #ffa074;">disc</em>,
<em style="color: #ffa074;">circle</em>,
<em style="color: #ffa074;">square</em>
</body>
</html>
Σύγκριση μεταξύ των τριών τρόπων ορισμού στυλ
Παρακάτω παρουσιάζεται η ίδια σελίδα με τους τρεις διαφορετικούς τρόπους ορισμού στυλ:
1. ορισμός των στυλ μέσα στην σελίδα (Internal Style Sheet)
2. Ορισμός των στυλ σε εξωτερικό αρχείο (External Style Sheet)
3. Ορισμός στυλ μέσα στις ετικέτες
Είναι προφανείς ότι ο δεύτερος τρόπος είναι ο πιο πρακτικός για τους εξής λόγους:
1. ορισμός των στυλ μέσα στην σελίδα (Internal Style Sheet)
Τίτλος
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
em.idiotites {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
em.times {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #FFA07A;
font-weight: bold;
TEXT-DECORATION: none;
}
</style>
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το <ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em class="idiotites">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em class="idiotites">type</em> είναι οι εξής:
<em class="times">disc</em>, <em class="times">circle</em>, <em class="times">square</em>
</body>
</html>div>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
em.idiotites {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
em.times {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #FFA07A;
font-weight: bold;
TEXT-DECORATION: none;
}
</style>
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το <ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em class="idiotites">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em class="idiotites">type</em> είναι οι εξής:
<em class="times">disc</em>, <em class="times">circle</em>, <em class="times">square</em>
</body>
</html>div>
2. Ορισμός των στυλ σε εξωτερικό αρχείο (External Style Sheet)
Τίτλος
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<link type="text/css" rel="STYLESHEET" xhref="mystyle.css" />
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το <ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em class="idiotites">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em class="idiotites">type</em> είναι οι εξής:
<em class="times">disc</em>, <em class="times">circle</em>, <em class="times">square</em>
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<link type="text/css" rel="STYLESHEET" xhref="mystyle.css" />
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το <ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em class="idiotites">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em class="idiotites">type</em> είναι οι εξής:
<em class="times">disc</em>, <em class="times">circle</em>, <em class="times">square</em>
</body>
</html>
3. Ορισμός στυλ μέσα στις ετικέτες
Τίτλος
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το >ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em style="font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif; color: #228B22; font-weight: bold; TEXT-DECORATION: none;">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em style="font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif; color: #228B22; font-weight: bold; TEXT-DECORATION: none;">type</em> είναι οι εξής:
<em style="font-size: 12px; color: #ffa074; font-weight: bold;">disc</em>,
<em style="font-size: 12px; color: #ffa074; font-weight: bold;">circle</em>,
<em style="font-size: 12px; color: #ffa074; font-weight: bold;">square</em>
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το >ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em style="font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif; color: #228B22; font-weight: bold; TEXT-DECORATION: none;">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em style="font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif; color: #228B22; font-weight: bold; TEXT-DECORATION: none;">type</em> είναι οι εξής:
<em style="font-size: 12px; color: #ffa074; font-weight: bold;">disc</em>,
<em style="font-size: 12px; color: #ffa074; font-weight: bold;">circle</em>,
<em style="font-size: 12px; color: #ffa074; font-weight: bold;">square</em>
</body>
</html>
Είναι προφανείς ότι ο δεύτερος τρόπος είναι ο πιο πρακτικός για τους εξής λόγους:
- τα στυλ γράφονται σε εξωτερικό αρχείο το οποίο μπορούμε να εισάγουμε σε όσες σελίδες επιθυμούμε δημιουργώντας έτσι ένα ενιαίο στυλ για όλες τις σελίδες του site μας
- ο πηγαίος κώδικας HTML της σελίδας είναι "καθαρότερος" γιατί δεν περιέχει τα στυλ στο τμήμα head, όπως στον πρώτο τρόπο, αλλά ούτε περιέχει τα στυλ μέσα στις ετικέτες, όπως στον τρίτο τρόπο. Ο "καθαρότερος" κώδικας είναι πιο εύκολα διαχειρίσιμος, αλλά κυρίως "κατεβαίνει" γρηγορότερα στον browser του επισκέπτη, λόγω του μικρότερου σε μέγεθος περιεχομένου
- το εξωτερικό αρχείο που περιέχει τα στυλ, αποθηκεύεται στην cache μνήμη του browser του επισκέπτη της σελίδας, όταν αυτός ανοίγει την κεντρική σελίδα του site. Έτσι όποια σελίδα και να ανοίξει στην συνέχεια, ο browser θα διαβάσει τα στυλ από την cache μνήμη του, μειώνοντας έτσι τον όγκο δεδομένων που κατεβάζει από τον Server που φιλοξενεί την σελίδα
