CSS Selectors

Πριν ξεκινήσουμε να μαθαίνουμε τις μορφοποιήσεις που μπορούμε να εφαρμόσουμε με το CSS, είναι πολύ σημαντικό να μάθουμε πώς ορίζουμε πού θα εφαρμοστούν οι μορφοποιήσεις μας. Όσο πιο ακριβείς είμαστε σε αυτό, τόσο το καλύτερο για το site μας!

Εφαρμόζοντας έναν κανόνα CSS, αν δεν ορίσουμε σωστά πού θέλουμε να τον εφαρμόσουμε, μπορεί να αλλάξουμε όλη την εικόνα του site χωρίς να το θέλουμε!

Αυτό που προσδιορίζει πού εφαρμόζεται ένας κανόνας CSS είναι ο Selector (επιλογέας).

Η γενική σύνταξη είναι:

selector {

css rule;

}

Η κλάση - class

  • Βασικός selector είναι η κλάση ενός στοιχείου.
  • Πολλά στοιχεία μπορούν να ανήκουν στην ίδια κλάση και ένα στοιχείο μπορεί να ανήκει σε πολλές κλάσεις.
  • Για να ορίσουμε την κλάση στην οποία θέλουμε να ανήκει ένα στοιχείο, χρησιμοποιούμε την ιδιότητα class="class_name1 class_name2"

Παράδειγμα

Έστω ότι θέλουμε κάποιες εικόνες να έχουν πλάτος 100px, και περιθώριο 20px.

  • Στον κώδικα HTML όπου εισάγουμε την εικόνα, γράφουμε την εντολή:

<img class="mypics" src="/img/pic1.png">

  • Στο αρχείο CSS γράφουμε

.mypics {

width: 100px;

margin: 20px;

}

  • Προσέξτε την τελεία πριν το όνομα της κλάσης στο αρχείο CSS!!!