2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται η αλλαγή διαφόρων μορφολογικών στοιχείων μιας ή περισσότερων ιστοσελίδων με οργανωμένο τρόπο. Ως στοιχείο θεωρείται οποιοδήποτε μέρος της HTML σελίδας, όπως κείμενο, εικόνες, λίστες, παράγραφοι, πίνακες κλπ. Η χρήση CSS διευκολύνει την αλλαγή εμφάνισης σε διάφορα σημεία μιας σελίδας. Για παράδειγμα, αν σε μια ιστοσελίδα, χωρίς χρήση CSS, χρειαστεί να μεταβληθεί το χρώμα του φόντου σε όλες τις επικεφαλίδες θα πρέπει αυτό να γίνει μεμονωμένα σε κάθε επικεφαλίδα. Αντίθετα, σε μια σελίδα με χρήση CSS θα χρειαστεί να αλλαχθεί το χρώμα μόνο μία φορά στο αντίστοιχο κομμάτι που καθορίζει το χρώμα στις επικεφαλίδες. Εισαγωγή CSS σε ιστοσελίδες Η ενσωμάτωση ενός αρχείου.css σε μία ιστοσελίδα html γίνεται με την χρήση της ετικέτας <link> όπως φαίνεται παρακάτω <html> <head>... <link href="stylesheets/my_style.css" rel="stylesheet" type="text/css"> </head>... </html> Ο κώδικας αυτός τοποθετείται στο τμήμα <head></head>. Κάθε φορά ιδιότητα href χρειάζεται να ρυθμίζεται έτσι ώστε να αντιστοιχεί στο path στο οποίο βρίσκεται το.css αρχείο. Σύνταξη CSS Η σύνταξη κάθε στοιχείου μορφοποίησης σε ένα αρχείο.css αποτελείται από τρία στοιχεία: το όνομα του στοιχείου τις ιδιότητες του στοιχείου τις τιμές (values) των ιδιοτήτων του στοιχείου με μορφή όπως φαίνεται παρακάτω στοιχείο { ιδιότητα_1: τιμή_1; ιδιότητα_2: τιμή_2;... ιδιότητα_n: τιμή_n; Το στοιχείο μπορεί να είναι μια ετικέτα της HTML, μία κλάση ή μία ιδιότητα στην οποία εφαρμόζεται η αντίστοιχη μορφοποίηση. Μια ιδιότητα μπορεί να έχει μια ή περισσότερες τιμές, σύμφωνα με τους κανόνες του προτύπου της CSS. Αρκετές φορές χρειάζεται να χρησιμοποιηθεί η ίδια μορφοποίηση για περισσότερα στοιχεία. Σε αυτή την περίπτωση μπορεί να γίνει ομαδοποίηση των στοιχείων όπως φαίνεται παρακάτω
στοιχείο_1, στοιχείο_2, στοιχείο_3,..., στοιχείο_n { ιδιότητα: τιμή; Κάποιες φορές χρειάζεται να δημιουργήσουμε μια μορφοποίηση η οποία θα είναι ανεξάρτητη από την ετικέτα. Σε αυτή την περίπτωση, δημιουργούμε μία κλάση ή ιδιότητα της ετικέτας η οποία μπορεί να εισαχθεί σε συγκεκριμένες ή διαφορετικές ετικέτες. Μία μορφοποίηση σε μορφή κλάσης φαίνεται παρακάτω.στοιχείο_class { ιδιότητα: τιμή; Η κλάση ενσωματώνεται ως ιδιότητα στην αντίστοιχη ετικέτα. Αντίστοιχα μια μορφοποίηση με την μορφή ιδιότητας id φαίνεται παρακάτω #στοιχείο_id { ιδιότητα: τιμή; Το στοιχείο id ενσωματώνεται ως ιδιότητα στην αντίστοιχη ετικέτα. Φόντο Το φόντο ενός στοιχείου ορίζεται με χρήση των CSS ιδιοτήτων που ξεκινούν με background-. Οι ιδιότητες αυτές είναι οι εξής: background-color background-image background-repeat background-attachment background-position π.χ. το χρώμα του φόντου ορίζεται ως body { background-color: #FFFFFF; Το χρώμα μπορεί να οριστεί με τρεις διαφορετικούς τρόπους: με το όνομα του χρώματος, (red, blue, ) με την τιμή RGB (rgb(0,255,255)) με χρήση του δεκαεξαδικού συστήματος (hex) (#66FF33) Γραμματοσειρά Η γραμματοσειρά ορίζεται με χρήση CSS ιδιοτήτων που ξεκινούν με font-. Οι ιδιότητες αυτές είναι οι εξής: font-family font-style font-variant font-weight font-size/line-height
π.χ. το χρώμα του φόντου ορίζεται ως body { background-color: #FFFFFF; Το χρώμα μπορεί να οριστεί με τρεις διαφορετικούς τρόπους: με το όνομα του χρώματος, (red, blue, ) με την τιμή RGB (rgb(0,255,255)) με χρήση του δεκαεξαδικού συστήματος (hex) (#66FF33) π.χ. μία σύνταξη για μορφοποίηση κειμένου θα μπορούσε να είναι η εξής.main_letters { font-family: 'Cambria'; font-size: 15px; color: #FF0000; Box model Κάθε στοιχείο μιας HTML σελίδας (π.χ. κείμενο, εικόνες, λίστες, παράγραφοι, πίνακες, ) μπορεί να οριστεί με την μορφή ενός μοντέλου πλαισίου που ονομάστηκε (box model) του οποίου οι ιδιότητες φαίνονται στο παρακάτω Οι διαστάσεις ενός στοιχείου ορίζονται από τις CSS ιδιότητες width και height. Οι υπόλοιπες ιδιότητες του μοντέλου που ορίζουν σχετικές ιδιότητες του πλαισίου είναι Margin (περιθώριο μεταξύ του πλαισίου και των γειτονικών στοιχείων) Border (το όριο του πλαισίου) Padding (το περιθώριο μεταξύ του περιεχομένου του στοιχείου και του πλαισίου του Ένα παραδειγμα με χρήση ιδιοτήτων CSS φαίνεται παρακάτω div.example { width: 340px; height: 55px; border: 5px solid yellow; padding: 15px; margin: 20px;
Θέση στοιχείων Η θέση ή η σχετική θέση ενός στοιχείου σε σχέση με γειτονικά στοιχεία δίνεται μέσω αρκετών ιδιοτήτων CSS. Θα περιγραφούν οι κυριότερες από αυτές στον παρακάτω πίνακα Ιδιότητα Τιμές Περιγραφή display position none: το στοιχείο δεν εμφανίζεται καθόλου block: το στοιχείο εμφανίζεται σαν μπλοκ αφήνοντας μια γραμμή κενή πριν και μετά το στοιχείο αυτό none inline: το στοιχείο εμφανίζεται κανονικά (default) χωρίς την κενή γραμμή πριν και block μετά το στοιχείο αυτό inline list-item: το στοιχείο εμφανίζεται σαν επιλογή λίστας list-item table: το στοιχείο εμφανίζεται σαν πίνακα (όπως <table>) αφήνοντας μια γραμμή table κενή πριν και μετά το στοιχείο αυτό inline-table inline-table: το στοιχείο εμφανίζεται σαν πίνακα (όπως <table>) χωρίς την κενή table-row-group γραμμή πριν και μετά το στοιχείο αυτό table-headergroup <tbody>) table-row-group: το στοιχείο εμφανίζεται σαν ομάδα γραμμών ενός πίνακα (όπως table-footer-group table-header-group: το στοιχείο εμφανίζεται σαν ομάδα γραμμών ενός πίνακα table-row (όπως <thead>) table-columngroup (όπως <tfoot>) table-footer-group: το στοιχείο εμφανίζεται σαν ομάδα γραμμών ενός πίνακα table-column table-row: το στοιχείο εμφανίζεται σαν γραμμή πίνακα (όπως <tr>) table-cell table-column-group: το στοιχείο εμφανίζεται σαν ομάδα στυλών πίνακα (όπως table-caption <colgroup>) table-column: το στοιχείο εμφανίζεται σαν μια στήλη κελιών πίνακα (όπως <col>) table-cell: το στοιχείο εμφανίζεται σαν ένα κελί πίνακα (όπως <td> και <th>) table-caption: το στοιχείο εμφανίζεται σαν τίτλος πίνακα (όπως <caption>) Static: το στοιχείο τοποθετείται με βάση την κανονική "ροή" των περιεχομένων της σελίδας. static relative: καθορίζει την σχετική θέση μεταξύ των στοιχείων relative absolute: ορίζει την ακριβή θέση που θα εμφανιστεί το στοιχείο ανεξάρτητα την absolute κανονική θέση του μέσα στην σελίδα. fixed fixed: λειτουργεί όπως ακριβώς η τιμή absolute, με την διαφορά ότι σε περίπτωση που το περιεχόμενο της σελίδας σκρολάρει, το στοιχείο παραμένει σταθερό Σύνδεσμοι Οι σύνδεσμοι μπορούν να ρυθμιστούν με χρήση ιδιοτήτων CSS. Οι σύνδεσμοι έχουν τις ιδιότητες link: σύνδεσμος o οποίος δεν έχει επισκεφτεί ο χρήστης στο παρελθόν visited: σύνδεσμος που έχει επισκεφτεί ο χρήστης στο παρελθόν hover: σύνδεσμος στον οποίον ο χρήστης έχει τον δείκτη του ποντικιού του επάνω απο αυτόν active: σύνδεσμος όταν ο χρήστης κάνει κλικ και δεν έχει ακόμη ελευθερώσει του κουμπί του ποντικιού του
παραδείγματα χρήσης ιδιοτήτων CSS για συνδέσμους φαίνονται παρακάτω a:link { color: blue; font-weight : bold; font-size : 14px; text-decoration: underline;; Δοκίμασε το a:hover { color: navy; font-weight : bold; font-size : 14px; text-decoration: none;