Πριν δειτε τη CSS, καλο ειναι να δειτε πρωτα το post της HTML
εδω
Η 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) έναντι του άσπρου.
Εικονα css3 απο https://en.wikipedia.org/wiki/CSS#/media/File:CSS3_logo_and_wordmark.svg
Άρθρο απο: https://www.sotostips.gr/2010/02/css.html
Δεν υπάρχουν σχόλια: