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

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

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

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

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

Απάντηση:

• HTML (index.html):
• • Φρούτα
    • Μήλο
    • Πορτοκάλι
  • Λαχανικά
• Αρχείο p07.css:
• @charset "UTF-8";
• / κανόνες λίστας /
• ul li { list-style: circle; }

Σύνοψη: (ενδεικτική) HTML: + φωλιασμένη

. CSS αρχείο: @charset + ul li { list-style: circle; }.

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

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

---

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

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

Απάντηση:

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

Σύνοψη: (ενδεικτική) Με . Όφελος: κοινό «θέμα» για πολλές σελίδες — μία αλλαγή αλλάζει τα πάντα.

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

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

---

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

Ερώτηση: Αν το ίδιο στοιχείο επηρεάζεται από inline style, εσωτερικό