Λύσεις — Εφαρμογή 7 · Χρησιμοποιώντας στυλ… εξωτερικό (σελ. 39–41) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 7 · Χρησιμοποιώντας στυλ… εξωτερικό (σελ. 39–41)

Ο κώδικας-λύση (εξωτερικό CSS + φωλιασμένη λίστα) και ασκήσεις (link, σειρά προτεραιότητας cascade, list-style/text-transform). Γλώσσες HTML5+CSS.

Ο κώδικας-λύση της Εφαρμογής 7

Ερώτηση: Συνδέστε ένα εξωτερικό αρχείο CSS και φτιάξτε φωλιασμένη λίστα με κουκκίδες τύπου κύκλου.

Απάντηση:

• HTML (index.html):

<head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="p07.css"></head>
<body>
  <ul><li>Φρούτα<ul><li>Μήλο</li><li>Πορτοκάλι</li></ul></li><li>Λαχανικά</li></ul>
</body>

• Αρχείο p07.css:

@charset "UTF-8";
/* κανόνες λίστας */
ul li { list-style: circle; }

Σύνοψη: (ενδεικτική) HTML: <link rel="stylesheet" href="p07.css"> + φωλιασμένη <ul>. CSS αρχείο: @charset + ul li { list-style: circle; }.

Κριτήρια αξιολόγησης:

• Κριτήριο: σωστό <link>, ξεχωριστό .css με @charset & κανόνα, φωλιασμένη λίστα.

Εξωτερικό stylesheet & όφελος

Ερώτηση: Πώς συνδέουμε ένα εξωτερικό φύλλο στυλ και ποιο το πλεονέκτημα;

Απάντηση:

• Με το στοιχείο <link rel="stylesheet" type="text/css" href="αρχείο.css"> στο head.
• Πλεονέκτημα: το ίδιο αρχείο CSS χρησιμοποιείται από πολλές σελίδες / όλο τον ιστότοπο (κοινό «θέμα»)· αλλάζοντας λίγους κανόνες σε ένα αρχείο, αλλάζει η εμφάνιση όλων.

Σύνοψη: (ενδεικτική) Με <link rel="stylesheet" href="...css">. Όφελος: κοινό «θέμα» για πολλές σελίδες — μία αλλαγή αλλάζει τα πάντα.

Κριτήρια αξιολόγησης:

• Κριτήριο: σωστό <link> + όφελος επαναχρησιμοποίησης/θέματος.

Σειρά προτεραιότητας

Ερώτηση: Αν το ίδιο στοιχείο επηρεάζεται από inline style, εσωτερικό <style> και εξωτερικό CSS, ποιο υπερισχύει;

Απάντηση:

• Υπερισχύει η πιο τοπική μορφοποίηση, με σειρά: inline style > εσωτερικό <style> > εξωτερικό φύλλο στυλ.
• Έτσι έχουμε κοινή μορφοποίηση (εξωτερικό) που διαφοροποιείται κατά περίπτωση (εσωτερικό/inline).

Σύνοψη: (ενδεικτική) Προτεραιότητα (τοπικότητα): inline style > εσωτερικό <style> > εξωτερικό CSS.

Κριτήρια αξιολόγησης:

• ΠΑΓΙΔΑ: το inline style «κερδίζει» το εξωτερικό. «Υπερισχύει η τοπικότητα.»

list-style & text-transform

Ερώτηση: Τι κάνουν οι κανόνες list-style και text-transform; Δώστε τιμές.

Απάντηση:

• list-style: αλλάζει τη μορφή κουκκίδας (disc, circle, square, none) ή αρίθμησης (decimal, lower-roman, upper-roman, lower-greek).
• text-transform: μετατρέπει το κείμενο σε uppercase (κεφαλαία), lowercase (πεζά) ή capitalize (κάθε λέξη με κεφαλαίο αρχικό).

Σύνοψη: (ενδεικτική) list-style: μορφή κουκκίδας (disc/circle/square/none) ή αρίθμησης (decimal/roman/greek). text-transform: uppercase/lowercase/capitalize.

Κριτήρια αξιολόγησης:

• Κριτήριο: ρόλος & ≥2 τιμές για κάθε κανόνα.