Στην ενότητα αυτή θα δούμε τους τρόπους σύνταξης των στυλ. Οι τρόποι αυτοί έχουν να κάνουν με την σύνδεση των HTML ετικετών και των CSS στυλ. Γενικά μπορούμε να ορίσουμε στυλ για:
  • συγκεκριμένες ετικέτες
  • ετικέτες που περιέχουν την ιδιότητα class, η τιμή της οποίας χρησιμοποιείται στα στυλ ώστε αυτά να εφαρμοστούν μόνο στις ετικέτες που έχουν την ίδια τιμή στην class
  • ετικέτες που περιέχουν την ιδιότητα id, η τιμή της οποίας χρησιμοποιείται στα στυλ ώστε αυτά να εφαρμοστούν μόνο στις ετικέτες που έχουν την ίδια τιμή στην id

Η γενική σύνταξη ενός στυλ αποτελείται από τρία στοιχεία:
  • τον Επιλογέα (selector),
  • τις Ιδιότητες (attributes) του επιλογέα και
  • τις Τιμές (values) των Ιδιοτήτων του επιλογέα
η διάταξη των οποίων είναι η παρακάτω:
Σύνταξη ενός στυλ
επιλογέας {
ιδιότητα-1: τιμή;
ιδιότητα-2: τιμή;
...
ιδιότητα-ν: τιμή;
}
Ο Επιλογέας συνήθως είναι μια ετικέτα της HTML στην οποία θέλουμε να εφαρμόσουμε το στυλ. Οι Ιδιότητες είναι ιδιότητες της CSS οι οποίες προσθέτουν διάφορα χαρακτηριστικά στις ετικέτες τις οποίες εφαρμόζονται τα στυλ. Μια Ιδιότητα μπορεί να έχει μια ή περισσότερες Τιμές, σύμφωνα με τους κανόνες του προτύπου της CSS.

Όπως θα δούμε παρακάτω, στην θέση του Επιλογέα δεν τοποθετούμε μόνο ετικέτες, αλλά και άλλα πράγματα τα οποία και θα δούμε αναλυτικά. Ο Επιλογέας "δείχνει" σε ποιες ετικέτες θα εφαρμοστεί ένα στυλ.
Παράδειγμα1
em {
color: blue;
font-family: Arial;
}
Αλλάξτε το χρώμα και την γραμματοσειρά του στυλ της ετικέτας <em> το οποίο ορίζεται στο τμήμα <head> της σελίδας
Το παραπάνω στυλ έχει σαν Επιλογέα την ετικέτα <em> και εφαρμόζεται σε όλες τις ετικέτες <em> ορίζοντας το χρώμα μπλε και την γραμματοσειρά Arial για το κείμενο που βρίσκεται ανάμεσα στις ετικέτες <em> και </em>

Και για να το συνδέσουμε με την προηγούμενη ενότητα αναφέρω ότι: αν το στυλ αυτό βρίσκεται σε ένα εξωτερικό αρχείο, τότε θα εφαρμοστεί σε όλες τις ετικέτες <em> οι οποίες βρίσκονται στις σελίδες που εισάγουν αυτό το εξωτερικό αρχείο στυλ. Αν το στυλ βρίσκεται στο τμήμα HEAD μιας σελίδας, τότε θα εφαρμοστεί σε όλες τις ετικέτες <em> της σελίδας αυτής

Παράδειγμα 2
p {
font-family: "Courier New";
}
Αλλάξτε την γραμματοσειρα του στυλ της ετικέτας <p>
Το παραπάνω στυλ (που έχει Επιλογέα την ετικέτα <p>) εφαρμόζεται στις ετικέτες <p> και ορίζει την γραμματοσειρά του κειμένου που βρίσκεται ανάμεσα στις ετικέτες <p> και </p>.

Αν η Τιμή μιας Ιδιότητας, στον ορισμό ενός στυλ, περιέχει κενά ανάμεσα της, τότε την τοποθετούμε μέσα σε διπλά εισαγωγικά, όπως κάνουμε στην τιμή "Courier New".

Παράδειγμα 3
p {
font-family: "Courier New";
color: #FF3333;
text-align: center;
}
Αλλάξτε το στυλ της ετικέτας <p>
Σε ένα στυλ μπορούμε να προσθέσουμε όσες Ιδιότητες του Επιλογέα επιθυμούμε. Το παραπάνω στυλ ορίζει την γραμματοσειρά (font-family), το χρώμα (color) και την στοίχιση (text-align) του κειμένου που βρίσκεται ανάμεσα στις ετικέτες <p> και </p>.

Στις επόμενες ενότητες θα μάθουμε όλες τις Ιδιότητες και τις διαθέσιμες Τιμές που αυτές μπορούν να πάρουν.

Ομαδοποίηση των Επιλογέων

Σύνταξη
ετικέτα1, ετικέτα2, ετικέτα3, ..., ετικέτα-ν {
ιδιότητα: τιμή;
}
Έχουμε την δυνατότητα να ορίσουμε το ίδιο στυλ για περισσότερες από μια HTML ετικέτες. Αυτό μπορούμε να το πετύχουμε τοποθετώντας στην θέση του Επιλογέα τις ετικέτες χωρίζοντας τες με κόμμα

Παράδειγμα
p,td,th {
font-family: "Courier New";
color: #FF3333;
text-align: center;
}
Αλλάξτε το στυλ των ετικετών <p> και <td> και <th>
Το παραπάνω στυλ θα εφαρμοστεί στις ετικέτες <p>, <td> και <th> της σελίδας

Σύνταξη στυλ με την χρήση της ιδιότητας class στον Επιλογέα

Σύνταξη
ετικέτα.τιμή_της_ιδιότητας_class {
ιδιότητα: τιμή;
}
Μπορούμε να ορίσουμε διαφορετικά στυλ για ίδιες ετικέτες χρησιμοποιώντας για Επιλογέα το όνομα της ετικέτας μαζί με την τιμή που περιέχει η ιδιότητα class της ετικέτας. Την κοινή ιδιότητα class της HTML μπορούμε να την προσθέσουμε σε όλες τις ετικέτες δίνοντας σε αυτές ένα όνομα, της επιλογής μας, το οποίο μπορεί να χρησιμοποιηθεί σαν αναφορά σε κάποιο στυλ.

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

Παράδειγμα
<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>
Η ετικέτα &lt;ul&gt; εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το &lt;ul&gt; είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα &lt;li&gt; προσθέτει γραμμές στην λίστα. Η ιδιότητα <em class="idiotites">type</em> της ετικέτας &lt;ul&gt; ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <em class="idiotites">type</em> είναι οι εξής:
<em class="times">disc</em>, <em class="times">circle</em>, <em class="times">square</em>
</body>
</html>
Το στυλ em.idiotites θα εφαρμοστεί σε όλες τις ετικέτες <em> οι οποίες περιέχουν την ιδιότητα class με την τιμή "idiotites", ενώ το στυλ em.times θα εφαρμοστεί σε όλες τις ετικέτες <em> οι οποίες περιέχουν την ιδιότητα class με την τιμή "times"

Σύνταξη στυλ ανεξάρτητα από την ετικέτα

Σύνταξη
.τιμή_της_ιδιότητας_class {
ιδιότητα: τιμή;
}
Στον προηγούμενο τρόπο σύνταξης, παραλείποντας το όνομα της ετικέτας στον Επιλογέα ενός στυλ με την χρήση της ιδιότητας class, το στυλ αυτό μπορεί να εφαρμοστεί σε όλες τις ετικέτες που περιέχουν στην ιδιότητα 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>
Αλλάξτε τις τιμές των ιδιοτήτων του στυλ .keimeno12 και παρατηρήστε πως αλλάζει το στυλ του κειμένου που βρίσκετε μέσα σε όλες τις ετικέτες που περιέχουν την ιδιότητα class

Το στυλ .keimeno12px θα εφαρμοστεί σε όλες τις ετικέτες της σελίδας οι οποίες περιέχουν την ιδιότητα class με την τιμή "keimeno12px"

Σύνταξη στυλ με την χρήση της ιδιότητας id

Σύνταξη
ετικέτα#τιμή_της_ιδιότητας_ID {
ιδιότητα: τιμή;
}
Μπορούμε να ορίσουμε στυλ για συγκεκριμένες ετικέτες της σελίδας μας οι οποίες περιέχουν την ιδιότητα 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>
Στην παράγραφο με id την τιμή "paragrafos1" θα εφαρμοστεί το στυλ p#paragrafos1, ενώ στο τμήμα div με id την τιμή "aristero_tmhma" θα εφαρμοστεί το στυλ div#aristero_tmhma.

Έχουμε επίσης την δυνατότητα, παραλείποντας το όνομα της ετικέτας πριν το σύμβολο #, να εφαρμόσουμε ένα στυλ σε κάθε ετικέτα που έχει id ίδιο με αυτό που ακολουθεί μετά το #
Παράδειγμα
#left {
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 κώδικα στην ετικέτα <p> εφαρμόζονται ταυτόχρονα 3 διαφορετικά στυλ, τα: .right, .bold και .color1

Παράδειγμα
<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>
Στην ετικέτα <h1 class="right bold">Αυτή είναι μια επικεφαλίδα</h1> θα εφαρμοστούν δύο στυλ, το .right και το .bold, δηλαδή το κείμενο Αυτή είναι μια επικεφαλίδα, θα εμφανιστεί με δεξιά στοίχιση (text-align: right;) και έντονη γραφή (font-weight: bold;).

Στην ετικέτα <p class="right bold color1">Αυτή είναι μια παράγραφος</p> θα εφαρμοστούν τρία στυλ, το .right, το .bold και το .color1, δηλαδή το κείμενο Αυτή είναι μια παράγραφος θα εμφανιστεί με δεξιά στοίχιση, με έντονη γραφή και με χρώμα #228B22

Σύνταξη στυλ για ετικέτες με συγκεκριμένη ιδιότητα και τιμή

Σύνταξη
ετικέτα[ιδιότητα_ετικέτας="τιμή"] {
ιδιότητα: τιμή;
}
Μπορούμε να εφαρμόσουμε στυλ σε HTML ετικέτες με συγκεκριμένη ιδιότητα και τιμή

Παράδειγμα
<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 της παραπάνω σελίδας θα εφαρμοστεί σε όλες τις ετικέτες <input> οι οποίες περιέχουν την ιδιότητα type με την τιμή "text". Στο πεδίο password δεν θα εφαρμοστεί το στυλ γιατί η τιμή της ιδιότητας type δεν είναι "text" αλλά "password". Αν θέλαμε να εφαρμόσουμε κάποιο στυλ και στο πεδίο password, θα προσθέταμε στο τμήμα head την παρακάτω σύνταξη στυλ:
Παράδειγμα
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>
Η ετικέτα &lt;ul&gt; εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το &lt;ul&gt; είναι τα δύο πρώτα γράμματα από το <em>Unordered List</em>. Η ετικέτα &lt;li&gt; προσθέτει γραμμές στην λίστα. Η ιδιότητα <em class="idiotites">type</em> της ετικέτας &lt;ul&gt; ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα <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 με τις οποίες μορφοποιούμε κείμενο και άλλα στοιχεία μιας σελίδας
Pin It