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

Για όσους θέλουν να παρακολουθούν σε μορφή βίντεο.

Για να δείξουμε πώς λειτουργεί καθεμία από αυτές τις μεθόδους, ας πάρουμε, για παράδειγμα, ένα αρχείο html με το ακόλουθο περιεχόμενο.

Η αποστολή των στυλ CSS που θα συνδεθούν είναι να δημιουργήσουν ένα στοιχείο παραγράφου

Στα κοκκινα.

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

Επιλογή 1. Μέσα στην ετικέτα ανοίγματος χρησιμοποιώντας το χαρακτηριστικό style.

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

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

Παράγραφος

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

Επιλογή 2. Μέσα στο στοιχείο στυλ.

Ένας άλλος τρόπος για να συμπεριλάβετε στυλ CSS είναι να χρησιμοποιήσετε το στοιχείο

Επιλογή 3. Σύνδεση εξωτερικό αρχείοστυλ.

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

Δώστε προσοχή στα χαρακτηριστικά που καθορίζονται για αυτό το στοιχείο.

Είναι επίσης υποχρεωτικά. Το χαρακτηριστικό href καθορίζει τη διαδρομή προς αρχείο css, το οποίο πρέπει να συνδεθεί.

Το αρχείο style.css περιέχει τον ακόλουθο κώδικα:

P (χρώμα: κόκκινο;)

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

Υπάρχουν τέσσερις τρόποι ρύθμισης CSSστυλ για ετικέτες HTML.

1) Ενσωματωμένο στυλ.

2) Εφαρμόστηκεστυλ

3) Εισαγόμενοςστυλ.

4) Στυλ από αρχείο.

Και σε αυτό το άρθρο θα αναλύσουμε και τις τέσσερις μεθόδους.

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

κείμενο

Σε αυτήν την περίπτωση, ορίζουμε το στοιχείο " κείμενο" θα είναι το μέγεθος του 150% και ευθυγραμμισμένο με κέντρο. Αυτό είναι ένα παράδειγμα ενσωματωμένο στυλ.

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

Εδώ θα συμβεί το εξής: για όλα τα στοιχεία μέσα στην ετικέτα

θα γίνουν τα εξής: το χρώμα τους θα είναι κόκκινο και το πάνω περιθώριο θα είναι 100 pixel.

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

Εδώ τα στυλ από το αρχείο " θα εφαρμοστούν σε ολόκληρη τη σελίδα my.css".

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

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

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

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

Κεφαλίδα πρώτου επιπέδου

Επικεφαλίδα τρίτου επιπέδου που βρίσκεται στο κέντρο του εγγράφου html

Επικεφαλίδα έκτου επιπέδου, στοιχισμένη στη δεξιά άκρη της ιστοσελίδας

Μετά από αυτό δημιουργούμε νέο αρχείομε το ακόλουθο περιεχόμενο:

H1 (χρώμα:μπλε;)
H3 (χρώμα: κόκκινο;)
H6 (χρώμα:πράσινο;)

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

Εδώ χρησιμοποιώντας την ετικέτα συνδέουμε φύλλα στυλ στο έγγραφο html. Χαρακτηριστικό hrefαναφέρεται στη θέση όπου βρίσκεται το αρχείο στυλ αυτό είναι ένα απαιτούμενο χαρακτηριστικό. Χαρακτηριστικό τύποςΓνωρίζουμε ήδη ότι καθορίζει τον τύπο του φύλλου στυλ. Χαρακτηριστικό σχετυποδεικνύει τη σχέση του περιλαμβανόμενου αρχείου με αυτό το έγγραφο HTML. Στην περίπτωσή μας, η τιμή του χαρακτηριστικού rel="φύλλο στυλ"υποδηλώνει ότι έχουμε προσθέσει κύριοςφύλλο στυλ. Το πλεονέκτημα αυτής της μεθόδου καθορισμού φύλλων στυλ είναι ότι εάν θέλετε να αλλάξετε τη σχεδίαση του ιστότοπου στο σύνολό του, χρειάζεται να αλλάξετε μόνο ένα αρχείο με φύλλα στυλ.

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

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

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

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

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

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

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

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

Τα στυλ μπορούν να προστεθούν με τρεις τρόπους.

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

Εσωτερικό στυλείναι ένα είδος επέκτασης μιας ετικέτας html. Αυτό το στυλ δημιουργείται όταν είναι απαραίτητο να ορίσετε ορισμένες ιδιότητες για ένα συγκεκριμένο αντικείμενο, αντί για μια ομάδα αντικειμένων. Αυτές οι ιδιότητες ονομάζονται γνωρίσματαστυλ.

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

Για παράδειγμα, θέλετε να γράψετε έναν συγκεκριμένο τίτλο πορτοκάλικαι μέγεθος 22 pixel. Για να το κάνετε αυτό, γράψτε τα εξής:

Μάθημα 1

Μάθημα 1

Ας δούμε αυτό το παράδειγμα. Φράση "Μάθημα 1"επισημαίνεται με ετικέτα τίτλου

. Στην ετικέτα

δημιουργείται ένα στυλ χρησιμοποιώντας την παράμετρο στυλ. Το στυλ έχει 2 χαρακτηριστικά χρώμα(χρώμα) και μέγεθος γραμματοσειράς(μέγεθος γραμματοσειράς), χωρισμένο "άνω τελεία". Χαρακτηριστικό χρώμαεκχωρείται τιμή #CD6600, Χαρακτηριστικό μέγεθος γραμματοσειράςεκχωρείται τιμή 22 εικονοστοιχεία.

Παγκόσμια στυλ

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

Τα καθολικά στυλ προστίθενται σε ένα έγγραφο ως εξής:

1. Μέσα σε μια ετικέτα εισήχθη ζευγαρωμένη ετικέτα
   

   κόκκινο χρώμα και μέγεθος 20 pixel:

   
   
   

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

   Και

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

   Σχετικά στυλ

   Συνδεδεμένο φύλλο στυλδημιουργούνται σε ξεχωριστό αρχείο με την επέκταση .cssκαι συνδεθείτε σε ένα έγγραφο (ή σε πολλά έγγραφα).

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

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

   Δεύτερον, μπορείτε να αλλάξετε στυλ χωρίς να αλλάξετε σελίδες html. Και όλες οι αλλαγές θα εφαρμοστούν αυτόματα σε όλες τις σελίδες στις οποίες είναι συνδεδεμένο το αρχείο στυλ.

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

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

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

   
   
   

   Πού είναι οι παράμετροι rel="φύλλο στυλ"Και type="text/css"είναι σταθερές και η παράμετρος hrefεκχωρείται η διεύθυνση του αρχείου στυλ. Η διεύθυνση μπορεί να είναι είτε απόλυτη είτε σχετική.

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

   
   
   

   Μέσα στο αρχείο στυλ, περιγράφονται όλα τα απαραίτητα στυλ, χωρισμένα με αλλαγές γραμμής, όπως και τα καθολικά στυλ:

   στυλ 1 (
   χαρακτηριστικό 1: τιμή;
   χαρακτηριστικό 2: τιμή;
   ...
   }
   στυλ 2 (
   χαρακτηριστικό 1: τιμή;
   χαρακτηριστικό 2: τιμή;
   ...
   }
   ...

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

   πορτοκαλί χρώμα και μέγεθος 22 pixel και όλες οι επικεφαλίδες

   κόκκινο χρώμα και μέγεθος 20 pixel. Για να το κάνετε αυτό, δημιουργήστε ένα αρχείο στυλ style.css που περιέχει τα εξής:

   h1 (
   χρώμα: #CD6600;
   μέγεθος γραμματοσειράς: 22 px
   }
   h2 (
   χρώμα: #FF0000;
   μέγεθος γραμματοσειράς: 20 px
   }
   

   Και συνδέστε αυτό το αρχείο στο έγγραφό μας, γράψτε σε αυτό:

   
   
   

   Τι είναι τα CSS Cascading Style Sheets;

   CSS (Cascade Style Sheet)- κλιμακωτά φύλλα στυλ. Αυτό είναι ένα είδος επέκτασης HTML που δίνει στον προγραμματιστή ιστού πρόσθετες δυνατότητες.

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

   Αλλά η HTML σάς επιτρέπει επίσης να μορφοποιήσετε κείμενο χρησιμοποιώντας ετικέτες μορφοποίησης. Ποιο είναι το πλεονέκτημα CSSπριν από την HTML;

   Πλεονεκτήματα του CSS έναντι του HTML

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

      Έτσι ώστε στον ιστότοπο όλες οι κεφαλίδες να καθορίζονται από ετικέτες

      ,

      ,

      Και

      ήταν το ίδιο χρώμα, σε κανονικό HTML για αυτό θα έπρεπε να τοποθετήσουμε κάθε επικεφαλίδα σε ένα κοντέινερ με παράμετρο color="#CD6600":

      Επικεφαλίδα 1

      
      ...
      

      Κεφάλαιο 4

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

      Και με τη βοήθεια CSSθα δημιουργήσουμε ένα στυλ για τις ετικέτες

      ,

      ,

      Και

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

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

   2. Τα στυλ δίνουν στον προγραμματιστή πολύ περισσότερες επιλογές από το κανονικό HTML.

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

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

   Συνδυασμός διαφορετικών τύπων στυλ

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

   Για παράδειγμα, ας φτιάξουμε όλες τις κεφαλίδες

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

   
   h1 (
   χρώμα: #CD6600
   }
   

   
   

   Επικεφαλίδα 1

   
   

   Επικεφαλίδα 2

   
   

   Επικεφαλίδα 3

   
   
   
   

   Ως αποτέλεσμα αυτού του παραδείγματος "Επικεφαλίδα 1"Και "Επικεφαλίδα 3"θα είναι πορτοκαλί και "Επικεφαλίδα 2"- το κόκκινο.