Προσθήκη Στυλ (style property)
Παρότι με την HTML μπορούμε να δημιουργήσουμε σελίδες με πολλά στοιχεία δεν μπορούμε να καθορίσουμε πως οι σελίδες αυτές εμφανίζονται στον browser, και πολύ περισσότερο δεν μπορούμε να καθορίσουμε στοιχεία εμφάνισης. Για αυτό δημιουργήθηκε η ιδιότητα style. Για να δούμε ένα μικρό παράδειγμα, στο οποίο θέλουμε κάποια παράγραφος να έχει χρώμα γραμματοσειράς κοκκίνο:
<div style="color: red;">
<p> Δοκιμαστική παράγραφος με χρώμα γραμματοσειράς κόκκινο.</p>
</div>
<p> Δεύτερη παράγραφος</p>
Δοκίμασέ το
Φυσικά θα μπορούσαμε να βάλουμε την ιδιότητα style μέσα στην ετικέτα της παραγράφου (<p> tag) οπότε η ρύθμιση του χρώματος της γραμματοσειράς θα εφαρμόζονταν σε όλη την παράγραφο. Φυσικά οι ετικέτες <div> και <span> μας δίνουν την δυνατότητα να ορίζουμε το στυλ σε μία ενότητα είτε σε block level (δηλαδή μια ενότητα από tags) είτε σε inline (σε ένα κομμάτι κειμένου μέσα σε ένα tag). Είχαμε δει στην προηγούμενη ενότητα μερικές από τις ιδιότητες που μπορούν να χρησιμοποιηθούν για το style. Η ανάγκη ομαδοποίησης της εμφάνισης των στοιχείων μιας ιστοσελίδας, (για παράδειγμα όλα τα κουμπιά σε φόρμες σε όλες τις σελίδες μιας ιστοσελίδας να είναι ομοιόμορφα κοκ) οδήγησε στην ανάπτυξη της CSS.
Γενικά για την CSS
CSS σημαίνει Cascading Style Sheets και είναι στυλ που μπορούμε να ορίσουμε για τις HTML σελίδες.
Γράφοντας τις σελίδες μας μόνο με HTML κώδικα, μπορούμε να ορίσουμε το χρώμα και το μέγεθος του κειμένου αλλά και άλλων στοιχείων της σελίδας (όπως πίνακες, links, λίστες κτλ). Για να αλλάξουμε το χρώμα κάποιου κειμένου ή το χρώμα ενός πίνακα, θα πρέπει να βρούμε το χρώμα αυτό μέσα στον κώδικα και να το αλλάξουμε. Η διαδικασία αυτή μπορεί να φαντάζει εύκολη όταν έχουμε να διαχειριστούμε μια μόνο σελίδα, αλλά ένα site αποτελείται από δεκάδες σελίδες τις οποίες χρειάζεται να διαχειριζόμαστε εύκολα και γρήγορα.
Φανταστείτε, για παράδειγμα, πόσο χρονοβόρο θα είναι αν θελήσουμε κάποια στιγμή να αλλάξουμε τα χρώματα στο κύριο μενού του site μας, το οποίο επαναλαμβάνεται σε όλες τις σελίδες. Σε μια τέτοια περίπτωση θα χρειαζόταν να ανοίγουμε κάθε σελίδα του site και να αλλάζουμε τα χρώματα του φόντου και των links του μενού, διαδικασία που εκτός από χρονοβόρα είναι και κουραστική.
Με την χρήση CSS μπορούμε να ορίζουμε χρώματα και μεγέθη οργανωμένα σε στυλ και έπειτα να εφαρμόζουμε τα στυλ αυτά στα στοιχεία των σελίδων του site μας. Με αυτόν τον τρόπο, κάθε φορά που αλλάζουμε το χρώμα ενός στυλ, αλλάζει το χρώμα όλων των στοιχείων που έχουν αναφορά στο στυλ αυτό. Έτσι αν έχουμε ορίσει ένα στυλ για το κύριο μενού του site, τότε θα χρειάζεται να αλλάξουμε το χρώμα του στυλ αυτού και αυτόματα θα εφαρμοστεί σε όλες τις σελίδες.
Εκτός από την ευκολία στην διαχείριση ενός site, ένα άλλο σημαντικό πλεονέκτημα της χρήσης CSS στις σελίδες είναι ο "καθαρότερος" κώδικας, χωρίς πολλές ιδιότητες στις ετικέτες οι οποίες τον κάνουν δυσανάγνωστο. Επιπλέον κάνει γρηγορότερη την πλοήγηση καθώς το αρχείο, μέσα στο οποίο ορίζονται τα στυλ, "διαβάζεται" από τον browser μόνο μια φορά και έπειτα αποθηκεύεται στην cache memory, μειώνοντας έτσι το μέγεθος της πληροφορίας που γίνεται download από τους browsers.
Εισαγωγή
Τι είναι CSS
CSS σημαίνει Cascading Style Sheets και είναι στυλ που μπορούμε να ορίσουμε για τις HTML σελίδες. Με τα στυλ ορίζουμε το χρώμα, το μέγεθος της γραμματοσειράς, την γραφή (bold, underline, κτλ.), το χρώμα του φοντου, τις διαστάσεις, την τιμή padding και μια σειρά από άλλες ιδιότητες των στοιχείων μιας ιστοσελίδας.
Τι είναι στοιχείο της σελίδας;
Στοιχείο είναι ένα οποιοδήποτε μέρος της HTML σελίδας, όπως: μια εικόνα, μια παράγραφος, μια λίστα, μια επιλογή μιας λίστας, μια επικεφαλίδα, ένα κείμενο ή μια λέξη που βρίσκεται μέσα σε ετικέτες διαμόρφωσης κτλ. Την λέξη στοιχείο θα την συναντήσετε πολύ συχνά σ' αυτήν την Σειρά Μαθημάτων, καθώς τα στυλ CSS εφαρμόζονται στα στοιχεία της σελίδας.
Γιατί να χρησιμοποιήσουμε CSS;
Η χρήση CSS κάνει πολύ εύκολη την διαχείριση της εμφάνισης των σελίδων μας. Για παράδειγμα, αν σε μια ιστοσελίδα, χωρίς χρήση CSS, θέλω να αλλάξω το χρώμα του φόντου σε όλες τις επικεφαλίδες όλων των πινάκων θα πρέπει να πηγαίνω σε κάθε μια επικεφαλίδα και να ορίζω το χρώμα που επιθυμώ αλλάζοντας κάθε φορά την τιμή της ιδιότητας bgcolor των ετικετών <th>. Ενώ σε μια σελίδα με χρήση CSS θα χρειαστεί να αλλάξω το χρώμα αυτό μια μόνο φορά και αυτό θα εφαρμοστεί για όλες τις επικεφαλίδες των πινάκων της σελίδας. Παρόμοια μπορώ να ορίσω στυλ, όχι μόνο για στοιχεία μιας σελίδας, αλλά για στοιχεία όλων των σελίδων του Site μου.Φανταστείτε να μπορείτε να αλλάζετε το στυλ του οριζόντιου μενού του Site σας, το οποίο επαναλαμβάνεται σε όλες τις σελίδες, με μόνο μια κίνηση. Δεν είναι φανταστικό;
Ορισμός των στυλ
Υπάρχουν τρεις τρόποι να ορίσουμε στυλ σε μια σελίδα:
1. ορισμός των στυλ μέσα στην σελίδα (Internal Style Sheet)
2. ορισμός των στυλ σε εξωτερικό αρχείο (External Style Sheet)
3. ορισμός στυλ μέσα στις ετικέτες (οπως έχουμε δει)
1. Ορισμός των στυλ μέσα στην σελίδα (Internal Style Sheet)
Ο πρώτος τρόπος είναι να ορίσουμε το στυλ στο τμήμα HEAD της σελίδας χρησιμοποιώντας την HTML ετικέτα <style>, όπως ο παρακάτω κώδικας:
<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>
Μέσα στην ετικέτα <style> γράφουμε τα στυλ που θα εφαρμοστούν στην σελίδα. Στο παραπάνω παράδειγμα λέμε ότι η ετικέτα <body> θα έχει στην ιδιότητα style το χρώμα του background μπλε.Δοκίμασε το
2. Ορισμός των στυλ σε εξωτερικό αρχείο (External Style Sheet)
Ο δεύτερος τρόπος είναι να δημιουργήσουμε ένα εξωτερικό αρχείο στυλ με επέκταση .css στο οποίο γράφουμε τα στυλ που θέλουμε το ένα κάτω απο το άλλο. Η σύνδεση του εξωτερικού αρχείου στυλ και της σελίδας HTML γίνεται με την χρήση της HTML ετικέτας <link> στο τμήμα HEAD της HTML σελίδας, όπως στον παρακάτω κώδικα. Η ετικέτα <link> εισάγει στην σελίδα τα στυλ που βρίσκονται στο εξωτερικό αρχείο .css:
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<link type="text/css" rel="STYLESHEET" href="mystyle.css" />
</head>
<body>
Κείμενο...
</body>
</html>
Με τον δεύτερο τρόπο μπορούμε να εισάγουμε τα στυλ, που περιέχονται σε ένα αρχείο .css, μέσα σε όσες σελίδες html επιθυμούμε, δημιουργώντας έτσι ένα ενιαίο στυλ για τις σελίδες αυτές. Παρακάτω θα δοκιμάσουμε στην πράξη πως λειτουργεί αυτός ο τρόπος ορισμού στυλ, χρησιμοποιώντας ένα αρχείο .css, το οποίο περιέχει ένα στυλ, και δύο αρχεία .html, τα οποία κάνουν εισαγωγή το εξωτερικό αρχείο .css.Αποθηκέψτε τα παρακάτω τρία αρχεία σε έναν φάκελο στον υπολογιστή σας:
to_diko_mou_style.cssselida1.htmlselida2.htmlΈπειτα ανοίξτε με τον web browser σας τα δύο αρχεία html (είτε σε δύο διαφορετικά παράθυρα, είτε σε δύο διαφορετικά tabs του browser). Θα παρατηρήσετε ότι και οι δύο σελίδες έχουν χρώμα φόντου μπλε. Ανοίξτε τώρα το αρχείο to_diko_mou_style.css με το Σημειωματάριο (Notepad) των Windows, στο παράθυρο του οποίου πρέπει να βλέπετε τον παρακάτω κώδικα:
body {
background-color: blue;
}
Στον κώδικα αυτόν αλλάξτε το χρώμα blue σε οποιοδήποτε άλλο (μπορείτε να χρησιμοποιήσετε και τιμές RGB των χρωμάτων) και αποθηκέψτε το αρχείο. Επιστρέψτε στο παράθυρο του browser σας και κάντε ανανέωση (reload) και τις δύο σελίδες που ανοίξατε. Αν όλα πήγαν καλά θα πρέπει να άλλαξε το χρώμα του φόντου και των δύο σελίδων.Στο παράδειγμα αυτό, το εξωτερικό αρχείο .css περιέχει μόνο ένα στυλ, το οποίο αναφέρετε στο χρώμα του φόντου της σελίδας. Θα μπορούσαμε στο αρχείο αυτό να προσθέταμε και άλλα στυλ, όπως το χρώμα, την γραμματοσειρά και το μέγεθος των κειμένων που βρίσκεται μέσα στις ετικέτες <em> και </em> ή το χρώμα και το μέγεθος των πλαισίων ( borders) των πινάκων κτλ., αποκτώντας έτσι την δυνατότητα της ομαδικής διαχείρισης πολλών σελίδων.
Η διαφορά μεταξύ του πρώτου και του δεύτερου τρόπου ορισμού στυλ είναι ότι στον πρώτο τρόπο τα στυλ που ορίζονται μέσα στις ετικέτες <style> και </style> εφαρμόζονται μόνο στην σελίδα στην οποία ορίζονται αυτά, ενώ στο δεύτερο τρόπο τα στυλ που ορίζονται στο εξωτερικό αρχείο .css εφαρμόζονται σε όλες τις σελίδες που εισάγουν αυτό το εξωτερικό αρχείο με την ετικέτα <link>
3. Ορισμός στυλ μέσα στις ετικέτες
Μπορούμε να ορίσουμε στυλ στις ετικέτες που επιθυμούμε, χρησιμοποιώντας την κοινή ιδιότητα style της HTML. Η ιδιότητα style μπορεί να μπει σχεδόν σε όλες τις HTML ετικέτες της ενότητας <body>. Με αυτόν τον τρόπο όμως χάνουμε το μεγάλο πλεονέκτημα της CSS, δηλαδή αυτό της εύκολης διαχείρισης των στυλ των σελίδων μας, καθώς στην περίπτωση αυτή το στυλ εφαρμόζεται μόνο στην ετικέτα στην οποία ορίζεται και πουθενά αλλού. Μην χρησιμοποιείτε συχνά τον τρόπο αυτό, ιδιαίτερα σε περιπτώσεις που ξέρετε ότι το στυλ θα το χρησιμοποιήσετε και σε κάποιο άλλο σημείο του site.
