Return to CSS 3

CSS: 5ο Μάθημα

Επανάληψη

  • display
  • box model
  • menu

Νέα Ύλη

Άσκηση παρουσίαση

Ολοκλήρωση του μενού με δύο τρόπους.

Νέο html, css > body{margin:0px}

Δημιουργία απλής ιστοσελίδας με h1 και p

Web developer tools

  • chrome, chromium, firefox, safari
  • Διαφορά Ιnspect και View page source
  • άνοιγμα από το μενού ή με F12
  • | snap
  • https://www.youtube.com/watch?v=z-T89CDFfBA
  • με κλικ στο select element ή πάνω στον κώδικα της περιοχής Elements τα χρώματα είναι ίδια με αυτά που δείχνει το box model στο κάτω μέρος της σελίδας
  • κλικ στο h1 και παρατήρηση στην καρτέλα styles
  • αλλαγή on the fly στο elements ή στο element.style{}. Π.χ. font size
    Προσοχή! οι αλλαγές προφανώς δεν αποθηκεύονται αλλά μας δείχνουν προσωρινά ότι αλλαγή κάνουμε στην html ή στην css.
  • Επίδειξη της καρτέλας styles και computed
    • ορισμός p>color στο css, το αλλάζουμε παρακάτω και τελικά το αλλάζουμε inline άλλο color. μπορούμε να δούμε στο Computed τι υπερισχύει και γιατί.
  • Χρήση της αλλαγής μεγέθους της οθόνης για παρακολούθηση των αλλαγών των διαστάσεων
  • Άνοιγμα άλλης σελίδας και “κλέψιμο ιδεών”. Π.χ. άνοιγμα της google.gr και πείραγμα των links.
  • Άνοιγμα σελίδας που έχει κλειδώσει τις εικόνες αλλά μέσα από τα webtools μπορούμε να τις βρούμε… (network > img ή media). Άρα ουσιαστικά ότι εμφανίζεται μπορεί κάποιος να το κατεβάσει.
  • μπορώ κάτω από γραμμή Styles > .cls να επιλέξω ένα element και να του δώσω μια κλάση για να δω πως θα αλλάξει.
  • To μεγαλύτερο πλεονέκτημα είναι η δυνατότητα για debugging σε συνδυασμό με το παρακάτω για την javascript
  • Η πλήρη αξιοποίηση γίνεται όταν χρησιμοποιήθεί η javascript

Επιπλέον CSS ιδιότητες

Εμφάνιση/εξαφάνιση στοιχείων

html: h1, p, a href=”google.gr”, p με bgrd-clr

css:
μετατρέπω τις p σε display:inline
a{display:none;} όπου δεν καταλαμβάνει χώρο
β’ τρόπος: a{visibility:hidden;} εξαφανίζεται αλλά καταλαμβάνει χώρο. Δεν μπορώ να κάνω κλικ.
γ’ τρόπος: a{opacity:0;} όπου αλλάζουμε την αδιαφάνεια του element. Μπορεί να εξαφανίσουμε κάτι αλλά μπορώ να κάνω κλικ στο a! Δεν θεωρείται καλός τρόπος εξαφάνισης

Permanent link to this article: http://users.sch.gr/nikmavr/%cf%80%cf%81%ce%bf%ce%b3%cf%81%ce%b1%ce%bc%ce%bc%ce%b1%cf%84%ce%b9%cf%83%ce%bc%cf%8c%cf%82/css/css-5%ce%bf-%ce%bc%ce%ac%ce%b8%ce%b7%ce%bc%ce%b1/