Επίδειξη ασκήσεων επιμορφούμενων
Άσκηση Εύας
Άσκηση Μάνου
Παράδειγμα χρήσης δωρεάν φιλοξενίας για την άσκηση στο w3schools
- https://html-master.w3spaces.com/exersise1/
- Σύντομη παρουσίαση δυνατοτήτων περιβάλλοντος με χρήση δωρεάν λογαριασμού
- Προσοχή: είναι μόνο για δοκιμαστική χρήση με αρκετούς περιορισμούς!
- 2η περίπτωση: αγορά domain name για 1 ή 2 έτη (περίπου από 7-20€, ανάλογα με την κατάληξη) και δωρεάν web hosting. Μας καλύπτει πλήρως για απλή στατική ιστοσελίδα: (ιατρείο, εστιατόριο, cafe, κομμωτήριο, αρχιτεκτονικό γραφείο, αντιπροσωπεία, τουριστικά καταλύματα κλπ). Παράδειγμα: http://html-master.in/index.html
- https://strawpoll.com/polls/PbZqo527KnN (HTML?)
- https://strawpoll.com/polls/e7ZJO0AKYy3 (Αναλυτική επίλυση της άσκησης)
Πλεονεκτήματα χρήσης εξωτερικού αρχείου css (external css)
- Όλες οι σελίδες χρησιμοποιούν το ίδιο external css
- Αλλάζοντας το css, αυτόματα αλλάζουν όλες οι σελίδες (συνέπεια εμφάνισης)
- Ευκολότερη η αλλαγή ενός αρχείου αντί του internal css (στο head του html αρχείου) σε όλες τις σελίδες ή ακόμη χειρότερα στα πάρα πολλά inline style κάθε σελίδας (πραγματικός εφιάλτης και για τις παραμικρές αλλαγές στην εμφάνιση)
- Το εξωτερικό αρχείο css το κατεβάζει ο browser με την 1η html σελίδα που το χρησιμοποιεί και αποθηκεύεται στην cache του υπολογιστή. Άρα έχουμε γρηγορότερη φόρτωση σελίδων και μικρότερη κατανάλωση δεδομένων!
Επανάληψη +
- HTML = περεχόμενο
- Css = εμφάνιση
Είδη χρήσης css
- inline: μέσα στις ετικέτες html. Αποφεύγεται εντελώς! Μπερδεύει html με css.
- internal: στην περιοχή head (συνήθως) μιας html σελίδας. Αποφεύγεται όταν έχουμε περισσότερες από μια σελίδες!
- external: σε εξωτερικό αρχείο. Διαχωρίζεται εντελώς η γλώσσα CSS από την HTML. Είναι η προτιμώμενη μέθοδος.
Παραδείγματα όπου γράφουμε CSS:
inline [μπλέκουμε html – css]:
- Δύο Η1 και inline style=”background-color:red;” μόνο στην μία.
- Θέλει αντιγραφή στη δεύτερη h1.
internal [μπλέκουμε html – css λιγότερο] :
- Με to element <style> μέσα στο head ενός html αρχείου.
- Δύο h1 και h1{background-color:red;}
- Εφαρμόζεται σε όλα τα h1
- Δημιουργία 2ου αρχείου. Εκεί δεν έχει επιρροή η css του 1ου αρχείου.
external [απόλυτος διαχωρισμός html-css]
- δημιουργία styles.css
σύνδεση και με τα 2 αρχεία html με το element:
linkrel="stylesheet"href="style.css"
- παρατηρώ ότι αλλάζουν όλα τα h1 και στις 2 html σελίδες.
2ο Παράδειγμα:
- δημιουργώ τρεις p με lorem
- αλλάζω την 1η μόνο, με id=”… “. Προσοχή το id χρησιμοποιείται μόνο μια φορά
- Σβήνω id και δημιουργώ class
- ορίζω την παραπάνω class και στις 2 παραγράφους και βλέπω ότι πλέον με το class που είναι Global Attribute μπορώ και ορίζω μορφοποίηση παράλληλα για όσα αντικείμενα θέλω.
Κληρονομικότητα: μια εισαγωγή
<!DOCTYPE html> <html lang="en"> <head> <title>Home</title> </head> <body> <h1>Αρχική σελίδα</h1> <div> <h2>Μέσα στο div-space</h2> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, numquam quaerat? Repellat commodi laudantium quis nobis placeat distinctio. Quam voluptatem non maxime exercitationem, cum unde quos ducimus consequatur qui quia. </p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas asperiores, <b>officiis exercitationem</b> quibusdam cum neque deserunt commodi nesciunt autem sit obcaecati quos sequi impedit quaerat, minima vero, pariatur libero. Vitae? <br> </div> </body> </html>
div{
border: 10px solid red;
color: blue;
overflow: hidden;
width: 80%;
}
p{
color: red;
}
b{
color: green;
}
To αποτέλεσμα των παραπάνω:
Προτεραιότητα:
Το 1. Inline style (που αποφεύγουμε…) έχει τη μέγιστη προτεραιότητα. To 3. Browser default (οι εξορισμού τιμές του browser) έχουν την μικρότερη.
- Inline style
- External and internal style sheets
- Browser default
Selector ή επιλογέας
ή
Ένας CSS επιλογέας, επιλέγει ποια στοιχεία της HTML θα μορφοποιήσουμε.
Γενικά ισχύει ότι:
ΠΡΟΣΟΧΗ!: Στη διαφορετική σύνταξη όταν αναθέτουμε τιμές:
Α/ στα attributes των element της html, π.χ.
img src="logo1.jpg" alt="Το λογότυπο"
Β/ στις properties των declarations στη css
p{
background-color:antiquewhite;
color: blue;
}
Γενικοί κανόνες σύνταξης:
- Ανάμεσα στην τιμή και στις μονάδες μέτρησης δεν βάζουμε κενό π.χ.: font-size: 40px;
Έως τώρα είδαμε τους selectors:
- ετικέτες (tags) των elements π.χ. h1, p, div
- id
- class
οι οποίοι ανήκουν στους απλούς επιλογείς (simple selectors).
Κατηγορίες Selectors
Γενικά υπάρχουν πέντε κατηγορίες selectors:
- Simple selectors
- Combinator selectors
- Pseudo-class selectors
- Pseudo-elements selectors
- Attribute selectors
Γενικότερα υπάρχουν πολλοί επιλογείς που ανήκουν στις παραπάνω κατηγορίες:
https://www.w3schools.com/cssref/css_selectors.asp
Είναι πολύ χρήσιμη η σελίδα: https://www.w3schools.com/cssref/trysel.asp
η οποία παρουσιάζει τους selectors και πως μπορούν να συνδυαστούν!
Άσκηση:
α) Συνδυασμός class και element π.χ. p.center
Ερώτηση: αν έχω κλάση center και γράψω <p class=center>, είναι διαφορετικό από το να δημιουργήσω τον selector p.center;
β) χρήση * (Universal Selector)
γ) συνδυασμός πολλών selectors που μοιράζονται τα ίδα declarations (δεν χρειάζεται να ξαναγράφουμε τα ίδια declarations) για κάθε έναν selector:
h1 {
background-text: black;
color: white;
}
h2 {
background-text: black;
color: white;
}
p {
background-text: black;
color: white;
}
/* -------------------------- */
/* Μπορώ να τα γράψω γρήγορα ως: */
h1, h2, p {
background-text: black;
color: white;}
Άσκηση:
HTML: δημιουργώ h1 και 3 p
CSS: Ορίζω body{ font-size:8px}.
Δημιουργώ κλάσεις:
p1{ font-size:1em}
p2{font-size:1.5em} άρα 1.5em = 12px = 120%,
p3{font-size: 200%}
Εάν θέλω και h2 ίδιο μέγεθος με p3 τότε γράφω:
CSS: p3, h2 {}
CSS: δημιουργώ news {border: 1px solid black}
HTML: <div class=”news”>
Εάν μέσα στο div βάλω και h1 και θέλω να αλλάξω το χρώμα των γραμμάτων τότε:
CSS+HTML
- ορίζω νέα class .greentext{} ή
- ορίζω .news h1 {…}
Συνεχίζουμε βάζοντας μέσα στο h1 και το <i>
CSS: .news h1 i{text-decoration:underline}
