CSS ή Cascading Style Sheets, είναι αυτά που χρησιμοποιούνται στον σύγχρονο σχεδιασμό ιστοσελίδων για την εφαρμογή της οπτικής εμφάνισης σε μια σελίδα. Ενώ η HTML δημιουργεί τη δομή της σελίδας και η Javascript μπορεί να χειριστεί τις συμπεριφορές, η εμφάνιση και η αίσθηση ενός ιστότοπου είναι ο τομέας του CSS. Όταν πρόκειται για αυτά τα στυλ, χρησιμοποιούνται συνήθως χρησιμοποιώντας εξωτερικά φύλλα στυλ, αλλά μπορείτε επίσης να εφαρμόσετε στυλ CSS σε ένα και μόνο στοιχείο, χρησιμοποιώντας τα γνωστά ως "inline styles".
Τα γραμμικά στυλ είναι στυλ CSS που εφαρμόζονται απευθείας στο HTML της σελίδας. Υπάρχουν δύο πλεονεκτήματα και μειονεκτήματα αυτής της προσέγγισης. Πρώτον, ας δούμε ακριβώς πώς γράφονται αυτά τα στυλ.
Πώς να γράψετε ένα στυλ Inline
Για να δημιουργήσετε ένα ενσωματωμένο στυλ CSS, ξεκινάτε γράφοντας την ιδιότητα στυλ σας παρόμοια με το πώς θα κάνατε σε ένα φύλλο στυλ, αλλά πρέπει να είναι όλα μια γραμμή. Διαχωρίστε πολλές ιδιότητες με ένα ερωτηματικό ακριβώς όπως θα κάνατε σε ένα φύλλο στυλ.
background: #ccc; χρώμα: #fff; σύνορα: συμπαγές μαύρο 1px;
Τοποθετήστε εκείνη τη γραμμή στυλ μέσα στο χαρακτηριστικό στυλ του στοιχείου που θέλετε να στυλιστούν. Για παράδειγμα, εάν θέλετε να εφαρμόσετε αυτό το στυλ σε μια παράγραφο στην HTML σας, το στοιχείο θα μοιάζει με αυτό:
Σε αυτό το παράδειγμα, αυτή η συγκεκριμένη παράγραφος θα εμφανιστεί με ένα ανοιχτό γκρι φόντο (αυτό θα έκανε #ccc), το μαύρο κείμενο (από το # 000 χρώμα) και ένα στερεό μαύρο περίγραμμα 1 pixel γύρω από τις τέσσερις πλευρές της παραγράφου .
Πλεονεκτήματα των στυλ Inline
Χάρη στην κατακόρυφη σειρά του Cascading Style Sheet, τα inline styles έχουν την υψηλότερη προτεραιότητα ή ειδικότητα σε ένα έγγραφο. Αυτό σημαίνει ότι πρόκειται να εφαρμοστούν ανεξάρτητα από το τι άλλο υπαγορεύεται στο εξωτερικό φύλλο στυλ (με τη μόνη εξαίρεση να είναι οποιεσδήποτε μορφές που δίνουν τη σημαντική δήλωση ότι το φύλλο, αλλά αυτό δεν είναι κάτι που πρέπει να γίνει σε χώρους παραγωγής εάν μπορεί να αποφευχθεί).
Τα μόνα στυλ που έχουν υψηλότερη προτεραιότητα από τα inline styles είναι τα στυλ χρήστη που εφαρμόζονται από τους ίδιους τους αναγνώστες. Εάν αντιμετωπίζετε προβλήματα με την εφαρμογή των αλλαγών σας, μπορείτε να δοκιμάσετε να ορίσετε ένα στυλ γραμματοσειράς στο στοιχείο. Εάν τα στυλ εξακολουθούν να μην εμφανίζονται χρησιμοποιώντας ένα inline στυλ, ξέρετε ότι κάτι άλλο συμβαίνει.
Τα γραμμικά στυλ είναι εύκολο και γρήγορο για να προσθέσετε και δεν χρειάζεται να ανησυχείτε για τη σύνταξη του σωστού επιλογέα CSS, επειδή προσθέτετε τα στυλ απευθείας στο στοιχείο που θέλετε να αλλάξετε (αυτό το στοιχείο ουσιαστικά αντικαθιστά τον επιλογέα που θα γράψετε σε ένα εξωτερικό φύλλο στυλ ). Δεν χρειάζεται να δημιουργήσετε ένα εντελώς νέο έγγραφο (όπως με τα εξωτερικά φύλλα στυλ) ή να επεξεργαστείτε ένα νέο στοιχείο στην κεφαλή του εγγράφου σας (όπως συμβαίνει με τα εσωτερικά φύλλα στυλ). Μόλις προσθέσετε το χαρακτηριστικό στυλ που ισχύει για σχεδόν κάθε στοιχείο HTML. Αυτοί είναι όλοι οι λόγοι για τους οποίους μπορείτε να μπείτε στον πειρασμό να χρησιμοποιήσετε ενσωματωμένα στυλ, αλλά πρέπει επίσης να γνωρίζετε κάποια σημαντικά μειονεκτήματα αυτής της προσέγγισης.
Μειονεκτήματα των Inline Styles
Επειδή τα inline styles είναι τα πιο συγκεκριμένα στον καταρράκτη, μπορούν να ξεπεράσουν τα πράγματα που δεν τους σκόπευαν. Απαγορεύουν επίσης μια από τις πιο ισχυρές πτυχές του CSS - την ικανότητα να στυλ πολλά και πολλές ιστοσελίδες από ένα κεντρικό αρχείο CSS για να κάνουν τις μελλοντικές ενημερώσεις και αλλαγές στυλ πολύ πιο εύκολο να διαχειριστεί.
Αν έπρεπε να χρησιμοποιείτε μόνο ενσωματωμένα στυλ, τα έγγραφά σας θα γίνονται γρήγορα φουσκωμένα και πολύ δύσκολα να διατηρηθούν. Αυτό οφείλεται στο γεγονός ότι τα ενσωματωμένα στυλ πρέπει να εφαρμόζονται σε κάθε στοιχείο που θέλετε. Επομένως, αν θέλετε όλες οι παράγραφοι σας να έχουν την οικογένεια γραμματοσειρών "Arial", πρέπει να προσθέσετε ένα στυλ γραμμής σε κάθε ετικέτα
στο έγγραφό σας. Αυτό προσθέτει και εργασίες συντήρησης για τον σχεδιαστή και χρόνο λήψης για τον αναγνώστη, καθώς θα πρέπει να αλλάξετε αυτό σε κάθε σελίδα του ιστότοπού σας για να αλλάξετε την οικογένεια γραμματοσειρών. Εναλλακτικά, εάν χρησιμοποιείτε ξεχωριστό φύλλο στυλ, ίσως μπορείτε να το αλλάξετε σε ένα σημείο και να λάβετε κάθε σελίδα αυτήν την ενημέρωση.
Αληθώς, αυτό είναι ένα βήμα προς τα πίσω στο σχεδιασμό ιστοσελίδων - πίσω στις ημέρες της ετικέτας !
Ένα άλλο μειονέκτημα για τα ενσωματωμένα στυλ είναι ότι είναι αδύνατο να στυλιστούν ψευδο-στοιχεία και -κλάσεις μαζί τους. Για παράδειγμα, με εξωτερικά φύλλα στυλ, μπορείτε να σχεδιάσετε το χρώμα επίσκεψης, του hover, του ενεργού και του συνδέσμου μιας ετικέτας αγκύρωσης, αλλά με ένα στυλ inline, το μόνο που μπορείτε να στυλ είναι ο ίδιος ο σύνδεσμος, επειδή αυτό είναι το χαρακτηριστικό στυλ .
Τελικά, συνιστούμε να μην χρησιμοποιείτε ενσωματωμένα στυλ για τις ιστοσελίδες σας, επειδή προκαλούν προβλήματα και κάνουν τις σελίδες πολύ περισσότερες εργασίες για να διατηρήσουν. Η μόνη φορά που τα χρησιμοποιούμε είναι όταν θέλουμε να ελέγξουμε γρήγορα ένα στυλ κατά την ανάπτυξη. Μόλις το ψάξαμε σωστά για αυτό το στοιχείο, το μεταφέρουμε στο εξωτερικό φύλλο στυλ.
Το οριακό άρθρο της Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard.