Επιλογείς στο CSS

Επιλογείς στο CSS

Οι πιο συχνές επιλογείς CSS είναι οι επιλογητές στοιχείου. Με άλλα λόγια, τα στοιχεία του έγγραφου είναι οι βασικοί επιλογητές.

Αν ρυθμίσετε το στυλ του HTML, ο επιλογητής συνήθως θα είναι κάποιο στοιχείο HTML, όπως p, h1, em, a, ή ακόμα και το html του ίδιου:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

Προσπαθήστε το προσωπικά

Μπορείτε να μεταφέρετε κάποιο στυλ από ένα στοιχείο σε ένα άλλο.

Αν αποφασίσετε να ρυθμίσετε το κείμενο του παραγράφου (και όχι το στοιχείο h1) σε γκρι, απλά αλλάξτε τον επιλογητή h1 σε p:

html {color:black;}
p {color:gray;}
h2 {color:silver;}

Προσπαθήστε το προσωπικά

Τύπος επιλογητή

Στα πρότυπα του W3C, ο επιλογητής στοιχείου ονομάζεται επίσης επιλογητής τύπου (type selector).

“Ο τύπος επιλογητή ταιριάζει στο όνομα του τύπου του στοιχείου της γλώσσας του έγγραφου. Ο τύπος επιλογητή ταιριάζει σε κάθε παράδειγμα του τύπου στο δέντρο του έγγραφου.”

Οι παρακάτω κανόνες ταιριάζουν σε όλους τους στοιχεία h1 του δέντρου του έγγραφου:

h1 {font-family: sans-serif;}

Επομένως, μπορούμε επίσης να ρυθμίσουμε τα στυλ για τα στοιχεία του έγγραφου XML:

XML έγγραφο:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Υπενθύμιση</heading>
<body>Μη ξεχνάτε την συνάντηση!</body>
</note>

Έγγραφο CSS:

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }
to
  {
  font-size:28px;
  display: block;
  }
from
  {
  font-size:28px;
  display: block;
  }
heading
  {
  color: red;
  font-size:60px;
  display: block;
  }
body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

Ελέγξτε την Επίδραση

Με τις παραπάνω παραδείξεις, μπορείτε να δείτε ότι οι επιλογείς στο CSS (τύπος επιλογέα) μπορούν να ρυθμίσουν το στυλ των στοιχείων ενός εγγράφου XML.

Αν χρειάζεστε περισσότερες πληροφορίες για την προσθήκη στυλ σε έγγραφα XML, επισκεφθείτε τον ιστότοπο του CodeW3C Εκπαιδευτικό Υλικό για XML。