Permanent link to this article: https://nikmavr.sites.sch.gr/%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/
Συνέχεια προηγούμενης άσκησης βγάζουμε τα χρώματαοπτικά είναι καλύτερα χωρίς το border radiousμπορώ το border να το βάλω μέσα στο .dropdown:hover και όχι στο .dropdown:hover ul{Προσοχή όταν δηλώνουμε ότι height = 0 το border δεν εξαφανίζεται! Στην html αντιγράφω πολλές φορές τα li ώστε το μενού να βγαίνει εκτός οθόνης. Η λύση στο .dropdown:hover ul{ αλλάζω …
Πράξεις στην CSS με calc(), min() και max() https://www.w3schools.com/css/css_math_functions.asp https://developer.mozilla.org/en-US/docs/Web/CSS/calc https://css-tricks.com/a-couple-of-use-cases-for-calc/ Calc() 1o παράδειγμα: <p>Lorem ipsum </p> <div class="box1"></div> Αν φτιάξουμε ένα div κουτί .box1{ background-color: tomato; border:1px solid black; width:300px; height:200px; } τότε μπορούμε να το στοιχίσουμε στο κέντρο με: margin:0 auto; Ωστόσο αν πρέπει να χρησιμοποιήσουμε position τότε χρησιμοποιώντας το παρακάτω κάνουμε λάθος …
Σύνδεση HTML και CSS Τι αλλάζει η CSS; Απάντηση: Χρώμα, μέγεθος, θέση, συμπεριφορά/αντίδραση, προσαρμογή σε διαφορετικές οθόνες κ.α. https://www.w3schools.com/html/html_css.asp Γράφουμε css με τρεις διαφορετικούς τρόπους: inline σαν attribute style μέσα στο 1ο tag κάθε element αφορά μόνο το συγκεκριμένο element έχει τη μεγαλύτερη ισχύ MONO για γρήγορες δοκιμές. Πρέπει να το αποφεύγουμε! Αδύνατη η συντήρηση …
Επίδειξη ασκήσεων επιμορφούμενων https://evasworkspace.w3spaces.com/ Άσκηση Μάνου Παράδειγμα χρήσης δωρεάν φιλοξενίας για την άσκηση στο w3schools https://html-master.w3spaces.com/exersise1/ Σύντομη παρουσίαση δυνατοτήτων περιβάλλοντος με χρήση δωρεάν λογαριασμού Προσοχή: είναι μόνο για δοκιμαστική χρήση με αρκετούς περιορισμούς! 2η περίπτωση: αγορά domain name για 1 ή 2 έτη (περίπου από 7-20€, ανάλογα με την κατάληξη) και δωρεάν web hosting. Μας …
Επανάληψη Συνοπτική επίλυση της 1ης Άσκησης Κατηγορίες selectors Παραδείγματα για selectors εδώ και στον tester Ύλη Χρήση του universal selector *. Επιλέγει τα πάντα. Συνήθως το χρησιμοποιούμε για να κάνουμε reset στις αρχικές εξ’ ορισμού τιμές (αλλά γενικά το αποφεύγουμε): * { text-align: center; color: blue; } Χρώματα Κάθε px δημιουργείται απο 3 leds …
Χρώματα χρήση του https://whocanuse.com/ να γίνουν δοκιμές και να αναδειχθεί η σπουδαιότητα του contrast ratio χρήση των developer tools του Chrome (CTRL+Shift+I) για την εμφάνιστη αντίστοιχου εργαλείου και η παράθεσή του με το προηγούμενο ότι όντως μετράνε τις ίδιες τιμές. παρουσίαση του https://flatuicolors.com/ Μονάδες μέτρησης Απόλυτες: mm,cm in, pc, pt… px (απόλυτη μονάδα μέτρησης αλλά …
Επανάληψη displaybox modelmenu Νέα Ύλη Άσκηση παρουσίαση Ολοκλήρωση του μενού με δύο τρόπους. Νέο html, css > body{margin:0px} Δημιουργία απλής ιστοσελίδας με h1 και p Web developer tools chrome, chromium, firefox, safariΔιαφορά Ιnspect και View page sourceάνοιγμα από το μενού ή με F12| snaphttps://www.youtube.com/watch?v=z-T89CDFfBAμε κλικ στο select element ή πάνω στον κώδικα της περιοχής Elements …
Επανάληψη Νέα ύλη Float https://www.w3schools.com/css/css_float.asp Παραδείγματα: Δύο p με lorem. Στη 2η img με float right/left/none3 divs με bgrd color. Αρχικά με 3 διαφορετικές κλάσεις div1, div2, div3 όπου σε κάθε κλάση να υπάρχει bgrd+float+border+margin. A’ τρόπος: Για να μαζευτεί ο κώδιξ να μπουν τα κοινά στην .div Β’ τρόπος: Να γίνει κλάση masterdiv με …
Επανάληψη CSS – 6o μάθημα Ύλη Position https://www.w3schools.com/css/css_positioning.asp Δημιουργούμε 4 p με bgrd-clr. Προφανώς έχει position static εξορισμού και τοπθετείται με τη φυσιολογική ροή των στοιχείων της ιστοσελίδας. Για τη 3η p δημιουργώ class .move </p> .move{ background-color: dodgerblue; left:100px; } <p> chrome > F12 για devtools > Computed > γράφω position + check …
Επανάληψη CSS:7o Μάθημα https://www.w3schools.com/css/css_align.asp Στοίχιση ενός κουτιού στο κέντρο <div> Καλησπέρα καλοκαίρι! </div> div{ border:2px solid red; background-color: yellow; padding:8px; width: 50%; margin: auto; } B’ τρόπος: μετατρέπουμε το κουτί σε inline-block και το στοιχίζουμε με text-align:center ΑΛΛΑ βάζουμε το css στον γονέα που το περιέχει (π.χ. div class=”container”) .container{ text-align: center; } #box1{ background-color: …
Επανάληψη Άσκηση Ευαγγελίας https://evasworkplace.w3spaces.com/ : Πολύ καλή υλοποίηση και ιδέα! Μερικές παρατηρήσεις: μπορείς να έχεις σε διαφορετικό φάκελο μέσα στο w3spaces διαφορετική άσκηση. Άρα μπορείς ουσιασικά να έχεις πολλά sites, το καθένα στον δικό του φάκελο.για να πηγαίνει στην αρχική σελιδα με κλικ στο λογότυπο, βάζουμε a href=”/”στο κεντρικό και δεξί μέρος του μενου η …
An introduction to Python on Android
Μια ζουμερή και σύντομη εισαγωγή στη γλώσσα προγραμματισμού Python και μία απλή προσέγγιση στη χρήση της σε συσκευή android
0
