Μορφοποίηση ιστοσελίδων - CSS

 Στο παρόν μάθημα ασχολούμαστε με τη λογική της χρήσης της μορφοποίησης του κειμένου μέσω χρωμάτων και της χρήσης κοινών προτύποων για την εμφάνιση των ιστοσελίδων σε ένα διαδικτιακό τόπο (web site)

Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11

( http://ebooks.edu.gr/ebooks/v/html/8547/2714/Pliroforiki_A-Lykeiou_html-empl/index3_11.html )

Πολύτιμο εργαλείο μας είναι το site  https://www.w3schools.com/html/  

Αν έχουμε ξεχάσει τη χρήση του μπορούμε να μελετήσουμε ξανά το κείμενο που βρίσκεται στο https://mourikisper.blogspot.com/2020/04/online-editor-html.html 

Η CSS, αρχικά των λέξεων Cascading Style Sheets (αλληλουχίες φύλλων στυλ), είναι μια γλώσσα σήμανσης για τον καθορισμό της μορφής και εμφάνισης εγγράφων HTML. Περιλαμβάνει κανόνες που καθορίζουν τη διάταξη και τη μορφοποίηση των στοιχείων ενός εγγράφου HTML. 

Η σημασία του  όρου  "Cascading" ( "αλληλουχίες" ) έχει την έννοια ότι ένα "στυλ" που εφαρμόζεται σε ένα αντικείμενο, εφαρμόζεται αυτόματα και για όλα τα "παιδιά" του. Για παράδειγμα αν στο στοιχείο "body" μια HTML σελίδας (θυμηθείτε ότι όπως είδαμε σε προηγούμενο μάθημα αναφέρεται στο σύνολο του περιεχομένου της ιστοσελίδας) ορίσουμε ότι χρώμα του κειμένου είναι Μπλε, αυτό το χαρακτηριστικό θα "κληρονομηθεί" σε όλα τα στοιχεία που βρίσκονται μέσα σε αυτό στοιχείο (εκτός αν για κάποιο από αυτά ορίσουμε ένα άλλο χρώμα).

Οι κανόνες αυτοί είναι ανεξάρτητοι από το ίδιο το έγγραφο HTML. Επιτρέπουν στον συντάκτη να εστιάσει στη δομή και το περιεχόμενο του εγγράφου με τη γλώσσα HTML και να καθορίσει αυτόνομα και ανεξάρτητα τη διάταξη και την εμφάνισή του. Ο διαχωρισμός αυτός επιτρέπει την προσαρμογή της διάταξης και της εμφάνισης ενός εγγράφου HTML ανεξάρτητα από το ίδιο το έγγραφο HTML, και επιτυγχάνεται συνήθως με την καταγραφή των κανόνων σε ξεχωριστά αρχεία.

Η χρήση ενός συνόλου κανόνων CSS γίνεται συνήθως με σύνδεση του αντίστοιχου αρχείου με επέκταση .css μέσα στο έγγραφο HTML με έναν από τους παρακάτω τρόπους:

• με την παρακάτω ετικέτα link, μέσα στην ετικέτα head (προτεινόμενος τρόπος)
  <link rel="stylesheet" media="screen" href="to-styl-mou.css">
• με ενσωμάτωση των κανόνων στο έγγραφο HTML με την ετικέτα style
  <style> h1 { color: red; } </style>

Ενά παράδειγμα αυτού μπορούμε να δούμε στο https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_internal 

Χαρακτηριστικοί κανόνες μορφοποίησης

Οι κανόνες μορφοποίησης CSS συντάσσονται σε μορφή απλού κειμένου και αποτελούνται από έναν «επιλογέα» και κανόνες (μέσα σε αγκύλες { και }) που διαχωρίζονται από το ελληνικό ερωτηματικό «;» και αποτελούνται από ζεύγη ονομάτων και τιμών χωρισμένα με άνω κάτω τελεία «:».

P { color: green; border-bottom: 1px solid black; padding: 10px; }

Το παραπάνω παράδειγμα καθορίζει ότι όλες οι παράγραφοι (P) θα έχουν χρώμα κειμένου πράσινο, κάτω περίγραμμα πάχους 1 pixel και περιθώριο 10 px από κάθε πλευρά της παραγράφου.

Οι «επιλογείς» είναι ονόματα ετικετών της γλώσσας HTML (όπως P, H1, div) αλλά συνήθως χρησιμοποιούνται σε συνδυασμό με κλάσεις ή κωδικούς αναγνώρισης. Αρκεί να γνωρίζουμε ότι οι κλάσεις (ιδιότητα class την ετικετών) ομαδοποιούν κάποια στοιχεία, ενώ οι κωδικοί αναγνώρισης (ιδιότητα id των ετικετών) χρησιμοποιούνται για τον μοναδικό προσδιορισμό κάποιων στοιχείων. Για παράδειγμα:

P#title { color: red; font-size: 20px; }

Πέρα από τους κανόνες για τις παραγράφους, ειδικά για την παράγραφο με κωδικό αναγνώρισης title, το χρώμα γραμμάτων θα είναι κόκκινο και το μέγεθος 20pixel.

P.orismos { padding-left: 20px; border-left: 2px; }

Εκτός από τους κανόνες για τις παραγράφους, για όλες τις παραγράφους με κλάση orismos θα υπάρχει περιθώριο αριστερά 20pixel και περίγραμμα αριστερά 2pixel.

Περισσότερα στοιχεία για τη CSS μπορουν να βρεθούν στο https://www.w3schools.com/html/html_css.asp 

ΔΡΑΣΤΗΡΙΟΤΗΤΑ

Στο https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_internal    δοκιμάστε να δημιουργήσετε μια μορφοποίηση της ιστοσελίδας ώστε να έχει ένα ελαφρύ κίτρινο (LightYellow)  background, οι παράγραφοι να έχουν Μπλε χρώμα (blue),  οι επικεφαλίδες Η1 πράσινο χρώμα (green) και οι επικεφαλίδες Η2 μωβ χρώμα (magenta).

Στη συνέχεια βάλτε κάποιο μικρό περιεχόμενο σε κάθε είδος ετικέτας (μια ή δύο γραμμές είναι αρκετές).

Αν το επιθυμείτε, μπορείτε να κάνετε άλλους συνδυασμούς χρωμάτων ή μορφοποιήσεων

Μια πλήρη περιγραφή των διαθέσιμων χρωμάτων μπορεί να βρεθεί στο https://www.w3schools.com/html/html_colors.asp