Μετάβαση στο περιεχόμενο

CSS

Από τη Βικιπαίδεια, την ελεύθερη εγκυκλοπαίδεια
Λογότυπο της CSS

Η CSS (Cascading Style Sheetsδιαδοχικά φύλλα ύφους ή επάλληλα φύλλα ύφους) είναι μια γλώσσα υπολογιστή που ανήκει στην κατηγορία των γλωσσών φύλλων ύφους που χρησιμοποιείται για τον έλεγχο της εμφάνισης ενός εγγράφου που έχει γραφτεί με μια γλώσσα σήμανσης.[1] Χρησιμοποιείται δηλαδή για τον έλεγχο της εμφάνισης ενός εγγράφου που γράφτηκε στις γλώσσες HTML και XHTML, δηλαδή για τον έλεγχο της εμφάνισης μιας ιστοσελίδας και γενικότερα ενός ιστοτόπου. Η CSS είναι μια γλώσσα υπολογιστή προορισμένη να αναπτύσσει στυλιστικά μια ιστοσελίδα δηλαδή να διαμορφώνει περισσότερα χαρακτηριστικά, χρώματα, στοίχιση και δίνει περισσότερες δυνατότητες σε σχέση με την html.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #xyz { color: black; }
        </style>
    </head>
    <body>
        <p id="xyz" style="font-weight:bold">Το κείμενο που μορφοποίηθηκε είναι αυτό.</p>
    </body>
</html>

Στο παράδειγμα, παριστάται μία πρόταση η όποια έχει μαυρο χρώμα και έντονους χαρακτήρες.

Η αλληλουχία εφαρμογής των φύλλων ύφους

[Επεξεργασία | επεξεργασία κώδικα]

Για ένα έγγραφο π.χ. html θα υπάρχουν παραπάνω από ένα φύλλα ύφους τα οποία περιέχουν δηλώσεις για την εμφάνιση ενός συγκεκριμένου στοιχείου. Το φύλλο ύφους που εφαρμόζεται σε ένα έγγραφο μπορεί να προέρχεται από:

  • το συγγραφέα μιας ιστοσελίδας
  • το χρήστη του πλοηγού
  • τον ίδιο τον πλοηγό, αν έχει το δικό του προκαθορισμένο φύλλο ύφους.

Συνεπώς για ένα xhtml στοιχείο θα υπάρχουν παραπάνω από μια δηλώσεις που πιθανόν να είναι συγκρουόμενες. Το πρότυπο css για να επιλύσει παρόμοιες συγκρούσεις έχει καθορίσει μια αλληλουχία – σειρά – στην οποία θα μπουν αυτές οι δηλώσεις και με βάση την οποία θα επιλεγεί π.χ. η δήλωση που είναι πρώτη στη σειρά.

Ο αλγόριθμος δημιουργίας αυτής της αλληλουχίας – σειράς – είναι ο ακόλουθος:

  1. Βρες όλες τις δηλώσεις που εφαρμόζονται στο στοιχείο που μας ενδιαφέρει. Οι δηλώσεις εφαρμόζονται στο στοιχείο αν ο επιλογέας του το επιλέξει (ταιριάζει με αυτό).
  2. Ταξινόμησε με βάση τη σημασία (κανονική ή σημαντική) και προέλευση (συγγραφέας, χρήστη ή πλοηγός χρήστη). Με αύξουσα σειρά προτεραιότητας:
    1. Δηλώσεις πλοηγού χρήστη
    2. Κανονικές δηλώσεις χρήστη
    3. Κανονικές δηλώσεις συγγραφέα
    4. Σημαντικές δηλώσεις συγγραφέα
    5. Σημαντικές δηλώσεις χρήστη
  3. Ταξινόμησε τις δηλώσεις ίδιας σημασίας και προέλευσης με κριτήριο την εξειδίκευση του επιλογέα: οι πιο εξειδικευμένοι επιλογείς υπερισχύουν των πιο γενικών. Τα ψευδό-στοιχεία και οι ψευδο-κλάσεις λογαριάζονται σαν κανονικά στοιχεία και κλάσεις αντίστοιχα.
  4. Τέλος ταξινόμησε ανάλογα με τη σειρά καθορισμού: αν δύο δηλώσεις έχουν το ίδιο βάρος , προέλευση και εξειδίκευση , αυτή που προσδιορίστηκε τελευταία επικρατεί. Οι δηλώσεις σε εισαγόμενα φύλλα ύφους θεωρούνται ότι δηλώνονται πριν από τις δηλώσεις στο ίδιο το φύλλο ύφους.

Αφού λοιπόν προκύψει μια σειρά-αλληλουχία κανόνων εμφάνισης που αφορούν το ίδιο στοιχείο θα επιλεγεί προς εφαρμογή (για την αποφυγή συγκρούσεων) η δήλωση που θα είναι τελευταία στην σειρά που αναλύθηκε πιο πάνω.

  1. «Learn to style HTML using CSS - Learn web development | MDN». developer.mozilla.org (στα Αγγλικά). Ανακτήθηκε στις 3 Νοεμβρίου 2021. 

Εξωτερικοί σύνδεσμοι

[Επεξεργασία | επεξεργασία κώδικα]