- Μαθηματα CSS – Εισαγωγή (Μέρος 1)
Η Βίβλος των CSS – Μέρος 1 – Εισαγωγή
Εισαγωγή στα CSS
Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων μας. Μπορούν να μας γλυτώσουν από πολύ χρόνο και κόπο και μας δίνουν τη δυνατότητα να σχεδιάζουμε τις ιστοσελίδες μας με μια εντελώς καινούργια φιλοσοφία. Η κατανόηση των CSS απαιτεί να υπάρχει κάποια βασική εμπειρία με την HTML.
Για να δουλέψουμε με τα CSS δεν χρειάζεται να χρησιμοποιήσουμε κάποιο πρόγραμμα δημιουργίας ιστοσελίδων, όπως είναι τα γνωστά FrontPage,DreamWeaver ή και το Word, καθώς θα σταθούν εμπόδιο στην κατανόηση των CSS. Αυτό που χρειαζόμαστε είναι ένας απλός επεξεργαστής κειμένου, όπως είναι το Σημειωματάριο (Notepad) των Windows.
Μπορούμε να χρησιμοποιήσουμε όποιον φυλλομετρητή (browser) επιθυμούμε για να βλέπουμε πώς θα εμφανίζονται οι ιστοσελίδες που θα δημιουργούμε. Συνεπώς αυτό που χρειαζόμαστε είναι ένας φυλλομετρητής (browser) και ένας απλός επεξεργαστής κειμένου (text editor).
Στο ερώτημα τι μπορούμε να κάνουμε με τα CSS, θα πρέπει να γνωρίζουμε ότι τα CSS είναι μια γλώσσα στυλ (style language) που ορίζουν τη διάταξη (layout) των HTML εγγράφων. Για παράδειγμα, τα CSS έχουν να κάνουν με γραμματοσειρές (fonts), με χρώματα (colours), με περιθώρια (margins), με εικόνες φόντου (background images) και με πολλά άλλα. Με την HTML θα δυσκολευτούμε να αλλάξουμε τη διάταξη των ιστοσελίδων μας, αλλά τα CSS προσφέρουν πολλές επιλογές και είναι πολύ πιο συγκεκριμένα στις λεπτομέρειες. Επιπλέον, υποστηρίζονται απ’ όλους τους φυλλομετρητές.
Στο ερώτημα ποια είναι η διαφορά ανάμεσα στα CSS και την HTML, μπορούμε να πούμε ότι η HTML χρησιμοποιείται για να δομήσει το περιεχόμενο (content), ενώ τα CSS χρησιμοποιούνται για τη διαμόρφωση ή μορφοποίηση (formatting) του δομημένου περιεχομένου. Σύντομα θα γίνει σαφές το τι εννοούμε. Από το ξεκίνημά της, η HTML χρησιμοποιείτο μόνο για να μπορούμε να προσθέτουμε δομή στο κείμενο, όπως για να επισημαίνουμε ποια είναι κεφαλίδα (headline) ή ποια είναι παράγραφος (paragraph) με τα γνωστά tags (ετικέτες) της HTML, όπως είναι τα <h1> και <p>.
Όμως, καθώς η δημοτικότητα του Web αύξανε συνεχώς, οι σχεδιαστές των ιστοσελίδων άρχισαν να ψάχνουν για επιπλέον δυνατότητες, όπως προσθήκη διάταξης (layout) στα έγγραφα. Για να γίνει αυτό, οι φυλλομετρητές επινόησαν καινούργια HTML tags, όπως για παράδειγμα το <font>, τα οποία διέφεραν από τα αρχικά HTML tags καθώς όριζαν τη διάταξη και όχι τη δομή μιας ιστοσελίδας.
Στο ερώτημα τι έχουν να μου προσφέρουν τα CSS, μπορούμε να πούμε ότι τα CSS αποτέλεσαν μια επανάσταση στον κόσμο του Web design και τα μεγάλα πλεονεκτήματά τους είναι τα εξής :
- Δυνατότητα για τον ταυτόχρονο έλεγχο της διάταξης (layout) πολλών εγγράφων από ένα μόνο φύλλο στυλ (style sheet).
- Πιο ακριβής έλεγχος της διάταξης (layout) των ιστοσελίδων.
- Εφαρμογή διαφορετικής διάταξης σε διαφορετικές εξόδους, όπως screen, print κ.ά.
- Αναρίθμητες προηγμένες και εξεζητημένες τεχνικές.
Η Βασική Σύνταξη των CSS
Θα δούμε τώρα πώς μπορούμε να δημιουργήσουμε το πρώτο μας φύλλο στυλ (style sheet). Θα πρέπει να έχουμε υπόψη μας ότι πολλές από τις ιδιότητες που χρησιμοποιούνται στα CSS είναι παρόμοιες μ’ αυτές της HTML. Ας υποθέσουμε ότι θέλουμε να έχουμε ένα ωραίο κόκκινο χρώμα για το φόντο (background) μιας ιστοσελίδας. Με την HTML θα είχαμε γράψει τα εξής :
<body bgcolor="#FF0000">
Με τα CSS μπορούμε να επιτύχουμε το ίδιο αποτέλεσμα ως εξής :
body {
background-color: #FF0000;
}Όπως μπορούμε να δούμε, οι κωδικοί είναι περίπου οι ίδιοι και για την HTML και για τα CSS. Από το παραπάνω παράδειγμα μπορούμε να δούμε και το βασικό μοντέλο των CSS :
selector (επιλογέας) {
property (ιδιότητα): value (τιμή);
}
selector property value
Σε ποια tags Μια ιδιότητα Η τιμή της ιδιότητας,
εφαρμόζεται είναι το χρώμα όπως π.χ. κόκκινο
η ιδιότητα φόντου για το χρώμα φόντου
(π.χ. body) (background color)
Εφαρμογή των CSS σ’ ένα HTML Έγγραφο
Υπάρχουν τρεις τρόποι που μπορούμε να χρησιμοποιήσουμε για να εφαρμόσουμε ένα CSS σ’ ένα HTML έγγραφο.
Μέθοδος 1 : In-line (attribute style)
Ο πρώτος τρόπος για να εφαρμόσουμε ένα CSS σ’ ένα HTML κείμενο είναι να χρησιμοποιήσουμε την ιδιότητα (attribute) style της HTML. Το είδαμε ήδη προηγουμένως με το κόκκινο χρώμα φόντου και μπορεί να εφαρμοσθεί ως εξής :
<html> <head> <title>Παράδειγμα</title> </head> <body style="background-color: #FF0000;"> <p>Αυτή είναι μια κόκκινη σελίδα</p> </body> </html>
Μέθοδος 2 : Εσωτερικό-Internal (tag style)
Ένας άλλος τρόπος είναι να γράψουμε τον κώδικα για τα CSS με το HTML tag <style>, ως εξής :
<html>
<head>
<title>Παράδειγμα</title>
<style type="text/css">
body {
background-color: #FF0000;
}
</style>
</head>
<body>
<p>Αυτή είναι μια κόκκινη σελίδα</p>
</body>
</html>Μέθοδος 3 : Εξωτερικό-External (link to a style sheet)
Ο τρίτος τρόπος, που είναι αυτός που συνιστάται να χρησιμοποιούμε, είναι ένας σύνδεσμος (link) προς ένα εξωτερικό αρχείο φύλλου στυλ (external style sheet). Αυτή η μέθοδος θα χρησιμοποιηθεί σ’ όλα τα παραδείγματα που ακολουθούν. Ένα εξωτερικό αρχείο φύλλου στυλ (external style sheet) είναι απλά ένα αρχείο κειμένου (text file) που έχει επέκταση (extension) .css. Μπορούμε να το τοποθετήσουμε (upload) στον Web server, όπως όλα τα άλλα αρχεία.
Για παράδειγμα, ας υποθέσουμε ότι το αρχείο μας style sheet έχει όνομα style.css και βρίσκεται στον φάκελο style. Για να δημιουργήσουμε έναν σύνδεσμο (link) από το HTML έγγραφο, που είναι το default.htm, προς το αρχείο του style sheet, που είναι το style.css, θα πρέπει να γράψουμε τον εξής κώδικα :
<link rel="stylesheet" type="text/css" href="style/style.css" />
Η διαδρομή (path) προς το style sheet προσδιορίζεται με την ιδιότητα (attribute) href. Η παραπάνω γραμμή κώδικα πρέπει να τοποθετηθεί στο τμήμα header τουHTML κώδικα, δηλ. ανάμεσα στα tags <head> και </head>, ως εξής :
<html> <head> <title>Κύρια Ιστοσελίδα</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body>
Ο παραπάνω σύνδεσμος (link) λέει στον φυλλομετρητή ότι θα πρέπει να χρησιμοποιήσει τη διάταξη (layout) που υπάρχει στο συγκεκριμένο CSS αρχείο όταν πρόκειται να εμφανίσει το περιεχόμενο του τρέχοντος HTML αρχείου.
Αυτό που είναι πολύ καλό με τη μέθοδο αυτή είναι ότι μπορούμε να συνδέσουμε πολλά HTML αρχεία με το ίδιο αρχείο style sheet. Μ’ άλλα λόγια, ένα αρχείοCSS μπορεί να χρησιμοποιηθεί για να μπορούμε να ελέγχουμε το layout πολλών HTML εγγράφων ταυτόχρονα.
Για να το δούμε αυτό και στην πράξη, μπορούμε να δημιουργήσουμε δύο αρχεία, ένα HTML και ένα CSS, με το εξής περιεχόμενο :
default.htm
<html> <head> <title>Κύρια Ιστοσελίδα</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Το Πρώτο μας Φύλλο Στυλ</h1> </body> </html>
style.css
body {
background-color: #FF0000;
}Θα πρέπει να δημιουργήσουμε τα αρχεία και να τα αποθηκεύσουμε με τις σωστές επεκτάσεις .htm και .css και φυσικά να τα τοποθετήσουμε και στον ίδιο φάκελο. Μετά, μόλις ανοίξουμε την ιστοσελίδα default.htm με τον φυλλομετρητή μας, θα διαπιστώσουμε ότι θα έχει κόκκινο φόντο.
Αλλαγή Χρώματος και Φόντου
Θα δούμε τώρα το πώς μπορούμε να εφαρμόσουμε χρώματα (colors) και χρώματα φόντου (background colors) στις ιστοσελίδες μας. Θα δούμε επίσης και προηγμένες μεθόδους για την τοποθέτηση και τον έλεγχο των εικόνων φόντου (background images).
Η Ιδιότητα color
Η ιδιότητα color περιγράφει το χρώμα προσκηνίου (foreground color) ενός στοιχείου. Για παράδειγμα, ας υποθέσουμε ότι θέλουμε όλες οι επικεφαλίδες (headlines) ενός εγγράφου να έχουν χρώμα κόκκινο (red). Οι επικεφαλίδες χαρακτηρίζονται με το tag <h1> και ο παρακάτω κώδικας ορίζει σε κόκκινο το χρώμα των στοιχείων <h1> :
h1 {
color: #ff0000;
}Τα χρώματα μπορούν να γραφούν με τις δεκαεξαδικές τους τιμές, όπως στο παραπάνω παράδειγμα (#ff0000), ή μπορούμε να χρησιμοποιήσουμε τα ονόματα των χρωμάτων (“red”) ή και τις τιμές RGB : rgb(255, 0, 0).
Η Ιδιότητα background-color
Η ιδιότητα background-color περιγράφει το χρώμα φόντου (background color) ενός στοιχείου. Ως γνωστόν, το στοιχείο <body> περιέχει όλο το κείμενο ενόςHTML εγγράφου και έτσι για να αλλάξουμε το χρώμα φόντου μιας ιστοσελίδας, θα πρέπει να εφαρμόσουμε την ιδιότητα background-color στο στοιχείο <body>.
Μπορούμε επίσης να εφαρμόσουμε χρώμα φόντου και σ’ άλλα στοιχεία, όπως σε επικεφαλίδες (headlines) και σε απλό κείμενο (text). Στο παρακάτω παράδειγμα, εφαρμόζουμε διαφορετικά χρώματα φόντου στα στοιχεία <body> και <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}Βλέπουμε ότι για να εφαρμόσουμε δύο ιδιότητες σ’ ένα στοιχείο, όπως το <h1>, τις ξεχωρίζουμε με το σύμβολο ;.
Η Ιδιότητα background-image
Η ιδιότητα background-image χρησιμοποιείται για να εισάγουμε μια εικόνα φόντου (background image) σε μια ιστοσελίδα. Απλά εφαρμόζουμε την ιδιότηταbackground-image στο tag <body> και προσδιορίζουμε το όνομα και τη θέση του αρχείου της εικόνας.
body {
background-color: #FFCC66;
background-image: url("florina1.jpg");
}
h1 {
color: red;
background-color: blue;
}Βλέπουμε ότι προσδιορίζουμε το όνομα και τη θέση της εικόνας με την έκφραση url(“florina1.jpg”). Αυτό βέβαια προϋποθέτει ότι η εικόνα βρίσκεται στον ίδιο φάκελο με το φύλλο στυλ (style sheet).
Μπορούμε να αναφερόμαστε και σε εικόνες που βρίσκονται σ’ άλλους φακέλους με την έκφραση url(“../images/florina1.jpg”) ή που βρίσκονται ακόμη και στοInternet, αρκεί να ορίσουμε την πλήρη διεύθυνση του αρχείου με την έκφραση url(“http://dide.flo.sch.gr/florina1.jpg”).
Η Ιδιότητα background-repeat
Στο παραπάνω παράδειγμα, παρατηρούμε ότι εξ ορισμού η εικόνα επαναλαμβάνεται και προς την οριζόντια και προς την κατακόρυφη κατεύθυνση για να καλύψει ολόκληρη την οθόνη. Με την ιδιότητα background-repeat μπορούμε να ελέγχουμε την επανάληψη μιας εικόνας φόντου.
Η ιδιότητα background-repeat μπορεί να έχει τις εξής τέσσερις τιμές :
|
Τιμή |
Περιγραφή |
| background-repeat: repeat-x | Η εικόνα επαναλαμβάνεται μόνο οριζόντια |
| background-repeat: repeat-y | Η εικόνα επαναλαμβάνεται μόνο κατακόρυφα |
| background-repeat: repeat | Η εικόνα επαναλαμβάνεται και οριζόντια και κατακόρυφα (εξ ορισμού) |
| background-repeat: no-repeat | Η εικόνα δεν επαναλαμβάνεται |
Για παράδειγμα, για να αποφύγουμε την επανάληψη μιας εικόνας φόντου (background image), θα πρέπει να γράψουμε τον εξής κώδικα :
body {
background-color: #FFCC66;
background-image: url("florina1.jpg");
background-repeat: no-repeat;
}
h1 {
color: green;
background-color: #FC9804;
}Η ιδιότητα background-attachment
Με την ιδιότητα background-attachment μπορούμε να καθορίσουμε αν μια εικόνα φόντου θα είναι σταθερή (fixed) ή θα κυλάει (scrolls) μαζί με τα περιεχόμενα της ιστοσελίδας. Μια εικόνα φόντου που είναι σταθερή (fixed) δεν θα μετακινείται μαζί με το κείμενο όταν ο χρήστης κυλάει τα περιεχόμενα της ιστοσελίδας, ενώ μια μη κλειδωμένη εικόνα φόντου θα κυλάει μαζί με τα περιεχόμενα της ιστοσελίδας (εξ ορισμού).
Ο παρακάτω πίνακας παρουσιάζει τις δύο διαφορετικές τιμές που μπορεί να λάβει η ιδιότητα background-attachment :
|
Τιμή |
Περιγραφή |
| background-attachment: scroll | Η εικόνα κυλάει μαζί με την ιστοσελίδα – μη κλειδωμένη |
| background-attachment: fixed | Η εικόνα είναι κλειδωμένη |
Ο παρακάτω κώδικας κάνει την εικόνα φόντου της ιστοσελίδας να μην επαναλαμβάνεται (no-repeat) και να είναι κλειδωμένη (fixed) :
body {
background-color: #FFCC66;
background-image: url("florina1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}Η ιδιότητα background-position
Εξ ορισμού, μια εικόνα φόντου τοποθετείται στην πάνω αριστερή γωνία της οθόνης. Με την ιδιότητα background-position μπορούμε να αλλάξουμε αυτή τη ρύθμιση και να τοποθετήσουμε την εικόνα φόντου οπουδήποτε θέλουμε στην οθόνη.
Υπάρχουν τρεις διαφορετικοί τρόποι για να προσδιορίσουμε τη θέση μιας εικόνας φόντου μέσα στην οθόνη. Για παράδειγμα, μπορούμε να ορίσουμε τις συντεταγμένες της εικόνας με τις τιμές ‘100px 200px’, οπότε η εικόνα φόντου θα τοποθετηθεί σε απόσταση 100px (pixels) από την αριστερή πλευρά της οθόνης και 200px (pixels) από την κορυφή της οθόνης, στην ουσία του παραθύρου του φυλλομετρητή.
Ένας άλλος τρόπος είναι να δηλώσουμε την απόσταση σε ποσοστά, όπου οι τιμές 0% 0% σημαίνουν την πάνω αριστερή γωνία της οθόνης, οι τιμές 50% 50% το κέντρο της οθόνης και οι τιμές 100% 100% την κάτω δεξιά γωνία της οθόνης. Ένας τρίτος τρόπος είναι να χρησιμοποιήσουμε τις δεσμευμένες λέξεις top,bottom, center, left και right και να κάνουμε συνδυασμούς, όπως top left, center center, top right, bottom right κ.ά.
Ο παρακάτω πίνακας έχει μερικά χαρακτηριστικά παραδείγματα :
|
Τιμή |
Περιγραφή |
| background-position: 2cm 2cm | Η εικόνα φόντου θα τοποθετηθεί 2 cm από τα αριστερά και 2 cm από την κορυφή |
| background-position: 50% 25% | Η εικόνα φόντου θα τοποθετηθεί στο κέντρο οριζόντια και κατά το ένα τέταρτο από την κορυφή |
| background-position: top right | Η εικόνα φόντου θα τοποθετηθεί στην πάνω δεξιά γωνία (top-right) της οθόνης |
Ο παρακάτω κώδικας θα τοποθετήσει την εικόνα φόντου στην κάτω δεξιά γωνία (bottom right) της οθόνης :
body {
background-color: #FFCC66;
background-image: url("florina1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}Η ιδιότητα background
Η ιδιότητα background αποτελεί μια συντόμευση γι’ όλες τις ιδιότητες του αντικειμένου background που είδαμε προηγουμένως και μας δίνει τη δυνατότητα να γράψουμε όλες τις ιδιότητες σε μια γραμμή κώδικα.
Για παράδειγμα, ας δούμε τις επόμενες πέντε γραμμές κώδικα :
background-color: #FFCC66;
background-image: url("florina1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;Με τη χρήση της ιδιότητας background μπορούμε να πετύχουμε το ίδιο αποτέλεσμα σε μία μόνο γραμμή κώδικα :
background: #FFCC66 url("florina1.jpg") no-repeat fixed right bottom;Η σειρά αναγραφής των ιδιοτήτων είναι η εξής :
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Αν παραλείψουμε κάποια ιδιότητα, θα εκληφθεί η προκαθορισμένη (default) τιμή της. Για παράδειγμα, αν παραλειφθούν οι δύο τελευταίες ιδιότητες,background-attachment και background-position, θα έχουμε το εξής :
background: #FFCC66 url("florina1.jpg") no-repeat;Για τις δύο ιδιότητες που δεν δώσαμε τιμή, θα εκληφθούν οι προκαθορισμένες τιμές, που είναι οι scroll και top left.
Είδαμε ήδη αρκετές νέες τεχνικές μορφοποίησης με τη βοήθεια των CSS που θα ήταν αδύνατο να τις κάνουμε με την απλή HTML.
Οι Γραμματοσειρές (Fonts)
Θα δούμε τώρα τις γραμματοσειρές (fonts) και πώς μπορούμε να τις εφαρμόσουμε με τη βοήθεια των CSS.
Η ιδιότητα font-family
Η ιδιότητα font-family χρησιμοποιείται για να ορίσει μια λίστα προτεραιότητας από γραμματοσειρές που θα χρησιμοποιηθούν για να εμφανισθεί ένα συγκεκριμένο στοιχείο ή μια ιστοσελίδα. Αν η πρώτη γραμματοσειρά που υπάρχει στη λίστα δεν είναι εγκατεστημένη στον υπολογιστή από τον οποίο γίνεται η πρόσβαση στο site, θα δοκιμασθεί η επόμενη γραμματοσειρά κοκ μέχρι να βρεθεί κάποια που να ταιριάζει. Υπάρχουν δύο είδη ονομάτων που χρησιμοποιούνται για να κατηγοριοποιηθούν οι γραμματοσειρές : τα family-names και τα generic families.
Παραδείγματα ενός family-name, που τα ξέρουμε και ως font, είναι για παράδειγμα τα “Arial”, “Times New Roman”, “Tahoma” κ.ά. Τα generic families είναι ομάδες από family-names με παρόμοια εμφάνιση. Ένα παράδειγμα είναι το sans-serif, που είναι μια συλλογή από γραμματοσειρές χωρίς πόδια (feet).
Στο generic family serif ανήκουν οι γραμματοσειρές Times New Roman, Garamond και Georgia, όπου όλες έχουν πόδια (feet). Στο generic family sans-serifανήκουν οι γραμματοσειρές Trebuchet, Arial και Verdana, όπου όλες δεν έχουν πόδια (feet). Στο generic family monospace ανήκουν οι γραμματοσειρές Courier,Courier New και Andele Mono, όπου όλοι οι χαρακτήρες τους έχουν το ίδιο πλάτος.
Όταν εμφανίζουμε τις γραμματοσειρές για την ιστοσελίδα μας, θα πρέπει να ξεκινάμε με τις πιο δημοφιλείς γραμματοσειρές και μετά με κάποιες εναλλακτικές. Αποτελεί καλή πρακτική να ολοκληρώνουμε τη λίστα με μια γραμματοσειρά από generic family. Έτσι, η ιστοσελίδα θα εμφανισθεί με μια γραμματοσειρά της ίδιας οικογένειας αν δεν βρεθεί κάποια από τις προηγούμενες γραμματοσειρές.
Ένα παράδειγμα χρήσης της ιδιότητας font-family μπορεί να είναι το εξής :
h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
}Σύμφωνα με τον παραπάνω κώδικα, οι επικεφαλίδες (headlines) που είναι μαρκαρισμένες με το tag <h1> θα εμφανισθούν με τη γραμματοσειρά “Arial”. Αν αυτή η γραμματοσειρά δεν είναι εγκατεστημένη στον υπολογιστή του χρήστη, θα χρησιμοποιηθεί η “Verdana” και αν καμία απ’ αυτές δεν είναι διαθέσιμη, θα χρησιμοποιηθεί μια γραμματοσειρά από την οικογένεια sans-serif, ώστε να εμφανισθεί σωστά το κείμενο των επικεφαλίδων.
Επειδή το όνομα της γραμματοσειράς “Times New Roman” περιέχει κενούς χαρακτήρες, χρησιμοποιήσαμε διπλά εισαγωγικά για να το προσδιορίσουμε.
Η ιδιότητα font-style
Η ιδιότητα font-style κάνει τη μορφοποίηση της επιλεγμένης γραμματοσειράς να είναι normal, italic ή oblique. Στο επόμενο παράδειγμα, όλες οι επικεφαλίδες που είναι μαρκαρισμένες με το tag <h2> θα εμφανισθούν με πλάγια γράμματα.
h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: "Times New Roman", serif; font-style: italic;
}Η ιδιότητα font-variant
Η ιδιότητα font-variant χρησιμοποιείται για να επιλέξουμε ανάμεσα στις παραλλαγές normal ή small-caps μιας γραμματοσειράς. Μια γραμματοσειρά του τύπουsmall-caps χρησιμοποιεί μικρού μεγέθους κεφαλαία γράμματα αντί για μικρά (πεζά) γράμματα. Στην περίπτωση που η ιδιότητα font-variant είναι ορισμένη στην τιμή small-caps και δεν υπάρχει διαθέσιμη κάποια γραμματοσειρά που να την υποστηρίζει, ο φυλλομετρητής είναι πολύ πιθανό να εμφανίσει το κείμενο με κανονικά κεφαλαία γράμματα.
Ακολουθούν παραδείγματα :
h1 {
font-variant: small-caps;
}
h2 {
font-variant: normal;
}Η ιδιότητα font-weight
Η ιδιότητα font-weight περιγράφει πόσο έντονα θα πρέπει να εμφανίζεται μια γραμματοσειρά. Μια γραμματοσειρά μπορεί να είναι είτε normal ή bold. Μερικοί φυλλομετρητές υποστηρίζουν ακόμη και αριθμούς από το 100 έως το 900 για να προσδιορίσουν με ακρίβεια το πόσο έντονη θέλουμε να είναι η γραμματοσειρά.
Ακολουθούν παραδείγματα :
p {
font-family: arial, verdana, sans-serif;
}
td {
font-family: arial, verdana, sans-serif; font-weight: bold;
}Η ιδιότητα font-size
Η ιδιότητα font-size ορίζει το μέγεθος μιας γραμματοσειράς. Υπάρχουν πολλές μονάδες, όπως pixels, points και εκατοστά, που μπορούμε να χρησιμοποιήσουμε για να προσδιορίσουμε το μέγεθος μιας γραμματοσειράς.
Ακολουθούν παραδείγματα :
h1 {
font-size: 30px;
}
h2 {
font-size: 12pt;
}
h3 {
font-size: 120%;
}
p {
font-size: 1em;
}Με τις μονάδες px και pt προσδιορίζουμε το μέγεθος με απόλυτες τιμές, ενώ με τις μονάδες % και em προσδιορίζουμε το μέγεθος με σχετικές τιμές.
Η ιδιότητα font
Με την ιδιότητα font μπορούμε να προσδιορίσουμε όλες τις ιδιότητες font σε μία μόνο γραμμή. Για παράδειγμα, οι επόμενες τέσσερις γραμμές κώδικα περιγράφουν τις ιδιότητες γραμματοσειράς του tag <p> :
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}Με την ιδιότητα font μπορούμε να επιτύχουμε το ίδιο αποτέλεσμα, αλλά με μία μόνο γραμμή κώδικα :
p {
font: italic bold 30px arial, sans-serif;
}Η σειρά αναγραφής των τιμών των ιδιοτήτων για την ιδιότητα font είναι η εξής :
font-style | font-variant | font-weight | font-size | font-family
Και μην ξεχνάτε : η τεχνολογία των Διαδοχικών Φύλλων Στυλ (CSS) σάς γλυτώνει από χρόνο και κάνει τη ζωή σας ευκολότερη.
Πηγή:
Αν βρήκατε το άρθρο μας χρήσιμο, θέλετε να μείνετε ενημερωμένοι για όλα τα νέα στο τομέα της τεχνολογίας καθώς και σε χρηστικά άρθρα, βοηθήστε μας κάνοντας like στην σελίδα μας στο Facebook πατώντας εδώ
