Οι επιλογείς καθορίζουν τον τρόπο με τον οποίο τα στιλ CSS ανατίθενται στα στοιχεία HTML. Σε μια αντίστοιχη ορισμό, αναφέρουμε αρχικά το όνομα του στοιχείου στο οποίο επιθυμούμε να αποκτήσει πρόσβαση ο επιλογέας. Η πραγματική δήλωση γίνεται μέσα σε αγκύλες. Μέσα σε κάθε δήλωση μπορούν να καθοριστούν μία ή περισσότερες ιδιότητες. Η γενική σύνταξη είναι ως εξής:
Επιλογέας {
Ιδιότητα1: Τιμή;
Ιδιότητα2: Τιμή;
Ιδιότητα3: Τιμή;
}Ένας αντίστοιχος ορισμός σας έχει ήδη συναντηθεί στο προηγούμενο εκμάθηση.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Βεβαιωθείτε ότι κάθε δήλωση τελείωνεται με ένα ερωτηματικό.
Ρίξτε μια ματιά στους διαθέσιμους επιλογείς
Πράγματι, το CSS προσφέρει μια σημαντική ποικιλία επιλογέων, από τις οποίες θα σας παρουσιάσω τις πιο σημαντικές. Είναι προφανές ότι μόνο αν καταφερθείτε να χειριστείτε τους επιλογείς μπορείτε να ορίσετε λογικά τις ιδιότητες CSS.
Η απλούστερη δυνατότητα να εφαρμόσετε στυλ σε στοιχεία εντός ενός εγγράφου HTML προσφέρεται με τον Επιλογέα Στοιχείου.
Μέσω της παρακάτω σύνταξης, όλα τα στοιχεία p παίρνουν το χρώμα μαύρο.
p {
color: #009966;
}
Αν θέλετε να εφαρμόσετε το ίδιο στύλ σε περισσότερα στοιχεία, αυτό είναι εφικτό.
Σε αυτή την περίπτωση, απλά γράφετε τα αντίστοιχα στοιχεία δίπλα-δίπλα, χωρίζοντάς τα με κόμμα.
p, h1, li {
color: #000;
}
Μπορείτε να αναθέσετε πολλά στυλ σε στοιχεία. Τα στυλ αυτά διπλαρnένεται ξεχωριστά με ένα ερωτηματικό.
p {
color: #000;
background-color: red;
}
Μια συνδυαστική χρήση των παραπάνω ενδείξεων είναι επίσης εφικτή.
p, h1, li {
color: #009966;
background-color: red;
}
Το αποτέλεσμα μπορεί να είναι όπως ακολουθεί:
Περιοχές με πολλά στοιχεία
Συχνά υπάρχει η ανάγκη να μορφοποιηθεί μια περιοχή που αποτελείται από πολλά στοιχεία HTML. Για τέτοιες περιπτώσεις, το HTML διαθέτει δύο ειδικά στοιχεία span και div. Αυτά τα στοιχεία θα συναντήσετε ξανά - μάλιστα και σε αυτήν τη σειρά.
Ένα παράδειγμα:
<div class="artikel"> <h1>Έκρηξη χρωμάτων</h1> <p class="thema">Μια εκμάθηση για τη δημιουργία εκρήξεων χρωμάτων από <span class="autor">MarkusMelzer</span>.</p> </div>
Η μοναδική διαφορά μεταξύ div και span είναι ότι το στοιχείο div επιβάλλει μία νέα γραμμή στη ροή κειμένου. Το span, αντίθετα, δεν δημιουργεί νέα γραμμή. Στο παραπάνω παράδειγμα ορίζεται μια περιοχή div, όπου περιέχονται ένας τίτλος και ένα τμήμα κειμένου. Μέσα στο τμήμα κειμένου υπάρχει ένα πεδίο span.
Επιλογείς ID και κλάσεων
Μέχρι τώρα χρησιμοποιήθηκαν επιλογείς στοιχείων. Με το παρακάτω παράδειγμα όλοι οι τίτλοι h1 μορφοποιούνται από έναν τέτοιο επιλογέα.
h1 {
color: #000;
background-color: red;
}
Αυτό φυσικά δεν είναι πάντα επιθυμητό. Ποιος θα ήθελε, για παράδειγμα, να αποδώσει συγκεκριμένες ιδιότητες σε έναν ή μερικούς, όχι όμως σε όλους τους τίτλους h1? Για τέτοιες περιπτώσεις το CSS παρέχει δύο επιλογές, τα επιλογείς κλάσεων και τα επιλογείς ID.
Με τους επιλογείς κλάσεων, μπορούν να επιλεγούν στοιχεία HTML με συγκεκριμένα γνωρίσματα κλάσης. Στο αντίστοιχο στοιχείο HTML πρέπει να αναφέρεται το γνώρισμα class. Οι ορισμοί κλάσεων ξεκινούν με ένα τελεία.
Ένα παράδειγμα:
.rot {
color: red;
}
Σε αυτό το παράδειγμα έγινε ορισμός της κλάσης rot. Για να εφαρμόσετε τις ιδιότητες που έχουν αποδοθεί στο χρώμα κόκκινο σε ένα στοιχείο HTML, αναφέρετε class και ακολουθείται από το όνομα της κλάσης.
<p class="rot">PSD-Tutorials.de</p>
Ο επιλογέας ID χρησιμοποιείται με παρόμοιο τρόπο. Αναγνωρίζεται από δύο διπλές τελείες.
#topnavi {
color: blue;
};Σε αυτό το παράδειγμα καθορίζεται η ID topnavi. Αλλά προσοχή: Μια ID μπορεί πραγματικά να ανατεθεί μόνο μία φορά εντός ενός εγγράφου. Η πρόσβαση σε μια ορισμένη ιδιότητα ID φαίνεται ως εξής:
<div id="topnavi">Εδώ βρίσκεται η πλοήγηση</div>
Το attribut id ανατίθεται στο όνομα του ID. Βεβαιωθείτε ότι δεν γράφετε τη δίαιτα εδώ.
Τα παραπάνω στοιχεία μπορούν επίσης να συνδυαστούν μεταξύ τους. Έτσι, μπορείτε να αναθέσετε πολλαπλές κλάσεις σε ένα στοιχείο HTML.
<p class="κόκκινο μεγάλο">PSD-Tutorials.de</p>
Σε αυτό το παράδειγμα, ο παράγραφος κειμένου αναλώνεται με τις δύο κλάσεις κόκκινο και μεγάλο. Αν θέλετε να καθορίσετε μια κλάση και ένα ID, η σύνταξη είναι ως εξής:
<p class="κόκκινο" id="navi">PSD-Tutorials.de</p>
Μπορείτε επίσης να συνδυάσετε στοιχεία και IDs μεταξύ τους. Ένα παράδειγμα γι' αυτό είναι:
div.navi {
χρώμα: μπλε;
}
Αυτή η σύνταξη θα ισχύει μόνο για στοιχεία div με την κλάση navi. Οι παράγραφοι p που επίσης έχουν την κλάση navi θα παραμείνουν ανέπαφοι.
Στο CSS υπάρχει και μια άλλη μέθοδος συνδυασμού των επιλογέων. Ρίξτε μια ματιά στην ακόλουθη σύνταξη:
h1 {
χρώμα: κόκκινο;
}
em {
χρώμα: μπλε;
}
Εδώ ολοκληρώνεται σε όλες τις ενότητες πρώτης τάξης το χρώμα Κόκκινο. Τα στοιχεία em από την άλλη παίρνουν το Μπλε χρώμα.
Με τη συνδυασμό των δύο οδηγιών μπορείτε να διασφαλίσετε ότι μόνο τα στοιχεία em είναι βαμμένα μπλε, τα οποία βρίσκονται μέσα σε στοιχεία h1.
h1 em {
χρώμα: μπλε;
};
Τα ονόματα των στοιχείων γράφονται εδώ χωρίς κόμματα ανάμεσά τους.
Αυτό είναι ένα δημοφιλές σημείο σφάλματος, στο οποίο ειδικά οι νέοι στο CSS πέφτουν. Αυτή είναι η ίδια σύνταξη, στην οποία όμως τελικά έχει τεθεί κόμμα:
h1, em {
χρώμα: μπλε;
}
Τι σημαίνει αυτή η σύνταξη; Αναφέρονται όλα τα στοιχεία h1 και em. Είναι λοιπόν κάτι τελείως διαφορετικό από τη σύνταξη χωρίς κόμμα! Το καταλαβαίνετε;
Ένας άλλος σημαντικός επιλογέας είναι ο Ολικός Επιλογέας. Αυτός επιτρέπει την επιλογή οποιουδήποτε στοιχείου. Αυτός ο Επιλογέας καθορίζεται μέσω ενός αστερίσκου.
* {
χρώμα: κόκκινο;
}
Με αυτή τη σύνταξη, όλα τα στοιχεία θα βαφτούν κόκκινα. Και για αυτόν τον επιλογέα υπάρχουν ορισμένες ιδιαιτερότητες στη σύνταξη του.
#mainnavi * {
χρώμα: κόκκινο;
}
Σε αυτό το παράδειγμα, το χρώμα του περιεχομένου όλων των στοιχείων μέσα στο στοιχείο με το ID mainnavi ορίζεται ως κόκκινο. Αυτό όμως δεν ισχύει για το ίδιο το στοιχείο.
Αν ο Ολικός Επιλογέας είχε βρεθεί στην αρχή ενός δηλώσει, δε θα χρειαζόταν να γραφτεί. Ένα τέτοιο παράδειγμα θα ήταν περιττό:
* p {
χρώμα: κόκκινο;
}
Αυτή η σύνταξη είναι ισοδύναμη με την παρακάτω:
p {
χρώμα: κόκκινο;
}
Στο επόμενο μάθημα θα μάθετε περισσότερους επιλογείς.
