Δευτέρα 31 Δεκεμβρίου 2012

DreamWeaver Μέρος VI: CSS

CSS (Cascading Style Sheets)

Τα CSS είναι μια συλλογή κανόνων μορφοποίησης που καθορίζουν τον τρόπο εμφάνισης του περιεχομένου του website. Ορίζουν δηλαδή ένα σύνολο από γνωρίσματα τα οποία μπορεί να έχει το επιλεγμένο κείμενο. Αν για παράδειγμα θέλετε όλοι οι σύνδεσμοι που έχετε στην σελίδα σας να εμφανίζονται με κόκκινα γράμματα, υπογραμμισμένα και με την γραμματοσειρά Tahoma, τότε μπορείτε αντί να καθορίζετε όλα αυτά τα στοιχεία κάθε φορά που εισάγετε έναν σύνδεσμο, να δημιουργήσετε ένα CSS και να το εφαρμόσετε στην σελίδα σας. Με τον ίδιο τρόπο μπορείτε για παράδειγμα να ορίσετε τα χαρακτηριστικά και για όσα κείμενα θα είναι γραμμένα με κεφαλίδα (heading) μεγέθους 3. Μέσω των CSS εξοικονομείτε χρόνο αλλά ταυτόχρονα γλιτώνετε και κούραση καθώς θα αποφεύγετε να κάνετε συνεχώς τις ίδιες εργασίες μορφοποίησης κειμένου. Με λίγα λόγια, τα CSS παρέχουν μεγάλη ευελιξία στον τρόπο ελέγχου της παρουσίας των σελίδων ορίζοντας τις γραμματοσειρές, τα μεγέθη τους, τα χρώματα και πλήθος άλλων χαρακτηριστικών. Κατά κανόνα, τα CSS αποθηκεύονται σε ξεχωριστά αρχεία με τα οποία συνδέονται οι σελίδες HTML.

Για να συνδέσετε την σελίδα σας με κάποιο εξωτερικό CSS, ανοίξτε το Styles Panel (Window > CSS Styles), πατήστε το κουμπί Attach Style Sheet και ψάξτε για το αρχείο CSS, προσθέτοντας μετά το URL του.
Για να επεξεργαστείτε ένα ήδη υπάρχον CSS μπορείτε είτε να πειράξετε τον κώδικα του από το Code View, είτε να ανοίξετε το Styles Panel, να επιλέξετε το style που θέλετε να επεξεργαστείτε και να πατήσετε το κουμπί Edit Style Sheet . Για να εφαρμόσετε ένα CSS σε μια σελίδα σας, τοποθετήστε το κέρσορα στην παράγραφο την οποία θέλετε να εφαρμοστεί το CSS και επιλέξτε το style που θέλετε από το Styles popup menu του Properties Inspector.

Το CSS εφαρμόζει το εαυτό του σε μια σελίδα, μέσω επιλογέων CSS (CSS selectors). Υπάρχουν πολλά είδη selectors μεταξύ των οποίων selectors της HTML, όπως οι p,h1,h2,strong,ul, selectors για links, όπως οι a:link, a:visited, a:hover, a:active, selectors ομαδοποίησης οι οποίοι ομαδοποιούν πολλούς selectors μαζί σε μια δήλωση, όπως οι p, ul, table, κ.α.