Κατανόηση των 3 τύπων στυλ CSS

Η ανάπτυξη ιστοτόπων front-end αντιπροσωπεύεται συχνά ως σκαμνί με τρία πόδια και αποτελείται από:

HTML για τη δομή ενός ιστότοπου
CSS για τα οπτικά στυλ
Javascript για συμπεριφορές

Το δεύτερο σκέλος αυτού του σκαμνιού, Cascading Style Sheets, υποστηρίζει τρία διαφορετικά στυλ που μπορείτε να προσθέσετε σε ένα έγγραφο.

Ενσωματωμένα στυλ
Ενσωματωμένα στυλ
Εξωτερικά στυλ

Κάθε ένα από αυτά τα στυλ CSS παρουσιάζει μοναδικά οφέλη και μειονεκτήματα.

hardik pethani / Getty Images

Ενσωματωμένα στυλ

Τα ενσωματωμένα στυλ είναι στυλ που γράφονται απευθείας στην ετικέτα στο έγγραφο HTML. Τα ενσωματωμένα στυλ επηρεάζουν μόνο τη συγκεκριμένη ετικέτα στην οποία εφαρμόζονται:

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

Ενσωματωμένα στυλ

Τα ενσωματωμένα στυλ βρίσκονται στην κορυφή του εγγράφου. Είναι εγκλωβισμένοι <στυλ> ετικέτες και μοιάζουν με εξωτερικά αρχεία CSS σε αυτό το τμήμα του εγγράφου. Τα ενσωματωμένα στυλ επηρεάζουν μόνο τις ετικέτες στη σελίδα στην οποία είναι ενσωματωμένες. Για άλλη μια φορά, αυτή η προσέγγιση αναιρεί ένα από τα πλεονεκτήματα του CSS. Δεδομένου ότι κάθε σελίδα διαθέτει στυλ που ορίζονται στην κεφαλίδα, εάν θέλετε να κάνετε μια αλλαγή σε ολόκληρο τον ιστότοπο – όπως να αλλάξετε το χρώμα των συνδέσμων από κόκκινο σε πράσινο – θα πρέπει να κάνετε αυτήν την αλλαγή σε κάθε σελίδα, καθώς κάθε σελίδα χρησιμοποιεί ενσωματωμένο στυλ σεντόνι. Αυτή η προσέγγιση είναι καλύτερη από τα ενσωματωμένα στυλ, αλλά εξακολουθεί να είναι προβληματική σε πολλές περιπτώσεις. <στυλ>
h1, h2, h3, h4, h5 {
γραμματοσειρά: έντονο;
text-align: center;
}
ένα {
χρώμα: # 16c616;
}

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

Φύλλα εξωτερικού στυλ

Οι περισσότερες ιστοσελίδες σήμερα χρησιμοποιούν εξωτερικά φύλλα στυλ. Τα εξωτερικά στυλ είναι στυλ που είναι γραμμένα σε ξεχωριστό έγγραφο και στη συνέχεια επισυνάπτονται σε διάφορα έγγραφα ιστού. Καλούνται στο κύριο έγγραφο χρησιμοποιώντας ένα

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

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

Αναφέρετε αυτό το άρθρο

Μορφή mla apa chicago Η αναφορά σας

Kyrnin, Jennifer. «Κατανόηση των 3 τύπων στυλ CSS.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/types-of-css-styles-3466921.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Κατανόηση των 3 τύπων στυλ CSS. Ανακτήθηκε από το https://www.thoughtco.com/types-of-css-styles-3466921
Kyrnin, Jennifer. «Κατανόηση των 3 τύπων στυλ CSS.» ThoughtCo. https://www.thoughtco.com/types-of-css-styles-3466921 (πρόσβαση στις 17 Μαΐου 2021).

αντιγραφή παραπομπής