CSS: 3ο Μάθημα

Επανάληψη

• Συνοπτική επίλυση της 1ης Άσκησης
• Κατηγορίες selectors
• Παραδείγματα για selectors εδώ και στον tester

Ύλη

Χρήση του universal selector *. Επιλέγει τα πάντα. Συνήθως το χρησιμοποιούμε για να κάνουμε reset στις αρχικές εξ’ ορισμού τιμές (αλλά γενικά το αποφεύγουμε):

* {  text-align: center;   color: blue; }

Χρώματα

Κάθε px  δημιουργείται απο 3 leds με χρώματα Red, Green, Blue.

Να δειχθεί με μεγέθυνση 1000% πως μια εικόνα αποτελείται από pixels.

• https://www.w3schools.com/css/css_colors.asp
• https://www.w3schools.com/colors/colors_picker.asp

Παράδειγμα:

3 div με h1 με width και height.

To καθένα με background-color με:

• όνομα
• rgb
• hex

Σε αυτά τα κουτάκια divs εφαρμόζουμε τα παρακάτω.

Χρώματα με όνομα:

Η css έχει 140 ονόματα χρωμάτων για εύκολη αναφορά: https://www.w3schools.com/colors/colors_names.asp

Χρώματα με rgb:

Για κάθε χρώμα έχουμε τιμές 0-255 (συνολικά 256 συνδυασμοί οι οποίοι αντιστοιχούν σε 8bits=1byte). Για πχ Red 0 σημαίνει ότι το κόκκινο led του pixel είναι σβηστό, ενώ το Red 255 σημαίνει αναμμένο στη μέγιστη φωτεινότητα.

Αν συνδυαστούν και τα τρία χρώματα:  το rgb(0,0,0) είναι το μαύρο και το rgb(255,255,255) το άσπρο.

Το rgb(0,255,0) είναι το έντονο καθαρό πράσινο.

https://www.w3schools.com/css/css_colors_rgb.asp

Χρώματα με hex:

Όμως καταλήγουμε να χρησιμοποιούμε το δεκαεξαδικό σύστημα χρωμάτων γιατί είναι πιο σύντομο.

DEC: rgb(26, 83, 148) 
HEX: #1a5394
ή ακόμη περισσότερο π.χ.
DEC: rgb(0, 255, 0)
DEX: #0f0

Για να το κάνουμε ξεκινάμε με τον χαρακτήρα # και μετά βάζουμε τα 3 νούμερα στο δεκαεξαδικό σύστημα.

rgb(0,0,0) = #000000 το οποίο συντομεύεται σε #000

rgb(255,255,255 = #ffffff το οποίο συντομεύεται σε #fff

• Χρώματα στη δεκαεξαδική μορφή  #yyy όπως #222, #777, #ccc είναι πάντα τόνοι του γκρίζου.
• https://www.w3schools.com/css/css_colors_hex.asp

Παράδειγμα: Δίνουμε το ένα κάτω από το άλλο hex τιμές σε background-color. Παρατηρούμε ότι ισχύει η τελευταία!

Χρησιμοποιούμε τα divs για να χρωματίσουμε τις περιοχές μιας σελίδας. Έτσι ξέρουμε μέχρι που εκτείνεται!

Άρα προτεραιότητα έχει το πιο συγκεκριμένο και το τελευταίο!

Διαφορετικά κληρονομείται από τον γονέα!

Υπάρχουν και εξαιρέσεις: π.χ. το <a>. Να γίνει παράδειγμα.

Άσκηση

• HTML: τρεις h1+p
• CSS: χρήση background-color, color, border color, χρήση διαφάνειας σε body και p.
• Επίδειξη chrome>developer tools > Contrast

Ερώτηση:

Προσθέτω τον παρακάτω κώδικα:

h1{
background-color: rgb(30, 143, 255);
opacity: 0.5;
}

Παρατηρώ ότι η διαφάνεια κληρονομείται και από το το φόντο αλλά και από το κείμενο. Πως μπορώ να έχω διαφάνεια μόνο στο background-color ενώ οι χαρακτήρες να παραμείνουν σκούροι μαύροι;

Απάντηση:

Χρησιμοποιώ rgba χρώμα για το φόντο μόνο.

h1{
background-color: rgba(30, 143, 255, 0.7);
}

Backgrounds

• background-color (το είδαμε αναλυτικά πριν + χρήση opacity)

body{
background-color: greenyellow;
}
.alphaT{
opacity: 0.5;
}
h1{
background-color: red;
color: white;
}

/*---------------------- 
θα μπορούσε να γραφεί και */
body{
background-color: greenyellow;
}
h1{
background-color: red;
color: white;
}
h1.alphaT{
opacity: 0.5;
}

• background-image (χρήση εικόνων από το https://unsplash.com/)

body{
   background-image: url(frantisek_dark.jpg);
}

κακός συνδυασμός για χρήση με μαύρα γράμματα p

βελτίωση με

CSS: p{ background-color: white; opacity: 0.7; }

χρήση του background-image στην p και επαναφορά γιατί είναι χάλια!

• background-repeat

CSS: background-repeat: repeat-x; + repeat-y + no-repeat

• background-attachment  με το οποίο η εικόνα είναι σταθερή και δεν συμμετέχει στην κύλιση

CSS: background-attachment: fixed;

• background-position

CSS:  background-position: right top;

• background

Μπορώ να βάλω σε ένα declaration όλες τις παραμέτρους:
background-color
background-image
background-repeat
background-attachment
background-position

π.χ.:

body{
background: #aaf url(frantisek_dark.jpg) no-repeat fixed right top;
}

Borders

border-style:

• dotted
• dashed
• solid
• double
• groove (3d)
• ridge (3d)
• inset (3d)
• outset (3d)
• none
• hidden

border-width

border-color (rgb, hex, hsl)

CSS Border διαφορετικά σε κάθε πλευρά

Με μία, δύο, τρεις ή τέσσερις παραμέτρους

p {
  border-style: dotted solid double dashed;
}

CSS Border συντόμευση

p {
  border: 10px solid green;
}

Ωραίο εμφανισιακά είναι το:

h1 {
  border-bottom: 8px solid red;
}

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

• Απόλυτες:
  • 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 και προσοχή βάζουμε “.” και όχι “,” για τους δεκαδικούς.