Τι είναι τα Cascading Style Sheets και σε τι χρησιμεύει το CSS;

Τι είναι τα Cascading Style Sheets και σε τι χρησιμεύει το CSS;

Το CSS ανήκει σε μια τριάδα βασικών τεχνολογιών ιστού μαζί με HTML και JavaScript. Με προσεκτικό σχεδιασμό, το CSS συμβάλλει στον διαχωρισμό των ανησυχιών. Οι ανεξάρτητοι πόροι ελέγχουν τη δομή ενός περιεχομένου, την παρουσίασή του και τη συμπεριφορά του.





Τα φύλλα στυλ παίζουν σημαντικό ρόλο στην προσβασιμότητα, την επεκτασιμότητα, ακόμη και την απόδοση στο διαδίκτυο. Ως συντάκτης περιεχομένου ή σχεδιαστής ιστού, σας δίνουν τον έλεγχο του τρόπου με τον οποίο οι συσκευές αποδίδουν περιεχόμενο. Από τη διάταξη έως το μέγεθος και το χρώμα γραμματοσειράς, το CSS μετατρέπει το περιεχόμενο σε όμορφες σελίδες.



Πώς φαίνεται το CSS;

Το CSS είναι μια μεγάλη γλώσσα - υπάρχουν πολλά διαφορετικά πράγματα για να στυλ! Αλλά η σύνταξή του είναι απλή, με λίγους κανόνες που πρέπει να μάθουμε.





Τα στοιχεία HTML έχουν διάφορες ιδιότητες που μπορεί να μορφοποιήσει το CSS. ο χρώμα η ιδιότητα ορίζει το χρώμα του προσκηνίου (π.χ. κείμενο). Το μέγεθος της γραμματοσειράς εξαρτάται από το μέγεθος γραμματοσειράς ιδιοκτησία.

Κάθε ιδιότητα μπορεί να οριστεί σε μια υποστηριζόμενη τιμή. Η εκχώρηση μιας τιμής σε ένα ακίνητο είναι μια «δήλωση». Γενικά, μοιάζουν με αυτό:



property: value

Για παράδειγμα:

πώς να ελέγξετε αν ο σκληρός δίσκος αποτυγχάνει στα Windows 10
color: red

Οι τιμές για διαφορετικές ιδιότητες μπορεί να φαίνονται πολύ διαφορετικές, ακόμη και τιμές για την ίδια ιδιότητα. Για παράδειγμα, εδώ είναι δύο ακόμη τρόποι γραφής της προηγούμενης δήλωσης:



color: #ff0000
color: rgb(255, 0, 0)

Πώς συνδυάζονται τα φύλλα HTML και στυλ

Μπορείτε να συνδυάσετε HTML και CSS με μερικούς διαφορετικούς τρόπους, καθένας με τα πλεονεκτήματά του.

Ενσωματωμένα στυλ γραφής

Η απλούστερη μέθοδος είναι να επισυνάψετε δηλώσεις στυλ απευθείας σε ένα στοιχείο στο αρχείο HTML. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας το στυλ χαρακτηριστικό όπως:




Most of this text is red …


… but this isn’t!


Παρόλο που τα στοιχεία στυλ με ενσωματωμένο τρόπο μπορεί να είναι βολικά, έχει πολλά μειονεκτήματα. Για αρχή, περιπλέκει την HTML, καθιστώντας δυσκολότερη την ανάγνωση με μια ματιά. Είναι επίσης αδέξιο να διατηρηθεί: φανταστείτε ένα μακρύ έγγραφο στο οποίο θέλουμε να ορίσουμε το χρώμα κάθε παραγράφου. Αυτό είναι CSS, αλλά δεν είναι 'Φύλλα στυλ'.

Ενσωμάτωση στυλ στο κεφάλι

Μπορείτε να αρχίσετε να βλέπετε πώς φαίνεται ένα φύλλο στυλ με τον δεύτερο μηχανισμό, ενσωμάτωση Το Χρησιμοποιώντας αυτήν την προσέγγιση, συγκεντρώνουμε όλες τις δηλώσεις στυλ μαζί σε ένα στυλ στοιχείο στο κεφάλι του εγγράφου μας. Θα μοιάζει κάπως έτσι:





/* style instructions go here */



...

Ωστόσο, οι οδηγίες για το στυλ μας χρειάζονται λίγο περισσότερη λεπτομέρεια από πριν. Αφού τα μετακινήσαμε στο κεφάλι, κάθε κανόνας δεν σχετίζεται πλέον με ένα στοιχείο. Μπορεί να είχαμε δηλώσει χρώμα: κόκκινο , αλλά τι πρέπει να έχει αυτό το χρώμα;

Εδώ μπαίνουν οι επιλογείς CSS. Μας επιτρέπουν να στοχεύσουμε συγκεκριμένα τμήματα της σελίδας και να ορίσουμε το στυλ τους σε ένα μέρος, χρησιμοποιώντας αυτήν τη σύνταξη:

γιατί το σύστημά μου παίρνει τόσο πολύ δίσκο
selector {
declaration1;
declaration2;
/* etc. */
}

Για παράδειγμα, για να στυλ το κείμενο των παραγράφων σε μπλε χρώμα, μπορούμε να καθορίσουμε τα ακόλουθα:

p {
color: blue;
}

Σε αυτό το παράδειγμα, ο επιλογέας είναι απλά Π , το οποίο ταιριάζει με όλα τα στοιχεία της παραγράφου στο έγγραφό μας. Θα χρωματίσει όλο το κείμενο μπλε, αρκεί να είναι μέσα

Σύνδεση φύλλου εξωτερικού στυλ

Η τελευταία μέθοδος για κάλυψη είναι η σύνδεση. Αυτή είναι, μακράν, η πιο χρήσιμη προσέγγιση και αυτή που θα πρέπει να επιλέγετε τις περισσότερες φορές. Αντί να ενσωματώσετε κανόνες CSS στο στυλ στοιχείο απευθείας στο έγγραφό σας, μπορείτε να τα μετακινήσετε σε ξεχωριστό αρχείο.


Επικολλήστε αυτόν τον κωδικό μέσα στο ετικέτες του αρχείου HTML για σύνδεση του εξωτερικού φύλλου στυλ.

Η δύναμη του CSS

Με τη συνδεδεμένη μέθοδο, αξιοποιούμε μια βασική δύναμη του CSS: τον διαχωρισμό των ανησυχιών. Όλες οι σημασιολογικές πληροφορίες - τι σημαίνει το περιεχόμενο - περιέχονται στο έγγραφο HTML. Το στυλ - πώς φαίνεται - βρίσκεται σε ξεχωριστό αρχείο, το φύλλο στυλ.

Εδώ είναι μερικά μόνο οφέλη από αυτόν τον χωρισμό:

  • Μπορείτε να αλλάξετε ένα φύλλο στυλ απλά αλλάζοντας την αναφορά αρχείου. Αυτό μπορεί να συμβεί ακόμη και δυναμικά. Σε ένα βήμα, μπορείτε να αλλάξετε ολόκληρη την εμφάνιση και την αίσθηση μιας σελίδας.
  • Πολλές σελίδες μπορούν να μοιράζονται τα ίδια φύλλα στυλ όπως απαιτείται. Αλλάζοντας ένα μόνο αρχείο, μπορείτε να ενημερώσετε την εμφάνιση και την αίσθηση ενός ολόκληρου ιστότοπου.
  • Ο διαχωρισμός μιας σελίδας σε «περιεχόμενο» και «στυλ» έχει τεχνικά οφέλη. Οι διακομιστές μεσολάβησης και τα προγράμματα περιήγησης μπορούν να αποθηκεύουν προσωρινά μεμονωμένα αρχεία ξεχωριστά. Αυτό σημαίνει ότι ένας ιστότοπος μπορεί να στείλει τις πληροφορίες του στυλ του μία φορά, αντί να τις συμπεριλάβει σε κάθε σελίδα.
  • Όταν συνεργάζονται, διαφορετικές ομάδες μπορούν να εργαστούν στα δυνατά τους σημεία, δημιουργώντας και επεξεργάζοντας ξεχωριστά αρχεία χωρίς να επηρεάζουν η μία την άλλη.

Εξηγώντας τον καταρράκτη

Έχετε μάθει πολλά για τα στυλ και τα φύλλα στυλ, αλλά τι γίνεται με το σταδιακό τμήμα του CSS;

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

Mightσως έχετε ήδη αναρωτηθεί για τα προεπιλεγμένα στυλ. Για παράδειγμα, πώς γίνεται ένα Η1 στοιχείο εμφανίζεται μεγάλο και έντονο, ακόμη και χωρίς φύλλα στυλ συγγραφέα; Αυτό οφείλεται σε ένα σύνολο ειδικών κανόνων που συνθέτουν το φύλλο στυλ του πράκτορα χρήστη. Αυτοί οι κανόνες εφαρμόζονται αρχικά από το πρόγραμμα περιήγησής σας σε κάθε σελίδα που επισκέπτεστε.

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

Υπάρχει μια άλλη πηγή φύλλου στυλ που παραδίδει κάποιον έλεγχο στον αναγνώστη. Οποιοσδήποτε χρήστης ιστού μπορεί, θεωρητικά, να διατηρεί ένα φύλλο στυλ χρήστη με προσαρμοσμένους κανόνες. Αυτά βρίσκονται στη μέση: οι κανόνες χρήστη θα παρακάμψουν τις προεπιλεγμένες ρυθμίσεις προγράμματος περιήγησης, αλλά οι ίδιοι θα παρακαμφθούν από τα στυλ συγγραφέων. Δυστυχώς, η υποστήριξη για φύλλα στυλ χρηστών δεν ήταν ποτέ ευρέως διαδεδομένη.

Στόχευση διαφορετικών μέσων

Μπορείτε να χρησιμοποιήσετε Φύλλα στυλ σε διαφορετικά περιβάλλοντα, πέρα ​​από την οθόνη. ο τα μισα χαρακτηριστικό του Σύνδεσμος στοιχείο καθορίζει σε ποιους τύπους μέσων ισχύει το φύλλο στυλ. Για παράδειγμα, μπορείτε να ορίσετε ένα φύλλο στυλ για εκτύπωση χρησιμοποιώντας σήμανση όπως η ακόλουθη:

Μπορείτε να συγκεντρώσετε κοινά στυλ σε ένα καθολικό φύλλο στυλ και συγκεκριμένα στυλ για μέσα σε ξεχωριστά αρχεία. Υπάρχουν ακόμη και τύποι μέσων για να ακούσετε παρουσιάσεις ήχου ή μπράιγ του περιεχομένου σας. Το CSS είναι ένα ζωτικό εργαλείο για τη βελτίωση της προσβασιμότητας.

Σχετίζεται με: Πώς να περιηγηθείτε στον Ιστό εάν είστε τυφλοί ή έχετε προβλήματα όρασης

πώς να αφαιρέσετε αντικείμενα στο photoshop

Ιστότοποι όπως η Wikipedia χρησιμοποιούν το CSS για τον έλεγχο του στυλ εκτύπωσης, την απόκρυψη ανεπιθύμητων στοιχείων και την απλοποίηση της διάταξης.

Το CSS κάνει το HTML να φαίνεται καλό

Τα Cascading Style Sheets καλύπτουν πολλά: τον καταρράκτη, την κληρονομικότητα, τους επιλογείς, τις πηγές, τα μέσα κλπ. Αλλά η ισχύς τους επιτρέπει τον σύγχρονο ιστό. Αυτό είναι ένα μέσο που παρέχει ενσωματωμένα χαρακτηριστικά επαναχρησιμοποίησης, ευελιξίας και προσβασιμότητας.

Για να δείτε την πλήρη ισχύ του CSS και πόσα έχει να προσφέρει, ελέγξτε το φύλλο εξαπάτησης που καλύπτει όλες τις βασικές ιδιότητες του CSS3.

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Το βασικό φύλλο εξαπατήσεων ιδιοτήτων CSS3

Κυριαρχήστε τη βασική σύνταξη CSS με το φύλλο εξαπάτησης ιδιοτήτων CSS3.

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγραμματισμός
  • Ανάπτυξη διαδικτύου
  • CSS
Σχετικά με τον Συγγραφέα Μπόμπι Τζακ(Δημοσιεύθηκαν 58 άρθρα)

Ο Bobby είναι λάτρης της τεχνολογίας που εργάστηκε ως προγραμματιστής λογισμικού για περισσότερες από δύο δεκαετίες. Είναι παθιασμένος με το gaming, εργάζεται ως Reviews Editor στο Switch Player Magazine και είναι βυθισμένος σε όλες τις πτυχές της διαδικτυακής δημοσίευσης και ανάπτυξης ιστού.

Περισσότερα από τον Bobby Jack

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή