Χρώματα

χρήση του https://whocanuse.com/
- να γίνουν δοκιμές και να αναδειχθεί η σπουδαιότητα του contrast ratio
χρήση των developer tools του Chrome (CTRL+Shift+I) για την εμφάνιστη αντίστοιχου εργαλείου και η παράθεσή του με το προηγούμενο ότι όντως μετράνε τις ίδιες τιμές.
παρουσίαση του https://flatuicolors.com/

Μονάδες μέτρησης

Απόλυτες:
- mm,cm
- in, pc, pt…
- px (απόλυτη μονάδα μέτρησης αλλά σχετικό μέγεθος που σχετίζεται με το μέγεθος της οθόνης). Για πχ συγκρίνετε τις διαστάσεις ενός πίξελ στην οθόνη του κινητού και στην οθόνη του υπολογιστή.
σχετικές:
- % (σε σχέση με τον γονέα)
- em (σε σχέση με γράμματα)
- rem (σε σχέση με γράμματα)
- vw
- vh

https://www.w3schools.com/css/css_units.asp
Σημείωση: Όλα τελικά θα μετατραπούν σε pixels! πχ 50% για πλάτος 1600px αντιστοιχεί σε 800px

Τελικά θα πρέπει να δημιουργήσουμε κάτι το οποίο θα εμφανίζεται παντού από ΗΤ, κινητά, tablets, gadgets, ρολόγια κλπ!
Τα pixels αν και αποτελούν απόλυτη μονάδα μέτρησης είναι και αυτά σχετικά το πως θα φανούν στα μάτια του χρήστη ανάλογα με την πυκνότητα και το μέγεθος της οθόνης που χρησιμοποιεί!
Ουσιαστικά διαστάσεις σε απόλυτες τιμές (mm, cm, in) θα χρησιμοποιήσουμε όταν θέλουμε να δημιουργήσουμε εκτυπώσιμα αντικείμενα (πχ τιμολόγια, κάρτες, διαγράμματα, φακέλους).
π.χ.

        div{
            width: 210mm;
            height: 297mm;
            background-color: yellowgreen;
        }

Να γραφτεί και με cm και προσοχή βάζουμε “.” και όχι “,” για τους δεκαδικούς.

Παράδειγμα:

        .div1{
            background-color: dodgerblue;
            height: 200px;
            width: 600px;
        }

Mε 2ο div από κάτω με σχετικό μέγεθος:

        .div1{
            background-color: dodgerblue;
            height: 200px;
            width: 600px;
        }
        .div2{
            background-color: coral;
            height: 100px;
            width: 80%;
            margin-top: 20px;
        }

Αλλάζουμε το μέγεθος του παραθύρου και βλέπουμε κατευθείαν τη διαφορά.

Προσοχή: το % αφορά τη διάσταση του γονέα!

Στο παράδειγμα ο γονέας είναι το body.

Να μπει div μέσα σε div. Εκεί ο γονέας είναι το πρώτο div.

        .div1{
            height: 200px;
            width: 80%;
            background-color: dodgerblue;
        }
        .div2{
            height: 50%;
            width: 50%;
            background-color: tomato;
        }

Προσοχή στο height ΔΕΝ μπαίνει σχετική μονάδα αν ο γονέας δεν χρησιμοποιεί απόλυτη μονάδα μέτρησης, γιατί το ύψος μιας σελίδας μπορεί να είναι άπειρο! (κάνουμε κύλιση με τη ροδέλα )

Να γίνει δοκιμή με 3 div το ένα μέσα στο άλλο!

Nα συμπληρωθεί…..

1 Αρχικοποίηση

Μηδενισμός margin του body κάθε φορά που ξεκινάμε (default είναι 8px!)
Βάζω ένα h1 με background-color και μετά βλέπω τη διαφορά με:

body{
    margin: 0px;
}

To 0 είναι η μοναδική τιμή που δεν απαιτεί μονάδα μέτρησης.

2. Σε κάθε περιοχή χρησιμοποιώ χρώμα για να βλέπω μέχρι που φθάνει και να θυμηθώ να το αλλάξω
CSS: Φόντο σε p
HTML: Δημιουργώ μεγάλη p και βάζω πολύ κείμενο μέσα
CSS: max-height: 200px
Παρατηρώ το overflow! και αυτό γιατί έβαλα χρώμα!
δίνω παραδείγματα με height min max
Υπερισχύει πάντα το min αν συναγωνίζεται το max και μετά ακολουθεί το width ή το height.
Παράδειγμα:
Θέλω σε μεγάλη οθόνη να έχει περιθώρια αλλά σε μικρή να μην έχω περιθώρια και να την εκμεταλλεύομαι περισσότερο.
Λύση:

p{
    width: 50%;
    min-width: 480px;
    max-width: 720px;
    margin: 0 auto;
    background-color: brown;
    height: 200px;
}

Αλλάζω το μέγεθος του παραθύρου και παρατηρώ το overflow.
overflow:hidden το αποφεύγουμε γιατί και δεν βλέπω τι χάνω και δεν μπορώ να κάνω scroll down
overflow:visible.
*Εάν δεν έχω height τότε μεγαλώνει όσο χρειάζεται.
overflow:scroll εμφανίζεται μπάρα ακόμη και εάν δεν χρειάζεται
overflow: auto εμφανίζεται μπάρα μόνο όταν χρειάζεται.

* όταν το περιεχόμενο δεν χωράει στη στη σελίδα τότε γίνεται overflow και προφανώς εμφανίζεται η μπάρα αριστερά
To overflow αφορά και τους 2 άξονες.
overflow-x
overflow-y

Box Model

—————————

Χρώματα
• χρήση του https://whocanuse.com/
◦ να γίνουν δοκιμές και να αναδειχθεί η σπουδαιότητα του contrast ratio
◦ π.χ.

h1{
background-color:brown;
color: black;
}
Να αλλάξει σε color:white
Να επανέλθει σε black και να προστεθεί padding:20px
Να γίνει δοκιμή με Α/Μ και να δειχθεί το μέγιστο contrast ratio = 21:1

• χρήση των developer tools του Chrome (CTRL+Shift+I) ή F12, για την εμφάνιση αντίστοιχου εργαλείου και η παράθεσή του με το προηγούμενο ότι όντως μετράνε τις ίδιες τιμές.
• παρουσίαση του https://flatuicolors.com/
• αναφορά στα 216 websafe χρώματα για τις παλιές οθόνες έναντι των 256*256*256=16εκ χρώματα (24bit) https://websafecolors.info/

—————————————————————————–

Επανάληψη
Μονάδες μέτρησης
• Απόλυτες:
◦ mm,cm
◦ in, pc, pt…
◦ px (απόλυτη μονάδα μέτρησης αλλά σχετικό μέγεθος που σχετίζεται με το μέγεθος της οθόνης). Για πχ συγκρίνετε τις διαστάσεις ενός πίξελ στην οθόνη του κινητού και στην οθόνη του υπολογιστή.
• σχετικές:
◦ %(σε σχέση με τον γονέα)
◦ em (σε σχέση με γράμματα)
◦ rem (σε σχέση με γράμματα)
◦ vw
◦ vh
https://www.w3schools.com/css/css_units.asp
Σημείωση: Όλα τελικά θα μετατραπούν σε pixels! πχ 50% για πλάτος 1600px αντιστοιχεί σε 800px
Τελικά θα πρέπει να δημιουργήσουμε κάτι το οποίο θα εμφανίζεται παντού από ΗΤ, κινητά, tablets, gadgets, ρολόγια κλπ!
Τα pixels αν και αποτελούν απόλυτη μονάδα μέτρησης είναι και αυτά σχετικά το πως θα φανούν στα μάτια του χρήστη ανάλογα με την πυκνότητα και το μέγεθος της οθόνης που χρησιμοποιεί!
Ουσιαστικά διαστάσεις σε απόλυτες τιμές (mm, cm, in) θα χρησιμοποιήσουμε όταν θέλουμε να δημιουργήσουμε εκτυπώσιμα αντικείμενα (πχ τιμολόγια, κάρτες, διαγράμματα, φακέλους).
π.χ.

        div{
            width: 210mm;
            height: 297mm;
            background-color: yellowgreen;
        }

Να γραφτεί και με cm και προσοχή βάζουμε “.” και όχι “,” για τους δεκαδικούς.
Παράδειγμα:

        .div1{
            background-color: dodgerblue;
            height: 200px;
            width: 600px;
        }

2o παράδειγμα επανάληψης:
h1

h1{
    background-color: red;
    margin:auto;
    padding: 12px;
    border-width: 12px;
    border-style:  solid;
    border-color: blue;
    border-radius: 20px;
    text-align: center;
    color: aliceblue;
    width: 200px;
    margin-bottom: 20px;
}

Νέα ύλη
https://www.w3schools.com/css/css_margin.asp
https://www.w3schools.com/css/css_padding.asp
https://www.w3schools.com/css/css_dimension.asp
!!! The height and width properties do not include padding, borders, or margins!

Mε 2ο div από κάτω με σχετικό μέγεθος:

        .div1{
            background-color: dodgerblue;
            height: 200px;
            width: 600px;
        }
        .div2{
            background-color: coral;
            height: 100px;
            width: 80%;
            margin-top: 20px;
        }

Αλλάζουμε το μέγεθος του παραθύρου και βλέπουμε κατευθείαν τη διαφορά.

Προσοχή: το % αφορά τη διάσταση του γονέα!
Στο παράδειγμα ο γονέας είναι το body.

Να μπει div μέσα σε div. Εκεί ο γονέας είναι το πρώτο div.

        .div1{
            height: 200px;
            width: 80%;
            background-color: dodgerblue;
        }
        .div2{
            height: 50%;
            width: 50%;
            background-color: tomato;
        }

Προσοχή στο height ΔΕΝ μπαίνει σχετική μονάδα αν ο γονέας δεν χρησιμοποιεί απόλυτη μονάδα μέτρησης, γιατί το ύψος μιας σελίδας μπορεί να είναι άπειρο! (κάνουμε κύλιση με τη ροδέλα )

    <div class="div1">
        <div class="div2"></div>
    </div>

Να γίνει δοκιμή με 3 div το ένα μέσα στο άλλο!

Αρχικοποίηση
1.
Μηδενισμός margin του body κάθε φορά που ξεκινάμε (default είναι 8px!)
Βάζω 2 h1 με

h1{
    background-color: red;
}

είναι block αρα πιάνει όλη τη γραμμή.
Δεν ακουμπούν μεταξύ τους. Για να γίνει βάζω:

h1{
    background-color: red;
    margin: 0px;
}

Δεν ακουμπούν τώρα στα άκρα της οθόνης. Για να το τακτοποιήσω και αυτό:

body{
    margin: 0px;
}

To 0 είναι η μοναδική τιμή που δεν απαιτεί μονάδα μέτρησης.

2.
Σε κάθε περιοχή χρησιμοποιώ χρώμα για να βλέπω μέχρι που φθάνει και να θυμηθώ να το αλλάξω
CSS: Φόντο σε p για να βλέπω τα όρια! Πάντα τα βάζουμε σε έντονα χρώματα για να βγάζουν μάτι και να το αλλάξουμε.
Βάζω p και

p{
    width: 50%;
    background-color: brown;
  }

HTML: Δημιουργώ μεγάλη p και βάζω πολύ κείμενο μέσα
CSS: max-height: 200px
Παρατηρώ το overflow! και αυτό γιατί έβαλα χρώμα!
δίνω παραδείγματα με height min max
Υπερισχύει πάντα το min αν συναγωνίζεται το max και μετά ακολουθεί το width ή το height.
Παράδειγμα:
Θέλω σε μεγάλη οθόνη να έχει περιθώρια (πχ 2 Κ ή 4Κ), αλλά σε μικρή να μην έχω περιθώρια και να την εκμεταλλεύομαι περισσότερο.
Λύση:

p{
    width: 50%;
    min-width: 640px;
    max-width: 800px;
    margin: 0 auto;
    background-color: brown;
    height: 200px;
}

Άρα σε μικρή οθόνη έχω μικρότερα περιθώρια.
Σε μεγάλη οθόνη δεν γεμίζω την τεράστια επιφάνεια με το site.

Τελικά:
• προηγείται το min
• αν max < width προηγείται το max
• διαφορετικά το width

Αλλάζω το μέγεθος του παραθύρου και παρατηρώ το overflow.
overflow:hidden το αποφεύγουμε γιατί και δεν βλέπω τι χάνω και δεν μπορώ να κάνω scroll down
overflow:visible.
*Εάν δεν έχω height (το βγάζω) τότε μεγαλώνει όσο χρειάζεται.
Overflow: scroll εμφανίζεται μπάρα ακόμη και εάν δεν χρειάζεται
overflow: auto εμφανίζεται μπάρα μόνο όταν χρειάζεται. Το προτιμάμε!

* όταν το περιεχόμενο δεν χωράει στη στη σελίδα τότε γίνεται overflow σελίδας και προφανώς εμφανίζεται η μπάρα αριστερά. Για να το δείξω αντιγράφω την p πολλές φορές.
Αν βάλω στο body overflow:hidden τότε δεν εμφανίζεται η μπάρα δεξιά στη σελίδα!
To overflow αφορά και τους 2 άξονες.
Overflow-x (ούτω ή άλλως αλλάζει σειρά όταν φθάσει στην άκρη και σπάνια το χρειαζόμαστε)
overflow-y

Block και inline elements

div{
    background-color: tomato;
  }

σε σκέτο div δεν εμφανίζει τίποτε.
Αν βάλω μία p τότε μεγαλώνει για να την χωρέσει και πιάνει όλη τη γραμμή
Αν βάλω span από κάτω με

span{
    background-color: dodgerblue;
    width: 100px;
    height: 100px;
}

τότε και εδώ δεν εμφανίζεται τίποτε. Βλέπω ότι το span δεν υπακούει σε w και h.
Επίσης δεν πιάνει όλη τη γραμμή αλλά μόνο όσο χώρο θέλουν τα γράμματα που περιέχει.

div{
    background-color: tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 2px;
}
span{
    background-color: dodgerblue;
    width: 100px;
    height: 100px;
}

και

<div></div>
<div></div>
<div></div>
<span> test</span>
<span>test 2</span>

Display
Μπορώ σε όποιδήποτε element να αλλάξω και να τα κάνω block ή inline.
Αν μετατρέψω το span σε block τότε σέβεται πλέον και τη Η και το Π.
Το div αν του βάλω width 30% και απο κάτω άλλο div το καθένα θέλει τη δικιά του γραμμή και δεν πηγαίνει δίπλα στο άλλο. Το υπόλοιπο 70% είναι margin!

Τα display: inline-block element ουσιαστικά δεν πιάνουν όλη τη γραμμή αλλά μόνο όσο χώρο θέλουνε και είναι δίπλα το ένα στο άλλο αλλά έχουν w και h! Π.χ.:

.sp1{
    height: 50px;
}
.sp2{
    height: 100px;
}

και

<span class="sp1"> test</span>
<span class="sp2">test 2</span>

Box Model
https://www.w3schools.com/css/css_boxmodel.asp

Από τα σημαντικότερα πράγματα στη css! Είναι εξαιρετικά σημαντικό!
Όταν δίνω Υ και Π αυτά δίνουν διαστάσεις στο content ΜΟΝΟ! Τα άλλα προσθέτουν επιπλέον μήκος στις διαστάσεις.

Το box model υπολογίζει πόσο χώρο πιάνει ένα element

Παράδειγμα 1ο

<div></div>

.thenewbox{
    background-color: green;
    height: 60px;
    width: 180px;
    padding:20px;
    border:20px solid red;
    margin:20px; 
}

• Εμφανίζω την κονσόλα στο chrome.
• Aρχίζω με το ποντίκι να δείχνω: content
◦ γράφω μέσα λέξεις
• padding
◦ το περιθώριο του κειμένου από το περίγραμμα
• border
◦ το περίγραμμα
• margin
◦ δεν το υπολογίζει στο μέγεθος του element
• Υπολογίζω το πλάτος προσθέτοντας διαδοχικά από αριστέρα προς τα δεξιά 1-1

Σημαντικό: Το padding είναι εξαιρετικά σημαντικό στην τυπογραφία! Πάντα αφήνουμε περιθώρια από τις άκρες της σελίδας. Εκτός από:
• την ανάγνωση (διαβάζουμε καλύτερα και πιο γρήγορα)
• εκτύπωση και
• την αισθητική.

—————————————————
Παράδειγμα 2o

<div class="boxdiv">
    <div class="dcontent"></div>
</div>

.boxdiv{
    width: 550px;
    height: 70px;
    background-color: red;
    color: aliceblue;
    padding: 20px;
    border: blue solid 20px;
}
.dcontent{
    background-color: burlywood;
    height: 100%;
    width: 100%;
}

Στο .boxdiv προσθέτω margin:20px

—————————————————–

Δεν δουλεύει για όλα όπως το span και το a (display: in-line elements).
Span, a:
• Δουλεύουν τα: border, padding, margin

<span>Box αντίδραση!</span>
<a href="https://google.gr">Box επανάσταση!</a>

span{
    background-color: aquamarine;
    padding: 10px;
    border: 2px solid saddlebrown;
    margin: 10px;     /* Δουλεύει μόνο αριστερά δεξιά!*/
     width: 1000px;  /*Δεν δουλεύει */
    height: 100px;    /*Δεν δουλεύει */
}

Να κάνω το ίδιο και για το a.

• Δεν δουλεύουν width και height γιατί αυτά εξαρτώνται από το κείμενο που περιέχουν.
Γιατί το content του span και του a είναι κείμενο!

Μπορώ μέσα στο κείμενο του box να βάλω μια λέξη σε span και να δώ τι γίνεται.

Προσοχή! Αν στην κονσόλα δώ το μέγεθος του span φαίνονται οι δηλωμένες διαστάσεις (στις οποίες δεν υπακούει το inline element) και όχι οι πραγματικές!

Border-top-color: 100px dotted green;
border-radius: topleft topright κλπ. π.χ. border-radius: 1px 4px 12px 20px;
Για να κάνω κύκλο:

#circle{
    background-color: brown;
    width: 50px; 
    height: 50px;
    border-radius: 25px;
}

Πως κάνω τις κουκίδες σε λίστα:

<ul>
        <li><span></span> test1</li>
        <li><span></span> test2</li>
        <li><span></span> test3</li>
        <li><span></span> test4</li>
    </ul>

ul{
    list-style: none;
}
span{
    height: 10px;
    width:10px;
    background-color: blue;
    display: block;
    float: left;
    border: 1px solid red;
    border-radius: 5px;
    margin-top: 4px;
    margin-right: 8px;
}

Άσκηση :

<div id="card">
    Τι θα δούμε...
</div>

#card{
    background-color: red;
    width: 200px;
    height:100px;
}

Προσθέτω διαδοχικά:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
padding: 10px 20px 30px 50px; < Συντόμευση
padding: 10px 100px;

To padding διαμορφώνει τον όγκο. Υπάρχει πάντα! Να δειχθεί στο περιβάλλον του VScode και στον Chrome.
Είναι πολύ σημαντικό.
Πάμε στο margin. To margin είναι ΕΚΤΟΣ του element.
Προσθέτω:
margin:20px;
Παρατηρώ στην κονσόλα με hover ότι δεξιά επεκτείνεται το margin μέχρι το δεξί άκρο.
Αν προσθέσω και το:
display: inline-block;
τότε η κονσόλα μου δείχνει ότι πλέον δεν φθάνει μέχρι τέρμα δεξιά.
Παρουσιάζω ομοίως τα:
margin-top, right, bottom, left, συντομογραφία και X-Y.
Προσθέτουμε και border:
• style (top, right,…)
• width (top, right,…)
• color (top, right,…)
• Συντομογραφία border:
• Συντομογραφία για μια πλευρά border-bottom:
• border-radius (top-left-radius, …)
• border-radius συντομογραφία

Άσκηση δημιουργία κύκλου:

<div id=“cyrcle”><>

#circle{
    background-color: crimson;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    border: 1px solid black;
}

Δημιουργία μενού

    <div id="menu">
        <div class="aristera">Αριστερά</div>
        <div class="kentro">Κέντρο</div>
        <div class="dexia">Δεξιά</div>
    </div>

#menu{
    background-color: red;
    height: 50px;
}
#menu .aristera{
    background-color:aqua;
    height: 50px;
    width: 33%;
    display: inline-block;    	/*το προσθέτω μετά */
}
#menu .kentro{
    background-color: bisque;
    height: 50px;
    width: 34%;
    display: inline-block;  	/*το προσθέτω μετά */
}
#menu .dexia{
    background-color: blueviolet;
    height: 50px;
    width: 33%;
    display: inline-block;	/*το προσθέτω μετά */
}

Δοκιμή: τα κάνω όλα display:inline και τότε δεν φαίνεται τίποτε.
Δοκιμή 2η: τα κάνω display:inline-block, δηλαδή είναι σαν κείμενο αλλά σέβεται τις διαστάσεις. ΟΚ
Δοκιμή 3: γράφω μέσα Αριστερά, κέντρο, δεξιά
Βλέπω το κενό ανάμεσα.

Αν και είναι 33+33+34=100% το 3ο div βγαίνει από κάτω καθώς ανάμεσα στα display: inline-block; μπαίνει απόσταση ενός χαρακτήρα που είναι 4px.

Μέχρι εδώ έκανα……………………………………

Α’ τρόπος: με margin-left: -4

body{
    margin: 0;
}
#menu{
    background-color: red;
    height: 50px;
}
#menu .aristera{
    background-color:aqua;
    height: 50px;
    width: 33%;
    display: inline-block;
    margin-left:0;
}
#menu .kentro{
    background-color: bisque;
    height: 50px;
    width: 34%;
    display: inline-block;
    margin-left: -4px;
}

B’ Τρόπος
κάνω στο #menu το font-size=0 και στα παιδιά επαναφέρω το font-size=16px, οπότε τα divs έρχονται χωρίς κενά ανάμεσα.

#menu{
    background-color: red;
    height: 50px;
    font-size: 0px;
}
#menu .aristera{
    background-color:aqua;
    height: 50px;
    width: 33%;
    display: inline-block;
    font-size: 16px;
}
#menu .kentro{
    background-color: bisque;
    height: 50px;
    width: 34%;
    display: inline-block;
    font-size: 16px;
}
#menu .dexia{
    background-color: blueviolet;
    height: 50px;
    width: 33%;
    display: inline-block;
    font-size: 16px;
}

Βάζω μια εικόνα στο αριστερό div με height=50px

#menu img{
    height: 50px;
    width: auto;
}

Παρατηρώ ότι μας πετά τα άλλα div από κάτω
Τροποποιώ

#menu .aristera{
        vertical-align: top;
}

CSS: 4ο Μάθημα

Χρώματα

Μονάδες μέτρησης

1 Αρχικοποίηση

Box Model

—————————

Διδασκαλία Πληροφορικής

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

Linux

Python

Διδασκαλία Πληροφορικής

Εκπαιδευτικά

Φύση- Επιστήμη-DIY

Ενδιαφέρουσες σελίδες

Ιστοσελίδες συναδέλφων

Arduino