Εισαγωγή στη CSS (Δημιουργία Ιστοσελίδων)

Συνεχίζοντας στο 5ο tutorial της σειράς "Δημιουργία ιστοσελίδων" κάνουμε μια εισαγωγή στη CSS. Τα λεγόμενα Style Sheets(Φύλλα Στυλ). Cascading Style Sheets(Αλληλουχία φύλλων στυλ). Μη σας απασχολεί η ονομασία, είναι όμως σημαντική η CSS και σχετικά εύκολη(αν δεν έχετε στο νου τρομερά πράγματα). Συνδέεται στενά με την HTML/XHTML για δημιουργία όμορφων ιστοσελίδων.

Μέχρι τώρα μιλήσαμε για τη δημιουργία πολύ απλής σελίδας HTML που έχει τίτλο, παραγράφους, links(συνδέσμους) text, συνδέσμους φωτογραφίας, κεφαλίδες, λίστες. Φτιάξαμε και ένα απλό text menu για περιήγηση(navigation) στις σελίδες που φτιάχνουμε και είναι συνδεδεμένες μεταξύ τους.

Δεν είπαμε, σκόπιμα, τίποτα όμως για μέγεθος, χρώματα των γραμμάτων, είδος γραμματοσειράς, background σελίδας(χρώμα ή φωτογραφία), τοποθέτηση αντικειμένων στη σελίδα όπως εμείς θέλουμε, borders, απόσταση μεταξύ παραγράφων, απόσταση επικεφαλίδας και παραγράφου, υπογράμμιση ή μαυρισμα λέξεων και πολλά άλλα τέτοια. Γενικά δεν μιλήσαμε για την παρουσίαση(presentation) μιας ιστοσελίδας.

Η HTML/XHTML ελέγχει τη δομή(structure) μιας ιστοσελίδας. Πράγματα όπως παραγράφους, συνδέσμος κλπ όπως είπαμε. Με τη CSS ελέγχουμε την παρουσίαση.



Μια χρήση της CSS, για παράδειγμα, είναι ως εξής: Αφού φτιάξαμε μια σελίδα HTML(δείτε το άρθρο αυτό για μια απλή σελίδα HTML--αντιγράψτε στο Σημειοματάριο τα μικρά γράμματα που ξεκινάνε με το <html> και καταλήγουν σε </html> αφαιρέστε το <hr /> και σώστε το αρχείο ως index.html. Μετά διπλό κλικ για να ανοίξει με τον browser) η οποία, εντάξει, έχει παραγράφους κλπ, βλέπουμε όμως ότι η παράγραφος απλώνεται τεράστια σε όλο το πλάτος του παραθύρου, πράγμα ενοχλητικό για το διάβασμα (κλικ για μεγέθυνση της εικόνας αριστερά). Επίσης, ξεκινάει κολλητά το "άρθρο" στην κορυφή. Δεν μου αρέσει και η γραμματοσειρά. Το background ...πολύ άσπρο δεν είναι;

Ανοίγουμε πάλι το αρχείο index.html με τον editor(πχ Σημειοματάριο)και γράφουμε τα εξής μετά το </title> και πριν το </head> :



Δεν κάναμε σπουδαία πράματα, δείτε όμως πως άλλαξε η εμφάνιση(κλικ για μεγέθυνση:




Με τον κώδικα CSS που εισάγαμε αλλάξαμε τα

  • Αριστερό, δεξί και πάνω περιθώριο(margin).
  • μέγεθος(font size 12 πίξελ) και τύπο γραμματοσειράς(από serif σε sans-serif).
  • χρώμα background σελίδας
  • χρώμα κειμένου--άσπρο
  • χρώμα επικεφαλίδας--μπλε
Παρατηρείστε ότι ενώ δηλώνουμε να είναι λευκά τα γράμματα(color:white) σε όλο το body, η επικεφαλίδα είναι μπλε. Γιατί; Αν  δεν δηλώναμε color στην επικεφαλίδα h3 όλο το κείμενο μαζί και η επικεφαλίδα θα ήταν άσπρο. Επειδή δηλώνουμε χρώμα στην επικεφαλίδα ΜΕΤΑ τη δήλωση χρώματος στο σώμα(body) το μπλε "αποκτά" προτεραιότητα(takes precedence) έναντι του άσπρου.

Θα συνεχίσουμε με τη CSS...



Licensed under a Creative Commons Attribution-Noncommercial 3.0 Greece License