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

Ενσωματωμένα, ενσωματωμένα και εξωτερικά φύλλα στυλ: Εδώ πρέπει να γνωρίζετε

Η ανάπτυξη ιστοτόπου στο μπροστινό μέρος συχνά αντιπροσωπεύεται ως σκαμπό με 3 πόδια. Τα πόδια αυτά έχουν ως εξής:

Το δεύτερο σκέλος αυτού του σκαμνιού, CSS ή Cascading Style Sheets, είναι αυτό που βλέπουμε εδώ σήμερα. Συγκεκριμένα, θέλουμε να αντιμετωπίσουμε τα 3 είδη στυλ που μπορείτε να προσθέσετε σε ένα έγγραφο.

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

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

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

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

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

Τα γραμμικά στυλ έχουν επίσης πολύ μεγάλη ιδιαιτερότητα.

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

Τελικά, τα inline styles είναι πραγματικά κατάλληλα μόνο όταν χρησιμοποιούνται με μεγάλη φειδώ.

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

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

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

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

Τα φύλλα στυλ που προστίθενται στο

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

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

Εξωτερικά φύλλα στυλ

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

Αυτό καθιστά πολύ πιο εύκολη τη μακροπρόθεσμη διαχείριση τοποθεσιών.

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

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

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