CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ

Transcript

1 CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ

2 Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων

3 Τι είναι τα Cascading Style Sheets Μεταφράζονται σαν: «Επικαλυπτόμενα φύλλα στυλ» ή «Διαδοχικά Φύλλα Στυλ» Ένας μηχανισμός (σαν «γλώσσα προγραμματισμού») που χρησιμοποιείται για τον έλεγχο της εμφάνισης ενός εγγράφου που γράφτηκε στις γλώσσες HTML και XHTML, δηλαδή για τον έλεγχο της εμφάνισης μιας ιστοσελίδας και γενικότερα ενός ιστοτόπου. Το στυλ περιλαμβάνει θέματα όπως χρώματα, γραμματοσειρές, μεγέθη, διάταξη, τοποθέτηση κλπ. Το πρότυπο CSS υποστηρίζεται από τους περισσότερους διαδεδομένους φυλλομετρητές (browsers).

4 Για ποιο λόγο δημιουργήθηκαν Η HTML δεν είχε σκοπό να περιέχει ετικέτες για τη μορφοποίηση ενός εγγράφου. Η HTML είχε ως σκοπό να καθορίσει το περιεχόμενο ενός εγγράφου, όπως: <h1> Αυτή είναι μια επικεφαλίδα </ h1> <p> Αυτή είναι μια παράγραφος </ p> Όταν οι ετικέτες όπως η <font>, και ιδιότητες χρώματος προστέθηκαν στις προδιαγραφές της HTML 3.2, άρχισε ένας εφιάλτης για τους web developers. Η ανάπτυξη των μεγάλων δικτυακών τόπων, όπου γραμματοσειρές και πληροφορίες χρώματος προστίθενται κάθε σελίδα, κατέστη μια μακρά και δαπανηρή διαδικασία. Για να λύσει αυτό το πρόβλημα, η Κοινοπραξία Παγκόσμιου Ιστού (W3C δημιούργησε το πρότυπο CSS. Στην HTML 4.1, όλη η μορφοποίηση θα μπορούσε να αφαιρεθεί από το HTML έγγραφο, και να αποθηκευτεί σε ξεχωριστό αρχείο CSS. Όλοι οι σύγχρονοι φυλλομετρητές υποστηρίζουν σήμερα το πρότυπο CSS (αν και συνεχίζουν να υπάρχουν κάποιες μικρές διαφορές μεταξύ τους)

5 Πλεονεκτήματα μορφοποίησης με CSS Διαχωρισμός περιεχομένου από παρουσίαση. Απλούστευση, σαφήνεια και αποδοτικότητα σε σχεδίαση, υλοποίηση, έλεγχο & συντήρηση περιεχομένου και στυλ. Παρέχει επαναχρησιμοποίηση, επεκτασιμότητα περιεχομένου και στυλ. Μορφοποίηση πολλών ιστοσελίδων με ένα στυλ (π.χ. μορφοποίηση όλων των σελίδων ενός ιστότοπου με το ίδιο στυλ).

6 Σύνταξη CSS κανόνων Επιλογέας {Ιδιότητα:Τιμή; Ιδιότητα:Τιμή; } Επιλογέας Δήλωση Δήλωση Ιδιότητα Τιμή Ιδιότητα Τιμή Π Α Ρ Α Δ Ε Ι Γ Μ Α Κάθε δήλωση χωρίζεται με το ελληνικό ερωτηματικό (;) p { color: red; text-align: center; } Για ευκολότερη ανάγνωση: p { } color: red; text-align: center;

7 Ο επιλογέας id Επιλογέας {Ιδιότητα:Τιμή; Ιδιότητα:Τιμή; } Εκτός από τους καθορισμένους επιλογείς HTML, το πρότυπο CSS επιτρέπει να καθορίσετε τους δικού σας επιλογείς που ονομάζονται id" και class". Ο επιλογέας id (συμβολίζεται με #) χρησιμοποιείται για να καθορίσει ένα στυλ για ένα, μοναδικό στοιχείο. Π Α Ρ Α Δ Ε Ι Γ Μ Α Δήλωση CSS #footer { background-color: gray;} Χρήση στην HTML: <p id="footer " > </p>

8 Ο επιλογέας class Επιλογέας {Ιδιότητα:Τιμή; Ιδιότητα:Τιμή; } Ο επιλογέας class - συμβολίζεται με την τελεία (.) - χρησιμοποιείται για να καθορίσει ένα στυλ για μια ομάδα στοιχείων. Σε αντίθεση με τον επιλογέα id, ο επιλογέας class χρησιμοποιείται πιο συχνά σε διάφορα στοιχεία. Αυτό επιτρέπει τον ορισμό ενός συγκεκριμένου στυλ για κάθε στοιχείο HTML της ίδιας κατηγορίας (class). Π Α Ρ Α Δ Ε Ι Γ Μ Α Δήλωση CSS.center { text-align: center; } Χρήση στην HTML: <p class= center > </p>

9 Ομαδοποίηση επιλογέων Σε φύλλα στυλ υπάρχουν συχνά στοιχεία με το ίδιο στυλ. π.χ. h1 { color: green; } h2 { } p { } color: green; color: green; Για ελαχιστοποίηση του κώδικα χωρίστε κάθε επιλογέα με κόμμα: h1, h2, p { color: green; }

10 Εμφωλευμένοι επιλογείς Είναι δυνατόν να εφαρμόσετε ένα στυλ για επιλογέα εντός επιλογέα. Στο παρακάτω παράδειγμα, ένα στυλ ορίζεται για όλα τα στοιχεία p, και ένα ξεχωριστό στυλ ορίζεται για τα στοιχεία p και h1 που είναι εμφωλευμένα και με την ένδειξη κατηγορίας (class): content. p { } color: red; h1 { color: purple; }.content { background-color: green; }.content h1 { color: orange; } <p>αυτή θα είναι μια παράγραφος με κόκκινα γράμματα</p> <div class="content"> Αυτή η περιοχή θα έχει πράσινο φόντο <h1>αυτή η κεφαλίδα θα έχει πορτοκαλί γράμματα με πράσινο φόντο</h1> <p>αυτή η παράγραφος θα έχει έντονα μπλε γράμματα με πράσινο φόντο </p> </div> <h1> Αυτή η κεφαλίδα θα έχει μωβ γράμματα </h1>.content p { color: blue; font-weight: bold; }

11 Ψευδοκλάσεις (pseudo-classes) Οι ψευδοκλάσεις CSS χρησιμοποιούνται για να προσθέσουν εφέ σε ορισμένα στοιχεία της σελίδας μας και κυρίως σε συνδέσμους. Η σύνταξη των ψευδοκλάσεων είναι η παρακάτω: επιλογέας:ψευδοκλάση { ιδιότητα: τιμή; } π.χ: a:link { color: blue; } a:hover { color: red; } Μερικές από τις ψευδοκλάσεις είναι: :link, εφαρμόζεται το στυλ με την ψευδοκλάση αυτή, όταν ο χρήστης δεν έχει επισκεφθεί παλαιότερα τον σύνδεσμο. :visited, εφαρμόζεται το στυλ με την ψευδοκλάση αυτή, όταν ο χρήστης έχει επισκεφθεί παλαιότερα τον σύνδεσμο. :hover, εφαρμόζεται το στυλ με την ψευδοκλάση αυτή, όταν ο χρήστης τοποθετεί τον δείκτη του ποντικιού του επάνω απο τον σύνδεσμο. :active, εφαρμόζεται το στυλ με την ψευδοκλάση αυτή, όταν ο χρήστης έχει πατημένο το αριστερό κλικ του ποντικιού του επάνω στον σύνδεσμο.

12 Επιλογείς CSS (CSS Selectors) Όπως έχουμε δει, με τους επιλογείς αναφερόμαστε σε στοιχεία τα οποία πρόκειται να μορφοποιήσουμε. Έχουμε ήδη αναφέρει ορισμένους επιλογείς CSS. Μερικοί από τους πιο συχνά χρησιμοποιούμενους είναι: Επιλογέας Παράδειγμα Περιγραφή CSS.class.intro Επιλογή όλων των στοιχείων με class="intro" 1 #id #firstname Επιλογή όλων των στοιχείων με id="firstname" 1 * * Επιλογή όλων των στοιχείων 2 element p Επιλογή όλων των στοιχείων <p> 1 element,element div,p Επιλογή όλων των στοιχείων <p> και <div> 1 element element div p Επιλογή όλων των στοιχείων <p> μέσα σε <div> 1 element>element div>p Επιλογή όλων των στοιχείων <p> τα οποία έχουν γονέα <div> 2 element+element div+p Επιλογή όλων των στοιχείων <p> τα οποία είναι τοποθετημένα αμέσως μετά από <div> 2 [attribute] [target] Επιλογή όλων των στοιχείων με ιδιότητα target 2 [attribute=value] [target=_blank] Επιλογή όλων των στοιχείων με ιδιότητα target="_blank" 2 [attribute~=value] [title~=flower] Επιλογή όλων των στοιχείων με την ιδιότητα title να περιέχει τη λέξη "flower" 2 [attribute =value] [lang =en] Επιλογή όλων των στοιχείων με την ιδιότητα lang να ξεκινά με τη λέξη "en" 2 [attribute$=value] a[href$=".pdf"] Επιλογή όλων των στοιχείων <a> με την ιδιότητα href να τελειώνει σε ".pdf" 3

13 Επιλογείς CSS (CSS Selectors) Κάποιοι άλλοι επιλογείς: Επιλογέας Παράδειγμα Περιγραφή CSS :first-letter p:first-letter Επιλογή του πρώτου γράμματος κάθε στοιχείου <p> 1 :first-line p:first-line Επιλογή της πρώτης γράμμής κάθε στοιχείου <p> 1 :first-child p:first-child Επιλογή κάθε στοιχείου <p> το οποίο είναι το πρώτο τέκνο του γονέα του :before p:before Εισαγωγή περιεχομένου πριν από κάθε στοιχείο <p> 2 :after p:after Εισαγωγή περιεχομένου μετά από κάθε στοιχείο <p> 2 :lang(language) :last-child p:lang(el) p:last-child Επιλογή κάθε στοιχείου <p> με την ιδιότητα lang να έχει τιμή "el" (Ελληνικά) Επιλογή κάθε στοιχείου <p> το οποίο είναι το τελευταίο τέκνο του γονέα του Λίστα με περισσότερους επιλογείς: Έλεγχος υποστήριξης CSS3 και HTML5 από τον φυλλομετρητή:

14 CSS ιδιότητες Ιδιότητες γραμματοσειρών font-family, font-style Ιδιότητες χρωμάτων και φόντου color, background Ιδιότητες κειμένου letter-spacing, text-align Ιδιότητες πλαισίου margin, border, padding Ιδιότητες λίστας list-style-type, list-style-image Ιδιότητες τοποθέτησης top, left Ιδιότητες εκτύπωσης page-break-before, page-break-after Μερικές ενδεικτικές ιδιότητες CSS Λίστα με περισσότερες ιδιότητες: cssref/default.asp

15 Εφαρμογή CSS κανόνων Ένθετο στυλ <body style="background-color: gray;"> <p style= font-size:12px;">μορφοποίηση με ένθετο στυλ</p> </body> Μορφοποίηση ενός στοιχείου με κάθε κανόνα Μη αποδοτικό και ιδιαίτερα πολύπλοκο Χρήση της HTML ιδιότητας style

16 Εφαρμογή CSS κανόνων <head> Ενσωματωμένο (εσωτερικό) στυλ <title>μορφοποίηση με ενσωματωμένο στυλ</title> <style type="text/css"> body { background-color: gray; color: blue; } p { font-size:12px; } </style> </head> Το μπλοκ των CSS κανόνων μορφοποιεί όλα τα στοιχεία της σελίδας Περιορίζει την επανάληψη κανόνων Κάθε σελίδα πρέπει να ορίζει και να συντηρεί τους δικούς της κανόνες Χρήση της HTML ετικέτας <style> μέσα στην ενότητα <head> </head>

17 Εφαρμογή CSS κανόνων Εξωτερικό φύλλο στυλ <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> Οι CSS κανόνες ορίζονται σε ένα σημείο, σε ξεχωριστό αρχείο (π.χ. style.css) και επαναχρησιμοποιούνται Η HTML σελίδα συνδέεται με το εξωτερικό αρχείο To εξωτερικό αρχείο μπορεί να συνδεθεί και να μορφοποιήσει πολλές HTML σελίδες Επαναχρησιμοποίηση στυλ, ευκολία συντήρησης & επέκτασης, πλήρης διαχωρισμός περιεχομένου από παρουσίαση Χρήση της HTML ετικέτας <style> μέσα στην ενότητα <head> </head>

18 Επικάλυψη CSS κανόνων Στην πράξη συνδυάζονται οι τρεις τρόποι εφαρμογής στυλ, με αποτέλεσμα να υπάρχει επικάλυψη των CSS κανόνων. Σε γενικές γραμμές, όταν υπάρχει επικάλυψη κανόνων, οι ειδικότεροι κανόνες υπερισχύουν έναντι των γενικότερων. To πρότυπο CSS ορίζει προτεραιότητες στην εφαρμογή κανόνων με τεχνικές επίλυσης διαφορών. Πιο συγκεκριμένα, οι κανόνες εφαρμόζονται με την παρακάτω σειρά: Κανόνες του φυλλομετρητή Κανόνες ορισμένοι από το χρήστη (στο φυλλομετρητή) Κανόνες εξωτερικού.css αρχείου Ενσωματωμένοι κανόνες Ένθετοι κανόνες Κανόνες που μαρκάρονται ως!important (σημαντικοί) Σημαντικοί κανόνες χρήστη (στο φυλλομετρητή) Αύξουσα σειρά βαρύτητας

19 Παράδειγμα επικάλυψης CSS κανόνων <html> <head> <link rel="stylesheet" type="text/css" href="demostyles.css"> <style type="text/css"> h3 {font-size: 25pt; font-style: italic} </style> </head> <body> <h3>css tutorial</h3> Ένθετο στυλ Ενσωματωμένο στυλ <h3 style= "font-style: normal"> Applying CSS rules </h3> <h2>syntax</h2> <p class="p1">remember:</p> <p class="p2">inline rules prevail!</p> </body> </html> Εξωτερικό αρχείο CSS κανόνων demostyles.css: h2 {text-decoration: underline;} h3 {font-family: serif; font-size: 130%; color: red;}.p1 {font-size: 11pt; margin-left: 100px;}.p2 {font-family: arial;}

20 Συγχαρητήρια Μάθατε CSS. Εφαρμόστε το για να κάνετε όμορφο τον ιστότοπο σας.