Οι εντολές css συντάσσονται χρησιμοποιώντας δυο κομμάτια. Το πρώτο είναι ένας επιλογέας και το δεύτερο είναι το τμήμα δηλώσεων.
Ας δούμε το παράδειγμα:
h1 {color:blue; font-size:12px;}
Επιλογέας είναι το h1
Τμήμα δηλώσεων είναι το {color:blue; font-size:12px;}
Ο επιλογέας (selector) αναφέρεται στο στοιχείο html που θέλουμε να μορφοποιήσουμε.
Το τμήμα δηλώσεων (declaration block) περιλαμβάνει μια ή περισσότερες δηλώσεις που χωρίζονται μεταξύ τους με το σύμβολο ” ; ” (semicolon).
Κάθε δήλωση περιλαμβάνει μια ιδιότητα (property name) και μια τιμή (value) που διαχωρίζονται με το σύμβολο ” : ” (colon).
Κάθε δήλωση της CSS πάντα τελειώνει σε ” ; ” (semicolon). Το τμήμα δηλώσεων της CSS περιλ\κλείεται ανάμεσα σε { }.
Ακολουθεί παράδειγμα στο οποίο χρησιμοποιούμε CSS για να καθορίσουμε κάποιες ιδιότητες όλων των παραγράφων της σελίδας. Συγκεκριμένα δηλώνουμε οτι όλες οι παράγραφοι θα στοιχίζονται στο κέντρο και θα έχουν κόκκινο χρώμα.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
Εδώ βλέπουμε το αποτέλεσμα των παραπάνω εντολών:
Επιλογείς CSS (CSS Selectors)
Οι επιλογείς CSS (CSS Selectors) χρησιμοποιούνται για να καθορίσουμε σε ποιά στοιχεί ατης html θα εφαρμοστεί η μορφοποίηση. Ο καθορισμός των στοιχεών html μπορεί να γίνει βάσει ονόματος (name), ταυτότητας (id), κλάσης (class), χαρακτηριστικού (attribute) καθώς και με άλλους τρόπους.
Επιλογέας στοιχείου
Ο επιλογέας στοιχείου (element Selector) χρησιμοποιεί το όνομα του στοιχείου για τον καθορισμό του στοιχείου html.
Στο παράδειγμα που προηγήθηκε χρησιμοποιήσαμε επιλογέα στοιχείου για να επιλέξουμε όλες τις παραγράφους της σελίδας και να καθορίσουμε τη μορφοποίησή τους.
Επιλογέας ταυτότητας
Ο επιλογέας ταυτότητας (id Selector) χρησιμοποιεί την ταυτότητα (id) του στοιχείου για να καθορίσιε σε ποιά στοιχεία θα εφαρμοστεί η μορφοποίηση.
Η ταυτότητα (id) ενός στοιχείου πρέπει να είναι μοναδική μέσα σε μια σελίδα html. Αυτό σημαίνει οτι το id Selector χρησιμοποιείται για να προσδορίσει ένα μοναδικό στοιχείο html.
Όταν χρησιμοποιούμε το id Selector πρέπει να γράφουμε το χαρακτήρα hash (#) και στη συνέχειανα γράψουμε το id του στοιχείου.
Ακολουθεί παράδειγμα στο οποίο καθορίζουμε τη μορφοποίηση του στοιχείου με id=”para1″:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id=”para1″>Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Επιλογέας κλάσης
Ο επιλογέας κλάσης (class Selector) χρησιμοποιεί το όνομ ατης κλάσης για να εφαρμόσει τη μορφοποίηση σε όλα τα στοιχεία της συγκεκριμένης κλάσης.
Ακολουθεί παράδειγμα στο οποίο χρησιμοποιούμε το class Selector για να εφαρμόσουμε μορφοποίηση σε όλα τα στοιχεία της κλάσης class=”center”:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class=”center”>Red and center-aligned heading</h1>
<p class=”center”>Red and center-aligned paragraph.</p>
</body>
</html>
Μπορούμε επίσης να καθορίσουμε οτι η μορφοποίηση θα εφαρμοστεί μόνο σε συγκεκριμένα στοιχεία της συγκεκριμένης κλάσης.
Στο ακόλουθο παράδειγμα επιλέγουμε να εφαρμόσουμε τη μορφοποίηση μόνο στις παραγράφους που ανήκουν στην κλάση class=”center”:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class=”center”>This heading will not be affected</h1>
<p class=”center”>This paragraph will be red and center-aligned.</p>
</body>
</html>
Το class Selector μπορεί επίσης να εφαρμοστεί σε περισσότερες από μια κλάσεις.
Ακολουθεί παράδειγμα στο οποίο η μορφοποίηση θα εφαρμοστεί σε δυο κλάσεις, στην κλάση class=”center” και στην κλάση class=”large”:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class=”center”>This heading will not be affected</h1>
<p class=”center”>This paragraph will be red and center-aligned.</p>
<p class=”center large”>This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Εδώ θα πρέπει να σημειώσουμε οτι το όνομα της κλάσης δεν πρέπει να ξεκινάει με αριθμό.
Επιλογείς ομαδοποίησης
Οι επιλογείς ομαδοποίησης (Grouping Selectors) χρησιμοποιούνται όταν θέλουμε να εφαρμόσουμε την ίδι αμορφοποίηση σε πολλά στοιχεία. Μας βοηθάει να αποφύγουμε την επανάληψη και να γράψουμε λιγότερο κώδικα.
Όταν χρησιμοποιούμε επιλογείς ομαδοποίησης τότε τα στοιχεία html πρέπει να διαχωρίζονται μεταξύθ τους με κόμμα.
Ακολουθεί παράδειγμα στο οποίο η μορφοποίηση θα εφαρμοστεί στα στοιχεία h1, h2 και p:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Σχόλια CSS
Τα σχόλια χρησιμοποιούνται για να εξηγήσουμε τον κώδικα, και μας βοηθάνε όταν θελήσουμε να επεξεργαστούμε τον κώδικα σε μεταγενέστερη χρονική στιγμή.
Τα σχόλια αγνοούνται από τους φυλλομετρητές.
Τα σχόλια στο CSS ξεκινάνε με /* και τελειώνουν με */. Τα σχόλια μπορούν να εκτείνονται σε πολλές γραμμές, όπως στο παρακάτω παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
