CSS (Cascading Style Sheets)είναι μια γλώσσα φύλλου στυλ που επιτρέπει το στυλ (όπως γραμματοσειρές και χρώμα) να προσαρτάται σε δομημένα έγγραφα (όπως έγγραφα HTML και εφαρμογές XML). Συνήθως, τα στυλ CSS χρησιμοποιούνται για τη δημιουργία και την αλλαγή του στυλ των στοιχείων ιστοσελίδας και διεπαφές χρήστηΓραμμένο σε Γλώσσες HTMLκαι XHTML, αλλά μπορεί επίσης να εφαρμοστεί σε οποιοδήποτε είδος εγγράφου XML, συμπεριλαμβανομένων των XML, SVG και XUL. Διαχωρίζοντας το στυλ παρουσίασης των εγγράφων από το περιεχόμενο των εγγράφων, το CSS διευκολύνει τη δημιουργία ιστοσελίδων και τη συντήρηση τοποθεσιών.

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

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

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

Ρύζι. 1. Δομή διαφήμισης

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

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

1. Είδη φύλλα στυλ

1.1. Εξωτερικό φύλλο στυλ

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

Μπορείτε να επισυνάψετε πολλά φύλλα στυλ σε κάθε ιστοσελίδα προσθέτοντας πολλές ετικέτες στη σειρά , προσδιορίζοντας τον σκοπό αυτού του φύλλου στυλ στο χαρακτηριστικό ετικέτας πολυμέσων. Το rel="stylesheet" υποδεικνύει τον τύπο του συνδέσμου (σύνδεσμος σε φύλλο στυλ).

Το χαρακτηριστικό type="text/css" δεν απαιτείται από το πρότυπο HTML5, επομένως μπορεί να παραλειφθεί. Εάν το χαρακτηριστικό λείπει, έχει οριστεί από προεπιλογή type="text/css" .

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

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

...

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

Όταν γράφουμε ενσωματωμένα στυλ, γράφουμε τον κώδικα CSS στο αρχείο HTML, απευθείας μέσα στην ετικέτα στοιχείου χρησιμοποιώντας το χαρακτηριστικό style:

Δώστε προσοχή σε αυτό το κείμενο.

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

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 επιτρέπει τη μορφοποίηση έναςσυγκεκριμένο στοιχείο. Η τιμή αναγνωριστικού πρέπει να είναι μοναδική, μπορεί να εμφανίζεται μόνο μία φορά σε μία σελίδα και πρέπει να περιέχει τουλάχιστον έναν χαρακτήρα. Η τιμή δεν πρέπει να περιέχει κενά.

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

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

#sidebar (πλάτος: 300 px; float: αριστερά; )

2.5. Επιλογέας απογόνων

Οι επιλογείς απόγονος εφαρμόζουν στυλ σε στοιχεία που βρίσκονται μέσα σε ένα στοιχείο κοντέινερ. Για παράδειγμα, το ul li (μετατροπή κειμένου: κεφαλαία;) θα επιλέξει όλα τα στοιχεία li που είναι παιδιά όλων των στοιχείων ul.

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

p.first a (χρώμα: πράσινο;) - δεδομένο στυλθα εφαρμοστεί σε όλους τους συνδέσμους, απόγονους της παραγράφου με την τάξη πρώτα .

p .first a (χρώμα: πράσινο;) - εάν προσθέσετε ένα κενό, τότε θα διαμορφωθούν οι σύνδεσμοι που βρίσκονται μέσα σε οποιαδήποτε ετικέτα .first class που είναι θυγατρική του στοιχείου

Πρώτα a (χρώμα: πράσινο;) - αυτό το στυλ θα εφαρμοστεί σε οποιονδήποτε σύνδεσμο βρίσκεται μέσα σε άλλο στοιχείο, που συμβολίζεται με την κλάση .first.

2.6. Παιδικός επιλογέας

Ένα θυγατρικό στοιχείο είναι ένα άμεσο παιδί του στοιχείου που περιέχει. Ένα στοιχείο μπορεί να έχει πολλαπλά θυγατρικά στοιχεία και κάθε στοιχείο μπορεί να έχει μόνο ένα γονικό στοιχείο. Ο θυγατρικός επιλογέας επιτρέπει την εφαρμογή στυλ μόνο εάν το θυγατρικό στοιχείο έρχεται αμέσως μετά το γονικό στοιχείο και δεν υπάρχουν άλλα στοιχεία ενδιάμεσα, δηλαδή το θυγατρικό στοιχείο δεν είναι ένθετο σε τίποτα άλλο.
Για παράδειγμα, το p > strong θα επιλέξει όλα τα ισχυρά στοιχεία που είναι παιδιά του στοιχείου p.

2.7. Αδελφή επιλογέας

Οι αδελφικές σχέσεις συμβαίνουν μεταξύ στοιχείων που έχουν κοινό γονέα. Οι επιλογείς αδελφικών στοιχείων σάς επιτρέπουν να επιλέξετε στοιχεία από μια ομάδα αδελφικών στοιχείων.

h1 + p - επιλέγει όλες τις πρώτες παραγράφους αμέσως μετά από οποιαδήποτε ετικέτα

χωρίς να επηρεάζονται οι υπόλοιπες παραγράφοι.

Το h1 ~ p θα επιλέξει όλες τις παραγράφους που είναι αδελφές οποιασδήποτε επικεφαλίδας h1 και αμέσως μετά από αυτήν.

2.8. Επιλογέας χαρακτηριστικών

Οι επιλογείς χαρακτηριστικών επιλέγουν στοιχεία με βάση το όνομα του χαρακτηριστικού ή την τιμή του χαρακτηριστικού:

[χαρακτηριστικό] - όλα τα στοιχεία που περιέχουν το καθορισμένο χαρακτηριστικό, - όλα τα στοιχεία για τα οποία έχει οριστεί το χαρακτηριστικό alt.

Selector[attribute] - στοιχεία αυτού του τύπου που περιέχουν το καθορισμένο χαρακτηριστικό, 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 - οποιοδήποτε στοιχείο που τοποθετείται πάνω από τον κέρσορα του ποντικιού.

:focus - ένα διαδραστικό στοιχείο στο οποίο πλοηγήθηκε με το πληκτρολόγιο ή ενεργοποιήθηκε με το ποντίκι.

:active - το στοιχείο που ενεργοποιήθηκε από τον χρήστη.

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

:invalid - πεδία φόρμας των οποίων το περιεχόμενο δεν ταιριάζει με τον καθορισμένο τύπο δεδομένων.

:enabled - όλα τα ενεργά πεδία φόρμας.

: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 (βάρος γραμματοσειράς: έντονη γραφή!important;) . Ο κανόνας πρέπει να τοποθετείται στο τέλος της δήλωσης πριν από την αγκύλη κλεισίματος, χωρίς κενό. Μια τέτοια δήλωση θα υπερισχύει όλων των άλλων κανόνων. Αυτός ο κανόνας σάς επιτρέπει να ακυρώσετε την τιμή μιας ιδιότητας και να ορίσετε μια νέα για ένα στοιχείο από μια ομάδα στοιχείων στην περίπτωση που δεν υπάρχει άμεση πρόσβαση στο αρχείο στυλ.

Ιδιαιτερότητα

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

0, 1, 0, 0 προστίθεται για id.
για την κλάση 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 να σας βοηθήσει να κατανοήσετε τι χρειάζεστε για να ξεκινήσετε. Θα απαντήσουμε σε ερωτήσεις όπως: Πώς μπορώ να κάνω το κείμενό μου μαύρο ή κόκκινο; Πώς να κάνετε το περιεχόμενο να εμφανίζεται σε ένα συγκεκριμένο σημείο στην οθόνη; Πώς να διακοσμήσω την ιστοσελίδα μου με εικόνες φόντουκαι λουλουδια?

Τι είναι λοιπόν το CSS;

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

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

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

Ωστόσο, πρέπει να εφαρμόσουμε CSS στο έγγραφό μας HTML. Διαφορετικά, το στυλ CSS δεν θα επηρεάσει τον τρόπο με τον οποίο το πρόγραμμα περιήγησής σας αποδίδει το έγγραφο HTML. (Εάν δεν παρακολουθείτε το έργο μας, διαβάστε το Working with Files και HTML Basics για να μάθετε τι πρέπει να κάνετε πρώτα.)

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

Εάν το κείμενο της παραγράφου σας είναι τώρα κόκκινο, συγχαρητήρια! Γράψατε το πρώτο σας επιτυχημένο CSS!

Ανατομία ενός συνόλου κανόνων CSS

Ας ρίξουμε μια ματιά στο παραπάνω CSS λίγο πιο αναλυτικά:

Όλη η δομή ονομάζεται κανόνες(αλλά συχνά «κυβερνούν» για συντομία). Σημειώστε επίσης τα ονόματα των επιμέρους τμημάτων:

Επιλογέας Το όνομα του στοιχείου HTML στην αρχή του συνόλου κανόνων. Επιλέγει τα στοιχεία για να εφαρμόσει το στυλ (σε αυτήν την περίπτωση, τα στοιχεία p). Για να διαμορφώσετε ένα άλλο στοιχείο, απλώς αλλάξτε τον επιλογέα. Δήλωση Ένας μεμονωμένος κανόνας, όπως χρώμα: κόκκινο; υποδεικνύει ποια από ιδιότητεςτο στοιχείο που θέλετε να δώσετε στυλ. Ιδιότητες Οι τρόποι με τους οποίους μπορείτε να διαμορφώσετε ένα συγκεκριμένο στοιχείο HTML (σε αυτήν την περίπτωση, το χρώμα είναι μια ιδιότητα για στοιχεία που ορίζουν μια παράγραφο κειμένου.">

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

Προσέξτε τα σημαντικά μέρη της σύνταξης:

• Κάθε σύνολο κανόνων (εκτός από τον επιλογέα) πρέπει να είναι τυλιγμένο σε σγουρά σιδεράκια (()).
• Πρέπει να χρησιμοποιήσετε άνω και κάτω τελεία (:) σε κάθε δήλωση για να διαχωρίσετε την ιδιότητα από τις τιμές της.
• Σε κάθε σύνολο κανόνων, πρέπει να χρησιμοποιήσετε ένα ερωτηματικό (;) για να διαχωρίσετε κάθε δήλωση από την επόμενη.

Έτσι, για να αλλάξετε πολλές τιμές ιδιοτήτων ταυτόχρονα, πρέπει απλώς να τις γράψετε διαχωρισμένες με ερωτηματικά, όπως:

P (χρώμα: κόκκινο, πλάτος: 500 px, περίγραμμα: 1 px συμπαγές μαύρο; )

Επιλογή πολλαπλών στοιχείων

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

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

Διαφορετικοί τύποι επιλογέων

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

Όνομα επιλογέα	Τι επιλέγει	Παράδειγμα
Επιλογέας στοιχείων (μερικές φορές ονομάζεται επιλογέας ετικέτας ή τύπου)	Όλα τα στοιχεία HTML του καθορισμένου τύπου.	Π επιλέγει
Επιλογέας ταυτότητας	Το στοιχείο στη σελίδα με το καθορισμένο αναγνωριστικό (σε μία σελίδα HTML, μπορεί να υπάρχει μόνο ένα στοιχείο με οποιοδήποτε αναγνωριστικό).	#η ταυτότητά μου επιλέγει Ή
επιλογέας τάξης	Στοιχείο(α) στη σελίδα με την καθορισμένη κλάση (πολλά στιγμιότυπα της κλάσης μπορούν να δηλωθούν στη σελίδα).	.η τάξη μου επιλέγει Και
Επιλογέας χαρακτηριστικών	Τα στοιχεία στη σελίδα με το καθορισμένο χαρακτηριστικό.	img επιλέγει αλλά όχι
Ψευδοεπιλογέας κλάσης	Τα καθορισμένα στοιχεία, αλλά μόνο εάν παρουσιαστεί μια συγκεκριμένη κατάσταση, όπως αιώρηση.	α: αιώρηση επιλέγει , αλλά μόνο όταν ο δείκτης του ποντικιού βρίσκεται πάνω από τη σύνδεση.

Γραμματοσειρές και κείμενο

Τώρα που καλύψαμε ορισμένα βασικά στοιχεία του CSS, ας προσθέσουμε μερικούς ακόμη κανόνες και πληροφορίες στο αρχείο style.css για να κάνουμε το παράδειγμά μας να φαίνεται ωραίο. Πρώτα απ 'όλα, ας κάνουμε τις γραμματοσειρές και το κείμενό μας να φαίνονται λίγο καλύτερα.

1. Πρώτα απ 'όλα, επιστρέψτε και βρείτε αυτό που έχετε ήδη αποθηκεύσει κάπου. Προσθέστε ένα στοιχείο κάπου μέσα στην κεφαλίδα του index.html σας (και πάλι, οπουδήποτε ανάμεσα στις ετικέτες και). Θα μοιάζει κάπως έτσι:
2. Στη συνέχεια, διαγράψτε τον υπάρχοντα κανόνα στο αρχείο style.css. Αυτό ήταν καλό τεστ, αλλά το κόκκινο κείμενο δεν φαίνεται πραγματικά καλό.
3. Προσθέστε τις ακόλουθες γραμμές σε Σωστό μέρος, αντικαθιστώντας τη συμβολοσειρά κράτησης θέσης με την πραγματική συμβολοσειρά οικογένειας γραμματοσειρών που λάβατε από το Google Fonts. (Font-family σημαίνει απλώς ποιες γραμματοσειρές θέλετε να χρησιμοποιήσετε για το κείμενό σας). Αυτός ο κανόνας ορίζει την καθολική βασική γραμματοσειρά και το μέγεθος γραμματοσειράς για ολόκληρη τη σελίδα (επειδή είναι ο γονέας ολόκληρης της σελίδας και όλα τα στοιχεία μέσα σε αυτήν κληρονομούν το ίδιο μέγεθος γραμματοσειράς και οικογένεια γραμματοσειράς): html ( μέγεθος γραμματοσειράς: 10 px; /* px σημαίνει "pixels": η βασική γραμματοσειρά θα έχει ύψος 10 pixel * / γραμματοσειρά -οικογένεια: σύμβολο κράτησης θέσης: αυτό πρέπει να είναι το όνομα της γραμματοσειράς από τις γραμματοσειρές Google )

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

4. Τώρα θα ορίσουμε το μέγεθος γραμματοσειράς για στοιχεία που περιέχουν κείμενο μέσα στο σώμα HTML (

   , και ορίζει μια παράγραφο κειμένου.">

   ). Θα κεντράρουμε επίσης το κείμενο της επικεφαλίδας μας και θα ορίσουμε λίγο ύψος γραμμής και διάστιχο στο σώμα του εγγράφου για να το κάνουμε λίγο πιο ευανάγνωστο: h1 (μέγεθος γραμματοσειράς: 60 px; στοίχιση κειμένου: κέντρο; ) p, li (μέγεθος γραμματοσειράς: 16 εικονοστοιχεία, ύψος γραμμής: 2, διάστιχο: 1 εικονοστοιχεία; )

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

Μπλοκ, μπλοκ και άλλα μπλοκ

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

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

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

Σε αυτή την ενότητα χρησιμοποιούμε επίσης:

• πλάτος (πλάτος στοιχείου)
• φόντο-χρώμα , το χρώμα πίσω από το περιεχόμενο και τα στοιχεία padding
• χρώμα , το χρώμα του περιεχομένου του στοιχείου (συνήθως κείμενο)
• text-shadow: ορίζει μια σκιά στο κείμενο μέσα σε ένα στοιχείο
• εμφάνιση: ορίζει τη λειτουργία εμφάνισης του στοιχείου (μην ανησυχείτε για αυτό προς το παρόν)

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

Αλλαγή χρώματος σελίδας

html (χρώμα φόντου: #00539F; )

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

Η ενασχόληση με το σώμα

σώμα (πλάτος: 600 εικονοστοιχεία, περιθώριο: 0 αυτόματο, χρώμα φόντου: #FF9500, επένδυση: 0 20 εικονοστοιχεία 20 εικονοστοιχεία 20 εικονοστοιχεία, περίγραμμα: 5 εικονοστοιχεία συμπαγές μαύρο; )

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

• πλάτος: 600 px - αναγκάζει το σώμα να έχει πάντα πλάτος 600 pixel.
• περιθώριο: 0 αυτόματο; - όταν ορίζετε δύο τιμές για ιδιότητες όπως το περιθώριο ή το padding, η πρώτη τιμή του στοιχείου επηρεάζει την κορυφή καικάτω πλευρά (τα κάνει 0 σε αυτή την περίπτωση) και τη δεύτερη τιμή προς τα αριστερά καιτη δεξιά πλευρά (εδώ, το auto είναι μια ειδική τιμή που διαιρεί τον διαθέσιμο χώρο οριζόντια εξίσου αριστερά και δεξιά). Μπορείτε επίσης να χρησιμοποιήσετε μία, τρεις ή τέσσερις τιμές όπως περιγράφεται.
• χρώμα φόντου: #FF9500; - όπως και πριν, ορίζει το χρώμα φόντου του στοιχείου. Χρησιμοποίησα ένα κοκκινωπό πορτοκαλί για το σώμα, σε αντίθεση με το σκούρο μπλε για το ). Όλα τα άλλα στοιχεία πρέπει να είναι παιδιά αυτού του στοιχείου."> στοιχείο, αλλά μη διστάσετε να πειραματιστείτε.
• padding: 0 20px 20px 20px; - Έχουμε τέσσερις τιμές συμπλήρωσης που δίνουν χώρο γύρω από το περιεχόμενό μας. Αυτή τη φορά δεν βάζουμε padding στο επάνω μέρος του σώματος, αλλά 20 px αριστερά, κάτω και δεξιά. Οι τιμές ορίζονται επάνω, δεξιά, κάτω, αριστερά, με αυτή τη σειρά.
• περίγραμμα: 5px συμπαγές μαύρο. - απλώς ορίζει ένα συμπαγές μαύρο περίγραμμα πλάτους 5 εικονοστοιχείων σε όλες τις πλευρές του σώματος.

Τοποθέτηση και διαμόρφωση της κεφαλίδας της αρχικής μας σελίδας

h1 ( περιθώριο: 0, συμπλήρωση: 20 εικονοστοιχεία 0, χρώμα: #00539F, σκιά κειμένου: 3 εικονοστοιχεία 3 εικονοστοιχεία 1 εικονοστοιχεία μαύρο, )

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

(σε σύγκριση με άλλους) ακόμα κι αν δεν έχετε εφαρμόσει καθόλου CSS! Αυτό μπορεί να ακούγεται σαν κακή ιδέα, αλλά θέλουμε μια ιστοσελίδα χωρίς στυλ να έχει βασική αναγνωσιμότητα. Για να απαλλαγούμε από το κενό, παρακάμπτουμε το προεπιλεγμένο στυλ ορίζοντας περιθώριο: 0; .

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

Εδώ, χρησιμοποιήσαμε μια αρκετά ενδιαφέρουσα ιδιότητα, η οποία είναι text-shadow , η οποία εφαρμόζει μια σκιά περιεχόμενο κειμένουστοιχείο. Έχει τις ακόλουθες τέσσερις έννοιες:

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

Και πάλι, δοκιμάστε να πειραματιστείτε με διαφορετικές τιμές για να δείτε τι μπορείτε να καταλήξετε.

Τελευταία ενημέρωση: 21/04/2016

Οποιοδήποτε έγγραφο html, ανεξάρτητα από το πόσα στοιχεία περιέχει, θα είναι ουσιαστικά «νεκρό» χωρίς τη χρήση στυλ. Στυλ ή καλύτερα να πούμε cascading style sheets (Cascading Style Sheets) ή απλά CSS ορίζουν την παρουσίαση του εγγράφου, την εμφάνισή του. Ας ρίξουμε μια γρήγορη ματιά στην εφαρμογή στυλ στο πλαίσιο της HTML5.

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

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

Div(χρώμα φόντου: κόκκινο, πλάτος: 100 εικονοστοιχεία, ύψος: 60 εικονοστοιχεία; )

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

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

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

χρώμα φόντου: κόκκινο;

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

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

Τα σύνολα τέτοιων στυλ ονομάζονται συχνά φύλλα στυλ ή CSS (Cascading Style Sheets ή cascading style sheets). Υπάρχει διάφορους τρόπουςορισμοί στυλ.

χαρακτηριστικό στυλ

Ο πρώτος τρόπος είναι να ενσωματώσετε στυλ απευθείας στο στοιχείο χρησιμοποιώντας το χαρακτηριστικό style:

Στυλ

Υπάρχουν δύο στοιχεία που ορίζονται εδώ - η επικεφαλίδα h2 και το μπλοκ div. Η επικεφαλίδα έχει ένα μπλε χρώμα κειμένου που ορίζεται χρησιμοποιώντας την ιδιότητα χρώματος. Το μπλοκ div έχει ιδιότητες πλάτους (πλάτος), ύψος (ύψος) και ιδιότητες χρώματος φόντου (χρώμα φόντου).

Ο δεύτερος τρόπος είναι να χρησιμοποιήσετε το στοιχείο στυλ στο έγγραφο html. Αυτό το στοιχείο λέει στο πρόγραμμα περιήγησης ότι τα δεδομένα που βρίσκονται μέσα κώδικας css, όχι html:

Στυλ

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

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

Ο δεύτερος τρόπος κάνει κώδικας htmlκαθαρότερο βάζοντας τα στυλ στο στοιχείο στυλ. Υπάρχει όμως και ένας τρίτος τρόπος, ο οποίος είναι να βάλεις τα στυλ σε ένα εξωτερικό αρχείο.

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

H2(χρώμα:μπλε; ) div(πλάτος: 100 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; χρώμα φόντου: κόκκινο; )

Αυτά είναι τα ίδια στυλ που ήταν μέσα στο στοιχείο στυλ. Και επίσης αλλάξτε τον κώδικα της σελίδας html:

Στυλ

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

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

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

Είναι επίσης πιθανό όλες αυτές οι προσεγγίσεις να συνδυάζονται και για ένα στοιχείο, ορισμένες ιδιότητες css να ορίζονται μέσα στο ίδιο το στοιχείο, άλλες ιδιότητες css να ορίζονται μέσα στο στοιχείο στυλ και άλλες να βρίσκονται σε ένα εξωτερικό περιλαμβανόμενο αρχείο. Για παράδειγμα:

Και στο αρχείο στυλ.cssορίζεται το ακόλουθο στυλ:

Div (πλάτος: 50 εικονοστοιχεία, ύψος: 50 εικονοστοιχεία, χρώμα φόντου: κόκκινο, )

Σε αυτήν την περίπτωση, το στοιχείο div έχει μια ιδιότητα πλάτους που ορίζεται σε τρία σημεία, με διαφορετική σημασία. Ποια τιμή θα εφαρμοστεί στο στοιχείο στο τέλος; Εδώ έχουμε το ακόλουθο σύστημα προτεραιότητας:

Εάν το στοιχείο έχει καθορισμένα ενσωματωμένα στυλ, τότε έχουν την υψηλότερη προτεραιότητα, δηλαδή, στο παραπάνω παράδειγμα, το συνολικό πλάτος θα είναι 120 pixel

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

χαρακτηριστικά html και στυλ css

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

Επικύρωση κώδικα CSS

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

Τεχνολογία cssχρησιμοποιείται κυρίως από σχεδιαστές, επειδή δημιουργούν το σχέδιο του ιστότοπου. Ωστόσο, είναι λάθος να υποθέσουμε ότι οι Webmasters cssδεν είναι απαραίτητο να γνωρίζουμε. Αρκεί να θυμηθούμε τουλάχιστον ένα παράδειγμα από την περιγραφή της ενότητας για. Εκτός από τη φορητότητα του ιστότοπού σας, τα φύλλα στυλ σάς επιτρέπουν να δημιουργείτε διάφορες κλασικές σχεδιαστικές λύσεις (για παράδειγμα, ένα αναπτυσσόμενο μενού). Και μαζί με σας επιτρέπουν να δημιουργήσετε δυναμική σελίδες HTML (DHTML), η ομορφιά και η ευκολία των οποίων, κατά καιρούς, είναι απλά εκπληκτικές.

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

Πλήρες μάθημα σε HTML, CSS και διάταξη ιστότοπου:

Αφού διαβάσετε άρθρα σχετικά με τα βασικά του CSS, θα μάθετε:

1) Συντακτικό css.

2) Οι μέθοδοι και οι προτεραιότητες εργασίας τους στυλ css.

3) Ο επιλογέας πληκτρολογεί css.

4) cssπαραβιάσεις του προγράμματος περιήγησης.

5) Κανόνες γραφής css.

6) Πώς να δημιουργήσετε μια συμβουλή εργαλείου στο css.

7) Πώς να αλλάξετε την εμφάνιση του πρώτου γράμματος μέσω css.

8) Πώς να ορίσετε τον τύπο του δρομέα css.

9) Πώς να αλλάξετε την εμφάνιση του δρομέα όταν τοποθετείτε το ποντίκι με css.

10) Πώς να δημιουργήσετε ένα υπομενού στο css.

11) Περί αντικατάστασης ακινήτου ελάχ. πλάτοςσε IE6.

12) Περί εγκυρότητας css.

13) Πώς να ορίσετε το χρώμα των συνδέσμων που έχετε επισκεφτεί.

14) Πώς να ορίσετε μια εσοχή παραγράφου χρησιμοποιώντας css.

15) Πώς να φτιάξετε στρογγυλεμένες γωνίες css.

16) Πώς να τοποθετήσετε την εικόνα σας αντί για δείκτη λίστας css.

17) Πώς να κάνετε το φόντο εικόνα.

18) Πώς να σκουρύνετε το φόντο css.

19) Σε τι ανήκουν οι παιδικοί επιλογείς css.

20) Σε ποιες μονάδες μέτρησης είναι διαθέσιμες css.

21) Πώς να δημιουργήσετε ένα αναδυόμενο παράθυρο συσκότισης.

22) Πώς να φτιάξετε ένα κινούμενο φόντο.

23) Πώς να φτιάξετε ένα όμορφο πεδίο κειμένου.

24) Πώς να αλλάξετε την εικόνα όταν τοποθετείτε τον δείκτη του ποντικιού πάνω της.

25) Σε τι περιλαμβάνονται τα ψευδοστοιχεία css.

26) Τι είναι CSS sprites.

27) Πώς να πατήσετε το υποσέλιδο (υπόγειο) προς τα κάτω css.

28) Πώς να αποτρέψετε την αλλαγή μεγέθους textareaδιά μέσου css.

29) Πώς να σχεδιάσετε ένα τρίγωνο κατά μήκος css.

30) Πώς να χειριστείτε το συμβάν Κάντε κλικδιά μέσου css.

31) Πώς να ρυθμίσετε τον κέρσορα μέσω css.

32) Πώς να δημιουργήσετε ένα οριζόντιο αναπτυσσόμενο μενού στο css.

33) Πώς να χρησιμοποιήσετε μια μη τυπική γραμματοσειρά στον ιστότοπο.

34) Πώς να αλλάξετε το φόντο του κουμπιού επιλογής μέσω css.

35) Μπορώ να χρησιμοποιήσω CSS3.

36) Πώς να φτιάξετε μια σκιά πάνω css.

37) Πώς να ορίσετε χαρακτηριστικά γέμιση κυττάρωνκαι κελιάστο css.

38) Πώς να div με 100% ύψος.

39) Σχετικά με τη συμβατότητα z-δείκτηςκαι παίκτης Youtube.

40) Γιατί είναι κακό να το χρησιμοποιείτε -moz, -Κυρία, - διαδικτυακό κιτκαι άλλα ακίνητα.

41) Να χρησιμοποιήσω Επαναφορά CSS.

42) Πώς να ευθυγραμμίσετε κάθετα τον δείκτη λίστας.

43) Πώς να φτιάξετε μια εκτυπώσιμη έκδοση.

44) Πώς να κάνετε τη διαφάνεια μεταξύ προγραμμάτων περιήγησης σε css.

45) Τι είναι σαφής επιδιόρθωση.

46) Τρόπος μερικής αναίρεσης φλοτέρ.

47) Πώς να φτιάξετε μια διάταξη δύο στηλών με το ίδιο ύψος στήλης.

48) Τι είναι η προσαρμοστική διάταξη.

49) Σε τι περιλαμβάνονται τα ερωτήματα πολυμέσων css.

50) Τι είναι πιο λιγο.

51) Πώς να css κυρτή γωνία εφέ.

52) Πώς να αποκριτικό "κολλώδες" υποσέλιδο ιστότοπου.

53) Τρόπος χρήσης Google Fonts API.

54) Πώς να χρησιμοποιήσετε την υπηρεσία Livetools.

55) Πώς να ενεργοποιήσετε ή να απενεργοποιήσετε την επιλογή κειμένουστο css.

56) Πώς να αλλάξετε την εμφάνιση ενός στοιχείου σε προεπιλογή χρησιμοποιώντας μια ιδιότητα εμφάνισησε css.

57) Γιατί χρειάζεσαι ιδιότητα αλλαγής σελίδαςσε css.

58) Πώς στοίχιση στο κέντρο του πλαισίου μεταβλητού πλάτουςστο css.

59) Πώς να καθαρά τρίγωνα CSS.

60) Υπηρεσία από δημιουργία τριγώνων CSS.

61) Πώς να ωθήσετε το υποσέλιδο στο κάτω μέρος της σελίδας(τοποθέτηση).

62) Πώς να ωθήσετε το υποσέλιδο στο κάτω μέρος της σελίδας(μέθοδος πίνακα).

63) Μάθηση Sass. Εγκατάσταση και ρύθμιση.

64) Πώς να αποκρύψετε ένα στοιχείο σε μια σελίδαστο css.

65) μάθηση Sass. Βασικά.

66) Πότε να χρησιμοποιείται επαναφορά.cssκαι κανονικοποίηση.css.

67) Υπηρεσία εικόναςμε ισχυρό API.

68) Πώς να Εφέ ζουμ css.

69) Δενδρόβιο ζώο της αυστραλίας- γρήγορη συλλογή sassαρχεία.

70) Πώς να προσθέσετε Φίλτρα φωτογραφιών CSS.

71) μάθηση Sass. Μείγματα.

72) μάθηση Sass. Μαθηματικές πράξεις.

73) Κινούμενα σχέδια εικονίδιο μενού στο Sass.

74) μάθηση Sass. Λειτουργίες.

75) Τι είναι PostCSS.

76) Τρόπος εγκατάστασης και διαμόρφωσης PostCSS.

77) Πώς να το κάνετε την ικανότητα αξιολόγησης σε CSS.

78) μάθηση Sass. Στυλ γραφής κώδικα.

79) μάθηση Sass. Επέκταση γονικού επιλογέα.

80) 10 χρήσιμο Μείγματα SASS.

81) Πώς να το κάνετε Εισαγωγή στυλ Star Wars με CSS.

82) Bootstrap 4. Εισαγωγή.

83) Bootstrap 4. Εγκατάσταση.

84) Bootstrap 4. Επανεκκίνηση.

85) Bootstrap 4. Δοχεία και βασικά σημεία.

86) Bootstrap 4. Σύστημα πλέγματος.

87) Bootstrap 4. Ιδιότητες ευκαμψίας πλέγματος.

88) Σε ποιες 5 καινοτομίες θα εμφανιστούν CSS4.

89) Bootstrap 4. Τι είναι το Jumbotrons.

90) Bootstrap 4. Βοηθητικά προγράμματα και τυπογραφία.

91) Bootstrap 4. Το στοιχείο Κάρτες.

92) Η διαφορά μεταξύ τάξηκαι ταυτότηταπαράδειγμα ετικέτας div.

93) Κακά Στοιχεία σχεδιασμός ιστοσελίδωνπου δεν πρέπει να χρησιμοποιούνται.

94) Bootstrap 4. μοντάλ παράθυρα.

95) Ω προτεραιότητακαι κληρονομίασε cssστην πράξη

96) Τρόπος στοιχειοθέτησης Διάταξη PSDεπί Πλέγμα εκκίνησης. Μέρος 1.

97) Πώς να δημιουργήσετε μια διάταξη PSD από Πλέγμα εκκίνησης. Μέρος 2ο.

98) Πώς να χρησιμοποιήσετε ψευδοστοιχεία μετά και πριν στο CSS.

99) Σχετικά με τα χαρακτηριστικά πλάτος και ύψος μπλοκ σε css.

100) Ψευδοστοιχεία μετά και ψευδοτάξιο τελευταίο παιδί.

101) Πώς να εμφανίσετε τον ιστότοπο σε διάφορες συσκευές.

102) Διάταξη πλέγματος Bootstrap(μέρος 1)

103) Διάταξη πλέγματος Bootstrap(μέρος 2ο)

104) Διάταξη πλέγματος Bootstrap(μέρος 3)

105) Διάταξη πλέγματος Bootstrap(μέρος 4)

Χαιρετισμούς αγαπητοί φίλοι! Σε αυτό το μάθημα, θα μάθετε τι είναι cssσε τι χρησιμεύει και πώς να το χρησιμοποιήσετε σωστά. Αυτό είναι ένα βασικό μάθημα από τη σειρά «Για τους μικρούς», στο οποίο θα προσπαθήσω να εξηγήσω τα περισσότερα απλή γλώσσατα βασικά στοιχεία του στυλ εγγράφων με CSS - Cascading Style Sheets ( ντοαύξουσα μικρόστυλ μικρόκαπέλα).

δροσερός

Καρφιτσώστε το

Μέρος 1: Βασικά στοιχεία CSS

Αυτό το μάθημα είναι μια λογική συνέχεια του μαθήματος "HTML Basics for Beginners", στο οποίο εξήγησα λεπτομερώς τι είναι η γλώσσα σήμανσης HTML, πώς λειτουργεί και λειτουργεί, βασικές ετικέτες και κανόνες διάταξης. Σε αυτό το μάθημα, θα αγγίξουμε το στυλ ενός εγγράφου που δημιουργήθηκε χρησιμοποιώντας μια γλώσσα σήμανσης, π.χ. δίνοντας ένα συγκεκριμένο σχήμα, ένα συγκεκριμένο χρώμα, σειρά, μέγεθος διάφορα στοιχείακαι κείμενο στη σελίδα, ας ρίξουμε μια ματιά στις βέλτιστες πρακτικές για την εργασία με Cascading Style Sheets. Μόλις κατανοήσετε τα βασικά, θα μπορείτε να διαμορφώνετε το στυλ των εγγράφων HTML σωστά και αποτελεσματικά μόνοι σας.

Εφιστώ την προσοχή σας στο γεγονός ότι αυτό το εγχειρίδιοθα εξετάσουμε το CSS μόνο στο πλαίσιο χρήσης με έγγραφα HTML σε ένα πρόγραμμα περιήγησης ιστού. ΑΠΟ χρησιμοποιώντας CSSμπορείτε να διαμορφώσετε άλλα έγγραφα που χρησιμοποιούν διαφορετικές γλώσσες σήμανσης. Για παράδειγμα, στυλ XML in Εφαρμογές Android, SVG ή διάφορα περιβάλλοντα επιφάνειας εργασίας σε λειτουργικά συστήματα τύπου Unix.

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

1.1 Χρήση CSS σε Έγγραφα HTML

Το CSS είναι αρκετά εύκολο στη χρήση σε έγγραφα HTML. Μπορεί να είναι:

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

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

Απλό, έτσι δεν είναι;

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

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

//HTML:

//CSS: .my-class (χρώμα φόντου: #999; )

Εδώ, ο επιλογέας είναι η κλάση my-class της ετικέτας div, η οποία παίρνει το απαραίτητο στυλ στο αρχείο CSS. Σε αυτήν την περίπτωση, το χρώμα του φόντου είναι γκρι. Αντίστοιχα, εάν η σελίδα έχει πολλές ετικέτες (όχι μόνο div) με την κλάση η τάξη μου, όλα αυτά τα στοιχεία θα έχουν την ίδια εμφάνιση - γκρι φόντοχρώματα #999.

1.3 Διαδοχική, κληρονομικότητα και προτεραιότητα

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

//HTML

//CSS .parent .children ( color: #666; ) .parent ( padding: 10px; color: #999; )

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

Τι θα πάρουμε ως αποτέλεσμα του παραδείγματός μας. Η ετικέτα .children θα έχει το χρώμα κειμένου #666 επειδή έχει μεγαλύτερο καταρράκτη και η ετικέτα .parent θα έχει χρώμα #999. Η γονική κλάση θα έχει συμπλήρωση 10 εικονοστοιχείων, ενώ η θυγατρική όχι, καθώς η ιδιότητα συμπλήρωσης δεν ισχύει για θυγατρικά στοιχεία. Ωστόσο, αν αφαιρέσουμε χρώμα: #666;στον επιλογέα .γονέας .παιδιά, τότε το κείμενό του θα βαφτεί στο χρώμα του γονέα χρώμα: #999;

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

1. Τα ακίνητα με την κατασκευή που ορίζεται στο τέλος της δήλωσής τους έχουν την υψηλότερη προτεραιότητα. !σπουδαίος. Δεν έχει σημασία πόσο ένθετος είναι ο επιλογέας, πώς χρησιμοποιούνται τα στυλ - ενσωματωμένα ή με τη συμπερίληψη ενός εξωτερικού αρχείου, θα έχουν την υψηλότερη προτεραιότητα. Συνιστώ ανεπιφύλακτα να μην χρησιμοποιήσετε !σπουδαίοςκατά το styling, γιατί στη διαδικασία υποστήριξης ή ακόμα και στη διαδικασία ανάπτυξης, αναπόφευκτα θα προκύψει σύγχυση στο μέλλον, την οποία μόνο η ανακατασκευή των στυλ θα σώσει. Όπως δείχνει η πρακτική, υπάρχει πάντα τρόπος να μην χρησιμοποιήσετε το !important.
   Ένα παράδειγμα χρήσης!important: .my-class ( χρώμα φόντου: #999!important; )
2. Η επόμενη πιο σημαντική προτεραιότητα είναι τα ενσωματωμένα στυλ, τα οποία γράφονται στην ίδια την ετικέτα μέσω του χαρακτηριστικού στυλπου έχουμε καλύψει πριν:
3. Τα στυλ που ορίζονται στην ετικέτα στυλ στο ίδιο το έγγραφο έχουν προτεραιότητα.
4. Τα στυλ που επισυνάπτονται στο έγγραφο ως εξωτερικό αρχείο CSS μέσω της ετικέτας έχουν ακόμη χαμηλότερη προτεραιότητα.
5. Η χαμηλότερη προτεραιότητα, εκτός από τα τυπικά στυλ προγράμματος περιήγησης, είναι τα στυλ επιλογέα γονέα έναντι των θυγατρικών, για παράδειγμα:
   //HTML

   Μακριά, πολύ πέρα ​​από τα λεκτικά βουνά.

   //CSS .my-class ( περιθώριο: 10 px; ) θα έχει χαμηλότερη προτεραιότητα στο παιδί Παπό: .my-class p ( περιθώριο: 15px; ) Η ετικέτα που προκύπτει

   Η .my-class στην ετικέτα κλάσης θα λάβει την τιμή της ιδιότητας περιθωρίου: 15 px.

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

Το My-class.class-2 ( περιθώριο: 10 px; ) θα υπερισχύει του: .my-class ( περιθώριο: 15 px; )

Και τα λοιπά. κατά μήκος μιας λογικής αλυσίδας.

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

Το My-class ( περιθώριο: 10 px; ) θα υπερισχύει του ίδιου ακριβώς επιλογέα που ακολουθεί: .my-class ( περιθώριο: 15 px; )

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

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

Μέρος 2. Ιδιότητες CSS

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

Ωστόσο, ας ρίξουμε μια ματιά στις 10 πιο χρησιμοποιούμενες ιδιότητες CSS στη διάταξη. Πήρα 10 μεγάλο CSSαρχεία από τα έργα μου και ταξινόμησε τις ιδιότητες κατά συχνότητα χρήσης.

Ιδιότητα CSS	Συχνότητα χρήσης	Περιγραφή
χρώμα	960 φορές	Χρώμα κειμένου στοιχείου:
χρώμα του φόντου	755 φορές	Χρώμα φόντου στοιχείου:
μέγεθος γραμματοσειράς	524 φορές	Μέγεθος γραμματοσειράς:
αδιαφάνεια	435 φορές	Επίπεδο διαφάνειας στοιχείου:
υλικό παραγεμίσματος	372 φορές	Το μέγεθος των περιθωρίων μέσα στο στοιχείο:
πλάτος	356 φορές	Πλάτος στοιχείου αποκλεισμού, χωρίς περιθώρια και περιθώρια:
περιθώριο	311 φορές	Περιθώρια στοιχείων:
ύψος	305 φορές	Το ύψος ενός στοιχείου μπλοκ, χωρίς περιθώρια και περιθώρια:
βάρος γραμματοσειράς	280 φορές	Βάρος γραμματοσειράς:
στοίχιση κειμένου	245 φορές	Οριζόντια στοίχιση κειμένου:

Μέρος 3. Ερωτήματα μέσων

Ερωτήματα μέσων CSSείναι μια βάση για τη δημιουργία μιας αποκριτικής διάταξης που σας επιτρέπει να διαμορφώνετε στυλ στοιχείων ανάλογα με το μέγεθος της οθόνης ή τη συσκευή στην οποία εμφανίζεται ο ιστότοπος. Τεχνικά ερώτημα μέσωνείναι μια απλή δυαδική έκφραση που μπορεί να είναι είτε true είτε false. Οι προϋποθέσεις για μια τέτοια έκφραση είναι είτε οι παράμετροι της συσκευής στην οποία εμφανίζεται η ιστοσελίδα είτε το μέγεθος της οθόνης σε pixel.

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

Ένα ερώτημα πολυμέσων γράφεται στο ίδιο το αρχείο στυλ ή στο σώμα του εγγράφου (ετικέτα στυλ) και ξεκινά με μια δήλωση κανόνα @μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ. Η δομή του ερωτήματος μέσων είναι αρκετά απλή:

Η συνθήκη μπορεί να είναι είτε μια συσκευή - όλες (όλες οι συσκευές), η οθόνη, η εκτύπωση, η τηλεόραση κ.λπ., είτε οι λειτουργίες πολυμέσων που ορίζουν τις παραμέτρους της συσκευής ή την ανάλυση οθόνης στην οποία εμφανίζεται το έγγραφο.

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

Εδώ συσκευές με μέγιστη ανάλυση οθόνης 480 px ήμια ελάχιστη ανάλυση 320 εικονοστοιχείων θα αποδώσει το κείμενο της ετικέτας με την κλάση .my-class γκριζαρισμένη. Αυτή η συνθήκηΈδωσα ένα παράδειγμα, είναι πρακτικά άχρηστο. Τις περισσότερες φορές, πρέπει να καθορίσετε είτε μόνο τη μέγιστη ανάλυση, είτε μόνο την ελάχιστη, εντός της οποίας θα εφαρμοστεί η ιδιότητα.

Μεταξύ άλλων, όπως βλέπουμε από το παράδειγμα, οι συναρτήσεις μπορούν να περιέχουν συνθήκες και (Και), όχι (ΟΧΙ)και μόνο (Για παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν ερωτήματα πολυμέσων). Δεν λογικός τελεστής ή (OR), ο ρόλος του παίζεται με κόμμα. Οι λειτουργίες πολυμέσων, όπως μπορούμε να δούμε, περικλείονται σε κανονικές παρενθέσεις.

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

1. Προσπαθήστε να χρησιμοποιήσετε μόνο εξωτερικά περιλαμβανόμενα αρχεία CSS. Χρησιμοποιήστε εσωτερικό στυλ μόνο εάν είναι απαραίτητο για τη σωστή λειτουργία του ιστότοπου.
2. Προσπαθήστε να κάνετε στυλ μόνο τάξεις. Μην δημιουργείτε αναγνωριστικά στυλ (ορίζεται με id="hash" και γράφεται με #hash). Προσπαθήστε να διαμορφώσετε ετικέτες χωρίς λιγότερες κατηγορίες. Για παράδειγμα, εάν κάνετε στυλ σε μια ετικέτα h3 και στη συνέχεια αργότερα Ειδικός SEOαποφασίζει ότι ένας τίτλος είναι ακατάλληλος εδώ, ένα κανονικό div θα πρέπει να έχει τις ίδιες ιδιότητες με μια κλάση τίτλου και να αποδίδεται επίσης. Εναλλακτικά, μπορείτε να κάνετε διπλότυπο Ετικέτες HTMLσε τάξεις, για παράδειγμα, .h1, .h2, .h3, .footer, .header, .aside και το στυλ τους ανάλογα.
3. Προσπαθήστε να διαμορφώσετε στοιχεία όσο το δυνατόν πιο αυτόνομα, μειώστε την αλυσίδα σε ένα μπλοκ, ώστε να υπάρχουν λιγότερες εξαρτήσεις από τα μητρικά στοιχεία. Αυτό είναι απαραίτητο για την αποτελεσματικότερη επαναχρησιμοποίηση των μπλοκ στη σελίδα και την τροποποίησή τους σε άλλα σημεία της διάταξης. Χωρίς όμως φανατισμό. Δεν πρέπει να δίνετε ξεχωριστές κλάσεις σε κάθε ετικέτα σε ένα μπλοκ, αν δεν είναι υποτιθέμενο. χρήση εκτός σύνδεσης. Εάν μετακινήσετε το μπλοκ σε άλλο μέρος της σελίδας, θα πρέπει επίσης να εμφανίζεται και να μην εξαρτάται από τον γονέα. Αυτό θα σας βοηθήσει να χρησιμοποιήσετε κάποιο είδος μεθοδολογίας ονοματοδοσίας κλάσεων. Δεν έχει σημασία αν είναι BEM, μεθοδολογία ή αναπτύχθηκε με βάση τη δική σας προσωπική εμπειρίαή απλούς κανόνεςΤο , που προτείνω από εμένα, είναι καλύτερο από το να ονομάζω τάξεις αυθαίρετα και να δημιουργείς παράλογες και μακριές αλυσίδες τάξεων.
4. Προσπαθήστε να ονομάσετε κατηγορίες ετικετών με βάση τη λειτουργία του μπλοκ, όχι με βάση το περιεχόμενο που θα περιέχει. Για παράδειγμα, εάν έχετε μια ενότητα καρουζέλ κριτικής, μην ονομάζετε τους επιλογείς χρησιμοποιώντας τις λέξεις κριτικές, otzivyκαι τα λοιπά. καλύτερο όνομα καρουζέλ-κάποτε, εάν σχεδιάζεται να εμφανιστεί ένα στοιχείο καρουζέλ ανά σελίδα. Στο μέλλον, ίσως θα χρησιμοποιήσετε αυτό το καρουζέλ όχι μόνο για να δημιουργήσετε κριτικές, αλλά θα χρησιμοποιήσετε αυτόν τον κωδικό, για παράδειγμα, για να εμφανίσετε μια λίστα με συναδέλφους της εταιρείας. Σε αυτήν την περίπτωση, το όνομα της τάξης κριτικέςθα ήταν κάπως ακατάλληλο?
5. Χρησιμοποιήστε προεπεξεργαστές CSS, δεν είναι τόσο δύσκολο. Η επιλογή μου έπεσε στον προεπεξεργαστή Sass για αρκετό καιρό και τον προτείνω για χρήση. Έχουμε ένα ωραίο σεμινάριο στο οποίο σας λέω πόσο εύκολο είναι να χρησιμοποιήσετε τον προεπεξεργαστή και πώς διευκολύνει τη ζωή: ;
6. Χρησιμοποιήστε μια επαναφορά των προεπιλεγμένων στυλ προγράμματος περιήγησης ή κανονικοποίηση, η οποία φέρνει τα προεπιλεγμένα στυλ σε έναν κοινό παρονομαστή σε όλα τα προγράμματα περιήγησης. Χρησιμοποιώ στα έργα μου κανονικοποίηση.css, το οποίο αποτελεί μέρος του πλαισίου Bootstrap CSS.
7. Όταν αισθάνεστε ότι κάνετε πάρα πολλές επαναλαμβανόμενες εργασίες στη διαδικασία διάταξης, μεταβείτε στη χρήση ενός πλαισίου CSS ή αναπτύξτε το δικό σας με τα πιο συχνά χρησιμοποιούμενα στοιχεία, θα επιταχύνει την εργασία σας. Χρησιμοποιώ μόνο στη δουλειά Πλέγμα εκκίνησηςχωρίς στυλιστική σχεδίαση κουμπιών, πάνελ και άλλων στοιχείων. Αυτό είναι αρκετό για αποτελεσματική εργασία. Η καλή απόκριση του προεπιλεγμένου πλέγματος Bootstrap είναι επίσης ωραία.
8. Πειραματιστείτε μόνοι σας με τις ιδιότητες. Ανοίξτε την αναφορά CSS και δοκιμάστε. Αυτός είναι ο μόνος τρόπος για να αποκτήσετε εμπειρία, να θυμάστε ποια ιδιότητα κάνει τι και να φέρετε τη σύνταξη στυλ εγγράφων στον αυτοματισμό.