Πάντειο Πανεπιστήμιο Κοινωνικών και Πολιτικών Επιστημών ΠΜΣ Δυνητικές κοινότητες Μάθημα: Εισαγωγικά Θέματα W.W.W. CSS CASCADING STYLE SHEETS ΑΠΟΔΟΣΗ ΕΚΦΡΑΣΤΙΚΟΥ.

Παρουσίαση με θέμα: "Πάντειο Πανεπιστήμιο Κοινωνικών και Πολιτικών Επιστημών ΠΜΣ Δυνητικές κοινότητες Μάθημα: Εισαγωγικά Θέματα W.W.W. CSS CASCADING STYLE SHEETS ΑΠΟΔΟΣΗ ΕΚΦΡΑΣΤΙΚΟΥ."— Μεταγράφημα παρουσίασης:

1 Πάντειο Πανεπιστήμιο Κοινωνικών και Πολιτικών Επιστημών ΠΜΣ Δυνητικές κοινότητες Μάθημα: Εισαγωγικά Θέματα W.W.W. CSS CASCADING STYLE SHEETS ΑΠΟΔΟΣΗ ΕΚΦΡΑΣΤΙΚΟΥ ΥΦΟΥΣ ΣΤΙΣ ΙΣΤΟΣΕΛΙΔΕΣ ΔΗΜΙΟΥΡΓΙΑ ΦΟΡΜΑΣ ΣΤΗΝ HTML Κοσσυβάκη Αλίκη 3/2/2005

2 Η CSS είναι μία γλώσσα μορφοποίησης ιστοσελίδων που δημιουργήθηκε από το W3C Καθορίζει πώς θα εμφανίζονται τα στοιχεία της HTML. Προστέθηκε σ’ αυτή για να λύσει το πρόβλημα της διαφοροποίησης της λειτουργίας της html μεταξύ γλώσσας για το περιεχόμενο μιας ιστοσελίδας από γλώσσα για την μορφή της. Περιεχόμενο (html) Μορφή (css)

3 Αποθήκευση των style sheets και προτεραιότητα στην εφαρμογή τους Τα στυλ αποθηκεύονται κανονικά σε Style sheets. Ορίζονται για να εμφανιστούν κατά προτεραιότητα (cascading order) εσωτερικά σε μεμονωμένο στοιχείο της html εσωτερικά στην ετικέτα του html εγγράφου εξωτερικά και πρέπει να υποστηρίζονται και από τον browser προκειμένου να εμφανιστούν Netscape 4.0 (ως επί το πλέον) Internet Explorer 4.0 (ως επί το πλείστον)

4 Tι ιδιότητες μπορούμε να ρυθμίσουμε με την CSS Φόντο (χρώμα, εικόνα, θέση) Κείμενο (χρώμα, κατεύθυνση, στοίχιση, διακόσμηση) Γραμματοσειρά (οικογένεια, μέγεθος, ιδιαιτερότητες) Όρια (πλάτος, στυλ, χρώμα) Περιθώρια (μέγεθος) Padding (διάστημα ανάμεσα στο όριο / γραμμή και το περιεχόμενο) (μέγεθος) Λίστες (θέση, στυλ)

5 Σύνταξη CSS Επιλογέας (selector) html (στοιχείο/ tag) Ιδιότητα (property, attribute) Τιμή (value) π.χ. α) body {color: black} β) p { color: red; font-family: “Comic-Sans MS”; text-align: left }

6 Παράδειγμα (β) p { color: red; font-family: "Comic Sans MS"; text-align: left } Με αυτό το έγγραφο προσπαθώ να αποδώσω το παράδειγμα. Αν το κατάφερα χειροκροτήστε γιατί μου πήρε πολύ ώρα να δώσω για δεύτερη φορά σωστή εντολή σε css.

7 …που μεταφράζεται σε…

8 Εναλλακτικές συντάξεις Ομαδοποίηση Επιλογέας κλάσης (και στο “head” του html εγγράφου και στο σημείο που κατά την καθαυτό html σύνταξη αναφερόμαστε στην/στις ιδιότητα/-ες στην/στις οποία/ -ες ορίζουμε χαρακτηριστικό). Επιλογέας ταυτότητας (id)

9 Παράδειγμα ομαδοποίησης h1,h2,h3,h4,h5 {color: blue} h1,h2,h3,h4,h5 {color: blue} ΚΑΛΗΜΕΡΑ ΚΑΛΟ ΜΕΣΗΜΕΡΙ ΚΑΛΗΣΠΕΡΑ ΚΑΛΟ ΒΡΑΔΥ ΚΑΛΗΝΥΧΤΑ

10 Χαιρετισμοί.html

11 Παράδειγμα σύνταξης με επιλογέα κλάσης (α) διαφορετικά στυλ για στοιχεία ίδιου τύπου p. bold {font-weight: bold} p. italics {font-style: italics} ↓ Μία παράγραφος γραμμένη με έντονα γράμματα Μία παράγραφος γραμμένη με πλάγια γράμματα

12 Παράδειγμα σύνταξης με επιλογέα κλάσης (β) ίδιο στυλ για όλα τα στοιχεία του εγγράφου της ίδιας κλάσης.right {text-align: right} ↓ Mία επικεφαλίδα στοιχισμένη δεξιά Mία παράγραφος στοιχισμένη δεξιά

13 Παράδειγμα επιλογέα ταυτότητας Σύνταξη: οποιοδήποτε στοιχείο#id του στοιχείου (μοναδικό) π.χ. p#para1{color: red; text-align: center} → Αυτή η παράγραφος θα εμφανιζόταν (αν έμπαινε κανένας στον κόπο να την βάλει σε έγγραφο html) κόκκινη και στοιχισμένη στο κέντρο.

14 Περισσότερες δυνατότητες της CSS Έλεγχος των διαστάσεων στοιχείων και των διάστιχων Έλεγχος του τρόπου έκθεσης ενός στοιχείου Τοποθέτηση (σχετική και απόλυτη) Πρόσθεση εφέ σε μερικούς επιλογείς (υπερσύνδεση, pseudo-class) ή μέρος αυτών (αρχή σειράς, λέξης, παραγράφου, pseudo-element) Πρόβλεψη για την παρουσίαση των εγγράφων σε άλλες μορφές (σύστημα Braille, ακουστική παρουσίαση, εκτύπωση), που, όμως, δεν φαίνεται να υποστηρίζεται ιδιαίτερα από τους browser του internet NN και IE. Τεράστιο αριθμό χρωμάτων [rgb (0-255,0-255,0-255)] Παράδειγμα ορισμού χρώματος: 1.red 2.rgb (255,0,0) 3.#FF0000 CSS2 = κόκκινο

15 Παράδειγμα σύνταξης για τον ορισμό χρώματος body {background-color: rgb(125,50,25)} h1,h2,h3,h4,h5 {color: blue} ΚΑΛΗΜΕΡΑ ΚΑΛΟ ΜΕΣΗΜΕΡΙ ΚΑΛΗΣΠΕΡΑ ΚΑΛΟ ΒΡΑΔΥ ΚΑΛΗΝΥΧΤΑ

16 …δηλαδή…

17 Παράδειγμα ιστοσελίδας σε CSS: εισαγωγή περιθωρίων

18 Παραδείγματα μορφοποιήσεων

19

20

21 Παράδειγμα σύνταξης ιστοσελίδας body {background-color: cornsilk} h1 {font-style: oblique} p#p1 {font-style: italic; font-weight: lighter} p#p2 {font-stretch: ultra-expanded; font-weight: bold} H μπαλάντα των αισθήσεων και των παραισθήσεων Σαν παλιό σινεμά και σαν τη Χαλιμά που μιλάει με τα παιδιά, σου κρύβω την αλήθεια κι αφήνω από τα στήθια μου να βγουν παραμύθια για εκείνους που αγαπούν... Σ'αγκαλιάζω στο σκοτάδι...σε τυλίγω μ'ένα χάδι...Τώρα είμαι γυμνός, νιώθω σαν Θεός, φωτεινός, δυνατός...

22 τουτέστιν.html

23 Όποιος ενδιαφέρεται για περισσότερα και λεπτομερέστερα μπορεί να κοιτάξει την ηλεκτρονική διεύθυνση www.w3schools.com/css/default.asp ευχαριστώ