Chercher ΕργαλείοΜπορείτε να συμπεριλάβετε κώδικα CSS σε μια σελίδα με τέσσερις τρόπους: στο σώμα του εγγράφου, ενσωματώστε τον κώδικα στο τμήμα κεφαλίδας της σελίδας (

επί κεφαλής

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

Παράδειγμα:

Στυλ HTML με CSS

Προβολή επίδειξης

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

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

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

Ο κώδικας της σελίδας HTML θα μοιάζει κάπως έτσι:

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

Προβολή επίδειξης

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

Τα εξωτερικά στυλ είναι ένας από τους πιο συνηθισμένους τρόπους συμπερίληψης στυλ CSS.

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

Για να προσθέσετε εξωτερικά στυλσε μια ιστοσελίδα, χρησιμοποιήστε την ετικέτα καθορίζοντας τα χαρακτηριστικά href και rel="stylesheet":

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

Σας επιτρέπει να ορίζετε στυλ για ολόκληρη τη σελίδα ταυτόχρονα.

Αυτή η παράγραφος μορφοποιείται χρησιμοποιώντας μια κλάση.

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

Προβολή επίδειξης

Εισαγωγή στυλ

Μπορείτε επίσης να χρησιμοποιήσετε τον κανόνα @import CSS για να εισαγάγετε εξωτερικά φύλλα στυλ. Για να το κάνετε αυτό, χρησιμοποιήστε την ετικέτα

Αυτό χρησιμοποιεί τα ίδια στυλ με τα προηγούμενα παραδείγματα, αλλά εισάγεται χρησιμοποιώντας το @import :

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

Σας επιτρέπει να ορίζετε στυλ για ολόκληρη τη σελίδα ταυτόχρονα.

Αυτή η παράγραφος μορφοποιείται χρησιμοποιώντας μια κλάση.

Προβολή επίδειξης

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

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

Δεν υπάρχουν αυστηροί και γρήγοροι κανόνες σχετικά με τις μεθόδους που πρέπει να χρησιμοποιήσετε. Είναι καλύτερο να ξεκινήσετε από συγκεκριμένη κατάστασηκαι επιλέξτε τα περισσότερα βέλτιστες πρακτικέςστοιχεία στυλ.

Η μετάφραση του άρθρου «Πώς να προσθέσετε CSS σε μια Ιστοσελίδα» ετοιμάστηκε από τη φιλική ομάδα του έργου.

Ιδιότης http-equiv="Content-Style-Type"υποδηλώνει ότι αυτό το στοιχείο ΜΕΤΑαναφέρεται στο φύλλο στυλ και στο χαρακτηριστικό content="text/css"υποδεικνύει ότι τα φύλλα στυλ θα γραφτούν στη γλώσσα CSS. Για να κατανοήσουμε πώς προστίθενται στυλ σε ένα έγγραφο HTML, ας επιστρέψουμε στο παράδειγμα του πρώτου εγγράφου που δημιουργήσαμε στη διαδικασία εκμάθηση HTML. Να θυμίσω ότι αυτή ήταν μια σελίδα με περιγραφή της κατασκευαστικής εταιρείας «Dom». Έμοιαζε κάπως έτσι:

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

Ιδιότης στυλμπορεί να χρησιμοποιηθεί σε οποιοδήποτε στοιχείο HTMLγια να ορίσετε το σχεδιαστικό του στυλ. Ο κανόνας αναφέρεται σε εισαγωγικά CSS, το οποίο περιγράφει πώς πρέπει να διαμορφωθεί το στοιχείο. ΣΕ σε αυτή την περίπτωσητο χρώμα έχει οριστεί ( χρώμα) και υποδεικνύεται συγκεκριμένο χρώμα (πράσινο - πράσινο). Ως διαχωριστικό μεταξύ μιας παραμέτρου και της τιμής της in CSSμεταχειρισμένος άνω κάτω τελεία.

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

Φύλλο στυλ που ορίζεται μέσα σε ένα στοιχείο HTMLχρησιμοποιώντας χαρακτηριστικό στυλ, κάλεσε εσωτερικός.

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

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

Προστίθενται ενσωματωμένοι πίνακες έγγραφο HTMLμεταξύ ετικετών ΣΤΥΛστην ενότητα ΚΕΦΑΛΙέγγραφο. Για παράδειγμα, για να κάνετε όλες τις επικεφαλίδες πρώτου επιπέδου πράσινες, θα μπορούσατε να γράψετε έναν ενσωματωμένο πίνακα όπως αυτός.

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

Πώς να συνδέσετε το css σε html σε ξεχωριστό αρχείο

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

Αυτή η μέθοδος είναι η πιο προτιμότερη. Σας επιτρέπει να αναπτύσσετε στυλ ιστότοπου ξεχωριστά από έγγραφα HTML. Στη συνέχεια, το στυλ μπορεί να χρησιμοποιηθεί σε ένα αρχείο style.css σε πολλές σελίδες.

Γράφουμε τη διαδρομή ακριβώς στο head tag. Υποδεικνύει όλα τα απαραίτητα πληροφορίες συστήματοςγια να εμφανίσετε τη σελίδα. Συνδέεται ως εξής:

Υπάρχουν επίσης και άλλοι τρόποι σύνδεσης. Χρησιμοποιήστε τα μόνο ως πρόσθετη επιλογή.

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

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

Επιλογές εισαγωγής και χρησιμοποιώντας CSSσε ένα έγγραφο HTML.

CSS(Αγγλικός) Cascading Style Sheets — διαδοχικά τραπέζιαστυλ) - τεχνολογία περιγραφής εμφάνισηέγγραφο γραμμένο σε γλώσσα σήμανσης.

Υπάρχουν διάφοροι τρόποι εισαγωγής CSS σε HTML.

Καθορισμός ιδιοτήτων CSS μέσω του χαρακτηριστικού στυλ

Ιδιότης στυλ(από τα αγγλικά) στυλ) - ορίζει πληροφορίες στυλ για το αντίστοιχο στοιχείο. Το χαρακτηριστικό style ισχύει σχεδόν για όλα τα στοιχεία του εγγράφου. Για παράδειγμα:

παράδειγμα χρήσης στυλ

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

Εισαγωγή κανόνων CSS στο κοντέινερ στυλ

Ετικέτα στυλ(από τα αγγλικά) στυλ) - χρησιμοποιείται για τον καθορισμό στυλ για στοιχεία ιστοσελίδας. Θα πρέπει να σημειωθεί ότι η ετικέτα στυλ θα πρέπει να τοποθετηθεί μέσα στο δοχείο κεφαλής. Για παράδειγμα:

Το χαρακτηριστικό type λέει στο πρόγραμμα περιήγησης ποια σύνταξη να χρησιμοποιήσει για τη σωστή ερμηνεία των στυλ. Στην περίπτωσή μας είναι κείμενο/css.

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

Εισαγωγή αρχείου CSS χρησιμοποιώντας την ετικέτα συνδέσμου

Η ετικέτα συνδέσμου δημιουργεί μια σύνδεση με εξωτερικό έγγραφο, στην περίπτωσή μας ένα αρχείο CSS. Θα πρέπει να σημειωθεί ότι η ετικέτα σύνδεσης τοποθετείται πάντα μέσα στο head container. Για παράδειγμα:

Σε αυτήν την περίπτωση, το χαρακτηριστικό rel ορίζει τη σχέση μεταξύ του τρέχοντος εγγράφου και του αρχείου στυλ.css, Πώς φύλλο στυλ(από τα αγγλικά) φύλλο στυλ). Η τιμή του χαρακτηριστικού type είναι ο τύπος δεδομένων MIME του περιλαμβανόμενου αρχείου, δηλ. κείμενο/css. Τελευταίος χαρακτηριστικό hrefπεριέχει τη διαδρομή προς το συμπεριλαμβανόμενο αρχείο CSS.

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

Εισαγωγή κανόνων CSS

Ομάδα @εισαγωγή(από τα αγγλικά) εισαγωγή) - παρόμοια με την ετικέτα συνδέσμου, με τη διαφορά ότι το αρχείο CSS εισάγεται στο τρέχον φύλλο στυλ. Για παράδειγμα:

Καλημέρα, αναγνώστες αυτής της έκδοσης και αγαπητοί μου συνδρομητές. Σήμερα θέλω να σας πω για βασικό μηχανισμό, χωρίς το οποίο καμία διαδικτυακή εφαρμογή δεν μπορεί να κάνει. Θα σας δείξουμε πώς να εισάγετε το css σε κώδικα html. Αυτά είναι τα βασικά που πρέπει να γνωρίζετε.

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

Μέθοδος 1. Αυστηρή δόμηση

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

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

Σε αυτή την έκδοση συνδέσεις cssΟι κανόνες εμφανίζονται μέσω μιας ειδικής ετικέτας < σύνδεσμος>. Αυτό το στοιχείο μπορεί να δηλωθεί μόνο σε κοντέινερ < κεφάλι>.

Πρέπει να καθορίσετε τουλάχιστον 2 παραμέτρους σε αυτό: σχετ, το οποίο περιγράφει τη σχέση μεταξύ του αρχείου εργασίας και του εγγράφου του οποίου η διαδρομή καθορίζεται στο href και href– διαδρομή προς το έγγραφο.

Κατά κανόνα, οι παράμετροι στυλ αποθηκεύονται σε ένα έγγραφο με την επέκταση .css.

Για λόγους σαφήνειας, έδωσα ένα παράδειγμα τέτοιας σύνδεσης στυλ. Θέλω να σημειώσω σημαντικό σημείο: για να συμπεριλάβετε ένα αρχείο css rel χαρακτηριστικόΠάντα γράφεται «φύλλο στυλ».

Αρχικά, ας δημιουργήσουμε τη δομή του πόρου Ιστού.

Φωτεινός τίτλος

Συγκλονιστικό περιεχόμενο

Τώρα ας αναβιώσουμε τη σελίδα που δημιουργήθηκε συνδέοντας σε αυτήν ένα έγγραφο με μια λίστα στυλ. Εδώ είναι η γραμμή που το κάνει αυτό:

Δημιουργήστε ένα αρχείο στο σημειωματάριο με την απαιτούμενη επέκτασηκαι ονομάστε το style.css. Λάβετε υπόψη ότι το όνομα πρέπει να είναι πανομοιότυπο με το όνομα που καθορίζεται στην ετικέτα < σύνδεσμος>.

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

1 2 3 4 5 6 7 8 9 10

h2( χρώμα: #FF0000; σκιά κειμένου: 7 εικονοστοιχεία -3 εικονοστοιχεία 5 εικονοστοιχεία; κάτω περιθώριο: 4 εικονοστοιχεία διπλό #FF0000; ) p (μέγεθος γραμματοσειράς: 19 εικονοστοιχεία; οικογένεια γραμματοσειράς: Calibri; περιθώριο αριστερά: 35 εικονοστοιχεία; )

h2( χρώμα: #FF0000; σκιά κειμένου: 7 εικονοστοιχεία -3 εικονοστοιχεία 5 εικονοστοιχεία; κάτω περιθώριο: 4 εικονοστοιχεία διπλό #FF0000; ) p (μέγεθος γραμματοσειράς: 19 εικονοστοιχεία; οικογένεια γραμματοσειράς: Calibri; περιθώριο αριστερά: 35 εικονοστοιχεία; )

Μέθοδος 2. Ένα αρχείο είναι αρκετό

Τώρα θα προχωρήσω στα στυλ που ονομάζονται παγκόσμια.

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

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

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

Φωτεινός τίτλος

Συγκλονιστικό περιεχόμενο

Μέθοδος 3. Κουάκερ-μαλάσα

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

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

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

Δείτε πώς φαίνεται το παράδειγμα:

Φωτεινός τίτλος

Συγκλονιστικό περιεχόμενο

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

Μέθοδος 4. Μια άλλη επιλογή για τη σύνδεση ενός εγγράφου στυλ

Η προδιαγραφή Cascading Style Sheets προβλέπει την εισαγωγή αρχείων με ιδιότητες css. Αυτό δεν είναι δημοφιλής τρόποςσύνδεση κανόνων σχεδιασμού λόγω των αδυναμιών του:

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

Η εντολή που είναι υπεύθυνη για τη λειτουργία αυτής της επιλογής σύνδεσης css είναι @εισαγωγή. Η σύνταξη που χρησιμοποιείται για την εισαγωγή είναι:

@import url("path"); ή @import "path"?

Ας προχωρήσουμε σε ένα παράδειγμα.

@import url("style.css");

Φωτεινός τίτλος

Συγκλονιστικό περιεχόμενο

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

Αλληλεπίδραση συνδέσεων

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

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

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

Ελπίζω να βρήκατε αυτή την ανάρτηση χρήσιμη. Μοιραστείτε τις εντυπώσεις σας από το ιστολόγιό μου με τους φίλους σας και εγγραφείτε σε ενημερώσεις. Αντίο!

Με εκτίμηση, Roman Chueshov

Ανάγνωση: 77 φορές