CSS – Cascading Style Sheets (Φύλλα επάλληλων στυλ) Κανόνες που καθορίζουν τη μορφή και τη διάταξη των στοιχείων των σελίδων (X)HTML Σκοπός είναι ο διαχωρισμός.

Παρουσίαση με θέμα: "CSS – Cascading Style Sheets (Φύλλα επάλληλων στυλ) Κανόνες που καθορίζουν τη μορφή και τη διάταξη των στοιχείων των σελίδων (X)HTML Σκοπός είναι ο διαχωρισμός."— Μεταγράφημα παρουσίασης:

1 CSS – Cascading Style Sheets (Φύλλα επάλληλων στυλ) Κανόνες που καθορίζουν τη μορφή και τη διάταξη των στοιχείων των σελίδων (X)HTML Σκοπός είναι ο διαχωρισμός του κώδικα περιεχομένου (,, κ.λ.π.) από τον κώδικα μορφοποίησης ( κ.λ.π.) Αποθήκευση σε εξωτερικά αρχεία *.css για εφαρμογή σε πολλές σελίδες

2 CSS – Cascading Style Sheets (Εφαρμογή κανόνων στυλ) Προτεραιότητες: 1. στυλ γραμμής (inline style) 2. εσωτερικά στυλ (στην ετικέτα 3. εξωτερικά στυλ (σε αρχεία *.css) 4. εξορισμού επιλογές φυλλομετρητή

3 CSS – Cascading Style Sheets (Σύνταξη κανόνων στυλ) επιλογέας {ιδιότητα: τιμή} επιλογέαςτο στοιχείο(α) που θα μορφοποιηθεί ιδιότηταη ιδιότητα που θα αλλάξει (π.χ. το χρώμα) τιμήη τιμή που θα πάρει η ιδιότητα

4 CSS – Cascading Style Sheets (Παραδείγματα κανόνων στυλ) επιλογέας {ιδιότητα: τιμή} body {color: black}χρώμα κειμένου p {font-family: "sans serif"}τιμή δύο λέξεων σε εισαγωγικά (τύπος γραμματοσειράς) p {text-align:center;color:red}ταυτόχρονη ρύθμιση πολλών ιδιοτήτων (στοίχιση και χρώμα κειμένου) p { text-align: center; color: black; font-family: arial } πιο ευανάγνωστη σύνταξη κανόνων για ρύθμιση πολλών ιδιοτήτων (στοίχιση, χρώμα, τύπος γραμματοσειράς)

5 CSS – Cascading Style Sheets (Ομαδοποίηση επιλογέων) π.χ. h1, h2, h3, h4, h5, h6 { color: green } πολλαπλοί επιλογείς χωρισμένοι με κόμμα

6 CSS – Cascading Style Sheets (Επιλογέας τάξης – class) Επιλογέας τάξης – class p.right {text-align: right} p.center {text-align: center} Τίτλος Αυτή η παράγραφος θα είναι στοιχισμένη δεξιά. Αυτή η παράγραφος θα είναι κεντραρισμένη.

7 CSS – Cascading Style Sheets (Επιλογέας τάξης – class) Επιλογέας τάξης – class.center {text-align: center} Αυτός ο τίτλος θα είναι κεντραρισμένος Αυτή η παράγραφος θα είναι κεντραρισμένη

8 CSS – Cascading Style Sheets (Εφαρμογή στυλ σε στοιχείο με συγκεκριμένη τιμή ιδιότητας) Επιλογέας τάξης – class input [type=“text”] {background-color: blue} Όνομα χρήστη: Κωδικός πρόσβασης: </form

9 CSS – Cascading Style Sheets (Επιλογέας αναγνωριστικού – id) Επιλογέας τάξης – class h1#title1 {text-align: center; color: blue} p#prg1 {color: red} Αυτός ο τίτλος θα είναι μπλε και κεντραρισμένος Αυτή η παράγραφος θα είναι κόκκινη

10 CSS – Cascading Style Sheets (Σχόλια) /* Αυτό είναι σχόλιο. Τα σχόλια αγνοούνται από το φυλλομετρητή */ p { text-align: center; /* Κι αυτό είναι σχόλιο */ color: black; font-family: arial }