Ο κώδικας-λύση και ασκήσεις (div vs span, display none/block/inline, απόκρυψη/εμφάνιση με :hover, ψευδο-στοιχεία first-line/first-letter). Γλώσσες HTML5+CSS.

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

Ερώτηση: Φτιάξτε μια ενότητα που κρύβει ένα div και το εμφανίζει όταν περνά το ποντίκι.

Απάντηση:

Πέρνα από πάνω μου!
Κρυμμένο περιεχόμενο (λεπτομέρεια)

.epilogi div { display: none; } / αρχικά κρυμμένο /

.epilogi:hover div { display: block; } / εμφάνιση στο hover /

Σύνοψη: (ενδεικτική) Εσωτερικό div με display:none· .epilogi:hover div { display:block } το εμφανίζει όταν το ποντίκι είναι πάνω.

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

Κριτήριο: display:none αρχικά + .epilogi:hover div { display:block }.

div vs span

Ερώτηση: Ποια η διαφορά

από ;

Απάντηση:

<div>: δοχείο μπλοκ — ξεκινά σε νέα γραμμή και πιάνει όλο το πλάτος (για ενότητες/τμήματα).
<span>: δοχείο σε σειρά (inline) — μέσα στη ροή του κειμένου, χωρίς αλλαγή γραμμής (για λέξεις/φράσεις).

Σύνοψη: (ενδεικτική) div: μπλοκ (νέα γραμμή, όλο το πλάτος). span: inline (μέσα στη ροή, χωρίς αλλαγή γραμμής).

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

Κριτήριο: block (div) vs inline (span).

Η ιδιότητα display

Ερώτηση: Ποιες βασικές τιμές παίρνει η display και τι κάνει η display: none;

Απάντηση:

block (μπλοκ, νέα γραμμή), inline (σε σειρά), inline-block (μπλοκ που ρέει), none.
Η display: none κάνει το στοιχείο να μην εμφανίζεται καθόλου (ούτε πιάνει χώρο) — κλασικός τρόπος απόκρυψης.

Σύνοψη: (ενδεικτική) block/inline/inline-block/none. Το display:none κρύβει τελείως το στοιχείο (δεν πιάνει χώρο).

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

Κριτήριο: οι τιμές + display:none = απόκρυψη.

Απόκρυψη με :hover & ψευδο-στοιχεία

Ερώτηση: Πώς εμφανίζουμε κρυμμένο περιεχόμενο με hover χωρίς προγραμματισμό; Τι κάνουν τα :first-line/:first-letter;

Απάντηση:

Κρύβουμε αρχικά (display: none) και εμφανίζουμε με συνδυασμό επιλογέα + :hover, π.χ. .epilogi:hover div { display: block; }.
:first-line μορφοποιεί την πρώτη γραμμή ενός στοιχείου· :first-letter τον πρώτο χαρακτήρα (π.χ. αρχίγραμμα).

Σύνοψη: (ενδεικτική) Με display:none + .Χ:hover ... { display:block }. :first-line = πρώτη γραμμή, :first-letter = πρώτος χαρακτήρας.

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

Κριτήριο: μηχανισμός hover για εμφάνιση + ρόλος first-line/first-letter.

Προηγούμενο Στοιχείο

Επιστροφή στην Ενότητα

Επόμενο Στοιχείο