Εισαγωγή στα CSS μέρος 2
Στο δεύτερο μέρος της εισαγωγής στα CSS θα δούμε πώς εισάγουμε ένα φύλλο στύλ, κάποιες ιδιότητες των CSS και το πως ορίζουμε background με χρώματα και εικόνες.
Εισαγωγή ενός Φύλλου Στυλ (Style Sheet)
Όταν ένας φυλλομετρητής διαβάζει ένα φύλλο στυλ (style sheet), θα μορφοποιήσει το έγγραφο σύμφωνα μ’ αυτό. Υπάρχουν τρεις τρόποι για να εισάγουμε ένα φύλλο στυλ :
Εξωτερικά Φύλλα Στυλ (External Style Sheets)
Ένα εξωτερικό φύλλο στυλ (external style sheet) είναι ιδανικό όταν το στυλ εφαρμόζεται σε πολλές σελίδες. Μ’ ένα εξωτερικό φύλλο στυλ μπορούμε να αλλάξουμε την εμφάνιση ενός ολόκληρου Web site αλλάζοντας ένα μόνο αρχείο. Η κάθε σελίδα πρέπει να έχει έναν δεσμό (link) προς το φύλλο στυλ που χρησιμοποιεί το tag <link>, ο οποίος βρίσκεται μέσα στο τμήμα head, ως εξής :
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Ο φυλλομετρητής θα διαβάζει τους ορισμούς στυλ από το αρχείο mystyle.css και θα μορφοποιήσει το έγγραφο σύμφωνα μ’ αυτό το αρχείο.
Ένα εξωτερικό φύλλο στυλ μπορεί να γραφεί σ’ έναν οποιονδήποτε text editor. Το αρχείο δεν πρέπει να περιέχει καθόλου html tags και πρέπει να αποθηκευθεί με την επέκταση .css. Ένα παράδειγμα ενός αρχείου φύλλου στυλ είναι το εξής :
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Εσωτερικά Φύλλα Στυλ (Internal Style Sheets)
Ένα εσωτερικό φύλλο στυλ (internal style sheet) πρέπει να χρησιμοποιηθεί όταν ένα έγγραφο έχει ένα μοναδικό στυλ. Ορίζουμε τα εσωτερικά στυλ στο τμήμα head χρησιμοποιώντας το tag <style>, ως εξής :
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>Ο φυλλομετρητής θα διαβάσει τους ορισμούς των στυλ και θα μορφοποιήσει ανάλογα το έγγραφο.
Ένας φυλλομετρητής κανονικά αγνοεί τα άγνωστα tags. Αυτό σημαίνει ότι ένας παλιός φυλλομετρητής που δεν υποστηρίζει στυλ, θα αγνοήσει το tag <style>, αλλά το περιεχόμενο του tag <style> θα εμφανισθεί στη σελίδα.
Μπορούμε να εμποδίσουμε έναν παλιό φυλλομετρητή από το να εμφανίσει αυτό το περιεχόμενο κρύβοντάς το με το στοιχείο σχολίου της HTML, ως εξής :
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
Τα Inline Styles
Ένα inline style χάνει πολλά από τα πλεονεκτήματα των φύλλων στυλ αναμειγνύοντας το περιεχόμενο με την παρουσίαση. Πρέπει να χρησιμοποιούμε αυτή τη μέθοδο με φειδώ, όπως όταν ένα στυλ πρόκειται να εφαρμοσθεί σε μία μοναδική εμφάνιση ενός στοιχείου.
Για να χρησιμοποιήσουμε τα inline styles χρησιμοποιούμε το χαρακτηριστικό (attribute) style στο σχετικό tag. Το χαρακτηριστικό style μπορεί να περιέχει οποιαδήποτε ιδιότητα CSS. Το παρακάτω παράδειγμα δείχνει πώς μπορούμε να αλλάξουμε το χρώμα και το αριστερό περιθώριο μιας παραγράφου :
<p style="color: sienna; margin-left: 20px"> Αυτή είναι μια παράγραφος </p>
Τα Πολλαπλά Φύλλα Στυλ
Αν μερικές ιδιότητες έχουν ορισθεί για τον ίδιο επιλογέα (selector) σε διαφορετικά φύλλα στυλ, οι τιμές θα κληρονομηθούν από το γενικότερο φύλλο στυλ. Για παράδειγμα, ένα εξωτερικό φύλλο στυλ έχει αυτές τις ιδιότητες για τον επιλογεά h3 :
h3
{
color: red;
text-align: left;
font-size: 8pt
}Και ένα εσωτερικό φύλλο στυλ έχει αυτές τις ιδιότητες για τον επιλογέα h3 :
h3
{
text-align: right;
font-size: 20pt
}Αν η σελίδα με το εσωτερικό φύλλο στυλ συνδέεται επίσης στο εξωτερικό φύλλο στυλ, οι ιδιότητες του h3 θα είναι οι εξής :
color: red; text-align: right; font-size: 20pt
Το χρώμα κληρονομείται από το εξωτερικό φύλλο στυλ και η στοίχιση κειμένου και το μέγεθος γραμματοσειράς αντικαθίστανται από το εσωτερικό φύλλο στυλ.
Ιδιότητες Φόντου του CSS
Οι ιδιότητες φόντου (background properties) του CSS ορίζουν τα εφέ φόντου ενός στοιχείου.
Παραδείγματα
Ορισμός του Χρώματος Φόντου (Background Color) ενός Στοιχείου
<html>
<head>
<style>
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250, 0, 255)}
</style>
</head>
<body>
<h1> This is header 1 </h1>
<h2> This is header 2 </h2>
<p> This is a paragraph </p>
</body>
</html>
Ορισμός μιας Εικόνας σαν Φόντο
<html>
<head>
<style>
body
{
background-image: url("../images/bgdesert.jpg")
}
</style>
</head>
<body>
</body>
</html>
Επανάληψη μιας Εικόνας Φόντου Κατακόρυφα
<html>
<head>
<style>
body
{
background-image: url("../images/bgdesert.jpg");
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
Τοποθέτηση μιας Εικόνας Φόντου
<html>
<head>
<style>
body
{
background-image: url("../images/smiley.gif");
background-repeat: no-repeat;
background-position: center center
}
</style>
</head>
<body>
<p>
<b> Note: </b> Netscape 4 does not support the
"background-position" property.
</p>
</body>
</html>
Ορισμός μιας Σταθερής (Fixed) Εικόνας Φόντου
<html>
<head>
<style>
body
{
background-image: url("../images/smiley.gif");
background-repeat: no-repeat;
background-attachment: fixed
}
</style>
</head>
<body>
<br><br>
<p>
<b>Note:</b> Netscape 4 does not support the
"background-attachment" property.
</p>
<p> The image will not scroll with the rest of the page </p>
</body>
</html>
Όλες οι Ιδιότητες Φόντου σε μια Δήλωση
<html>
<head>
<style>
body
{
background: #00ff00
url("../images/smiley.gif")
no-repeat fixed
center center
}
</style>
</head>
<body>
<p>
<b> Note: </b>
The background-attachment and the background-position
properties do not work in Netscape 4.0.
</p>
<p> This is some text </p>
</body>
</html>Στο επόμενο μέρος της εισαγωγής στα CSS θα δούμε περισσότερες επιλογές και μερικά παραδείγματα.
