Στυλ σε ένα έγγραφο html. Σχεδιασμός ετικετών html με το χαρακτηριστικό style (ενσωματωμένα στυλ CSS). Πώς συνδυάζονται πολλά στυλ σε ένα
CSS (Cascading Style Sheets) ή cascading style sheets, χρησιμοποιούνται για να περιγράψουν εμφάνισηέγγραφο γραμμένο σε γλώσσα σήμανσης. Συνήθως, τα στυλ CSS χρησιμοποιούνται για τη δημιουργία και την αλλαγή του στυλ των στοιχείων ιστοσελίδας και διεπαφές χρήστηΓραμμένο σε Γλώσσες HTMLκαι XHTML, αλλά μπορεί επίσης να εφαρμοστεί σε οποιοδήποτε είδος εγγράφου XML, συμπεριλαμβανομένων των XML, SVG και XUL.
Τα επικαλυπτόμενα φύλλα στυλ περιγράφουν κανόνες για τη μορφοποίηση στοιχείων χρησιμοποιώντας ιδιότητες και αποδεκτές τιμέςαυτές τις ιδιότητες. Για κάθε στοιχείο μπορείτε να χρησιμοποιήσετε περιορισμένο σύνολοιδιότητες, άλλες ιδιότητες δεν θα έχουν καμία επίδραση σε αυτό.
Μια δήλωση στυλ αποτελείται από δύο μέρη: το στοιχείο της ιστοσελίδας − εκλέκτοραςκαι εντολές μορφοποίησης - μπλοκ διαφημίσεων. Ο επιλογέας λέει στο πρόγραμμα περιήγησης ποιο στοιχείο να μορφοποιήσει και στο μπλοκ δήλωσης (κωδ άγκιστρα) παρατίθενται εντολές μορφοποίησης - ιδιότητες και οι τιμές τους.
Ρύζι. 1. Δομή δήλωσης στυλ CSS Τύποι κλιμακωτών φύλλων στυλ και οι ιδιαιτερότητές τους
1. Τύποι φύλλων στυλ
1.1. Εξωτερικό φύλλο στυλ
Εξωτερικό φύλλο στυλείναι ένα αρχείο κειμένου με την επέκταση .css, το οποίο περιέχει ένα σύνολο στυλ CSS για στοιχεία. Το αρχείο δημιουργείται στον επεξεργαστή κώδικα, ακριβώς όπως μια σελίδα HTML. Το αρχείο μπορεί να περιέχει μόνο στυλ, χωρίς σήμανση HTML. Ένα εξωτερικό φύλλο στυλ συνδέεται με μια ιστοσελίδα χρησιμοποιώντας μια ετικέτα , που βρίσκεται μέσα στο τμήμα
. Αυτά τα στυλ λειτουργούν για όλες τις σελίδες του ιστότοπου.Μπορείτε να επισυνάψετε πολλά φύλλα στυλ σε κάθε ιστοσελίδα προσθέτοντας πολλές ετικέτες στη σειρά , υποδεικνύοντας τον σκοπό αυτού του φύλλου στυλ στο χαρακτηριστικό ετικέτας πολυμέσων. Το rel="stylesheet" καθορίζει τον τύπο του συνδέσμου (σύνδεσμος σε φύλλο στυλ).
Το χαρακτηριστικό type="text/css" δεν απαιτείται από το πρότυπο HTML5, επομένως μπορεί να παραλειφθεί. Εάν το χαρακτηριστικό λείπει, η προεπιλεγμένη τιμή είναι type="text/css" .
1.2. Εσωτερικά στυλ
Εσωτερικά στυλενσωματωμένο σε ένα τμήμα
έγγραφο HTML και ορίζονται μέσα στην ετικέτα. Τα εσωτερικά στυλ έχουν προτεραιότητα έναντι των εξωτερικών, αλλά είναι κατώτερα από τα ενσωματωμένα στυλ (καθορίζονται μέσω του χαρακτηριστικού στυλ)....
1.3. Ενσωματωμένα στυλ
Όταν γράφουμε ενσωματωμένα στυλ, γράφουμε τον κώδικα CSS στο αρχείο HTML, απευθείας μέσα στην ετικέτα στοιχείου χρησιμοποιώντας χαρακτηριστικό στυλ:
Δώστε προσοχή σε αυτό το κείμενο.
Τέτοια στυλ επηρεάζουν μόνο το στοιχείο για το οποίο έχουν οριστεί.
1.4. Κανόνας @import
Κανόνας @importΣας επιτρέπει να φορτώνετε εξωτερικά φύλλα στυλ. Για να λειτουργήσει η οδηγία @import, πρέπει να εμφανίζεται στο φύλλο στυλ (εξωτερικό ή εσωτερικό) πριν από όλους τους άλλους κανόνες:
Ο κανόνας @import χρησιμοποιείται επίσης για να συμπεριλάβει γραμματοσειρές ιστού:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,κυριλλικό);
2. Τύποι επιλογέων
Επιλογείςαντιπροσωπεύουν τη δομή μιας ιστοσελίδας. Βοηθούν στη δημιουργία κανόνων για τη μορφοποίηση στοιχείων ιστοσελίδας. Οι επιλογείς μπορεί να είναι στοιχεία, οι κλάσεις και τα αναγνωριστικά τους, καθώς και ψευδοκλάσεις και ψευδοστοιχεία.
2.1. Universal επιλογέας
Ταιριάζει με οποιοδήποτε στοιχείο HTML. Για παράδειγμα, το * (περιθώριο: 0;) θα επαναφέρει τα περιθώρια για όλα τα στοιχεία τοποθεσίας. Ο επιλογέας μπορεί επίσης να χρησιμοποιηθεί σε συνδυασμό με ψευδο-κλάση ή ψευδοστοιχείο: *:after (στυλ CSS) , *:checked (στυλ CSS) .
2.2. Επιλογέας στοιχείων
Οι επιλογείς στοιχείων σάς επιτρέπουν να μορφοποιήσετε όλα τα στοιχεία αυτού του τύπουσε όλες τις σελίδες του ιστότοπου. Για παράδειγμα, το h1 (οικογένεια γραμματοσειράς: Lobster, cursive;) θα ορίσει το συνολικό στυλ μορφοποίησης για όλες τις επικεφαλίδες h1.
2.3. Επιλογέας τάξης
Οι επιλογείς κλάσεων σάς επιτρέπουν να καθορίσετε στυλ για ένα ή περισσότερα στοιχεία με ίδιο όνοματάξη που βρίσκεται σε διαφορετικούς τόπουςσελίδες ή σε διαφορετικές σελίδεςιστοσελίδα. Για παράδειγμα, για να δημιουργήσετε έναν τίτλο με την κλάση επικεφαλίδας, πρέπει να προσθέσετε κλάσημε την επικεφαλίδα τιμής στην ετικέτα ανοίγματος
και ορίστε το στυλ για καθορισμένη κατηγορία. Τα στυλ που δημιουργούνται χρησιμοποιώντας μια κλάση μπορούν να εφαρμοστούν σε άλλα στοιχεία, όχι απαραίτητα αυτού του τύπου.
Οδηγίες χρήσης προσωπικός υπολογιστής
.headline (μετατροπή κειμένου: κεφαλαία, χρώμα: ανοιχτό μπλε; )2.4. Επιλογέας ταυτότητας
Ο επιλογέας ID σάς επιτρέπει να μορφοποιήσετε έναςσυγκεκριμένο στοιχείο. Το αναγνωριστικό πρέπει να είναι μοναδικό και μπορεί να εμφανίζεται μόνο μία φορά σε μία σελίδα.
#sidebar (πλάτος: 300 px; float: αριστερά; )
2.5. Επιλογέας απογόνων
Οι επιλογείς απόγονος εφαρμόζουν στυλ σε στοιχεία μέσα σε ένα στοιχείο κοντέινερ. Για παράδειγμα, ul li (μετατροπή κειμένου: κεφαλαία;) - θα επιλέξει όλα τα στοιχεία li που είναι παιδιά όλων των στοιχείων ul.
Εάν χρειάζεται να μορφοποιήσετε απογόνους συγκεκριμένο στοιχείο, σε αυτό το στοιχείο πρέπει να δοθεί μια κατηγορία στυλ:
p.first a (χρώμα: πράσινο;) - αυτό το στυλ θα εφαρμοστεί σε όλους τους συνδέσμους απόγονους της παραγράφου με την πρώτη τάξη.
p .first a (χρώμα: πράσινο;) - εάν προσθέσετε ένα κενό, οι σύνδεσμοι που βρίσκονται μέσα σε οποιαδήποτε ετικέτα .first class που είναι θυγατρική του στοιχείου θα διαμορφωθούν
Πρώτα a (χρώμα: πράσινο;) - αυτό το στυλ θα εφαρμοστεί σε οποιονδήποτε σύνδεσμο βρίσκεται μέσα σε άλλο στοιχείο, που ορίζεται από την class.first .
2.6. Παιδικός επιλογέας
Ένα θυγατρικό στοιχείο είναι ένα άμεσο παιδί του στοιχείου που περιέχει. Ένα στοιχείο μπορεί να έχει πολλά παιδικά στοιχεία, και κάθε στοιχείο μπορεί να έχει μόνο έναν γονέα. Ο θυγατρικός επιλογέας σάς επιτρέπει να εφαρμόζετε στυλ μόνο εάν το θυγατρικό στοιχείο έρχεται αμέσως μετά το γονικό στοιχείο και δεν υπάρχουν άλλα στοιχεία μεταξύ τους, δηλαδή, το θυγατρικό στοιχείο δεν είναι ένθετο σε τίποτα άλλο.
Για παράδειγμα, το p > strong θα επιλέξει όλα τα ισχυρά στοιχεία που είναι παιδιά του στοιχείου p.
2.7. Αδελφή επιλογέας
Η αδελφότητα εμφανίζεται μεταξύ στοιχείων που μοιράζονται έναν κοινό γονέα. Οι επιλογείς αδελφών σάς επιτρέπουν να επιλέξετε στοιχεία από μια ομάδα στοιχείων του ίδιου επιπέδου.
h1 + p - θα επιλέξει όλες τις πρώτες παραγράφους αμέσως μετά από οποιαδήποτε ετικέτα
χωρίς να επηρεάζονται οι υπόλοιπες παράγραφοι·
h1 ~ p - θα επιλέξει όλες τις παραγράφους που είναι αντίστοιχες με οποιαδήποτε επικεφαλίδα h1 και αμέσως μετά.
2.8. Επιλογέας χαρακτηριστικών
Οι επιλογείς χαρακτηριστικών επιλέγουν στοιχεία με βάση το όνομα ή την τιμή του χαρακτηριστικού:
[χαρακτηριστικό] - όλα τα στοιχεία που περιέχουν το καθορισμένο χαρακτηριστικό - όλα τα στοιχεία για τα οποία καθορίζεται το χαρακτηριστικό alt.
Selector[χαρακτηριστικό] - στοιχεία αυτού του τύπου που περιέχουν το καθορισμένο χαρακτηριστικό, img - μόνο εικόνες για τις οποίες έχει καθοριστεί το χαρακτηριστικό alt.
Selector[attribute="value"] - στοιχεία αυτού του τύπου που περιέχουν το καθορισμένο χαρακτηριστικό με συγκεκριμένο νόημα, img - όλες οι εικόνες των οποίων ο τίτλος περιέχει τη λέξη λουλούδι.
Selector[attribute~="value"] - στοιχεία που περιέχουν μερικώς δεδομένη αξία, για παράδειγμα, εάν έχουν καθοριστεί πολλές κλάσεις για ένα στοιχείο που χωρίζεται από ένα κενό, p - παράγραφοι των οποίων το όνομα κλάσης περιέχει χαρακτηριστικό ;
επιλογέας[ιδιότητα|="τιμή"] - στοιχεία των οποίων η λίστα τιμών χαρακτηριστικών ξεκινά με την καθορισμένη λέξη, p - παράγραφοι των οποίων το όνομα κλάσης είναι χαρακτηριστικό ή αρχίζει με χαρακτηριστικό .
Selector[attribute^="value"] - στοιχεία των οποίων η τιμή χαρακτηριστικού ξεκινά με την καθορισμένη τιμή, a - όλοι οι σύνδεσμοι που ξεκινούν με http:// ;
Selector[attribute$="value"] - στοιχεία των οποίων η τιμή χαρακτηριστικού τελειώνει με την καθορισμένη τιμή, img - όλες οι εικόνες σε μορφή png.
Selector[attribute*="value"] - στοιχεία των οποίων η τιμή χαρακτηριστικού περιέχει την καθορισμένη λέξη οπουδήποτε, a - όλοι οι σύνδεσμοι των οποίων το όνομα περιέχει βιβλίο .
2.9. Επιλογέας ψευδο-κλάσης
Οι ψευδο-κλάσεις είναι κλάσεις που στην πραγματικότητα δεν συνδέονται με ετικέτες HTML. Σας επιτρέπουν να εφαρμόζετε κανόνες CSS σε στοιχεία όταν εμφανίζεται ή υπόκειται ένα συμβάν έναν ορισμένο κανόνα. Οι ψευδο-κλάσεις χαρακτηρίζουν στοιχεία με τις ακόλουθες ιδιότητες:
:hover - οποιοδήποτε στοιχείο πάνω από το οποίο τοποθετείται ο κέρσορας του ποντικιού.
:Συγκεντρώνω - διαδραστικό στοιχείο, στο οποίο έγινε πρόσβαση μέσω του πληκτρολογίου ή ενεργοποιήθηκε χρησιμοποιώντας το ποντίκι.
:active - στοιχείο που ενεργοποιήθηκε από τον χρήστη.
:valid - πεδία φόρμας των οποίων τα περιεχόμενα έχουν ελεγχθεί στο πρόγραμμα περιήγησης για συμμόρφωση με τον καθορισμένο τύπο δεδομένων.
:invalid — σχηματίστε πεδία των οποίων το περιεχόμενο δεν ταιριάζει με τον καθορισμένο τύπο δεδομένων.
:ενεργοποιημένο - όλα ενεργά πεδίαφόρμες?
:disabled — αποκλεισμένα πεδία φόρμας, δηλ. σε ανενεργή κατάσταση.
:in-range - σχηματίστε πεδία των οποίων οι τιμές βρίσκονται στο καθορισμένο εύρος.
:εκτός εύρους - πεδία μορφής των οποίων οι τιμές δεν βρίσκονται εντός του καθορισμένου εύρους.
:lang() - στοιχεία με κείμενο στην καθορισμένη γλώσσα.
:not(selector) - στοιχεία που δεν περιέχουν τον καθορισμένο επιλογέα - κλάση, αναγνωριστικό, όνομα ή τύπο πεδίου φόρμας - :not() ;
Το :target είναι ένα στοιχείο με το σύμβολο # που αναφέρεται στο έγγραφο.
:checked — επιλεγμένα (επιλεγμένα από το χρήστη) στοιχεία φόρμας.
2.10. Δομικός επιλογέας ψευδο-κλάσης
Οι δομικές ψευδοκλάσεις επιλέγουν θυγατρικά στοιχεία σύμφωνα με την παράμετρο που καθορίζεται στις παρενθέσεις:
:nth-child(odd) - odd child στοιχεία;
:nth-child(ακόμα) - ακόμη και παιδικά στοιχεία;
:nth-child(3n) - κάθε τρίτο στοιχείο μεταξύ των παιδιών.
:nth-child(3n+2) - επιλέγει κάθε τρίτο στοιχείο, ξεκινώντας από το δεύτερο παιδί (+2) ;
:nth-child(n+2) - επιλέγει όλα τα στοιχεία ξεκινώντας από το δεύτερο.
:nth-child(3) - επιλέγει το τρίτο θυγατρικό στοιχείο.
:nth-last-child() - στη λίστα θυγατρικών στοιχείων, επιλέγει το στοιχείο με καθορισμένη τοποθεσία, παρόμοιο με:nth-child() , αλλά ξεκινώντας από το τελευταίο, προς την αντίθετη κατεύθυνση.
:first-child - σας επιτρέπει να διαμορφώσετε μόνο το πρώτο θυγατρικό στοιχείο της ετικέτας.
:last-child - σας επιτρέπει να μορφοποιήσετε το τελευταίο θυγατρικό στοιχείο της ετικέτας.
:only-child - επιλέγει ένα στοιχείο που είναι το μοναδικό θυγατρικό στοιχείο.
:empty - επιλέγει στοιχεία που δεν έχουν παιδιά.
:root - επιλέγει το στοιχείο που είναι η ρίζα στο έγγραφο - στοιχείο html.
2.11. Επιλογέας ψευδο-κλάσης δομικού τύπου
Υποδεικνύει έναν συγκεκριμένο τύπο θυγατρικής ετικέτας:
:nth-of-type() - επιλέγει στοιχεία παρόμοια με το :nth-child() , αλλά λαμβάνει υπόψη μόνο τον τύπο του στοιχείου.
:first-of-type - επιλέγει το πρώτο παιδί ενός δεδομένου τύπου.
:last-of-type - επιλέγει τελευταίο στοιχείοαυτού του τύπου?
:nth-last-of-type() - επιλέγει ένα στοιχείο δεδομένου τύπουσε μια λίστα στοιχείων σύμφωνα με την καθορισμένη θέση, ξεκινώντας από το τέλος.
:only-of-type - επιλέγει ένα μεμονωμένο στοιχείο καθορισμένο τύπομεταξύ των θυγατρικών στοιχείων του γονικού στοιχείου.
2.12. Επιλογέας ψευδοστοιχείων
Τα ψευδοστοιχεία χρησιμοποιούνται για την προσθήκη περιεχομένου, το οποίο δημιουργείται χρησιμοποιώντας την ιδιότητα περιεχομένου:
:first-letter - επιλέγει το πρώτο γράμμα κάθε παραγράφου, ισχύει μόνο για μπλοκ στοιχεία.
:first-line - επιλέγει την πρώτη γραμμή κειμένου στοιχείου, ισχύει μόνο για μπλοκ στοιχεία.
:before - εισάγει το παραγόμενο περιεχόμενο πριν από το στοιχείο.
:after - προσθέτει περιεχόμενο που δημιουργείται μετά το στοιχείο.
3. Συνδυασμός επιλογέα
Για να επιλέξετε με μεγαλύτερη ακρίβεια στοιχεία για μορφοποίηση, μπορείτε να χρησιμοποιήσετε συνδυασμούς επιλογέων:
img:nth-of-type( even) - θα επιλέξει όλες τις ζυγές εικόνες των οποίων το εναλλακτικό κείμενο περιέχει λέξη css.
4. Ομαδοποίηση επιλογέων
Το ίδιο στυλ μπορεί να εφαρμοστεί σε πολλά στοιχεία ταυτόχρονα. Για να το κάνετε αυτό, πρέπει να αναφέρετε τους απαιτούμενους επιλογείς στην αριστερή πλευρά της δήλωσης, διαχωρισμένους με κόμματα:
H1, h2, p, span ( χρώμα: ντομάτα; φόντο: λευκό; )
5. Κληρονομιά και καταρράκτη
Η κληρονομικότητα και ο καταρράκτης είναι δύο θεμελιώδεις έννοιες στο CSS που συνδέονται στενά. Η κληρονομικότητα είναι όπου τα στοιχεία κληρονομούν ιδιότητες από τον γονέα τους (το στοιχείο που τα περιέχει). Ο καταρράκτης εκδηλώνεται με το πώς ΔΙΑΦΟΡΕΤΙΚΟΙ ΤΥΠΟΙΤα φύλλα στυλ εφαρμόζονται σε ένα έγγραφο και πώς αντικρουόμενοι κανόνες παρακάμπτουν ο ένας τον άλλον.
5.1. Κληρονομία
Κληρονομίαείναι ο μηχανισμός με τον οποίο ορισμένες ιδιότητες μεταδίδονται από έναν πρόγονο στους απογόνους του. Προδιαγραφές CSSΠαρέχεται κληρονομικότητα ιδιοτήτων που σχετίζονται με το περιεχόμενο κειμένου της σελίδας, όπως χρώμα, γραμματοσειρά, διάστιχο, ύψος γραμμής, στυλ λίστας, στοίχιση κειμένου, εσοχή κειμένου, μετατροπή κειμένου, ορατότητα, κενό διάστημα και διάστιχο λέξεων. Σε πολλές περιπτώσεις, αυτό είναι βολικό επειδή δεν χρειάζεται να ορίσετε το μέγεθος γραμματοσειράς και την οικογένεια γραμματοσειράς για κάθε στοιχείο στην ιστοσελίδα.
Οι ιδιότητες που σχετίζονται με τη μορφοποίηση μπλοκ δεν κληρονομούνται. Αυτά είναι φόντο , περίγραμμα , οθόνη , float and clear , ύψος και πλάτος , περιθώριο , min-max-height and -width , περίγραμμα , υπερχείλιση , padding , position , text-decoration , κατακόρυφη στοίχιση και z-index .
Αναγκαστική κληρονομιά
Με τη χρήση λέξη-κλειδίΤο inherit μπορεί να αναγκάσει ένα στοιχείο να κληρονομήσει οποιαδήποτε τιμή ιδιότητας του γονικού του στοιχείου. Αυτό λειτουργεί ακόμη και για ιδιότητες που δεν κληρονομούνται από προεπιλογή.
Πώς ρυθμίζονται και λειτουργούν τα στυλ CSS
1) Τα στυλ μπορούν να κληρονομηθούν από το γονικό στοιχείο (κληρονομικές ιδιότητες ή χρησιμοποιώντας την τιμή κληρονομιάς).
2) Τα στυλ που βρίσκονται στο φύλλο στυλ παρακάτω αντικαθιστούν τα στυλ που βρίσκονται στον παραπάνω πίνακα.
3) Μπορούν να εφαρμοστούν στυλ από ένα στοιχείο διαφορετικές πηγές. Μπορείτε να ελέγξετε ποια στυλ εφαρμόζονται στη λειτουργία προγραμματιστή του προγράμματος περιήγησης. Για να το κάνετε αυτό, κάντε κλικ στο στοιχείο κάντε δεξί κλικποντίκι και επιλέξτε «Προβολή κωδικού» (ή κάτι παρόμοιο). Η δεξιά στήλη θα εμφανίσει όλες τις ιδιότητες που έχουν οριστεί σε αυτό το στοιχείο ή κληρονομούνται από ένα γονικό στοιχείο, μαζί με τα αρχεία στυλ στα οποία καθορίζονται και τον τακτικό αριθμό της γραμμής κώδικα.
Ρύζι. 2. Λειτουργία προγραμματιστή σε Google πρόγραμμα περιήγησηςΧρώμιο 4) Όταν ορίζετε ένα στυλ, μπορείτε να χρησιμοποιήσετε οποιονδήποτε συνδυασμό επιλογέων - έναν επιλογέα στοιχείων, μια ψευδοκλάση στοιχείων, μια κλάση ή ένα αναγνωριστικό στοιχείου.
div (περίγραμμα: 1 εικονοστοιχείο συμπαγές #eee;) #wrap (πλάτος: 500 px;).box (float: αριστερά;).clear (clear: αμφότερα;)
5.2. αλληλουχία
Καταρράκτηείναι ένας μηχανισμός που ελέγχει το τελικό αποτέλεσμα σε μια κατάσταση όπου διαφορετικοί κανόνες CSS εφαρμόζονται στο ίδιο στοιχείο. Υπάρχουν τρία κριτήρια που καθορίζουν τη σειρά με την οποία εφαρμόζονται οι ιδιότητες—ο κανόνας!important, η ειδικότητα και η σειρά με την οποία περιλαμβάνονται τα φύλλα στυλ.
Κανόνας! Σημαντικός
Το βάρος ενός κανόνα μπορεί να καθοριστεί χρησιμοποιώντας τη λέξη-κλειδί!important, η οποία προστίθεται αμέσως μετά την τιμή της ιδιότητας, για παράδειγμα, span (βάρος γραμματοσειράς: bold!important;) . Ο κανόνας πρέπει να τοποθετείται στο τέλος της δήλωσης πριν από την αγκύλη κλεισίματος, χωρίς κενό. Μια τέτοια ανακοίνωση θα υπερισχύει όλων των άλλων κανόνων. Αυτός ο κανόνας σάς επιτρέπει να ακυρώσετε μια τιμή ιδιότητας και να ορίσετε μια νέα για ένα στοιχείο από μια ομάδα στοιχείων στην περίπτωση που δεν υπάρχει άμεση πρόσβαση στο αρχείο στυλ.
Ιδιαιτερότητα
Για κάθε κανόνα, το πρόγραμμα περιήγησης υπολογίζει ειδικότητα επιλογέα, και εάν ένα στοιχείο έχει αντικρουόμενες δηλώσεις ιδιοκτησίας, λαμβάνεται υπόψη ο κανόνας που έχει τη μεγαλύτερη ιδιαιτερότητα. Η τιμή ειδικότητας έχει τέσσερα μέρη: 0, 0, 0, 0. Η ειδικότητα του επιλογέα ορίζεται ως εξής:
για id, προστίθεται 0, 1, 0, 0.
για την κλάση 0, προστίθεται 0, 1, 0.
Για κάθε στοιχείο και ψευδοστοιχείο, προστίθενται 0, 0, 0, 1.
για ένα ενσωματωμένο στυλ που προστίθεται απευθείας σε ένα στοιχείο - 1, 0, 0, 0 ;
Ένας γενικός επιλογέας δεν έχει ιδιαιτερότητα.
H1 (χρώμα: ανοιχτό μπλε;) /*ειδικότητα 0, 0, 0, 1*/ em (χρώμα: ασημί;) /*ειδικότητα 0, 0, 0, 1*/ h1 em (χρώμα: χρυσό;) /*ειδικότητα: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (χρώμα: μπλε;) /*ειδικότητα: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (χρώμα: γκρι;) /*ειδικότητα 0, 0, 1, 0 */ #sidebar (χρώμα: πορτοκαλί;) /*specificity 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*specificity: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
Ως αποτέλεσμα, οι κανόνες που είναι πιο συγκεκριμένοι θα εφαρμοστούν στο στοιχείο. Για παράδειγμα, εάν ένα στοιχείο έχει δύο ειδικότητες με τιμές 0, 0, 0, 2 και 0, 1, 0, 1, τότε ο δεύτερος κανόνας θα κερδίσει.
Σειρά συνδεδεμένων τραπεζιών
Μπορείτε να δημιουργήσετε πολλά εξωτερικά φύλλα στυλ και να τα συνδέσετε σε μία ιστοσελίδα. Αν μέσα διαφορετικά τραπέζιαθα συναντηθούν διαφορετικές έννοιεςιδιότητες ενός στοιχείου, και ως αποτέλεσμα ο κανόνας στο φύλλο στυλ που παρατίθεται παρακάτω θα εφαρμοστεί στο στοιχείο.
Η CSS (Cascading Style Sheets) είναι μια γλώσσα για τη διαχείριση του στυλ των ιστοσελίδων.
Εφαρμογή CSSσας επιτρέπει να μειώσετε σημαντικά τον όγκο των εγγράφων HTML, ειδικά εάν έχετε πολλές σελίδες με το ίδιο στυλ, και, ταυτόχρονα, να απλοποιήσετε τη δουλειά δημιουργίας και προσθήκης νέων εγγράφων. Αποθηκεύοντας περιγραφές των διαφόρων στυλ στο ξεχωριστά αρχεία, μπορείτε εύκολα να χειριστείτε στυλ.
Περιγραφή CSS
Αρχεία στυλ - κανονικά αρχεία κειμένου, που περιέχει μια περιγραφή στυλ σε CSS και βρίσκεται στον διακομιστή Web. Προκειμένου η ιστοσελίδα να δει το στυλ μέσα στην ετικέτα
γίνεται αναφορά στο αρχείο στυλ, όπως φαίνεται στο παράδειγμα:αρχείο style.css
Αρχείο Index.htm
Εάν το αρχείο στυλ βρίσκεται σε άλλο διακομιστή, πρέπει να δώσετε την πλήρη διεύθυνση URL
href="("http://...")" Μπορείτε επίσης να περιγράψετε στυλ στον κώδικα της ιστοσελίδας, μέσα στην ετικέτα
Αρχείο Index.htm
Σε αυτήν την περίπτωση, μπορείτε να χρησιμοποιήσετε αυτά τα στυλ για στοιχεία που βρίσκονται στη σελίδα WEB. Δηλαδή, όλα τα στοιχεία κειμένου που βρίσκονται μέσα σε ετικέτες
, και σε αυτή τη σελίδα θα εμφανίζεται με κόκκινο πλάγιο χαρακτήρα, με μέγεθος χαρακτήρων 32 pixel.ΚΑΙ τελευταία επιλογή- η περιγραφή στυλ βρίσκεται ακριβώς μέσα στην ετικέτα του στοιχείου στο οποίο εφαρμόζεται αυτό το στυλ, για παράδειγμα:
Αυτό το στυλ ισχύει μόνο για αυτήν την ετικέτα
Αυτή η επιλογή δεν είναι η καλύτερη, καθώς οδηγεί σε αύξηση του μεγέθους του κώδικα σελίδας και απώλεια διαχωρισμού ξεχωριστών στυλ και δεδομένων ξεχωριστών σελίδων.
Ας εξετάσουμε τώρα την περίπτωση που είναι απαραίτητο να αντιστοιχίσουμε στυλ όχι σε όλα τα ίδια στοιχεία της σελίδας, αλλά μόνο σε ορισμένα - γι 'αυτό χρησιμοποιούμε την παράμετρο CLASS = "όνομα τάξης"ή ID = "όνομα στοιχείου" που μπορεί να αντιστοιχιστεί σε οποιοδήποτε στοιχείο σελίδας (παράγραφος, πίνακας κ.λπ.).
Η παράμετρος CLASS χρησιμοποιείται όταν χρειάζεται να δημιουργήσετε το ίδιο στυλ για πολλά, αλλά όχι όλα τα στοιχεία σελίδας (ίδια ή διαφορετικά).
Για παράδειγμα, προσδιορίζοντας στην περιγραφή του στυλ:
Bold_italic (βάρος γραμματοσειράς: έντονη, στυλ γραμματοσειράς: πλάγια)
Μπορείτε να βεβαιωθείτε ότι εμφανίζονται μόνο ορισμένα κελιά πίνακα έντονα πλαγιαστά. Για να το κάνετε αυτό, αντιστοιχίστε τους το στυλ της τάξης bi:
Προσοχή! Τα ονόματα των τάξεων κάνουν διάκριση πεζών-κεφαλαίων.
Η εκχώρηση στυλ με χρήση αναγνωριστικών χρησιμοποιείται όταν μόνο ένα στοιχείο στη σελίδα ταιριάζει με ένα δεδομένο αναγνωριστικό. Εάν υπάρχουν πολλά στοιχεία στα οποία πρέπει να εκχωρηθεί αυτό το στυλ, αυτό είναι ήδη μια κλάση.
Ψευδοτάξεις και ψευδοστοιχεία:
Οι ψευδο-κλάσεις και τα ψευδο-στοιχεία είναι ειδικές κλάσεις και στοιχεία εγγενή στο CSS και εντοπίζονται αυτόματα από προγράμματα περιήγησης με δυνατότητα CSS.
Διακρίνονται ψευδοτάξεις ΔΙΑΦΟΡΕΤΙΚΟΙ ΤΥΠΟΙένα στοιχείο, δημιουργία κατά τον καθορισμό δικά τους στυλγια καθένα από αυτά.
Τα ψευδοστοιχεία είναι μέρη άλλων στοιχείων, δίνοντας σε αυτά τα μέρη διαφορετικό στυλ από το στοιχείο ως σύνολο.
Σύνταξη:
Selector:pseudoclass ( ιδιότητες )
selector.class:pseudo-class ( ιδιότητες )
επιλογέας:ψευδοστοιχείο ( ιδιότητες )
selector.class:pseudo-element ( ιδιότητες )
Κατάλογος ψευδο-κλάσεων και ψευδο-στοιχείων:
Οι ψευδο-κλάσεις συνδέσμων είναι αυτές οι ψευδο-κλάσεις ενός στοιχείου , υποδεικνύοντας έναν σύνδεσμο.
ενεργός (ενεργός σύνδεσμος)
επίσκεψη (διεύθυνση URL επίσκεψης στο παρελθόν)
hover (μια ψευδοκλάση που εμφανίζεται όταν ο δρομέας τοποθετείται πάνω από έναν σύνδεσμο, δεν λειτουργεί στο NN).
Ψευδοστοιχεία πρώτης γραμμής. Μπορεί να χρησιμοποιηθεί με στοιχεία σε επίπεδο μπλοκ (p, h1, κ.λπ.) Αλλάζει το στυλ της πρώτης γραμμής αυτών των στοιχείων.
Ψευδοστοιχεία του πρώτου γράμματος. Δεν επηρεάζει ολόκληρη τη γραμμή, αλλά μόνο τον πρώτο χαρακτήρα.
Σύντομη περιγραφή της γλώσσας CSS
Ιδιότητες γραμματοσειράς font-family Αυτή η ιδιότητα καθορίζει τη γραμματοσειρά που χρησιμοποιείται από το στοιχείο. Εάν καθορίσετε μια διεύθυνση URL, η γραμματοσειρά θα εγκατασταθεί αυτόματα στον υπολογιστή του χρήστηΠΑΡΑΔΕΙΓΜΑ:font-family:Arial Black URL("arialblack.ttf")στυλ γραμματοσειράς (κανονικό, πλάγιο) Στυλ του στοιχείου. Πλάγια ή κανονική
ΠΑΡΑΔΕΙΓΜΑ:font-style:italicπαραλλαγή γραμματοσειράς (κανονικό-κανονικό, μικρά κεφαλαία-αντικαθιστά όλα τα πεζά γράμματα με κεφαλαία) Επιλογές εμφάνισης γραμματοσειράς. Το Netscape δεν υποστηρίζει αυτήν την ιδιότητα
ΠΑΡΑΔΕΙΓΜΑ:font-variant:small-capsβάρος γραμματοσειράς (κανονικό-κανονικό, έντονη γραφή, πιο τολμηρή-πολύ έντονη, ελαφρύτερη-λεπτή, ρύθμιση ακριβείας 100-900) Επισήμανση στοιχείου (βάρος)
ΠΑΡΑΔΕΙΓΜΑ:βάρος γραμματοσειράς:μέγεθος γραμματοσειράς έντονης γραφής (XX%, XXpt, XXpx)Μέγεθος γραμματοσειράς
ΠΑΡΑΔΕΙΓΜΑ: μέγεθος γραμματοσειράς: γραμματοσειρά 30 pt (οικογένεια, στυλ, παραλλαγή, βάρος, μέγεθος) Συνδυάζει όλες τις παραπάνω ιδιότητες.
ΠΑΡΑΔΕΙΓΜΑ: γραμματοσειρά: πλάγια πιο έντονη γραφή Arial 12ptΙδιότητες κειμένου. κείμενο-διακόσμηση (κανένα, υπογράμμιση, υπεργράμμιση, γραμμή, αναβοσβήνει) Στυλ κειμένου
ΠΑΡΑΔΕΙΓΜΑ:κείμενο-διακόσμηση:line-throughδιάστιχο (ΧΧ-αριθμός) Απόσταση μεταξύ γραμμάτων
ΠΑΡΑΔΕΙΓΜΑ:διάστημα γραμμάτων:100κατακόρυφη στοίχιση (βασική γραμμή, δευτερεύουσα, σούπερ, επάνω κείμενο, επάνω, μεσαίο, κάτω, κάτω κείμενο, ποσοστό) Η διάταξη των στοιχείων σε σχέση με άλλα στοιχεία της ίδιας σειράς.
ΠΑΡΑΔΕΙΓΜΑ:vertical-align:top-textμετατροπή κειμένου (με κεφαλαία - κάθε λέξη αρχίζει με κεφαλαίο, ΚΕΦΑΛΑΙΟ - κάθε γράμμα του κειμένου γίνεται κεφαλαίο, πεζό - κάθε γράμμα του κειμένου γίνεται μικρό.
ΠΑΡΑΔΕΙΓΜΑ:text-transform:Capitalizeστοίχιση κειμένου (αριστερά, δεξιά, κέντρο, αιτιολόγηση) Στοίχιση κειμένου.
ΠΑΡΑΔΕΙΓΜΑ:Στοίχιση κειμένου:Δεξιά εσοχή κειμένου (μονάδα μήκους ή ποσοστό)Εσοχή κειμένου.
ΠΑΡΑΔΕΙΓΜΑ:text-indent:30 emΎψος γραμμής (μονάδα μήκους ή ποσοστό) Πάνω εσοχή
ΠΑΡΑΔΕΙΓΜΑ:γραμμή-ύψος:100% Ιδιότητες χρώματος. χρώμα (#RRGGBB)Χρώμα στοιχείου
ΠΑΡΑΔΕΙΓΜΑ:color:#f00000 backgroung-color (#RRGGBB)Χρώμα φόντου στοιχείου
ΠΑΡΑΔΕΙΓΜΑ:φόντο-χρώμα:#f00000εικόνα φόντου (URL) Εικόνα φόντου
EXAMPLE:background-image:URL("img.gif") background-repeat (repeat - αναπαράγει την εικόνα φόντου προς όλες τις κατευθύνσεις, repeat-x - αναπαράγει την εικόνα φόντου οριζόντια, repeat-y - αναπαράγει την εικόνα φόντου κατακόρυφα, χωρίς επανάληψη - μη επαναλαμβανόμενες εικόνες) Επαναλάβετε την εικόνα φόντου
ΠΑΡΑΔΕΙΓΜΑ:background-repeat:no-repeatσυνημμένο φόντου (κύλιση της εικόνας φόντου μαζί με το έγγραφο, επιδιόρθωση-διόρθωση της εικόνας φόντου) Λειτουργία κύλισης της εικόνας φόντου.
ΠΑΡΑΔΕΙΓΜΑ:background-attachment:fixedθέση φόντου (%του πλάτους+%του ύψους, επάνω, μέση, κάτω, αριστερά, κέντρο, δεξιά, απόσταση από την αριστερή άκρη+απόσταση από την επάνω άκρη) Θέση της εικόνας φόντου
ΠΑΡΑΔΕΙΓΜΑ: θέση φόντου: 50%0% φόντο (χρώμα, εικόνα, θέση, συνημμένο, επανάληψη) Συνδυάζει όλες τις παραπάνω ιδιότητες.
ΠΑΡΑΔΕΙΓΜΑ:φόντο: μη επανάληψη μαύρου σταθερές ιδιότητες περιγράμματος 50%0%. margin-top (μήκος, ποσοστό, auto) Top margin
ΠΑΡΑΔΕΙΓΜΑ:margin-top:100 margin-right (μήκος, ποσοστό, αυτόματο)Δεξί περιθώριο
ΠΑΡΑΔΕΙΓΜΑ:margin-right:100% margin-bottom (μήκος, ποσοστό, αυτόματο) Κάτω περιθώριο
ΠΑΡΑΔΕΙΓΜΑ:margin-bottom:100em margin-left (μήκος, ποσοστό, αυτόματο)Αριστερό περιθώριο
ΠΑΡΑΔΕΙΓΜΑ:margin-left:100pt margin (πάνω, δεξιά, αριστερά, κάτω) Συνδυάζει όλες τις παραπάνω ιδιότητες.
ΠΑΡΑΔΕΙΓΜΑ:φόντο: 100pt padding-top (μήκος, ποσοστό)Εσοχή από το επάνω περίγραμμα"a
ΠΑΡΑΔΕΙΓΜΑ: padding-top:100pt padding-right (μήκος, ποσοστό)Εσοχή από το δεξί περίγραμμα"a
ΠΑΡΑΔΕΙΓΜΑ: padding-right:100% padding-bottom (μήκος, ποσοστό) Εσοχή από το κάτω περίγραμμα"
ΠΑΡΑΔΕΙΓΜΑ: padding-bottom:100em padding-left (μήκος, ποσοστό)Εσοχή από το αριστερό περίγραμμα"a
ΠΑΡΑΔΕΙΓΜΑ:padding-top:100 padding (αριστερά, δεξιά, πάνω, κάτω) Συνδυάζει όλες τις παραπάνω ιδιότητες. Μπορείτε να ορίσετε πολλές τιμές ταυτόχρονα (έως τέσσερις) για διαφορετικές πλευρές. Εάν οριστεί μία τιμή, ορίζεται μία μόνο εσοχή για όλες τις πλευρές, εάν δύο, τότε ορίζονται διαφορετικές εσοχές για τις γειτονικές πλευρές και εάν τέσσερις, τότε ορίζονται μεμονωμένες εσοχές για όλες τις πλευρές.
ΠΑΡΑΔΕΙΓΜΑ: padding: 100 px περίγραμμα-πάνω-πλάτος (μήκος, λεπτό, μεσαίο, παχύ) πάχος του επάνω περιγράμματος"
ΠΑΡΑΔΕΙΓΜΑ:border-top-width:100pt border-right-width (μήκος, λεπτό, μεσαίο, παχύ)πάχος του δεξιού περιγράμματος"a
ΠΑΡΑΔΕΙΓΜΑ:border-right-width:hick border-bottom-width (μήκος, λεπτό, μεσαίο, παχύ)πάχος του κάτω περιγράμματος"a
ΠΑΡΑΔΕΙΓΜΑ:border-bottom-width:100em border-left-width (μήκος, λεπτό, μεσαίο, παχύ) πάχος του αριστερού περιγράμματος"a
ΠΑΡΑΔΕΙΓΜΑ:border-left-width:medium border-width (top-width, right-width, left-width, bottom-width) Συνδυάζει όλες τις παραπάνω ιδιότητες. Μπορείτε να ορίσετε πολλές τιμές ταυτόχρονα (έως τέσσερις) για διαφορετικά περιθώρια Εάν έχει οριστεί μία τιμή, ορίζεται ένα πάχος για όλες τις πλευρές, εάν δύο, τότε ορίζονται διαφορετικά πάχη για τις παρακείμενες πλευρές και αν τέσσερις, τότε μεμονωμένες. τα πάχη έχουν ρυθμιστεί για όλες τις πλευρές
ΠΑΡΑΔΕΙΓΜΑ:πλάτος περιγράμματος: 15 pt περίγραμμα-χρώμα (χρώμα)Χρώμα περιγράμματος.
ΠΑΡΑΔΕΙΓΜΑ:border-color:green-style Style of borders Μπορείτε να ορίσετε πολλές τιμές ταυτόχρονα (έως τέσσερις) για διαφορετικά περιγράμματα. Εάν έχει οριστεί μία τιμή, ορίζεται ένα μεμονωμένο στυλ για όλες τις πλευρές, εάν δύο, τότε ορίζονται διαφορετικά στυλ για τις γειτονικές πλευρές και εάν τέσσερις, τότε ορίζονται μεμονωμένα στυλ για όλες τις πλευρές.
ΠΑΡΑΔΕΙΓΜΑ:στυλ περιγράμματος: περιθώριο με διακεκομμένο αυλάκι (πλάτος, στυλ, χρώμα) Συνδυάζει όλες τις παραπάνω ιδιότητες για το επάνω περίγραμμα.
ΠΑΡΑΔΕΙΓΜΑ: περίγραμμα-κορυφή: 100em κόκκινο αυλάκι περίγραμμα-δεξιά (πλάτος, στυλ, χρώμα) Συνδυάζει όλες τις παραπάνω ιδιότητες για το δεξί περίγραμμα.
ΠΑΡΑΔΕΙΓΜΑ: περίγραμμα-δεξιά: 5pt ματζέντα συμπαγές περίγραμμα-αριστερά (πλάτος, στυλ, χρώμα) Συνδυάζει όλες τις παραπάνω ιδιότητες για το αριστερό περίγραμμα.
ΠΑΡΑΔΕΙΓΜΑ: περίγραμμα-αριστερά: 15 τμχ κοραλλί ένθετο περίγραμμα-κάτω μέρος (πλάτος, στυλ, χρώμα) Συνδυάζει όλες τις παραπάνω ιδιότητες για το αριστερό περίγραμμα.
ΠΑΡΑΔΕΙΓΜΑ:border-bottom: 30 πορτοκαλί αρχικό περίγραμμα (πλάτος, στυλ, χρώμα) Συνδυάζει όλες τις παραπάνω ιδιότητες.
ΠΑΡΑΔΕΙΓΜΑ: περίγραμμα: μαύρο διπλό πλάτος (μήκος, ποσοστό) Πλάτος στοιχείου
ΠΑΡΑΔΕΙΓΜΑ:πλάτος:10% ύψος (μήκος, ποσοστό) Ύψος στοιχείου
ΠΑΡΑΔΕΙΓΜΑ: ύψος: 100 pt float (αριστερά, δεξιά) Θέση στοιχείου
ΠΑΡΑΔΕΙΓΜΑ:float:right clear (αριστερά, δεξιά, και τα δύο) Η τοποθέτηση άλλων στοιχείων γύρω από αυτό
ΠΑΡΑΔΕΙΓΜΑ:clear:both Ταξινόμηση. εμφάνιση (κανένα-δεν εμφανίζεται, μπλοκ-σπά τη γραμμή πριν και μετά το στοιχείο, inline-δεν σπάει τη γραμμή, στοιχείο λίστας-σπάει τη γραμμή πριν και μετά το στοιχείο + προσθέτει δείκτη όπως στοιχεία λίστας) Καθορίζει τον τρόπο με τον οποίο η λίστα θα εμφανιστεί το στοιχείο
ΠΑΡΑΔΕΙΓΜΑ: εμφάνιση: κανένα λευκό διάστημα (κανονικό - "συμπιέζει" πολλά διαδοχικά κενά σε ένα, προ - επιτρέπει την εμφάνιση πολλών διαδοχικών διαστημάτων, nowrap - δεν επιτρέπει αλλαγές γραμμής χωρίς ετικέτα
) Καθορίζει πώς θα εμφανίζονται τα κενά μεταξύ των στοιχείων
ΠΑΡΑΔΕΙΓΜΑ: λευκό διάστημα:nowrap list-style-type (δίσκος, κύκλος, τετράγωνο, δεκαδικός, κατώτερος-ρωμαϊκός, ανώτερος-ρωμαϊκός, κατώτερος-άλφα ή ανώτερος-άλφα) καθορίζει την εμφάνιση του δείκτη του στοιχείου της λίστας.
ΠΑΡΑΔΕΙΓΜΑ: list-style-type:lower-alpha list-style-image (URL) ορίζει την εμφάνιση του δείκτη του στοιχείου λίστας ως εικόνα
ΠΑΡΑΔΕΙΓΜΑ:list-style-image:URL(cool.gif) list-style-position (inside, out) Καθορίζει τη θέση του δείκτη ανάλογα με το στοιχείο της λίστας
ΠΑΡΑΔΕΙΓΜΑ:list-style-position:inside list-style (τύπος, θέση, εικόνα) Συνδυάζει όλες τις παραπάνω ιδιότητες.
ΠΑΡΑΔΕΙΓΜΑ:list-style:inside
Πρόσθετα
Μέτρα μήκους (Σύνταξη: "+"/"-"ΧΧ μονάδες)ΠΑΡΑΔΕΙΓΜΑ: -566 pt em - ems ύψος του στοιχείου γραμματοσειράς που χρησιμοποιείται ex - x-ύψος πλάτος του γράμματος "x" που χρησιμοποιείται από το στοιχείο γραμματοσειράς px pixel σε ίντσες cm εκατοστά mm χιλιοστά pt σημεία (1pt = 1/72 in) pc picas ( 1pc = 12pt) Μετρήσεις ποσοστού
ΠΑΡΑΔΕΙΓΜΑ: -566% -/+%XX Μείωση/αύξηση ποσοστού. Χρώματα Όνομα χρώματος ΠΑΡΑΔΕΙΓΜΑ: ματζέντα #rrggbb Χρώμα σε RGB, όπου rr,gg,bb είναι δεκαεξαδικός αριθμός.
ΠΑΡΑΔΕΙΓΜΑ: #00cc00 rgb(x,x,x) Χρώμα σε RGB, όπου το "x" είναι ένας δεκαδικός αριθμός από το 0 έως το 255.
ΠΑΡΑΔΕΙΓΜΑ: rgb(0,204,0) #rgb Χρώμα σε RGB, όπου r,g,b είναι δεκαεξαδικός αριθμός.
ΠΑΡΑΔΕΙΓΜΑ: #0c0 rgb (x%,x%,x%) Χρώμα σε RGB, όπου το "x%" είναι ένας αριθμός από 0,0 έως 100,0.
ΠΑΡΑΔΕΙΓΜΑ: rgb(0%,80%,0%)
Μερικά κόλπα διαχείρισης στυλ
Καθορίζοντας απόλυτα μεγέθη γραμματοσειράς, στερείτε από τα άτομα που βλέπουν τις σελίδες σας τη δυνατότητα να αυξάνουν ή να μειώνουν το μέγεθος της γραμματοσειράς χρησιμοποιώντας ένα ειδικό κουμπί στο πρόγραμμα περιήγησης σύμφωνα με την ανάλυση και την όρασή τους. Οι γραμματοσειρές θα εμφανίζονται μόνο στο μέγεθος που καθορίσατε κατά τη σύνταξη της σελίδας.
Επομένως, είναι σκόπιμο να χρησιμοποιείτε ποσοστά μεγέθη για αυτούς τους σκοπούς. Σε αυτήν την περίπτωση, το μέγεθος της γραμματοσειράς θα είναι μικρότερο (μεγαλύτερο) κατά το ποσοστό που καθορίζετε από ό,τι όταν μορφοποιείται χρησιμοποιώντας μια τυπική ετικέτα HTML.
Αυτό γίνεται έτσι ώστε τα παλιά προγράμματα περιήγησης που δεν καταλαβαίνουν την ετικέτα
Αυτό το τέχνασμα σάς επιτρέπει να επικαλύπτετε ένα στρώμα κειμένου πάνω στο άλλο και να έχετε πολύ ενδιαφέροντα και ασυνήθιστα αποτελέσματα.
Ο παρακάτω κώδικας δημιουργεί μια κεφαλίδα που εμφανίζεται 3D χωρίς τη χρήση γραφικών.
Καθορίστε στην περιγραφή στυλ
P (εσοχή κειμένου: 1 cm; )Τώρα οι πρώτες γραμμές κάθε νέας παραγράφου θα εμφανίζονται από την «κόκκινη» γραμμή.
Γεια σας, αγαπητοί αναγνώστες του έργου Anatomy of Business. Ο webmaster Alexander είναι μαζί σας! Στο τελευταίο άρθρο, εξετάσαμε τι είναι τα στυλ CSS και πόσο σημαντικά είναι στον προγραμματισμό WEB.
Είναι προφανές ότι εάν τα στυλ CSS έχουν σημαντικό αντίκτυπο στην εμφάνιση ενός αρχείου HTML, τότε πρέπει να συνδεθούν με κάποιο τρόπο. Σήμερα θα εξετάσουμε τέσσερις βασικούς τρόπους σύνδεσης του στυλ CSS με την HTML.
Ας μην χρονοτριβούμε και ας ξεκινήσουμε!
Συμπεριλαμβανομένου ενός ξεχωριστού αρχείου CSS!
Ένας από τους πιο βολικούς και απλούστερους τρόπους σύνδεσης στυλ είναι να συνδέσετε ένα ξεχωριστό αρχείο με στυλ. Για να το κάνετε αυτό, χρησιμοποιήστε το notepad++ του προγράμματος επεξεργασίας κειμένου (ή οποιοδήποτε άλλο) για να δημιουργήσετε ένα αρχείο με την επέκταση .css και να το τοποθετήσετε στον ίδιο φάκελο με το αρχείο στο οποίο θέλουμε να το τοποθετήσουμε.
Στη συνέχεια, στο αρχείο HTML μεταξύ των ετικετών
δημοσιεύστε τον παρακάτω κώδικα:
Ας δούμε τώρα τι σημαίνει όλο αυτό:
Ο σύνδεσμος # μεταφρασμένος από τα αγγλικά σημαίνει "σύνδεσμος". Με αυτόν τον τρόπο δείχνουμε στο πρόγραμμα περιήγησης ότι αυτό για το οποίο θα μιλήσουμε στη συνέχεια είναι ένας σύνδεσμος. rel= # με αυτό το χαρακτηριστικό δείχνουμε πώς το αρχείο CSS σχετίζεται με το αρχείο HTML. "stylesheet" # δηλαδή ότι το αρχείο CSS είναι ένα επικαλυπτόμενο φύλλο στυλ. type="text/css" # όλα είναι απλά εδώ: αυτό αποτελεί ένδειξη ότι το αρχείο είναι γραμμένο σε μορφή κειμένου και έχει την επέκταση .css href="style.css" # αυτός είναι ένας σύνδεσμος προς ένα αρχείο με στυλ CSS.
Κατά τη γνώμη μου, αυτός είναι ο πιο προτιμώμενος τρόπος για να συμπεριλάβετε στυλ CSS.
Γράφουμε στυλ απευθείας στο αρχείο HTML (πρώτη μέθοδος)
Ο επόμενος τρόπος για να καθορίσετε στυλ CSS είναι να τα γράψετε απευθείας στο έγγραφο HTML. Μοιάζει με αυτό:
Αν δούμε πώς θα εμφανίζεται αυτό το έγγραφο HTML στο πρόγραμμα περιήγησης, θα δούμε ότι το κείμενο μεταξύ των ετικετών έγινε κόκκινος. Και χρησιμοποιώντας το χαρακτηριστικό style, λέμε ότι στη συνέχεια έχουμε παραμέτρους στυλ εμφάνισης. Χρώμαείναι ένας επιλογέας υπεύθυνος για το χρώμα. το κόκκινοείναι η τιμή αυτού του επιλογέα. Με αυτόν τον τρόπο, μπορούμε να επισημάνουμε ορισμένα μέρη του κειμένου με έναν συγκεκριμένο τύπο εμφάνισης.
Τοποθέτηση κλιμακωτών φύλλων στυλ μέσα σε HTML (δεύτερη μέθοδος)
Ένας άλλος τρόπος για να συμπεριλάβετε στυλ CSS είναι να τοποθετήσετε διαδοχικούς πίνακες μέσα στο ίδιο το αρχείο HTML. Κατά τη γνώμη μου, αυτή η μέθοδος δεν είναι η πιο βολική, επειδή χρησιμοποιώντας την, η ανάλυση του κώδικα του ιστότοπου δεν γίνεται πολύ βολική. Για να ξεκινήσετε να γράφετε στυλ CSS, χρειάζεται απλώς να εισαγάγετε ετικέτες στο αρχείο HTML . Στην πράξη μοιάζει με αυτό:
Ακολουθεί ένα παράδειγμα: εμφάνιση στυλ CSS σε ένα έγγραφο HTML
Σημειώστε ότι μέσα στην ετικέτα γράφουμε επίσης κώδικα σύμφωνα με τους κανόνες CSS, χρησιμοποιώντας σγουρά τιράντες. Σε επόμενα άρθρα θα μιλήσω πιο αναλυτικά για τους κανόνες σύνταξης στο CSS.
Σύνδεση πολλών αρχείων CSS σε ένα έγγραφο HTML.
Οι κανόνες HTML επιτρέπουν τη συμπερίληψη πολλαπλών αρχείων CSS ταυτόχρονα. Πολλοί webmasters χρησιμοποιούν αυτό: δημιουργούν ξεχωριστά αρχεία CSS για κείμενο και εικόνες. Ή ξεχωριστά αρχεία για την κεφαλίδα, το υποσέλιδο και το κύριο σώμα της σελίδας. Ας δούμε πώς να το εφαρμόσουμε αυτό.
Δημιουργούμε πολλά αρχεία στυλ CSS. Αφήστε τα ονόματά τους να είναι style-1.css και style-2.css. Το τοποθετούμε, όπως στη μέθοδο νούμερο ένα, στον ίδιο φάκελο με το αρχείο HTML.
Ακολουθεί ένα παράδειγμα: εμφάνιση στυλ CSS σε ένα έγγραφο HTML
Όλα είναι παρόμοια με την πρώτη μέθοδο, μόνο σε αυτήν την περίπτωση υποδεικνύουμε συνδέσμους σε δύο αρχεία ταυτόχρονα.
Σύνδεση με το αρχείο CSS μέσα σε αρχείο του ίδιου τύπου.
Εκτός από όλες τις παραπάνω μεθόδους, υπάρχει μια μέθοδος που σας επιτρέπει να τοποθετήσετε συνδέσμους με πολλούς άλλους μέσα σε ένα αρχείο CSS!
Αυτό υλοποιείται ως εξής:
Αρχικά, πρέπει να συνδέσουμε τουλάχιστον ένα αρχείο CSS στον κώδικά σας με τον ίδιο τρόπο.
Δεύτερον, εισαγάγετε τον ακόλουθο κώδικα στο ήδη συνδεδεμένο αρχείο:
@import url("style-2.css");
Αυτή η γραμμή περιλαμβάνει ένα επιπλέον αρχείο CSS στο αρχείο μας. Εάν αντιμετωπίζετε δυσκολίες στη σύνδεση του CSS, μπορείτε να τους ρωτήσετε στα σχόλια.
Όπως μάθαμε από τα δύο προηγούμενα μαθήματα, η τεχνολογία CSS είναι ένα ισχυρό εργαλείο που κάθε webmaster πρέπει να κατέχει! Για να βελτιώσω την αφομοίωση του υλικού, αποφάσισα να προσθέσω ένα εκπαιδευτικό βίντεο + τεστ στο τέλος κάθε μαθήματος για να ενοποιήσω τις πληροφορίες που έλαβα.
Δοκιμή στερέωσης υλικού:
Πρέπει να συμπεριλάβουμε το αρχείο CSS τοποθετώντας έναν σύνδεσμο προς αυτό στο αρχείο HTML. Ποια από τις παρακάτω μεθόδους είναι σωστή;
Επιλογή 1:
Επιλογή 2:
Επιλογή 3:
Επιλογή 4:
Μπορούμε να τοποθετήσουμε καταρράκτες CSS απευθείας στο αρχείο HTML;
Τα φύλλα στυλ μπορούν να προστεθούν σε μια ιστοσελίδα με τρεις διαφορετικούς τρόπους, οι οποίοι διαφέρουν ως προς τις δυνατότητές τους.
Σχετικά φύλλα στυλ
Ο πιο ισχυρός και βολικός τρόπος για να ορίσετε στυλ και κανόνες για έναν ιστότοπο. Τα στυλ αποθηκεύονται σε ξεχωριστό αρχείο που μπορεί να χρησιμοποιηθεί για οποιαδήποτε ιστοσελίδα. Για να συνδέσετε έναν πίνακα σχετικών στυλ, χρησιμοποιήστε την ετικέτα στον τίτλο της σελίδας (παράδειγμα 1).
Παράδειγμα 1: Σύνδεση συνδεδεμένου φύλλου στυλ
Γειά σου Κόσμε!
Η διαδρομή προς το αρχείο στυλ μπορεί να είναι σχετική ή απόλυτη, όπως φαίνεται σε αυτό το παράδειγμα.
Πλεονεκτήματα αυτής της μεθόδου
- Ένα αρχείο στυλ χρησιμοποιείται για οποιονδήποτε αριθμό ιστοσελίδων, είναι επίσης δυνατή η χρήση του σε άλλους ιστότοπους.
- Μπορείτε να αλλάξετε το φύλλο στυλ χωρίς να τροποποιήσετε τις ιστοσελίδες.
- Όταν αλλάζετε το στυλ σε ένα μόνο αρχείο, το στυλ εφαρμόζεται αυτόματα σε όλες τις σελίδες όπου υπάρχει σύνδεσμος προς αυτό. Αναμφίβολα βολικό. Καθορίζουμε το μέγεθος της γραμματοσειράς σε ένα μόνο σημείο και αλλάζει και στις εκατοντάδες ή περισσότερες ιστοσελίδες του ιστότοπού μας.
- Όταν φορτωθεί για πρώτη φορά το αρχείο στυλ, αποθηκεύεται προσωρινά στον τοπικό σας υπολογιστή, ξεχωριστά από τις ιστοσελίδες, ώστε ο ιστότοπος να φορτώνει πιο γρήγορα.
Παγκόσμια φύλλα στυλ
Το στυλ ορίζεται στο ίδιο το έγγραφο και συνήθως βρίσκεται στην κεφαλή της ιστοσελίδας. Όσον αφορά την ευελιξία και τις δυνατότητες, αυτή η μέθοδος χρήσης στυλ είναι κατώτερη από την προηγούμενη, αλλά σας επιτρέπει επίσης να τοποθετήσετε όλα τα στυλ σε ένα μέρος. Σε αυτήν την περίπτωση, ακριβώς στο σώμα του εγγράφου. Ο ορισμός του στυλ καθορίζεται από την ετικέτα
Γειά σου Κόσμε!
Αυτό το παράδειγμα δείχνει την αλλαγή του στυλ κεφαλίδας
. Σε μια ιστοσελίδα, τώρα χρειάζεται μόνο να καθορίσετε αυτήν την ετικέτα και τα στυλ θα προστεθούν αυτόματα σε αυτήν.
Εσωτερικά στυλ
Τα ενσωματωμένα στυλ είναι ουσιαστικά μια επέκταση σε μια μεμονωμένη ετικέτα που χρησιμοποιείται σε μια ιστοσελίδα. Το χαρακτηριστικό style χρησιμοποιείται για τον ορισμό ενός στυλ και οι τιμές του καθορίζονται χρησιμοποιώντας μια γλώσσα φύλλου στυλ (παράδειγμα 3).
Παράδειγμα 3: Χρήση εσωτερικών στυλ
Γειά σου Κόσμε!
Συνιστάται να χρησιμοποιείτε εσωτερικό στυλ για μεμονωμένες ετικέτες ή να μην το χρησιμοποιείτε καθόλου, καθώς η αλλαγή ενός αριθμού στοιχείων καθίσταται προβληματική. Τα εσωτερικά στυλ δεν αντιστοιχούν στην ιδεολογία ενός δομικού εγγράφου όταν το περιεχόμενο και ο σχεδιασμός του διαχωρίζονται.
Όλες οι περιγραφόμενες μέθοδοι χρήσης CSS μπορούν να χρησιμοποιηθούν είτε ανεξάρτητα είτε σε συνδυασμό μεταξύ τους. Σε αυτή την περίπτωση, είναι απαραίτητο να θυμάστε την ιεραρχία τους. Το εσωτερικό στυλ εφαρμόζεται πάντα πρώτα, μετά το καθολικό φύλλο στυλ και τελευταίο το σχετικό φύλλο στυλ. Το Παράδειγμα 4 χρησιμοποιεί δύο μεθόδους για την προσθήκη φύλλων στυλ σε ένα έγγραφο.
Παράδειγμα 4. Συνδυασμός μεθόδων σύνδεσης διαφορετικών στυλ
Γειά σου Κόσμε!
Γειά σου Κόσμε!
Στο παραπάνω παράδειγμα, η πρώτη επικεφαλίδα έχει οριστεί σε 36 εικονοστοιχεία κόκκινο και η επόμενη έχει οριστεί σε πράσινο και διαφορετική γραμματοσειρά.
Το CSS σημαίνει "Cascading Style Sheets", που σημαίνει "Cascading Style Sheets". Χρησιμοποιείται για το σχεδιασμό ιστοσελίδων. Εάν ο κώδικας HTML περιέχει το περιεχόμενο (τι θα εμφανίσει το πρόγραμμα περιήγησης), τότε το CSS καθορίζει τον σχεδιασμό του (πώς θα το εμφανίσει το πρόγραμμα περιήγησης). Η ομορφιά του CSS είναι ότι με τη βοήθεια ενός στυλ μπορείτε να σχεδιάσετε όλα τα ίδια είδη στοιχείων μιας σελίδας ή ενός ολόκληρου ιστότοπου (όλα τα links, παραγράφους, λίστες ταυτόχρονα). Με ένα στυλ CSS, ορίζετε μία φορά πώς θα πρέπει να φαίνεται ένα συγκεκριμένο στοιχείο, για παράδειγμα, οι εικόνες, και αλλάζουν τη σχεδίασή τους σε όλα τα έγγραφα ταυτόχρονα. Για να αλλάξετε τη μορφοποίηση κειμένου σε ολόκληρο τον ιστότοπό σας, χρειάζεται να αλλάξετε μόνο μία φορά τον κώδικα CSS.
Βασικά στοιχεία CSS
Ακριβώς όπως η HTML αποτελείται από ετικέτες, χαρακτηριστικά και τιμές, το CSS αποτελείται από τα δικά του στοιχεία. Η ουσία των δομών CSS μπορεί να εξηγηθεί ως εξής: «Προσδιορίστε ποιο στοιχείο σελίδας θα διαμορφωθεί και καθορίστε πώς να το στυλίσετε». Εδώ είναι τα δομικά στοιχεία του CSS.
- Εκλέκτορας. Ένα αναγνωριστικό που λέει στο πρόγραμμα περιήγησης σε ποιο στοιχείο σελίδας να εφαρμόσει το σχέδιο. Χάρη σε αυτό, το πρόγραμμα περιήγησης "καταλαβαίνει" ότι το στυλ προορίζεται, για παράδειγμα, να σχεδιάζει λίστες ή πίνακες.
- Μπλοκ δήλωσης στυλ. Είναι γραμμένο μετά τον επιλογέα και περικλείεται σε σγουρά σιδεράκια. Καθορίζει το στυλ του στοιχείου (το σχέδιο του). Το μπλοκ δήλωσης στυλ αποτελείται από δύο μέρη.
- Ιδιοκτησία. Ένα ανάλογο ενός χαρακτηριστικού σε HTML. Καθορίζει ποια ιδιότητα εμφάνισης θα αλλάξει.
- Εννοια. Καθορίζεται σε μια ιδιότητα μέσω άνω και κάτω τελείας και καθορίζει ακριβώς πώς θα αλλάξει η ιδιότητα.
Μπορεί να υπάρχουν πολλές ιδιότητες και τιμές σε ένα μπλοκ δήλωσης στυλ, οπότε παρατίθενται διαχωρισμένα με ερωτηματικό.
Τύποι επιλογέα
Ανάλογα με τις ιδιότητες των στοιχείων σελίδας που ορίζουν, οι επιλογείς διατίθενται σε διαφορετικούς τύπους.
- Παγκόσμιος. Ορίζει κανόνες για όλα τα στοιχεία σελίδας που δεν έχουν άλλους κανόνες.
Κωδικός * (μέγεθος γραμματοσειράς: 14 px;)ορίζει το μέγεθος γραμματοσειράς σε 14 pixel για όλα τα στοιχεία του εγγράφου για τα οποία δεν καθορίζονται άλλοι κανόνες χρησιμοποιώντας άλλους επιλογείς. - Tega. Αυτός ο τύπος επιλογέα καθορίζει κανόνες μορφοποίησης για το περιεχόμενο μιας συγκεκριμένης ετικέτας HTML. Το όνομα του επιλογέα είναι το ίδιο με το όνομα του περιγραφέα, γραμμένο μόνο χωρίς αγκύλες: Π, h1, ul.
Για παράδειγμα, κωδικός h2 (χρώμα: κόκκινο;)ορίζει το χρώμα του κειμένου σε πράσινο για όλες τις επικεφαλίδες δεύτερου επιπέδου, δηλαδή τα περιεχόμενα των ετικετών . - Χαρακτηριστικό. Χρησιμοποιώντας αυτήν την ομάδα επιλογέων, μπορείτε να προσδιορίσετε το στυλ του περιεχομένου όλων των ετικετών που έχουν καθορισμένο συγκεκριμένο χαρακτηριστικό. Οι επιλογείς μπορούν να καθοριστούν με μεγαλύτερη ακρίβεια καθορίζοντας όχι μόνο το όνομα του χαρακτηριστικού, αλλά και την τιμή που του έχει εκχωρηθεί, καθώς και το όνομα της ετικέτας που το περιέχει. Αυτό μπορεί να χρησιμοποιηθεί για να κάνει το σχέδιο πιο ξεχωριστό.
- τάξη. Ένας τύπος επιλογέων για όταν χρειάζεται να μορφοποιήσετε διαφορετικά τα περιεχόμενα ετικετών του ίδιου τύπου. Για παράδειγμα, θέλετε να κάνετε τους συνδέσμους στο κάτω μέρος του ιστότοπου κόκκινους, ενώ όλοι οι άλλοι θα πρέπει να παραμείνουν μπλε, όπως ήταν. Για να εφαρμόσετε κανόνες κλάσης σε ένα στοιχείο τοποθεσίας, πρέπει να καθορίσετε το όνομα της κλάσης στο χαρακτηριστικό τάξητην αντίστοιχη ετικέτα.
Ας πούμε χρησιμοποιώντας την τάξη βήμαΤα μεμονωμένα στοιχεία πρέπει να έχουν ένα αριστερό περιθώριο 15 pixel.
Ο κώδικας CSS θα είναι ως εξής:
Βήμα (περιθώριο-αριστερά: 15 px;)
Ο κώδικας HTML που θα συνδέσει το στοιχείο με τον κανόνα θα είναι:
Κείμενο με εσοχή
- ταυτότητα. Χρησιμοποιείται σε συνδυασμό με το χαρακτηριστικό ταυτότηταΗ ετικέτα HTML και χρησιμοποιείται όταν πρέπει να οριστούν ιδιότητες για ένα μόνο στοιχείο. Σε αντίθεση με έναν επιλογέα κλάσης, του οποίου το όνομα προηγείται από μια τελεία, γράφεται χρησιμοποιώντας έναν κατακερματισμό:
#exclusive (χρώμα:πορτοκαλί;)
- Συναφής. Στην HTML, ορισμένες ετικέτες εμφανίζονται συχνά σε άλλες και οι επιλογείς συμφραζομένων βοηθούν στον καθορισμό κανόνων για μια τέτοια περίπτωση. Για παράδειγμα, μπορείτε να τα χρησιμοποιήσετε για να μορφοποιήσετε στοιχεία μέσα σε αριθμημένες λίστες ή πλάγια κείμενο μέσα σε παραγράφους:
P i (fint-family: Century;)
Οι υπόλοιπες ομάδες επιλογέων βασίζονται σε συνδυασμό των αναφερόμενων τύπων, καθώς και στην αρχή της κληρονομικότητας, όταν ένα θυγατρικό στοιχείο παίρνει τις ιδιότητες του γονέα του.
Ο συνδυασμός και η ομαδοποίηση επιλογέων είναι βολικός σε πολλές περιπτώσεις. Για παράδειγμα, για να ορίσετε κανόνες τάξης βήμαμόνο για συνδέσμους, πρέπει να καθορίσετε και τους δύο επιλογείς χωρισμένους με μια τελεία (πρώτα την ετικέτα και μετά την κλάση):
A.step (περιθώριο-αριστερά: 15 px;)
Πώς να συμπεριλάβετε το CSS σε μια σελίδα HTML;
Υπάρχουν διάφοροι τρόποι για να κάνετε τα εργαλεία δημιουργίας ιστοτόπων να αλληλεπιδρούν μεταξύ τους. Με βάση τη μέθοδο προσθήκης, τα στυλ χωρίζονται στις ακόλουθες κατηγορίες.
Ενσωματωμένα στυλ
Ορίστε στο έγγραφο απευθείας μέσα στην ετικέτα HTML χρησιμοποιώντας το χαρακτηριστικό στυλ. Έχετε την υψηλότερη προτεραιότητα. Αυτό σημαίνει ότι εάν οριστεί διαφορετικό σχέδιο για το ίδιο στοιχείο, τότε θα δοθεί προτίμηση στον κανόνα που είναι γραμμένος μέσα στην ετικέτα. Ο επιλογέας για το ενσωματωμένο στυλ δεν χρειάζεται, καθώς η σύνδεση μεταξύ του στυλ και της ετικέτας είναι προφανής - ο σχεδιασμός της ετικέτας καθορίζεται σε αυτό.
Ο παρακάτω κώδικας ορίζει το μέγεθος και το χρώμα της γραμματοσειράς για το κείμενο μέσα στην ετικέτα
Μορφοποίηση κειμένου με χρήση εσωτερικού στυλ.
Παγκόσμια στυλ
Ορισμός ανά ετικέτα …