Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε εφικτές μορφοποιήσεις οι οποίες ήταν αδύνατες ή πολύ δύσκολες με την κλασσική HTML. Ευκολότερη συντήρηση των ιστοσελίδων. Η εμφάνιση ενός ολόκληρου site μπορεί να ελέγχεται από ένα μόνο εξωτερικό αρχείο CSS. Έτσι, κάθε αλλαγή στο στυλ της ιστοσελίδας μπορεί να γίνεται με μια μοναδική αλλαγή σε αυτό το αρχείο, αντί για την επεξεργασία πολλών σημείων σε κάθε σελίδα που υπάρχει στο site. Μικρότερο μέγεθος αρχείου, δεδομένου ότι ο κάθε κανόνας μορφοποίησης γράφεται μόνο μια φορά και όχι σε κάθε σημείο που εφαρμόζεται. Καλύτερο SEO (Search engine optimization). Οι μηχανές αναζήτησης δεν «μπερδεύονται» ανάμεσα σε περιεχόμενο και τη μορφοποίηση του, αλλά έχουν πρόσβαση στο περιεχόμενο σκέτο, οπότε είναι πολύ ευκολότερο να το καταγράψουν και να το αρχειοθετήσουν (indexing). Γρηγορότερες σελίδες. Όταν χρησιμοποιούμε εξωτερικό αρχείο CSS, ο browser την πρώτη φορά που θα φορτώσει κάποια σελίδα του site μας το αποθηκεύει στην cache, οπότε δεν χρειάζεται να το κατεβάσει ξανά κάθε φορά που κατεβάζει ο χρήστης του κάποια άλλη σελίδα του site μας. Κανόνες CSS Ένας «κανόνας» CSS αποτελείται από 2 μέρη: Τον επιλογέα (CSS selector) ο οποίος αφορά το ΤΙ θα μορφοποιηθεί και τις ιδιότητες (CSS properties) οι οποίες αφορούν το ΠΩΣ αυτό θα μορφοποιηθεί. Η σύνταξη είναι η εξής: επιλογέας { ιδιότητα_1: τιμή_1; ιδιότητα_2: τιμή_2; ιδιότητα_3: τιμή_3; επιλογέας είναι τα στοιχεία που θα επιλεχτούν, ιδιότητα είναι ποια χαρακτηριστικά θα οριστούν, τιμή είναι οι τιμές που θα ρυθμιστούν. Βασικές σημειώσεις CSS 0
Μπορείτε να δείτε ένα μικρό παράδειγμα CSS παρακάτω: Κώδικας <html> <head> <title> CSS</title> Καλώς ήλθατε στο CSS <style type="text/css"> body { background color: lightblue; font family: Arial; font size: 16px; font style: italic; </style> </head> <body> Καλώς ήλθατε στο CSS </body> </html> Εισαγωγή κώδικα CSS σε μία σελίδα HTML Υπάρχουν 3 τρόποι με τους οποίους μπορούμε να εισάγουμε κώδικα CSS στην σελίδα μας. 1ος τρόπος: Μπορούμε να εισάγουμε τον κώδικα CSS απευθείας στο αρχείο HTML. Στην κεφαλίδα < head > του αρχείου HTML, εισάγουμε την ετικέτα style και ορίζουμε τον χαρακτηριστικό type σε text/css. <style type="text/css"> κώδικας CSS </style> <html> <head> <title> CSS</title> <style type="text/css"> body { font family: Arial; font size: 16px; font style: italic; </style> </head> <body> Καλώς ήλθατε στο CSS </body> </html> Καλώς ήλθατε στο CSS Βασικές σημειώσεις CSS 1
2ος τρόπος: Περιλαμβάνουμε ένα εξωτερικό αρχείο CSS, στην κεφαλή ( head ) της ιστοσελίδας μας: <link rel="stylesheet" href="/example/style.css" type="text/css" /> rel : Ορίζει τον τύπο της ένταξης. href : Ορίζει το αρχείο που θα συμπεριλάβουμε. Στην περίπτωσή μας το αρχείο style.css από τον κατάλογο example της ιστοσελίδας μας. type : Ορίζει τον τύπο του συνδέσμου. Για stylesheets αυτό είναι text/css. Κώδικας HTML <html> <head> <title> CSS</title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> <body> Καλώς ήλθατε στο CSS </body> </html> Καλώς ήλθατε στο CSS Κώδικας αρχείου mystyle.css font family: Arial; font size: 16px; font style: italic; 3ος τρόπος Inline CSS: Αν επιθυμούμε να μορφοποιήσουμε ένα στοιχείο μόνο, και δεν πρόκειται να χρειαστούμε αυτό το είδος μορφοποίησης για τίποτε άλλο στο site, μπορούμε να γράψουμε ιδιότητες CSS στην ιδιότητα style, την οποία διαθέτει σχεδόν κάθε στοιχείο της HTML. Πχ για να κάνουμε μια συγκεκριμένη παράγραφο κόκκινη, μπορούμε να γράψουμε: <p style= color:red; > Βασικές σημειώσεις CSS 2
Επιλογείς Με τους επιλογείς μπορούμε να βρίσκουμε τα στοιχεία της ιστοσελίδας για τα οποία ενδιαφερόμαστε να αλλάξουμε τη μορφή. Υπάρχουν διάφοροι τύποι επιλογέα. Επιλογείς ετικέτας Η μορφοποίηση αφορά όλα τα στοιχεία της ιστοσελίδας με ίδια ετικέτα. body { font family : 'Times New Roman'; font size : 20px; background color : black ; color : white; Επεξήγηση 1. Βρες την ετικέτα body 2. Ρύθμισε γραμματοσειρά σε Times New Roman 3. Όρισε το μέγεθος γραμματοσειράς σε 20 pixels 4. Όρισε χρώμα φόντου το μαύρο(black) 5. Όρισε χρώμα γραμματοσειράς το άσπρο(white) Επιλογείς αναγνωριστικού # Αυτοί οι επιλογείς αναζητούν στοιχεία των οποίων τα χαρακτηριστικά ταιριάζουν με τις τιμές του id τους. Σημείωση : Σε ένα έγγραφο HTML δεν μπορούν να υπάρχουν δύο ίδια id. Κάθε id διευκρινίζει μια μοναδική τιμή για ένα στοιχείο HTML. Έχουμε 3 παραγράφους, κάθε μία με διαφορετική τιμή id. <p id="par1">παράγραφος 1</p> <p id="par2">παράγραφος 2</p> <p id="par3">παράγραφος 3</p> Χρησιμοποιώντας επιλογείς αναγνωριστικού μπορούμε να επιλέξουμε ένα μοναδικό από αυτά τα στοιχεία επιλέγοντας το id του. Η σύνταξη του επιλογέα είναι η ίδια με του επιλογέα ετικέτας, με τη μόνη διαφορά ότι ο χαρακτήρας δίεση (#) προστίθεται ως πρόθεμα. # par3 { font size : 24px; Παράγραφος 1 Παράγραφος 2 Παράγραφος 3 Βασικές σημειώσεις CSS 3
Επιλογείς κλάσης. To χαρακτηριστικό class μπορεί να εφαρμοστεί σχεδόν σε όλα τα στοιχεία της HTML. Με αυτό τον τρόπο είναι πιο εύκολο να μορφοποιήσουμε ένα σύνολο στοιχείων από κάθε στοιχείο ξεχωριστά. Η σύνταξη του επιλογέα είναι παρόμοια με τη σύνταξη ενός επιλογέα αναγνωριστικού, μόνο που αντί να χρησιμοποιούμε το χαρακτήρα δίεση (#) χρησιμοποιούμε την τελεία (. ). Έχουμε τις παρακάτω 4 παραγράφους: <p class="entona">αυτό είναι σε έντονη γραφή</p> <p class="plagia">αυτό είναι σε πλάγια γραφή</p> <p class="entona">αυτό είναι σε έντονη γραφή</p> <p class="plagia">αυτό είναι σε πλάγια γραφή</p> Θέλουμε η κλάση entona να μορφοποιηθεί με έντονη γραμματοσειρά και η plagia με πλάγια γραμματοσειρά..entona { font weight : bold;.plagia { font style : italic; Αυτό είναι σε έντονη γραφή Αυτό είναι σε πλάγια γραφή Αυτό είναι σε έντονη γραφή Αυτό είναι σε πλάγια γραφή Καθολικός επιλογέας * Όταν ο επιλογέας είναι ένας χαρακτήρας αστερίσκου, τότε οι ιδιότητες που θα γράψουμε σε αυτόν τον κανόνα CSS εφαρμόζονται σε κάθε στοιχείο της σελίδας μας. Όπως είναι κατανοητό, συνήθως δεν είναι και πολύ χρήσιμος επιλογέας από μόνος του, και χρησιμοποιείται κυρίως σε συνδυασμό με άλλους. Σύνθετοι επιλογείς CSS (CSS selectors) Πολλές φορές μπορούμε να συνδυάσουμε σε έναν επιλογέα περισσότερους από έναν υπό επιλογείς, βάσει συγκεκριμένων κανόνων σύνταξης, κάτι που μας προσφέρει μεγαλύτερη ευελιξία και εξοικονόμηση χρόνου. Οι πιο βασικοί και συχνά χρησιμοποιούμενοι τρόποι συνδυασμού επιλογέων παρουσιάζονται παρακάτω: επιλογέας1, επιλογέας2, επιλογέας3, κτλ Οι ιδιότητες που θα γράψουμε σε αυτόν τον κανόνα CSS, θα εφαρμοστούν σε κάθε στοιχείο που πληροί τις προϋποθέσεις επιλογής είτε για τον επιλογέα1, είτε για τον επιλογέα2, είτε για τον επιλογέα3 κτλ. επιλογέας1 επιλογέας2 επιλογέας3... επιλογέαςn Οι ιδιότητες που θα γράψουμε σε αυτόν τον κανόνα CSS θα εφαρμοστούν σε στοιχεία που πληρούν τις προϋποθέσεις του επιλογέα n και επιπροσθέτως περιέχονται μέσα σε κάποιο στοιχείο που πληροί τις προϋποθέσεις του επιλογέα n 1 το οποίο βρίσκεται μέσα σε κάποιο στοιχείο που πληροί τις προϋποθέσεις του επιλογέα n 2 κοκ. Παραδείγματος χάριν ο επιλογέας p img θα εφαρμοστεί σε όσες εικόνες περιέχονται μέσα σε tags <p>...</p>. Βασικές σημειώσεις CSS 4
Χρήση CSS: Μορφοποίηση κειμένου Γραμματοσειρά Η ιδιότητα που καθορίζει τη γραμματοσειρά είναι η font family. Παραδείγματα: Κώδικας HTML <p class="para">αυτό είναι σε Arial</p> <p class="parb">αυτό είναι σε Times New Roman</p> Αυτό είναι σε Arial Αυτό είναι σε Times New Roman para { font family: Arial; parb { font family: Times New Roman ; Ο υπολογιστής μπορεί να χρησιμοποιήσει γραμματοσειρές που είναι ήδη εγκατεστημένες στο σύστημα (εξαίρεση η χρήση Google Fonts με το αντίστοιχο Javascript αρχείο). Οι παρακάτω γραμματοσειρές θεωρούνται ασφαλείς για χρήση και εμφάνιση σε οποιοδήποτε λειτουργικό σύστημα: Arial Comic Sans MS Courier New Impact Lucida Console Tahoma Times New Roman Verdana Μέγεθος γραμματοσειράς: Ιδιότητα font size Το μέγεθος μπορεί να καθοριστεί με διαφόρους τρόπους: σε pixels(px) σε σημεία (1pt = 1/72 της ίντσας) σε πλάτος έντυπου υλικού (1em = τρέχον μέγεθος γραμματοσειράς, 2em = διπλασιασμός μεγέθους κτλ) σε ποσοστό (100% = τρέχον μέγεθος γραμματοσειράς, 200% = διπλασιασμός μεγέθους κτλ) Βασικές σημειώσεις CSS 5
Κώδικας HTML <p class="para">αυτό είναι σε Arial 12px</p> <p class="parb">αυτό είναι σε Arial 12pt</p> <p class="parc">αυτό είναι σε Arial 12em</p> <p class="pard">αυτό είναι σε Arial 80%</p> para { font family: Arial; font size: 12px; parb { font family: Arial; font size: 14pt; parc { font family: Arial; font size: 2em; pard { font family: Arial; font size: 80%; Αυτό είναι σε Arial 12px Αυτό είναι σε Arial 14pt Αυτό είναι σε Arial 2em Αυτό είναι σε Arial 80% Χρώμα γραμματοσειράς: ιδιότητα color Το χρώμα μπορεί να καθοριστεί με διαφόρους τρόπους: Ονομασία χρώματος (red, green, blue κτλ) Δεκαεξαδικές τιμές (#ff0000 = κόκκινο κτλ) Τιμές RGB (255, 0, 0 = κόκκινο κτλ) Κώδικας HTML <p class="para">αυτό είναι χρώμα blue</p> <p class="parb">αυτό είναι χρώμα #0000ff </p> <p class="parc">αυτό είναι χρώμα rgb(0, 0, 255) </p> para { color: blue; parb { color: #0000ff; parc { color: rgb(0,0,255); Αυτό είναι χρώμα blue Αυτό είναι χρώμα #0000ff Αυτό είναι χρώμα rgb(0, 0, 255) Σημείωση: όλα τα παραπάνω εμφανίζονται μπλε Βασικές σημειώσεις CSS 6
Έντονα - Πλάγια - Υπογραμμισμένα: Ιδιότητες font weight, font style, text decoration Κώδικας HTML <p class="para">αυτό είναι έντονα</p> <p class="parb">αυτό είναι πλάγια</p> <p class="parc">αυτό είναι υπογραμμισμένα </p> Αυτό είναι έντονα Αυτό είναι πλάγια Αυτό είναι υπογραμμισμένα para { font weight: bold; parb { font style: italic; parc { text decoration: underline; Ευθυγράμμιση κειμένου: ιδιότητα text align Εξ ορισμού στην HTML όλο το κείμενο είναι στοιχισμένο αριστερά. Η τιμή αυτής της ιδιότητας μπορεί να είναι μία από τις ακόλουθες: left, right, center, justify. p { text align: right; Χρώμα φόντου: Ιδιότητα background color Οι τιμές της μπορούν να είναι είτε σε (#ff0000), σε RGB (rgb(255, 0, 0)) ή το όνομα του χρώματος (red). p { background color: yellow; Βασικές σημειώσεις CSS 7
Στοιχεία Έχουμε 2 ειδών στοιχεία: block και inline. Μέγεθος στοιχείου: Ιδιότητες width, height Σε ένα στοιχείο block μπορούμε να ρυθμίσουμε τις διαστάσεις του ενώ σε ένα στοιχείο inline όχι. Κώδικας HTML <div class="box"></div>.box { background color: yellow; width: 60px; height: 60px; Περιγράμματα στοιχείου: ιδιότητα border Η ιδιότητα border δέχεται τις εξής παραμέτρους: border width:το πλάτος του περιγράμματος σε εικονοστοιχεία (pixels). border style: Το στυλ του περιγράμματος (solid, dashed, dotted, double, groove, ridge, inset και outset). border color: Το χρώμα του περιγράμματος..my border { border: 3px solid blue; Εξωτερικά περιθώρια στοιχείου: ιδιότητα margin Ένα περιθώριο είναι η απόσταση ενός στοιχείου από άλλα στοιχεία. Τα περιθώρια ρυθμίζονται με τη φορά του ρολογιού. Η πρώτη τιμή προσδιορίζει το επάνω περιθώριο. Η δεύτερη τιμή το δεξί περιθώριο. Η τρίτη τιμή το κάτω περιθώριο και η τελευταία το αριστερό..green box { margin: 10px 0px 20px 30px; Στο παράδειγμά μας έχουμε 4 τιμές. Το στοιχείο έχει απόσταση 10 pixel από την κορυφή, 30 pixel από αριστερά και 20 pixel από κάτω. Βασικές σημειώσεις CSS 8
Εσωτερικά περιθώρια στοιχείου: ιδιότητα padding Ένα εσωτερικό περιθώριο ορίζει την απόσταση μιας πλευράς του στοιχείου από τα περιεχόμενά του. Τα εσωτερικά περιθώρια ρυθμίζονται με τη φορά του ρολογιού. Η πρώτη τιμή προσδιορίζει το επάνω περιθώριο. Η δεύτερη τιμή το δεξί περιθώριο. Η τρίτη τιμή το κάτω περιθώριο και η τελευταία το αριστερό..green box { padding: 8px 8px 8px 8px; Στο παράδειγμά μας έχουμε 4 τιμές. Το στοιχείο έχει απόσταση 8 pixel από τα περιεχόμενά του σε όλες τις πλευρές. Υπερχείλιση στοιχείου: Ιδιότητα overflow Η ιδιότητα overflow μας καθορίζει το αν εμφανίζονται μπάρες κύλισης όταν τα περιεχόμενα ενός στοιχείου δεν χωράνε στο στοιχείο. Η ιδιότητα overflow παίρνει 3 τιμές: visible: Εμφάνιση υπερχείλισης. hidden: Αν υπάρχει υπερχείλιση, είναι κρυμμένη. auto: Αν υπάρχει υπερχείλιση, οι μπάρες κύλισης απεικονίζονται. Αν δεν υπάρχει υπερχείλιση, οι μπάρες είναι κρυμμένες. scroll: Ανεξάρτητα από το αν υπάρχει υπερχείλιση ή όχι, οι μπάρες κύλισης απεικονίζονται. Απλά σε περίπτωση που χρειαστούν. Παράδειγμα.box { overflow: hidden;.box { overflow: scroll; Βασικές σημειώσεις CSS 9
Ορατότητα στοιχείου: Ιδιότητες display, visibility H ιδιότητα display μπορεί να πάρει 2 τιμές: none: το στοιχείο είναι αόρατο καθόλου τιμή: το στοιχείο είναι ορατό Ας υποθέσουμε ότι έχουμε τα παρακάτω 3 στοιχεία με διαφορετικό χρώμα (κόκκινο, πράσινο και μπλε).green box { display: none;.green box { display: ; Η ιδιότητα visibility μπορεί να πάρει 2 τιμές: vidible: το στοιχείο είναι ορατό hidden: το στοιχείο είναι αόρατο αλλά καταλαμβάνει το χώρο που του αναλογεί Ας υποθέσουμε ότι έχουμε τα παραπάνω 3 στοιχεία..green box { visibility: hidden;.green box { visibility: visible; Βασικές σημειώσεις CSS 10
Απεικόνιση στοιχείου: ιδιότητα display Η ιδιότητα display μας επιτρέπει να αλλάξουμε ένα block στοιχείο σε inline και το αντίστροφο και παίρνει 2 τιμές: block: μετατρέπει ένα στοιχείο σε block inline: μετατρέπει ένα στοιχείο σε inline Ας υποθέσουμε ότι έχουμε 4 στοιχεία div, το ένα κάτω από το άλλο. div { display: inline; Φόντο στοιχείου: ιδιότητα background Η ιδιότητα background εισάγει ένα φόντο στο στοιχείο μας (εικόνα κτλ). Δέχεται 3 παραμέτρους: background color: προσδιορίζει το χρώμα του φόντου. Αν δεν θέλετε κανένα χρώμα, μπορείτε να το ρυθμίσετε σε transparent. image location: Αυτή είναι η τοποθεσία της εικόνας σας. repeat: Μπορούμε να ρυθμίσουμε αν η εικόνα του φόντου θα επαναλαμβάνεται ή όχι. Μπορούμε να χρησιμοποιήσουμε ένα από τα ακόλουθα: no repeat, repeat x, repeat y, repeat. position: Προσδιορίζει τη θέση της εικόνας. Παίρνει δύο τιμές. Η πρώτη ρυθμίζει την οριζόντια κατεύθυνση, για παράδειγμα left ή right. Η δεύτερη ρυθμίζει την κατακόρυφη κατεύθυνση, για παράδειγμα top ή bottom. Παράδειγμα div { background: black url('/images/eikona.png') no repeat left top; Βασικές σημειώσεις CSS 11
Σχετική θέση στοιχείου: Ιδιότητα position. Υπάρχει μια ιδιότητα position για κάθε στοιχείο σε ένα αρχείο HTML. Η προκαθορισμένη τιμή γι' αυτήν την ιδιότητα είναι static. Αυτό σημαίνει ότι κάθε στοιχείο θα εμφανίζεται όπως είναι στο αρχείο HTML. Έστω ότι έχουμε τα παρακάτω στοιχεία div το ένα μέσα στο άλλο <div class="big box"> <div class="small box"></div> </div>.small box { position: relative;.small box { position: relative; left: 50px; top: 20px; Το μικρό κουτί εμφανίζεται έξω από το μεγάλο κουτί. Το μικρό κουτί ωστόσο παραμένει μέσα στο μεγάλο κουτί (είναι στοιχείο παιδί). Για να μετακινήσουμε το μικρό κουτί στα αριστερά του μεγάλου, χρησιμοποιούμε μια αρνητική τιμή π.χ. 30px. Βασικές σημειώσεις CSS 12
Απόλυτη θέση ενός στοιχείου: Ιδιότητα position #out box { width: 200px; height: 200px; border: 1px solid red; position: relative;.big box { background color: lightblue; width: 100px; height: 100px; margin: 60px 0px 0px 40px;.med box { background color: yellow; width: 70px; height: 70px; margin: 0px 0px 0px 20px;.small box { background color: gray; width: 20px; height: 20px; Με βάση το εξωτερικό κουτί που έχει position:relative γίνονται οι τοποθετήσεις όλων των άλλων κουτιών..small box { background color: red; width: 20px; height: 20px; position: absolute; left: 0px; top: 0px; Το μικρό κουτί τοποθετείται με απόλυτη τιμή 0px σε σχέση με το 1ο γονικό κουτί στη σειρά το οποίο έχει τιμή position διαφορετική από static (δηλ. το κουτί out box γίνεται κουτί αναφοράς)..big box { background color: black; width: 100px; height: 100px; margin: 60px 0px 0px 40px; position: relative;.small box { background color: red; width: 20px; height: 20px; position: absolute; left: 0px; top: 0px; Εδώ το κουτί big box γίνεται το κουτί αναφοράς για το small box επειδή η τιμή position γίνεται relative (διαφορετική από static). Έτσι η θέση του μικρού κουτιού προσδιορίζεται με βάση το big box. Βασικές σημειώσεις CSS 13
Ψευδοκλάσεις Οι ψευδοκλάσεις χρησιμοποιούνται για την προσθήκη πρόσθετων εφέ στη σελίδα μας. Ας δούμε μερικές από αυτές: a:link Χρησιμοποιείται αποκλειστικά για στοιχεία a (Δηλαδή ως εξής: a:link) και αφορά τους συνδέσμους που ο χρήστης δεν έχει ακόμη επισκεφθεί. a:visited Επίσης χρησιμοποιείται αποκλειστικά για στοιχεία a (Δηλαδή ως εξής: a:visited) και αφορά τους συνδέσμους που ο χρήστης έχει επισκεφθεί. στοιχείο:active Αφορά τα στοιχεία τύπου <στοιχείο> τη στιγμή που ο χρήστης έχει πατημένο το ποντίκι πάνω σε αυτά. Πχ ο επιλογέας a:active εφαρμόζεται σε συνδέσμους την ώρα που ο χρήστης έχει πατημένο το ποντίκι πάνω τους. στοιχείο:hover Από τις πιο συχνά χρησιμοποιούμενες ψευδό κλάσεις. Αφορά τα στοιχεία τύπου <στοιχείο> τη στιγμή που ο χρήστης έχει το δείκτη του ποντικιού πάνω σε κάποιο από αυτά (χωρίς να πατάει κάποιο πλήκτρο). Μπορεί να μας βοηθήσει να δημιουργήσουμε διάφορα όμορφα εφέ, τα οποία παλιότερα ήταν εφικτά μόνο με javascript. στοιχείο:focus Χρησιμοποιείται κυρίως για στοιχεία φορμών και εφαρμόζεται στα στοιχεία τύπου <στοιχείο> που εκείνη τη στιγμή έχουν «focus», παραδείγματος χάριν, ένα πεδίο κειμένου στο οποίο ο χρήστης έκανε κλικ για να εισάγει κείμενο. στοιχείο:first letter Αφορά το πρώτο γράμμα του κειμένου εντός κάποιου στοιχείου τύπου <στοιχείο>. Το ψευδό στοιχείο αυτό μπορεί να μας βοηθήσει να δημιουργήσουμε αρχιγράμματα. Πχ ο επιλογέας p:first letter αφορά το πρώτο γράμμα κάθε παραγράφου. στοιχείο:first line Ψευδό στοιχείο παρόμοιο με το παραπάνω, μόνο που αντί να αφορά μόνο το πρώτο γράμμα του κειμένου μέσα στο στοιχείο τύπου <στοιχείο>, αφορά ολόκληρη την πρώτη γραμμή. Ένα παράδειγμα ψευδοκλάσης είναι η :hover. Ας δούμε ένα παράδειγμα:.page link { color: blue; text decoration: underline;.page link:hover { font weight: bold; font style: italic; text decoration: none;.. <a class= page link href="#">κεντρική σελίδα</a> Κανονικά: Κεντρική σελίδα Όταν όμως πάμε το ποντίκι πάνω από τον σύνδεσμο: Κεντρική σελίδα Πηγές Μιχαήλια Κομβούτη Βέρου: CSS Notes: http://iekchalkida.blogspot.gr/2014/06/css_14.html Μαθήματα CSS Wlearn: http://www.wlearn.gr/index.php/home css 83 Μαθήματα CSS Test4U: http://elearning.test4u.eu/el/getstarted/css/lesson/1/step/1 Βασικές σημειώσεις CSS 14