Σχεδιασμός και Ανάπτυξη Ιστότοπων

Transcript

1 Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής

2 Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί κανόνες σύνταξης CSS Επιλογείς (CSS Selectors) Επιλογείς στοιχείου (element Selectors) Επιλογείς ταυτότητας (id Selectors) Επιλογείς κλάσης (class Selectors) Ομαδοποίηση Επιλογέων (grouping Selectors) CSS Σχόλια (CSS Comments) 2

3 Περιεχόμενα Τρόποι εισαγωγής CSS Εξωτερικό φύλλο στυλ (External style sheet) Εσωτερικό στυλ (Internal style sheet) Ενσωματωμένο φύλλο στυλ (Inline style) Πολλαπλά Φύλλα Στυλ Ιεραρχία (Multiple Style Sheets) Κληρονομικότητα (Inheritance) Έλεγχος εγκυρότητας κώδικα CSS 3

4 Εισαγωγή Τα CSS (Cascading Style Sheets) είναι μια γλώσσα στυλ (style language) που ορίζει με σαφήνεια και ιδιαίτερη ευελιξία τη διάταξη (layout) των HTML εγγράφων. Η HTML καθορίζει τη δόμηση του περιεχόμενου (και τη βασική παρουσίαση) των Web sites μέσω σημασιολογικών ετικετών (επικεφαλίδες, παραγράφους, λίστες, κ.λπ.), ενώ τα CSS ορίζουν «κανόνες» ή «στυλ» για την παρουσίαση κάθε πτυχής ενός εγγράφου HTML. Για παράδειγμα, τα CSS έχουν να κάνουν με γραμματοσειρές (fonts), με χρώματα (colours), με περιθώρια (margins), με εικόνες φόντου (background images) και με πολλά άλλα. Η κατανόηση των CSS απαιτεί φυσικά να υπάρχει και κάποια βασική εμπειρία με την HTML. 4

5 Εισαγωγή Ο κώδικάς των CSS, μπαίνει είτε μέσα σε αρχεία HTML και εκτελείται, μορφοποιώντας έτσι το περιεχόμενο, είτε μέσα σε ξεχωριστά αρχεία με επέκταση.css και συμπεριλαμβάνεται στο HTML αρχείο της ιστοσελίδας. 5 Τα τρία επίπεδα ενός Web Site

6 Πλεονεκτήματα χρήσης των CSS Κάνοντας χρήση των CSS, για τη σημασιολογική παρουσίαση (δηλ. την εμφάνιση και μορφοποίηση) ενός εγγράφου, που είναι γραμμένο σε μια markup language (π.χ. HTML, XML, κ.ά.), o Web developer αποκτά σημαντικά πλεονεκτήματα, όπως: Χρήση του ίδιου στυλ σε πολλές ιστοσελίδες ή και χρήση πολλών διαφορετικών στυλ στην ίδια ιστοσελίδα. Μικρότερο μέγεθος αρχείου, δεδομένου ότι ο κάθε κανόνας μορφοποίησης γράφεται μόνο μια φορά και όχι σε κάθε σημείο που εφαρμόζεται. Πολύ μεγαλύτερη ευελιξία αφού καθιστά εφικτές μορφοποιήσεις, οι οποίες ήταν αδύνατες ή πολύ δύσκολες με την κλασσική HTML. Πιο εύκολη συντήρηση των ιστοσελίδων. 6

7 Πλεονεκτήματα χρήσης των CSS Διαχωρισμό του περιεχομένου του εγγράφου από την παρουσίασή του, συμπεριλαμβανομένων των στοιχείων του, όπως το χρώμα, τις γραμματοσειρές και τη διάταξη (layout) με τον πιο ακριβή έλεγχό της. Προσαρμογή της παρουσίασης σε διαφορετικούς τύπους συσκευών. Καλύτερη πρόσβαση από τις μηχανές αναζήτησης στο περιεχόμενο των ιστοσελίδων. Γρηγορότερο φόρτωμα των ιστοσελίδων, κ.ά. 7

8 Νέα χαρακτηριστικά των CSS3 Η τελευταία γενιά των CSS είναι η CSS3. Χρησιμοποιώντας CSS3 μπορούν να δημιουργηθούν όμορφα εφέ, που με τις κλασικές μεθόδους θα χρειαζόταν περισσότερο κόπο για να παραχθούν, συγγραφή σεναρίων Javascript και περισσότερο γράψιμο κώδικα XHTML/CSS. Τα CSS3 έχουν χωριστεί σε «modules» (μικρά ανεξάρτητα κομμάτια κώδικα) και περιέχουν την «παλιά προδιαγραφή CSS» (η οποία επίσης έχει χωριστεί σε μικρότερα κομμάτια), αλλά και τα νέα επιπρόσθετα modules. Όλες οι νέες ιδιότητες μπορούν να εφαρμοστούν από τους σύγχρονους browsers σε πολύ μεγάλο βαθμό. 3 8

9 Νέα χαρακτηριστικά των CSS3 Κάποια από τα νέα και πιο χρήσιμα χαρακτηριστικά των CSS3, είναι τα εξής: Στρογγυλεμένες γωνίες. Πολλαπλές εικόνες για φόντο. Transitions (σετ κανόνων CSS που επιτρέπουν την αλλαγή τιμών στις ιδιότητες ενός στοιχείου, ομαλά και σταδιακά σε συγκεκριμένο χρόνο με αποτέλεσμα ένα εφέ σαν animation). Χρωματικά μοντέλα, όπως τα HSL, HSLA και το σημαντικότερο απ όλα RGBA (η νέα τιμή «A» στο μοντέλο RGBA αφορά τη διαφάνεια). Εφέ κειμένου (text effects) και στις γραμματοσειρές. Web safe fonts Attribute Matching (ορισμός στυλ σε tags, τα οποία έχουν κοινούς αρχικούς χαρακτήρες μιας συμβολοσειράς). 9

10 Βασικοί κανόνες σύνταξης Ένας «κανόνας» CSS αποτελείται από 2 μέρη: Τον επιλογέα (CSS selector), ο οποίος αφορά το ΤΙ θα μορφοποιηθεί και τις ιδιότητες (CSS properties), οι οποίες αφορούν το ΠΩΣ αυτό θα μορφοποιηθεί. Σύνταξη: Παράδειγμα: επιλογέας p { { color: red; ιδιότητα1: τιμή; text-align: center; ιδιότητα2: τιμή; ιδιότητα3 : τιμή;... 10

11 CSS Επιλογείς (CSS Selectors) Οι επιλογείς CSS χρησιμοποιούνται για να «βρουν» (ή επιλέξουν) τα στοιχεία HTML με βάση το όνομα του στοιχείου, την ταυτότητα (id), την κλάση (class), το χαρακτηριστικό του (attribute), και πολλά άλλα. Επιλογείς στοιχείου (Element Selectors) Επιλογείς Ταυτότητας (id Selectors) Επιλογείς Κλάσης (Class Selectors) Ομαδοποίηση Επιλογέων (Grouping Selectors) 11

12 CSS Selectors Επιλογέας στοιχείου (Element Selector) Ο επιλογέας στοιχείου επιλέγει τα στοιχεία με βάση το όνομά τους. Μπορούν να επιλεγούν όλα τα <p> στοιχεία σε μια σελίδα, όπως στο παράδειγμα, όπου όλα τους θα είναι κεντραρισμένα, με ένα κόκκινο χρώμα κειμένου: p { color: red; text-align: center; 12

13 CSS Selectors Επιλογέας στοιχείου (Element Selector) Παράδειγμα: <!DOCTYPE html> <html> <head> <style type="text/css"> p { color: red; text-align: center; </style> </head> <body> <p>1η Παράγραφος με στυλ</p> <p>2η Παράγραφος με στυλ</p> </body> </html> 13

14 CSS Selectors Επιλογέας ταυτότητας (id Selector) Για να επιλεγεί ένα στοιχείο με συγκεκριμένη ταυτότητα, πρέπει να γράψετε ένα hash (#) χαρακτήρα, ακολουθούμενο από το id (ταυτότητα) του στοιχείου. Ως όνομα_ταυτότητας, όπως και ως όνομα_κλάσης που θα περιγραφεί παρακάτω, μπορεί να χρησιμοποιηθεί οποιοδήποτε όνομα αποτελείται από γράμματα, ψηφία, παύλες, underscore (_) και να ξεκινά με γράμμα. Σύνταξη δήλωσης: Σύνταξη χρήσης: #όνομα_ταυτότητας { <ετικέτα id="όνομα_ταυτότητας"> ιδιότητα: τιμή; Περιεχόμενα με στυλ</ετικέτα> ιδιότητα: τιμή;. 14

15 CSS Selectors Επιλογέας ταυτότητας (id Selector) Η ταυτότητα ενός στοιχείου πρέπει να είναι μοναδική τόσο μέσα σε ένα στοιχείο, όσο και μέσα σε μια σελίδα, έτσι ώστε ο επιλογέας id να χρησιμοποιείται για να επιλέξει ένα μοναδικό στοιχείο. Παράδειγμα: <!DOCTYPE html> <html> <head> <style type="text/css"> #p1 { color: red; text-align: center; </style> </head> <body> <p id="p1">1 ο ΕΠΑΛ Κατερίνης</p> </body> </html> 15

16 CSS Selectors Επιλογέας κλάσης (Class Selector) Υπάρχει η δυνατότητα ορισμού διαφορετικών στυλ, για ίδιες ετικέτες, χρησιμοποιώντας για επιλογέα το όνομα της ετικέτας μαζί με την τιμή που περιέχει η ιδιότητα class. Ο επιλογέας κλάσης, επιλέγει στοιχεία με ένα συγκεκριμένο χαρακτηριστικό κλάσης και για να γίνει αυτό, πρέπει να γραφεί μία τελεία (.), ακολουθούμενη από το όνομα_κλάσης. Σύνταξη δήλωσης:.όνομα_κλάσης{ ιδιότητα: τιμή; ιδιότητα: τιμή; Σύνταξη χρήσης: <ετικέτα class="όνομα_κλάσης"> Περιεχόμενα με στυλ</ετικέτα> 16

17 CSS Selectors Επιλογέας κλάσης (Class Selector) <!DOCTYPE html> <html> <head> <style type="text/css">.center { color: red; text-align: center; </style> </head> <body> <h1 class="center">κόκκινη στοιχισμένη στο κέντρο επικεφαλίδα 1</h1> <p class="center">κόκκινη στοιχισμένη στο κέντρο παράγραφος</p> </body> </html> 17

18 CSS Selectors Επιλογέας κλάσης (Class Selector) Είναι δυνατόν επίσης να καθοριστεί, ότι μόνο συγκεκριμένα στοιχεία HTML θα πρέπει να επηρεαστούν από μια κλάση. Σύνταξη: Παράδειγμα: ετικέτα.όνομα_κλάσης{ p.center { ιδιότητα: τιμή; color: red; ιδιότητα: τιμή; text-align: center; 18

19 CSS Selectors Επιλογέας κλάσης (Class Selector) <!DOCTYPE html> <html> <head> <style type="text/css"> p.center { color: red; text-align: center; </style> </head> <body> <h1 class="center">αυτή η επικεφαλίδα 1 δεν επηρεάζεται</h1> <p class="center">αυτή η παράγραφος έχει κόκκινο χρώμα και κεντρική στοίχιση</p> </body> </html> 19

20 CSS Selectors Επιλογέας κλάσης (Class Selector) Τα στοιχεία HTML μπορεί επίσης να αναφέρονται σε περισσότερες από μία κλάσεις. Στο παρακάτω παράδειγμα, το στοιχείο <p> θα πρέπει να είναι μορφοποιημένο σύμφωνα με την class = "center" και την class = "large": <p class="center large">αυτή η παράγραφος αναφέρεται σε δύο κλάσεις</p> p.center { color: red; text-align: center; p.large { font-size: 250%; 20

21 CSS Selectors Ομαδοποίηση Επιλογέων (Grouping Selectors) Αν υπάρχουν στοιχεία με τους ίδιους ορισμούς στυλ, τότε μπορεί να εφαρμοστούν σε περισσότερες από μια HTML ετικέτες. Αυτό επιτυγχάνεται τοποθετώντας στην θέση του επιλογέα τις ετικέτες χωρίζοντας τες με κόμμα (ισχύει τόσο για επιλογείς ταυτότητας, όσο και επιλογείς κλάσης). Σύνταξη: ετικέτα1, ετικέτα2, ετικέτα3,..., ετικέτα-ν { ιδιότητα: τιμή; ιδιότητα: τιμή; 21

22 CSS Selectors Ομαδοποίηση Επιλογέων (Grouping Selectors) Για παράδειγμα, τα παρακάτω στοιχεία με τους ίδιους ορισμούς στυλ: p{ h1{ h2{ color: red; text-align: center; color: red; text-align: center; color: red; text-align: center; Θα ήταν καλύτερα να ομαδοποιηθούν οι επιλογείς, για την ελαχιστοποίηση του κώδικα. Οι επιλογείς ομάδας, όπως προαναφέρθηκε, διαχωρίζονται μεταξύ τους με κόμμα: p, h1, h2{ color: red; text-align: center; 22

23 CSS Σχόλια (CSS Comments) Σχόλια χρησιμοποιούνται για να εξηγήσουν τον κώδικα της ιστοσελίδας και μπορούν να βοηθήσουν στην επεξεργασία του σε μεταγενέστερη ημερομηνία. Βοηθούν όχι μόνο τον αρχικό δημιουργό της ιστοσελίδας αλλά και οποιονδήποτε άλλον μελλοντικά κληθεί για τη συντήρηση ή τη βελτίωσή της. Τα σχόλια αγνοούνται από τους browsers. Ένα σχόλιο CSS ξεκινά με / * και τελειώνει με * /. Τα σχόλια μπορούν επίσης να εκτείνονται σε πολλές γραμμές: /* Σχόλια σε μία γραμμή */ /* Σχόλια σε πολλές γραμμές */ 23

24 Τρόποι εισαγωγής CSS Υπάρχουν τρεις τρόποι εισαγωγής ενός φύλλου στυλ: Εξωτερικό φύλλο στυλ (External style sheet) Εσωτερικό στυλ (Internal style sheet) Ενσωματωμένο φύλλο στυλ (Inline style) 24

25 Τρόποι εισαγωγής CSS Εξωτερικό φύλλο στυλ (External style sheet) Με ένα εξωτερικό φύλλο στυλ, μπορεί να αλλάξει η εμφάνιση μιας ολόκληρης ιστοσελίδας, αλλάζοντας ένα μόνο αρχείο! Κάθε σελίδα, πρέπει να περιλαμβάνει αναφορά στο εξωτερικό αρχείο φύλλου στυλ, στο εσωτερικό ενός <link> στοιχείου. Το <link> στοιχείο, πηγαίνει μέσα στην ενότητα <head>. Για παράδειγμα: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 25

26 Τρόποι εισαγωγής CSS Εξωτερικό φύλλο στυλ (External style sheet) Ένα εξωτερικό φύλλο στυλ μπορεί να γραφεί σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου. Το αρχείο δεν πρέπει να περιέχει καθόλου ετικέτες HTML και θα πρέπει να αποθηκεύεται με την επέκταση.css. Για παράδειγμα το περιεχόμενο του "mystyle.css" θα μπορούσε να είναι: body { background-color: yellow; p { color: red; text-align: center; 26

27 Τρόποι εισαγωγής CSS Εσωτερικό στυλ (Internal style sheet) Ένα εσωτερικό φύλλο στυλ μπορεί να χρησιμοποιηθεί μόνο εάν μία σελίδα έχει ένα μοναδικό στυλ. Οι εσωτερικές μορφές ορίζονται στο πλαίσιο του στοιχείου <style>, μέσα στην ενότητα <head> της σελίδας HTML. Για παράδειγμα: <head> <style type="text/css"> body {background-color: yellow; p {color: red; text-align: center; h1 {color: blue; margin-left: 30px; </style> </head> 27

28 Τρόποι εισαγωγής CSS Ενσωματωμένο φύλλο στυλ (Inline style) Ένα ενσωματωμένο στυλ μπορεί να χρησιμοποιηθεί για να εφαρμόσει ένα μοναδικό στυλ για ένα μόνο στοιχείο. Για να χρησιμοποιηθεί ένα ενσωματωμένο στυλ, πρέπει να προστεθεί η ιδιότητα style ως παράμετρος του στοιχείου. Η ιδιότητα style μπορεί να περιέχει οποιαδήποτε ιδιότητα CSS. Το παρακάτω παράδειγμα δείχνει πώς μπορεί να αλλάξει το χρώμα και η στοίχιση μιας παραγράφου: <p style="color: red; text-align: center;">this is a paragraph</p> Ένα ενσωματωμένο στυλ χάνει πολλά από τα πλεονεκτήματα των CSS (με την ανάμιξη του περιεχομένου με την παρουσίαση). Χρησιμοποιήστε αυτήν τη μέθοδο με φειδώ! 28

29 Πολλαπλά Φύλλα Στυλ - Ιεραρχία (Multiple Style Sheets) Τα ενσωματωμένα, τα εσωτερικά και τα εξωτερικά φύλλα στυλ μπορούν να χρησιμοποιηθούν μόνα τους ή σε συνδυασμό μεταξύ τους. Ενώ καλύτερη πρακτική είναι η χρήση εξωτερικών φύλλων στυλ, υπάρχουν περιπτώσεις όπου μια άλλη επιλογή καθίσταται αναγκαία. Όταν πολλαπλοί μέθοδοι CSS είναι σε χρήση, σε κάθε μέθοδο έχει δοθεί διαφορετική προτεραιότητα. Τα ενσωματωμένα φύλλα στυλ θα αντικαταστήσουν τόσο τα εσωτερικά όσο και τα εξωτερικά φύλλα στυλ. Τα εσωτερικά φύλλα στυλ θα υπερισχύσουν των εξωτερικών φύλλων στυλ (αν δηλωθούν μετά από αυτά στο <head>), αλλά θα παρακαμφθούν από τα ενσωματωμένα φύλλα στυλ. Τα εξωτερικά φύλλα στυλ θα αντικατασταθούν και από τα δύο, ενσωματωμένα και εσωτερικά φύλλα στυλ. 29

30 Πολλαπλά Φύλλα Στυλ - Ιεραρχία (Multiple Style Sheets) Ένας καλός εμπειρικός κανόνας είναι: «Η εγγύτητα του κώδικα CSS στον κώδικα HTML καθορίζει την προτεραιότητα». 30 Η ιεραρχία των CSS

31 Πολλαπλά Φύλλα Στυλ - Ιεραρχία (Multiple Style Sheets) Αν μερικές ιδιότητες έχουν ορισθεί για τον ίδιο επιλογέα (στοιχείο) σε διαφορετικά φύλλα στυλ, θα χρησιμοποιηθεί η τιμή από την τελευταία ανάγνωση φύλλου στυλ. Για παράδειγμα, ας υποτεθεί ότι ένα εξωτερικό φύλλο στυλ έχει το ακόλουθο στυλ για το στοιχείο <p>: p {color: red; text-align: center; Στη συνέχεια, ας υποτεθεί ότι ένα εσωτερικό φύλλο στυλ έχει επίσης το ακόλουθο στυλ για το στοιχείο <p>: p {color: blue; text-align: justify; 31

32 Πολλαπλά Φύλλα Στυλ - Ιεραρχία (Multiple Style Sheets) Αν το εσωτερικό φύλλο στυλ ορίζεται μετά την σύνδεση με το εξωτερικό φύλλο στυλ, τα <p> στοιχεία θα είναι «μπλε» με πλήρη στοίχιση, υπερισχύει δηλαδή το εσωτερικό: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style type="text/css" > p {color: blue; </style> </head> text-align: justify; 32

33 Πολλαπλά Φύλλα Στυλ - Ιεραρχία (Multiple Style Sheets) Ωστόσο, εάν το εσωτερικό στυλ ορίζεται πριν από τη σύνδεση με το εξωτερικό φύλλο στυλ, υπερισχύει το 2 o και τα <p> στοιχεία θα είναι «κόκκινα» με στοίχιση στο κέντρο: <head> <style type="text/css" > p {color: blue; </style> text-align: justify; <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 33

34 Κληρονομικότητα (Inheritance) Όταν εφαρμόζεται μια ιδιότητα CSS σε ένα στοιχείο, μπορεί να κληρονομηθεί και στα στοιχεία απογόνους του ή μπορεί και να μην κληρονομηθεί, αναλόγως την ιδιότητα. H κληρονομικότητα αποτρέπει ορισμένες ιδιότητες από το να έχουν δηλωθεί ξανά και ξανά σε ένα φύλλο στυλ. Αυτό επιτρέπει στους προγραμματιστές να γράφουν λιγότερο κώδικα CSS, οι χρήστες να φορτώνουν τις σελίδες πιο γρήγορα στο browsers τους και οι πελάτες να εξοικονομούν χρήματα αφού μειώνεται το κόστος ανάπτυξης ενός web site. 34

35 Κληρονομικότητα (Inheritance) Ιδιότητες που κληρονομούνται είναι οι παρακάτω: color font (και οι σχετικές ιδιότητες) letter-spacing line-height list-style (και οι σχετικές ιδιότητες) text-align text-indent text-transform visibility white-space word-spacing 35

36 Κληρονομικότητα (Inheritance) Ιδιότητες που ΔΕΝ κληρονομούνται είναι οι παρακάτω: background (και οι σχετικές ιδιότητες) text-decoration border (και οι σχετικές ιδιότητες) vertical-align display z-index float και clear height και width margin (και οι σχετικές ιδιότητες) min- και max-height και -width outline overflow padding (και οι σχετικές ιδιότητες) position (και οι σχετικές ιδιότητες) 36

37 Κληρονομικότητα (Inheritance) Αν οριστεί μέσω κάποιου κανόνα CSS μια διαφορετική τιμή για μια συγκεκριμένη ιδιότητα, θα εφαρμοστεί αυτή η τιμή και όχι η κληρονομημένη (inherited). Όταν είναι επιθυμητό ένα στοιχείο, να αποκτήσει για μια ιδιότητα την τιμή της ιδιότητας αυτής του γονέα του, ενώ αυτή κανονικά δεν κληρονομείται, μπορεί ως τιμή της ιδιότητας για το στοιχείο αυτό να οριστεί η inherit. 37

38 Κληρονομικότητα (Inheritance) Παράδειγμα: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>δοκιμή</title> <style type="text/css"> div{ border: solid 2px blue; color: red; p{ border: inherit; font-weight: bold; </style> </head> <body> <div> <h3>1ο ΕΠΑΛ Κατερίνης</h3> <p style="background: yellow;"> Τομέας Πληροφορικής </p> </div> </body> </html> 38

39 Έλεγχος εγκυρότητας κώδικα CSS Για τον έλεγχο της εγκυρότητας του κώδικα CSS, μπορεί να γίνει χρήση ενός από τα πολλά ειδικά sites που υπάρχουν στο Διαδίκτυο, όπως για παράδειγμα το site του W3C, που είναι ο υπεύθυνος οργανισμός για την εξέλιξη των CSS: Κατά την επίσκεψη στο site αυτό, υπάρχει η δυνατότητα επιλογής του τρόπου ελέγχου της εγκυρότητας του κώδικά, μέσα από τις τρεις επιλογές: Πληκτρολογώντας το URI (Uniform Resource Identifier) στο κατάλληλο πλαίσιο. Ανεβάζοντας το html αρχείο για έλεγχο. Άμεσα, επικολλώντας τον κώδικα html στο κατάλληλο πλαίσιο. 39

40 Έλεγχος εγκυρότητας κώδικα CSS 40 Άμεσος έλεγχος εγκυρότητας κώδικα CSS

41 Έλεγχος εγκυρότητας κώδικα CSS Αποτελέσματα ελέγχου εγκυρότητας κώδικα CSS 41

42 Βιβλιογραφία ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ - Η Βίβλος των CSS - Μέρος 1 Εισαγωγή ( CSS-Bible/Tutorials-CSS-Bible-1.html) W3schools.com ( Εισαγωγή στο CSS: Μιχαήλια Κομβούτη Βέρου WLearn ( Hiremy{code ( Εισαγωγή στο CSS: Μιχαήλια Κομβούτη Βέρου learn.oneandeight ( 42