Επανάληψη
- 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! Δεν θεωρείται καλός τρόπος εξαφάνισης
