Με την HTML δημιουργούμε και περιγράφουμε το περιεχόμενο μιας ιστοσελίδας.
Με την CSS τροποποιούμε την εμφάνιση μιας ιστοσελίδας.
Σύνδεση HTML και CSS
Η CSS προϋποθέτει την ύπαρξη html αρχείου το οποίο και μορφοποιεί (μόνο την εμφάνιση).
Τι αλλάζει η CSS;
Απάντηση: Χρώμα, μέγεθος, θέση, συμπεριφορά/αντίδραση, προσαρμογή σε διαφορετικές οθόνες κ.α.
https://www.w3schools.com/html/html_css.asp
Γράφουμε css με τρεις διαφορετικούς τρόπους:
- inline
- σαν attribute style μέσα στο 1ο tag κάθε element
- αφορά μόνο το συγκεκριμένο element
- έχει τη μεγαλύτερη ισχύ
- MONO για γρήγορες δοκιμές. Πρέπει να το αποφεύγουμε!
- Αδύνατη η συντήρηση μεγάλων ιστοσελίδων
- Παράδειγμα με δύο <p> όπου βάζω inline css μόνο στην πρώτη.
- internal
- χρησιμοποιώντας το element <style> μέσα στην περιοχή <head> ενός αρχείου/σελίδας html
- αφορά μόνο τη συγκεκριμένη html σελίδα.
- καλύτερος τρόπος από τη χρήση inline css.
- Δεν ανακατεύει το περιεχόμενο (html) με τη μορφοποίηση (css)
- Παράδειγμα με selector το <p> και ιδιότητα color και background-color στην ίδια γραμμή ή σε 2 γραμμές.
- Πάντα διαχωρίζω τις ιδιότητες με ;
- δημιουργώ και 2η σελίδα. Παρατηρώ ότι δεν επηρεάζει το style της 1ης ιστοσελίδας την εμφάνιση της 2ης (Ασυνέπεια εμφάνισης). Θα πρέπει να προσθέσω και στο head της 2ης το style.
- Μεγάλη δυσκολία για πολλές ιστοσελίδες ενός site…!
- external
- χρησιμοποιούμε ένα ξεχωριστό, εξωτερικό αρχείο με κατάληξη .css, έστω π.χ. styles.css
- δηλώνουμε ποιό και που είναι αυτό το αρχείο, στην περιοχή <head> της σελίδας html που το χρησιμποιεί, με το element <link rel=”stylesheet” href=”styles.css”>.
- στο αρχείο γράφουμε μόνο css και καθόλου html
- έτσι, διαχωρίζουμε εντελώς το περιεχόμενο (html) από την εμφάνιση (css)
- συνήθως χρησιμοποιούμε το ίδιο αρχείο css για όλες τις σελίδες ώστε να έχουν την ίδια εμφάνιση (συνέπεια σχεδίασης). Όταν αλλάξουμε το αρχείο css, τότε αυτόματα σε όλες οι σελίδες που το χρησιμοποιούν, τροποιήται αυτόματα και η εμφάνισή τους!
- Παράδειγμα: Δημιουργώ 2 σελίδες που χρησιμοποιούν το ίδιο style.css αρχείο. Με nav βάζω σύνδεσμο από την μία στην άλλη. Προσθέτω style σε <p> και <h1> και παρατηρώ τη συνέπεια στην εμφάνιση και στις 2 ιστοσελίδες!
Σχόλια
Σχόλια σε μια ή πολλές γραμμές με /* */
Τα χρησιμοποιώ αρκετά για να κάνω δοκιμές απενεργοποιώντας styles.
Selectors
- Όλα τα elements μπορούν να χρησιμοποιηθούν ως selectors.
- Οι κανόνες μπαίνουν μέσα σε άγκιστρα {}
- Οι κανόνες περιλαμβάνουν ιδιότητα:τιμή; (property:value)
- Μέσα στα {} οι ιδιότητες χωρίζονται με τις τιμές τους με : και τελειώνουν με ; μετά μπορεί να ακολουθήσει νέο ζευγάρι ιδιότητας και τιμής
- προσοχή αν ξεχάσουμε το “;” τότε δεν εκτελείται η τρέχουσα και η επόμενη ιδιότητα γιατί δεν διαχωρίζονται.
- Μπορούμε να συνδυάσουμε πολλούς selectors διαχωριζόμενους με ” “. Δημιουργούμε έτσι συνδυαστικούς κανόνες:
p{
background-color:antiquewhite;
color: blue;
}
p span {
color: brown;
}
Στο παραπάνω υπερισχύει το 2ο.
Α’.: Ομοίως μπορούμε να έχουμε p span span και να ορίσουμε τι γίνεται όταν έχουμε span μέσα σε span.
Β’.: Διαφορετικά θα μπορούσαμε να ορίσουμε μια νέα κλάση για το ενσωματωμένο span.
Ωστόσο για να αποφύγουμε τη δημιουργία πολλών κλάσεων προτιμάμε τον Α’ τρόπο.
Ωστόσο selectors δεν είναι μόνο τα elements αλλά ότι μπορεί να επιλεχθεί για να αλλάξει η μορφή του. Μια λίστα μπορείτε να δείτε στο: https://www.w3schools.com/cssref/css_selectors.asp
Μια ωραία σελίδα όπου εμφανίζει τι κάνει κάθε είδος selector μπορείτε να δείτε στο: https://www.w3schools.com/cssref/trysel.asp
Οι ιδιότητες (properties) είναι πάρα -πάρα πολλές. Μπορείτε να δείτε μια λίστα στο: https://www.w3schools.com/cssref/default.asp
Εναλλακτικά για τις ιδιότητες μπορείτε να συμβουλευτείτε και το:
https://www.tutorialrepublic.com/css-reference/css3-properties.php
Εφαρμογή:
- inline
- + –
- internal
- h1
- + –
- external
- με selector p {backgrount-color:yellow}
- έστω θέλω η 2η παράγραφος να έχει άλλο backgrount-color. Τότε χρησιμοποιώ class. Το ίδιο class μπορεί να χρησιμοποιηθεί για πολλά elements.
Κληρονομικότητα:
Έστω σύνδεσμος a που ανήκει σε μια p που ανήκει στο body. Τότε ο browser:
- κοιτάζει εάν έχω στυλ για το a και το εφαρμόζει (έχει τη μεγαλύτερη ισχύ)
- μετά εφαρμόζει το στυλ της παραγράφου p,
- μετά εφαρμόζει το στυλ του body (έχει τη μικρότερη ισχύ).
- όσο ποιο γενικός ο selector, τόσο μικρότερη η ισχύ του
Έαν θέλω π.χ. μία παράγραφος p να έχει διαφορετική εμφάνιση τότε χρησιμοποιώ το attribute id:
<p id="MainP">
Lorem ipsum.
</p>
και μπορώ να χρησιμοποιήσω το #MainP ως id selector που θα αφορά μόνο τη συγκεκριμένη παράγραφο:
#MainP{
font-size: x-large;
}
Ωστόσο αυτός το τρόπος στυλ μπορεί να χρησιμοποιηθεί μόνο από μια παράγραφο. Δηλαδή το attribute id=”MainP” μπορεί να το έχει μόνο μια παράγραφος.
Για να μπορεί να χρησιμοποιηθεί αυτό το στυλ από πολλές παραγράφους τότε χρησιμοποιώ το attribute class. Έτσι το παραπάνω μπορώ να το τροποποιήσω ως εξής:
<p class="MainP">
1η παράγραφος. Μπίρι μπίρι.
</p>
<p class="MainP">
2η παράγραφος. Μπλα μπλα.
</p>
και μπορώ να χρησιμοποιήσω το .MainP ως class selector που θα αφορά όλες τις παραγράφους που το χρησιμοποιούν:
.MainP{
font-size: x-large;
}
Κανόνες ονομάτων κλάσεων
- οι κλάσεις πρέπει να ξεκινούν με γράμμα (μικρό ή κεφαλαίο)
- μπορούν να περιέχουν γράμματα (μικρά ή κεφαλαία), αριθμούς και τους χαρακτήρες “-” και “_”
- ΔΕΝ επιτρέπονται τα κενά.
font-size
em vs px
- Το em είναι σχετικό μέγεθος. Για παράδειγμα 2em είναι διπλάσιο από το font-size που κληρονομεί.
- Το χρησιμοποιούμε για να λύνουμε το πρόβλημα εμφάνισης κειμένου σε διαφορετικού μεγέθους οθόνες (ΗΥ, κινητών κλπ)
Αν θέλω το a να είναι έχει το μέγεθος της κλάσης .MainP αλλά επιπλέον να έχει γαλάζιο χρώμα φόντου τότε θα φτιάξω έναν νέο selector:
a.MainP {
background-color: aquamarine;
}
μπορούμε να επιλέξουμε να έχουν το ίδιο στυλ περισσότερα από ένα selectors εάν στο css τα γράψουμε π.χ.
h1, h2 {
color: brown;
background-color: bisque;
}
Φυσικά μπορούμε να χρησιμοποιήσουμε τα elements
και για να ορίσουμε στυλ για τις περιοχές που αυτά περικλείουν!
Selector *
To * αποτελεί έναν γενικό selector και το χρησιμοποιούμε για να δώσουμε στυλ στα πάντα (εκτός φυσικά εάν έχουν ήδη πιο προσδιορισμένο στυλ, το οποίο και υπερισχύει).
Υπάρχουν εξορισμού τιμές ιδιοτήτων
Για παράδειγμα ο browser βάζει margin στο body 8px. Μπορούμε να το βγάλουμε, βάζοντας;
body{
margin: 0px;
}
O browser δίνει στα
elements εξορισμού τιμές στις ιδιότητές του (π.χ χρώμα, περιθώριο, μέγεθος κλπ), τις οποίες τις περισσότερες φορές τις αλλάζουμε γιατί η εξ’ορισμού μορφή δεν είναι όμορφη.
