Τα τελευταία χρόνια η χρήση των Cascading Style Sheets (css stylesheets) έχει καθιερωθεί ολοκληρωτικά στη μορφοποίηση ιστοσελίδων. Σαν συμπλήρωμα λοιπόν στα μαθήματα της "Ανάπτυξης Εφαρμογών Πολυμέσων" και "Προγραμματιστικά Εργαλεία για το Διαδίκτυο" (html) που γίνονται στον 2ο κύκλο πληροφορικής του ΤΕΕ ανέπτυξα ένα σχετικό εισαγωγικό μάθημα (tutorial), το οποίο είναι διαθέσιμο για ανάγνωση.

Εισαγωγή

Τι είναι τα CSS ή cascading stylesheets;

Είναι ένας εύκολος τρόπος να μορφοποιείς html σελίδες και να τις κάνεις να φαίνονται πραγματικά όμορφες... Επίσης, είναι σημαντικό ότι μπορείς να φτιάξεις μια φορά την μορφοποίηση και να την χρησιμοποιήσεις σε όσες σελίδες θέλεις...
Παραδείγματα χρήσης CSS μπορείτε να βρείτε στο web αρκετά. Από τα πιο χαρακτηριστικά site για css είναι το Zen Garden, the beauty of CSS design.

Δείτε ένα παράδειγμα ιστοσελίδας χωρίς CSS.

Δείτε την ίδια ιστοσελίδα με χρήση CSS, όπως και μια δεύτερη έκδοσή της.

Πλεονεκτήματα του CSS

Εύκολο να μορφοποιήσεις όμορφες HTML σελίδες
Αλλάζεις τη μορφοποίηση πολλών σελίδων, αλλάζοντας απλά ένα αρχείο

Μειωνεκτήματα

Οι παλιοί browsers δεν υποστηρίζουν CSS
Κάποιοι browsers δείχνουν με διαφορετικό τρόπο τις ίδες σελίδες

Πριν ξεκινήσετε να διαβάζετε παρακάτω θα χρειαστεί να έχετε τουλάχιστον ένα απλό text editor και να γνωρίζετε τουλάχιστον βασικές ένοιες HTML.

Πως βάζουμε CSS σε μια html σελίδα

Υπάρχουν 3 τρόποι να γίνει αυτό:

Τοποθέτηση μιας αναφοράς σε αρχείο που περιέχει τις εντολές:

Στην περίπτωσή μας το αρχείο ονομάζεται styles.css και βρίσκετε στον φάκελο path.

Ο τρίτος τρόπος προϋποθέτει την τοποθέτηση του παρακάτω κώδια μέσα στην ετικέτα head

Το συντακτικό των CSS

Τα CSS stylesheets χωρίζονται σε 3 μέρη:

επιλογέας{
ιδιότητα: τιμή;
}

Ο επιλογέας καθορίζει τι αντικείμενο της ιστοσελίδας μας θα επηρεάσει η μορφοποίηση, η ιδιότητα καθορίζει τι χαρακτηριστικό του αντικειμένου θα επηρεαστεί και η τιμή είναι η τιμή που θα πάρει αυτό το χαρακτηριστικό. Ας δούμε όμως περισσότερες λεπτομέρειες:

Ο Επιλογέας (selector)

Ο επιλογέας καθορίζει τι αντικείμενο της ιστοσελίδας μας θα επηρεάσει η μορφοποίηση, οπότε μπορεί να είναι κάθε ετικέτα της html, όπως για παράδειγμα είναι οι ετικέτες (tags)body,a,li,tdetc.

Μπορείτε να καθορίσετε την ίδια μορφοποίηση (στυλ) για πολλούς επιλογείς (τους χωρίζετε με ,)

Αυτό γίνεται όπως στο παρακάτω παράδειγμα:

body, td, li{
background-color: #ffffff;
}

Όπως ήδη θα έχετε παρατηρήσει χρησιμοποιούμε τους χαρακτήρες '{' και '}' για να περικλείσουμε τη λίστα των στυλ για κάθε ομάδα επιλογέων.

Η ιδιότητα (property)

Η ιδιότητα καθορίζει το χαρακτηριστικό του επιλογέα που θα επηρεαστεί.Μια εκτενή λίστα ιδιοτήτων μπορείτε να βρείτε στην ιστοσελίδα w3schools (η ιστοσελίδα αυτή είναι πολύ ενδιαφέρουσα και μπορεί να σας διδάξει για αρκετά θέματα που έχουν να κάνουμε με ανάπτυξη ιστοσελίδων, αρκεί να γνωρίζετε Αγγλικά).
Μερικά παραδείγματα ιδιοτήτων για τον επιλογέαbodyακολουθούν:

body{
background-color: red;
margin: 1px;
font-size: 11px;
color: green;
}

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

Η τιμή(value)

Η τιμή καθορίζει τη μέτρηση της ιδιότητας και μπορεί να είναι αριθμοί ή λέξεις.
Οι τιμές που χρησιμοποιούμε για μεγέθη μπορούν να είναι:

pixels (px)
ποσοστά (%)
em, ένα em ...
in, ίντσες
cm, εκατοστά
mm, χιλιοστά
pt, στιγμές (points) - ένα pt είναι αντίστοιχο με το 1/72 της ίντσας.
pc, pica - ένα pc είναι ανάλογο με 12 στιγμές (pt).

Για χρώματα μπορείτε να χρησιμοποιείτε τις παρακάτω τιμές:

δεκαεξαδικές τιμές χρωμάτων σε τριάδες RGB π.χ. #FF0000.
ονόματα χρωμάτων π.χ. red
δεκαδικές τιμές χρωμάτων σε τριάδες RGB π.χ. rgb(255,0,0)
ποσοστιαίες τιμές χρωμάτων σε τριάδες RGB π.χ. rgb(100%,0%,0%)

ΠΡΟΣΟΧΗ: εάν αφήσετε κενό ανάμεσα στην τιμή και την μονάδα μέτρησης δεν θα δουλέψει (π.χ. 12 px είναι λάθος, ενώ 12px είναι σωστό).

Μη ξεχνάτε να βάζετε ερωτηματικό (;) μετά που τελειώνετε με κάθε τιμή.

Σχόλια

Είναι καλή πρακτική να γράφουμε "καθαρό" και ευανάγνωστο κώδικα. Για να το επιτύχουμε αυτό, εκτός των άλλων πρακτικών, χρησιμοποιούμε και τα σχόλια με τα οποία μπορούμε να επεξηγούμε με ελεύθερο κείμενο τον κώδικά μας.
Τα σχόλια σε css αρχεία έχουν την παρακάτω μορφή (τα περικλείουμε σε /* και */):

/* ένα σχόλιο μέσα σε αρχείο CSS */

Κλάσεις (Classes)

Έστω τώρα ότι δεν θέλετε να μορφοποιήσετε όλα τα κελιά από τους πίνακες σας με ίδιο τρόπο. Για παράδειγμα, θέλετε να δημιουργήσετε μια γραμμή πλοήγησης (navigation bar). Εδώ είναι που χρειάζονται οι κλάσεις.
Οι κλάσεις ομαδοποιούν ετικέτες σε ξεχωριστές ομάδες, οπότε μπορούμε να τους δώσουμε ξεχωριστό στυλ. Ένα παράδειγμα κλάσης είναι το παρακάτω:

.navigation{
color: #ffffff;
font-family: 'verdana';
font-size: 11px;
}

Προσέξτε ότι ο επιλογέας μιας κλάσης ξεκινάει πάντα με τελεία (.). Κατά τα άλλα ο καθορισμός στυλ σε κλάσεις είναι ίδιος όπως και γενικά σε ετικέτες.

Ο καθορισμός ότι μια ετικέτα ανήκει σε μια κλάση στον html κώδικα γίνετε όπως στο παρακάτω παράδειγμα για την ετικέταtd.

Ταυτότητες (Ids)

Τα IDs είναι σχεδόν ίδια με τις κλάσεις, μόνο που χρησιμοποιούνται μόνο μια φορά σε κάθε σελίδα. Συνήθως τα id χρησιμοποιούνται για να δημιουργούμε το στήσιμο μιας ιστοσελίδας (layout) με τη χρήση της ετικέταςdiv, όπου καθορίζουν το χρώμα και την εικόνα για το φόντο (background/background-image), το μέγεθος, τη θέση και τη στοίχιση αυτών των divs, ενώ το στυλ και το μέγεθος του κειμένου καθορίζεται με κλάσεις.
Για να καθορίσετε το στυλ ενός id κάνετε το ίδιο, εκτός του ότι χρησιμοποιείτε # στη θέση της τελείας (.).

Για παράδειγμα, στο αρχείο css θα τοποθετούσατε:

#navigation{
width: 550px;
background-color: red;
}

ενώ στον κώδικα html θα γράφατε:

<divid="navigation">
</div>

Τύποι μέσων εμφάνισης (Media Types)

Μια ακόμα χρήσιμη δυνατότητα του css είναι ότι μπορούμε να ορίζουμε διαφορετικά στυλ ανάλογα με το μέσο που θα εμφανιστεί μια ιστοσελίδα.

Τύποι μέσων που μπορούμε να χρησιμοποιήσουμε είναι οι παρακάτω:

screen: για οθόνες υπολογιστών
print: για εκτυπωτές
handheld: για συσκευές χειρός
projection: για παρουσιάσεις
braille: for braille tactile feedback devices
aural: for speech and sound synthesisers
embossed: for paged braille printers
tv: για οθόνες σαν της τηλεόρασης
tty: για τερματικά
all: για όλους τους τύπους εμφάνισης

Ένα παράδειγμα χρήσης μέσων παρουσίασης σε css είναι το παρακάτω:

@media screen, handheld
{
body{ background-color: red;}
}
@media print
{
body{ background-color: white; }
}

Ψευδοκλάσεις (Pseudo Classes)

Οι ψευδοκλάσεις χρησιμοποιούνται για να καθορίζονται διαφορετικά στυλ σε επιλογείς σε διαφορετικές καταστάσεις.

Για να καθοριστεί το στυλ μιας ψευδοκλάσης χρησιμοποιούμε το παρακάτω συντακτικό:

επιλογέας:ψευδοκλάση { ιδιότητα: τιμή }

Οι ψευδοκλάσεις μπορούν να χρησιμοποιηθούν σε συνδυασμό με κανονικές κλάσεις:

επιλογέας.κλάση:ψευδοκλάση { ιδιότητα: τιμή }

Η πιο κοινή χρήση ψευδοκλάσεων είναι με συνδέσμους (ετικέταa), όπως στο παρακάτω παράδειγμα:

a:link{ color: white;} /* σύνδεσμος που δεν τον έχουμε επισκεφτεί */

a:visited{ color: black; } /* σύνδεσμος που τον έχουμε επισκεφτεί */

a:hover{ color: pink;} /* σύνδεσμος κατά τη διάρκεια που έχουμε πάνω του τον δείκτη του ποντικιού */

a:active{ color: green;} /* σύνδεσμος κατά τη διάρκεια που τον κάνουμε "κλικ" */

Η σειρά με την οποία εμφανίζονται οι παραπάνω ψευδοκλάσεις έχει σημασία για να δουλέψουν σωστά και καλό είναι να ακολουθεί το παραπάνω παράδειγμα.
Μια ακόμα χρήσιμη ψευδοκλάση είναι η :first-child που επιτρέπει τη μορφοποίηση της πρώτης εμφάνισης ενός επιλογέα σε μια σελίδα. Για παράδειγμα εάν θέλουμε η πρώτη παράγραφος σε κάθε σελίδα να έχει γράμματα με μέγεθος 20px μπορούμε να κάνουμε το παρακάτω:

p:first-child{
font-size: 20px;
}

ενώ ο κώδικάς html δεν πρόκειται να αλλάξει καθόλου και θα μοιάζει με τον ακόλουθο:

<p>
Αυτή η παράγραφος θα έχει μέγεθος γραμμάτων 20px
</p>

<p>
Οι υπόλοιπες παράγραφοι (όπως και αυτή) θα έχουν μέγεθος γραμμάτων διαφορετικό (?) από την πρώτη....</p>

Τέλος, υπάρχει και η ψευδοκλάση :focus, με την οποία δίνουμε στυλ στα αντικείμενα που έχουν την "προσοχή" (focus).

Ψευδοστοιχεία (Pseudo elements)

Τα ψευδοστοιχεία χρησιμοποιούνται για να μορφοποιούν με διαφορετικό τρόπο διαφορετικά μέρη επιλογέων και λειτουργούν ανάλογα με τις ψευδοκλάσεις.

Στα ψευδοστοιχεία περιλαμβάνονται:

first-letter, καθορισμός στυλ για το πρώτο γράμμα ενός επιλογέα
first-line, καθορισμός στυλ για την πρώτη γραμμή ενός επιλογέα
:before, τοποθέτηση περιεχομένου (συνήθως μιας εικόνας) πριν ένα επιλογέα
:after, τοποθέτηση περιεχομένου (συνήθως μιας εικόνας) μετά από ένα επιλογέα

Όπως και οι ψευδοκλάσεις, τα ψευδοστοιχεία μπορούν να χρησιμοποιηθούν σε συνδυασμό με κανονικές κλάσεις.
Έστω λοιπόν ότι θα θέλαμε η πρώτη γραμμή κάθε παραγράφου να είναι κόκκινη. Ο κώδικας που θα γράφαμε στο αρχείο css θα ήταν ο παρακάτω:

p {
color: black;
}

p:first-line{
color: red;
}

Οι ιδιότητες που συνδυάζονται με την :first-line είναι οι παρακάτω:

font size, color, family,
color properties
letter-spacing
Word-spacing
text-decoration
line-height
text-transform
clear
background properties
vertical-align

Το ψευδοστοιχείο :first letter είναι χρήσιμο για τη δημιουργία αρχιγραμμάτων. Στο παρακάτω παράδειγμα καθορίζουμε το πρώτο γράμμα κάθε παραγράφου να είναι μεγαλύτερο από τα υπόλοιπα (20px).

p {
font-size: 12px;
}

p:first-letter{
font-size: 20px;
}

Οι ιδιότητες που συνδυάζονται με την :first-line είναι οι παρακάτω:

background properties
color properties
font properties
padding properties
margin properties
text-decoration
border properties
vertical-align (only if 'float' is 'none')
text-transform
clear
float
line-height

Τα ψευδοστοιχεία :before και :after χρησιμοποιούνται για την τοποθέτηση εικόνων πριν και μετά από αντικείμενα της σελίδας html. π.χ. εάν θέλουμε πριν από κάθε σύνδεσμο να εμφανίζουμε μια εικόνα ο κώδικας css θα ήταν ο παρακάτω:

a:before {
content: url(image.gif)
}

Προσοχή! Τα ψευδοστοιχεία δεν λειτουργούν σε όλες τις εκδόσεις φυλλομετρητών.

Μανόλης Φραγκονικολάκης - Πληροφορικός

Σάββατο 17 Ιουλίου 2010

Cascading Style Sheets - CSS