Στην ενότητα αυτή θα δούμε τους τρόπους σύνταξης των στυλ. Οι τρόποι αυτοί έχουν να κάνουν με την σύνδεση των HTML ετικετών και των CSS στυλ. Γενικά μπορούμε να ορίσουμε στυλ για:
Η γενική σύνταξη ενός στυλ αποτελείται από τρία στοιχεία:
Ο Επιλογέας συνήθως είναι μια ετικέτα της HTML στην οποία θέλουμε να εφαρμόσουμε το στυλ. Οι Ιδιότητες είναι ιδιότητες της CSS οι οποίες προσθέτουν διάφορα χαρακτηριστικά στις ετικέτες τις οποίες εφαρμόζονται τα στυλ. Μια Ιδιότητα μπορεί να έχει μια ή περισσότερες Τιμές, σύμφωνα με τους κανόνες του προτύπου της CSS.
Όπως θα δούμε παρακάτω, στην θέση του Επιλογέα δεν τοποθετούμε μόνο ετικέτες, αλλά και άλλα πράγματα τα οποία και θα δούμε αναλυτικά. Ο Επιλογέας "δείχνει" σε ποιες ετικέτες θα εφαρμοστεί ένα στυλ.
Το παραπάνω στυλ έχει σαν Επιλογέα την ετικέτα <em> και εφαρμόζεται σε όλες τις ετικέτες <em> ορίζοντας το χρώμα μπλε και την γραμματοσειρά Arial για το κείμενο που βρίσκεται ανάμεσα στις ετικέτες <em> και </em>
Και για να το συνδέσουμε με την προηγούμενη ενότητα αναφέρω ότι: αν το στυλ αυτό βρίσκεται σε ένα εξωτερικό αρχείο, τότε θα εφαρμοστεί σε όλες τις ετικέτες <em> οι οποίες βρίσκονται στις σελίδες που εισάγουν αυτό το εξωτερικό αρχείο στυλ. Αν το στυλ βρίσκεται στο τμήμα HEAD μιας σελίδας, τότε θα εφαρμοστεί σε όλες τις ετικέτες <em> της σελίδας αυτής
Το παραπάνω στυλ (που έχει Επιλογέα την ετικέτα <p>) εφαρμόζεται στις ετικέτες <p> και ορίζει την γραμματοσειρά του κειμένου που βρίσκεται ανάμεσα στις ετικέτες <p> και </p>.
Αν η Τιμή μιας Ιδιότητας, στον ορισμό ενός στυλ, περιέχει κενά ανάμεσα της, τότε την τοποθετούμε μέσα σε διπλά εισαγωγικά, όπως κάνουμε στην τιμή "Courier New".
Σε ένα στυλ μπορούμε να προσθέσουμε όσες Ιδιότητες του Επιλογέα επιθυμούμε. Το παραπάνω στυλ ορίζει την γραμματοσειρά (font-family), το χρώμα (color) και την στοίχιση (text-align) του κειμένου που βρίσκεται ανάμεσα στις ετικέτες <p> και </p>.
Στις επόμενες ενότητες θα μάθουμε όλες τις Ιδιότητες και τις διαθέσιμες Τιμές που αυτές μπορούν να πάρουν.
- συγκεκριμένες ετικέτες
- ετικέτες που περιέχουν την ιδιότητα class, η τιμή της οποίας χρησιμοποιείται στα στυλ ώστε αυτά να εφαρμοστούν μόνο στις ετικέτες που έχουν την ίδια τιμή στην class
- ετικέτες που περιέχουν την ιδιότητα id, η τιμή της οποίας χρησιμοποιείται στα στυλ ώστε αυτά να εφαρμοστούν μόνο στις ετικέτες που έχουν την ίδια τιμή στην id
Η γενική σύνταξη ενός στυλ αποτελείται από τρία στοιχεία:
- τον Επιλογέα (selector),
- τις Ιδιότητες (attributes) του επιλογέα και
- τις Τιμές (values) των Ιδιοτήτων του επιλογέα
Σύνταξη ενός στυλ
επιλογέας {
ιδιότητα-1: τιμή;
ιδιότητα-2: τιμή;
...
ιδιότητα-ν: τιμή;
}
ιδιότητα-1: τιμή;
ιδιότητα-2: τιμή;
...
ιδιότητα-ν: τιμή;
}
Όπως θα δούμε παρακάτω, στην θέση του Επιλογέα δεν τοποθετούμε μόνο ετικέτες, αλλά και άλλα πράγματα τα οποία και θα δούμε αναλυτικά. Ο Επιλογέας "δείχνει" σε ποιες ετικέτες θα εφαρμοστεί ένα στυλ.
Παράδειγμα1
em {
color: blue;
font-family: Arial;
}
color: blue;
font-family: Arial;
}
Αλλάξτε το χρώμα και την γραμματοσειρά του στυλ της ετικέτας <em> το οποίο ορίζεται στο τμήμα <head> της σελίδας
Και για να το συνδέσουμε με την προηγούμενη ενότητα αναφέρω ότι: αν το στυλ αυτό βρίσκεται σε ένα εξωτερικό αρχείο, τότε θα εφαρμοστεί σε όλες τις ετικέτες <em> οι οποίες βρίσκονται στις σελίδες που εισάγουν αυτό το εξωτερικό αρχείο στυλ. Αν το στυλ βρίσκεται στο τμήμα HEAD μιας σελίδας, τότε θα εφαρμοστεί σε όλες τις ετικέτες <em> της σελίδας αυτής
Παράδειγμα 2
p {
font-family: "Courier New";
}
font-family: "Courier New";
}
Αλλάξτε την γραμματοσειρα του στυλ της ετικέτας <p>
Αν η Τιμή μιας Ιδιότητας, στον ορισμό ενός στυλ, περιέχει κενά ανάμεσα της, τότε την τοποθετούμε μέσα σε διπλά εισαγωγικά, όπως κάνουμε στην τιμή "Courier New".
Παράδειγμα 3
p {
font-family: "Courier New";
color: #FF3333;
text-align: center;
}
font-family: "Courier New";
color: #FF3333;
text-align: center;
}
Αλλάξτε το στυλ της ετικέτας <p>
Στις επόμενες ενότητες θα μάθουμε όλες τις Ιδιότητες και τις διαθέσιμες Τιμές που αυτές μπορούν να πάρουν.
Ομαδοποίηση των Επιλογέων
Σύνταξη
ετικέτα1, ετικέτα2, ετικέτα3, ..., ετικέτα-ν {
ιδιότητα: τιμή;
}
ιδιότητα: τιμή;
}
Παράδειγμα
p,td,th {
font-family: "Courier New";
color: #FF3333;
text-align: center;
}
font-family: "Courier New";
color: #FF3333;
text-align: center;
}
Αλλάξτε το στυλ των ετικετών <p> και <td> και <th>
Σύνταξη στυλ με την χρήση της ιδιότητας class στον Επιλογέα
Σύνταξη
ετικέτα.τιμή_της_ιδιότητας_class {
ιδιότητα: τιμή;
}
ιδιότητα: τιμή;
}
Αυτός ο τρόπος σύνταξης είναι ο περισσότερο χρησιμοποιούμενος, καθώς μας δείνει την ευελιξία να διαχωρίσουμε ίδιες ετικέτες μεταξύ τους και να εφαρμόσουμε σε αυτές διαφορετικά στυλ.
Παράδειγμα
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
em.idiotites {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
em.times {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #FFA07A;
font-weight: bold;
TEXT-DECORATION: none;
}
</style>
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το <ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em class="idiotites">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em class="idiotites">type</em> είναι οι εξής:
<em class="times">disc</em>, <em class="times">circle</em>, <em class="times">square</em>
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
em.idiotites {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
em.times {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #FFA07A;
font-weight: bold;
TEXT-DECORATION: none;
}
</style>
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το <ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em class="idiotites">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em class="idiotites">type</em> είναι οι εξής:
<em class="times">disc</em>, <em class="times">circle</em>, <em class="times">square</em>
</body>
</html>
Σύνταξη στυλ ανεξάρτητα από την ετικέτα
Σύνταξη
.τιμή_της_ιδιότητας_class {
ιδιότητα: τιμή;
}
ιδιότητα: τιμή;
}
Παράδειγμα
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
.keimeno12px {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
</style>
</head>
<body>
<h1 class="keimeno12px">Αυτή είναι μια επικεφαλίδα</h1>
<p class="keimeno12px">Αυτή είναι μια παράγραφος</p>
Αυτή είναι μια Λίστα: <ul>
<li class="keimeno12px">Coffee</li>
<li class="keimeno12px">Tea</li>
<li class="keimeno12px">Milk</li>
</ul>
<p>Αυτή είναι μια παράγραφο που δεν περιέχει την ιδιότητα class</p>
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
.keimeno12px {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
</style>
</head>
<body>
<h1 class="keimeno12px">Αυτή είναι μια επικεφαλίδα</h1>
<p class="keimeno12px">Αυτή είναι μια παράγραφος</p>
Αυτή είναι μια Λίστα: <ul>
<li class="keimeno12px">Coffee</li>
<li class="keimeno12px">Tea</li>
<li class="keimeno12px">Milk</li>
</ul>
<p>Αυτή είναι μια παράγραφο που δεν περιέχει την ιδιότητα class</p>
</body>
</html>
Αλλάξτε τις τιμές των ιδιοτήτων του στυλ .keimeno12 και παρατηρήστε πως αλλάζει το στυλ του κειμένου που βρίσκετε μέσα σε όλες τις ετικέτες που περιέχουν την ιδιότητα class
Το στυλ .keimeno12px θα εφαρμοστεί σε όλες τις ετικέτες της σελίδας οι οποίες περιέχουν την ιδιότητα class με την τιμή "keimeno12px"
Σύνταξη στυλ με την χρήση της ιδιότητας id
Σύνταξη
ετικέτα#τιμή_της_ιδιότητας_ID {
ιδιότητα: τιμή;
}
ιδιότητα: τιμή;
}
Η κοινή ιδιότητα id της HTML ορίζει ένα μοναδικό όνομα (ταυτότητα) για ένα στοιχείο της σελίδας ώστε να μπορούμε να αναφερθούμε σε αυτό μέσα από ένα script (π.χ. JavaScript ή VBScript) ή να εφαρμόσουμε στο στοιχείο αυτό ένα στυλ με την CSS
Παράδειγμα
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
p#paragrafos1 {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
div#aristero_tmhma {
background-color: blue;
color: White;
text-decoration: bold;
}
</style>
</head>
<body>
<p id="paragrafos1">
κείμενο μέσα στην παράγραφο paragrafos1...
</p>
<p>
Κείμενο μέσα στην παράγραφο...
</p>
<div id="aristero_tmhma">
Κείμενο μέσα στην ενότητα div
</div>
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
p#paragrafos1 {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
div#aristero_tmhma {
background-color: blue;
color: White;
text-decoration: bold;
}
</style>
</head>
<body>
<p id="paragrafos1">
κείμενο μέσα στην παράγραφο paragrafos1...
</p>
<p>
Κείμενο μέσα στην παράγραφο...
</p>
<div id="aristero_tmhma">
Κείμενο μέσα στην ενότητα div
</div>
</body>
</html>
Έχουμε επίσης την δυνατότητα, παραλείποντας το όνομα της ετικέτας πριν το σύμβολο #, να εφαρμόσουμε ένα στυλ σε κάθε ετικέτα που έχει id ίδιο με αυτό που ακολουθεί μετά το #
Παράδειγμα
#left {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
Και αυτός ο τρόπος σύνταξης (όπως και η σύνταξη στυλ με την χρήση class) είναι ο περισσότερο χρησιμοποιούμενος, καθώς μας δίνει την ευελιξία να διαχωρίσουμε ίδιες ετικέτες μεταξύ τους και να εφαρμόσουμε σε αυτές διαφορετικά στυλ.
Ορισμός περισσοτέρων απο ένα στυλ σε μια ετικέτα
Παράδειγμα
<p class="right bold color1">Αυτή είναι μια παράγραφος</p>
Παράδειγμα
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
.right {
text-align: right;
}
.bold {
font-weight: bold;
}
.color1 {
color: #228B22;
}
</style>
</head>
<body>
<h1 class="right bold">Αυτή είναι μια επικεφαλίδα</h1>
<p class="right bold color1">Αυτή είναι μια παράγραφος</p>
Αυτή είναι μια Λίστα:
<ul>
<li class="bold color1">Coffee</li>
<li class="bold color1">Tea</li>
<li class="bold color1">Milk</li>
</ul>
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
.right {
text-align: right;
}
.bold {
font-weight: bold;
}
.color1 {
color: #228B22;
}
</style>
</head>
<body>
<h1 class="right bold">Αυτή είναι μια επικεφαλίδα</h1>
<p class="right bold color1">Αυτή είναι μια παράγραφος</p>
Αυτή είναι μια Λίστα:
<ul>
<li class="bold color1">Coffee</li>
<li class="bold color1">Tea</li>
<li class="bold color1">Milk</li>
</ul>
</body>
</html>
Στην ετικέτα <p class="right bold color1">Αυτή είναι μια παράγραφος</p> θα εφαρμοστούν τρία στυλ, το .right, το .bold και το .color1, δηλαδή το κείμενο Αυτή είναι μια παράγραφος θα εμφανιστεί με δεξιά στοίχιση, με έντονη γραφή και με χρώμα #228B22
Σύνταξη στυλ για ετικέτες με συγκεκριμένη ιδιότητα και τιμή
Σύνταξη
ετικέτα[ιδιότητα_ετικέτας="τιμή"] {
ιδιότητα: τιμή;
}
ιδιότητα: τιμή;
}
Παράδειγμα
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
input[type="text"] {
background-color: yellow;
color: black;
text-decoration: bold;
}
</style>
</head>
<body>
<input type="text" size="40" value="Κείμενο">
<input type="password" size="40">
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
input[type="text"] {
background-color: yellow;
color: black;
text-decoration: bold;
}
</style>
</head>
<body>
<input type="text" size="40" value="Κείμενο">
<input type="password" size="40">
</body>
</html>
Παράδειγμα
input[type="password"] {
...
}
...
}
Σχόλια στην CSS
Όπως στην HTML έτσι και στην CSS μπορούμε να προσθέσουμε σχόλια στον κώδικα. Ένα σχόλιο αρχίζει με /* και τελειώνει με */
Παράδειγμα
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
/* To stul auto to eftiaksa gia na tonisw me diaforetiko xrwma tis idiotites mias etiketas */
em.idiotites {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
/* To stul auto to eftiaksa gia na tonisw me diaforetiko xrwma tis times twn idiotitwn mias
etiketas */
em.times {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #FFA07A;
font-weight: bold;
TEXT-DECORATION: none;
}
</style>
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το <ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em class="idiotites">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em class="idiotites">type</em> είναι οι εξής:
<em class="times">disc</em>, <em class="times">circle</em>, <em class="times">square</em>
</body>
</html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
/* To stul auto to eftiaksa gia na tonisw me diaforetiko xrwma tis idiotites mias etiketas */
em.idiotites {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #228B22;
font-weight: bold;
TEXT-DECORATION: none;
}
/* To stul auto to eftiaksa gia na tonisw me diaforetiko xrwma tis times twn idiotitwn mias
etiketas */
em.times {
font-size: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
color: #FFA07A;
font-weight: bold;
TEXT-DECORATION: none;
}
</style>
</head>
<body>
Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το <ul> είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα <em class="idiotites">type</em> της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em class="idiotites">type</em> είναι οι εξής:
<em class="times">disc</em>, <em class="times">circle</em>, <em class="times">square</em>
</body>
</html>
Συνεχίζουμε ...;
Στην ενότητα αυτή παρουσιάσαμε τους τρόπους σύνταξης των στυλ και μιλήσαμε για τον Επιλογέα και πως αυτός αποτελεί τον συνδετικό κρίκο μεταξύ της HTML και της CSS. Στις επόμενες ενότητες θα δούμε όλες τις ιδιότητες και τις τιμές του προτύπου CSS με τις οποίες μορφοποιούμε κείμενο και άλλα στοιχεία μιας σελίδας