Return to Προγραμματισμός

CSS 3

Η CSS (Cascading Style Sheets – διαδοχικά φύλλα ύφους ή επάλληλα φύλλα ύφους)

Πηγές

Τεκμηρίωση, οδηγοί, μαθήματα


Περί χρωμάτων

  • https://whocanuse.com/ για τον έλεγχο της σωστής χρήσης χρωμάτων! (εξαιρετικό!)
  • https://flatuicolors.com/ έτοιμες παλέτες με σωστούς συνδυασμούς χρωμάτων!

Ένα καλό και περιεκτικό βίντεο:


Έλεγχος CSS


Συμβουλές, κόλπα και άλλα

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: 10ο Μάθημα

Συνέχεια προηγούμενης άσκησης βγάζουμε τα χρώματαοπτικά είναι καλύτερα χωρίς το border radiousμπορώ το border να το βάλω μέσα στο .dropdown:hover και όχι στο .dropdown:hover ul{Προσοχή όταν δηλώνουμε ότι height = 0 το border δεν εξαφανίζεται! Στην html αντιγράφω πολλές φορές τα li ώστε το μενού να βγαίνει εκτός οθόνης. Η λύση στο .dropdown:hover ul{ αλλάζω …

CSS: 11o μάθημα

Πράξεις στην 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 τότε χρησιμοποιώντας το παρακάτω κάνουμε λάθος …

CSS: 1ο Μάθημα

Σύνδεση HTML και CSS Τι αλλάζει η CSS; Απάντηση: Χρώμα, μέγεθος, θέση, συμπεριφορά/αντίδραση, προσαρμογή σε διαφορετικές οθόνες κ.α. https://www.w3schools.com/html/html_css.asp Γράφουμε css με τρεις διαφορετικούς τρόπους: inline σαν attribute style μέσα στο 1ο tag κάθε element αφορά μόνο το συγκεκριμένο element έχει τη μεγαλύτερη ισχύ MONO για γρήγορες δοκιμές. Πρέπει να το αποφεύγουμε! Αδύνατη η συντήρηση …

CSS: 2ο Μάθημα

Επίδειξη ασκήσεων επιμορφούμενων https://evasworkspace.w3spaces.com/ Άσκηση Μάνου Παράδειγμα χρήσης δωρεάν φιλοξενίας για την άσκηση στο w3schools https://html-master.w3spaces.com/exersise1/ Σύντομη παρουσίαση δυνατοτήτων περιβάλλοντος με χρήση δωρεάν λογαριασμού Προσοχή: είναι μόνο για δοκιμαστική χρήση με αρκετούς περιορισμούς! 2η περίπτωση: αγορά domain name για 1 ή 2 έτη (περίπου από 7-20€, ανάλογα με την κατάληξη) και δωρεάν web hosting. Μας …

CSS: 3ο Μάθημα

Επανάληψη Συνοπτική επίλυση της 1ης Άσκησης Κατηγορίες selectors Παραδείγματα για selectors εδώ και στον tester Ύλη Χρήση του universal selector *. Επιλέγει τα πάντα. Συνήθως το χρησιμοποιούμε για να κάνουμε reset στις αρχικές εξ’ ορισμού τιμές (αλλά γενικά το αποφεύγουμε): * {  text-align: center;   color: blue; } Χρώματα Κάθε px  δημιουργείται απο 3 leds …

CSS: 4ο Μάθημα

Χρώματα χρήση του https://whocanuse.com/ να γίνουν δοκιμές και να αναδειχθεί η σπουδαιότητα του contrast ratio χρήση των developer tools του Chrome (CTRL+Shift+I) για την εμφάνιστη αντίστοιχου εργαλείου και η παράθεσή του με το προηγούμενο ότι όντως μετράνε τις ίδιες τιμές. παρουσίαση του https://flatuicolors.com/ Μονάδες μέτρησης Απόλυτες: mm,cm in, pc, pt… px (απόλυτη μονάδα μέτρησης αλλά …

CSS: 5ο Μάθημα

Επανάληψη 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 …

CSS: 6ο Μάθημα

Επανάληψη Νέα ύλη 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: 7ο Μάθημα

Επανάληψη 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: 8ο Μάθημα

Επανάληψη 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: …

CSS: 9ο Μάθημα

Επανάληψη Άσκηση Ευαγγελίας https://evasworkplace.w3spaces.com/ : Πολύ καλή υλοποίηση και ιδέα! Μερικές παρατηρήσεις: μπορείς να έχεις σε διαφορετικό φάκελο μέσα στο w3spaces διαφορετική άσκηση. Άρα μπορείς ουσιασικά να έχεις πολλά sites, το καθένα στον δικό του φάκελο.για να πηγαίνει στην αρχική σελιδα με κλικ στο λογότυπο, βάζουμε a href=”/”στο κεντρικό και δεξί μέρος του μενου η …

Leave a Reply

Your email address will not be published.

The maximum upload file size: 2 MB. You can upload: image, audio, video, document, spreadsheet, interactive, text, archive, code, other. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded. Drop file here

This site uses Akismet to reduce spam. Learn how your comment data is processed.