Επιλογείς CSS. τύπους επιλογείς

, καθένα από τα οποία θέλετε να ορίσετε ένα συγκεκριμένο χρώμα. Πώς να το κάνουμε; Πρότυπο επιλογείς CSS δεν είναι κατάλληλα για τις ετικέτες, που δείχνουν τις παραμέτρους για όλα τα τμήματα ταυτόχρονα. Η λύση είναι απλή. Αντιστοίχιση των μελών της κατηγορίας. Για παράδειγμα, η πρώτη έλαβε div class = 'κόκκινο', το δεύτερο - class = 'μπλε', τρίτη - class = 'πράσινο'. Τώρα μπορούν να επιλεγούν με τη χρήση πινάκων CSS.

Η σύνταξη είναι ως εξής: Δείχνει ένα σημείο ( «»), Ακολουθούμενη από γράφοντας το όνομα της κατηγορίας. Για να διαχειριστείτε την πρώτη μονάδα, χρησιμοποιήστε την κατασκευή Το Red. Δεύτερον - .blue και ούτω καθεξής.

Σημαντικό! Συνιστάται η χρήση νόημα τιμές της παραμέτρου τάξης. Θεωρείται κακή μορφή για να χρησιμοποιήσετε μεταγραφή (π.χ., krasiviy-Blok) ή τυχαίους συνδυασμούς γραμμάτων / αριθμών (ojfh834871). Σε αυτόν τον κώδικα, είστε αναγκασμένοι να μπερδεύονται, για να μην αναφέρουμε τις δυσκολίες που θα αντιμετωπίσουν όσοι θα πρέπει να ασχολούνται με το έργο μετά. Η καλύτερη επιλογή - να χρησιμοποιήσει οποιαδήποτε μέθοδο, όπως BEM.

Πλεονεκτήματα - σχετικά υψηλή ελαστικότητα.

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

επιλογέα ID

Σχετικά με αυτή την έκδοση προγραμματιστές γνώμης και προγραμματιστές είναι ασαφείς. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Μερικά μαθήματα CSS δεν συνιστάται η χρήση της ταυτότητας, γιατί σε ανακριβή εφαρμογή που μπορεί να προκαλέσει προβλήματα με την κληρονομικότητα. Ωστόσο, πολλοί ειδικοί είναι ενεργά τα οργανώσει σε όλη τη διάταξη. Εσείς αποφασίζετε. # »), затем имя блока. Η σύνταξη είναι η εξής: το σύμβολο ( «#»), τότε το όνομα του μπλοκ. #red. Για παράδειγμα, #red.

отличается от класса по нескольким параметрам. ID είναι διαφορετικό από την τάξη με διάφορους τρόπους. ID. Κατ 'αρχάς, η σελίδα δεν μπορεί να είναι δύο πανομοιότυπα ID. Έχουν εκχωρηθεί ένα μοναδικό όνομα. Δεύτερον, ένα τέτοιο επιλογέας έχει υψηλότερη προτεραιότητα. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Αυτό σημαίνει ότι αν έχετε ορίσει μία μονάδα κατηγορίας κόκκινο και καθορίστε στους πίνακες CSS κόκκινο χρώμα του φόντου, και στη συνέχεια να εκχωρήσετε σε αυτό το ίδιο id μπλε και καθορίστε το μπλε χρώμα, η μονάδα θα γίνει μπλε.

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

ID и class. Μειονεκτήματα - εύκολο να χαθείς σε ένα μεγάλο αριθμό ταυτότητας και την τάξη.

Σημαντικό! ID вам, в общем-то, не нужны. Εάν χρησιμοποιείτε μεθοδολογία BEM (ή ανάλογά της), ID σας, σε γενικές γραμμές, δεν είναι απαραίτητα. Αυτή η τεχνική περιλαμβάνει τη χρήση της διάταξης μοναδικές κατηγορίες που πολύ πιο βολικό.

καθολική επιλογέα

{}. Σύνταξη: στάρλετ σημάδι ( "*") και τιράντες, δηλαδή, {*} ...

Χρησιμοποιείται για την εκχώρηση ορισμένων χαρακτηριστικών φορά όλα τα στοιχεία της σελίδας. Όταν αυτό μπορεί να είναι χρήσιμο; box-sizing: border-box. Για παράδειγμα, εάν θέλετε να ρυθμίσετε τη σελίδα ιδιοτήτων box-μέγεθος: σύνορα-box. div *{}. Δεν μπορεί να χρησιμοποιηθεί μόνο για τη διαχείριση όλων των στοιχείων του εγγράφου, αλλά και να ελέγχουν όλα τα παιδιά του συγκεκριμένου μπλοκ, για παράδειγμα, div * {}.

Πλεονεκτήματα - μπορείτε να ελέγξετε ένα μεγάλο αριθμό αντικειμένων σε μια στιγμή.

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

από τα χαρακτηριστικά

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

εισαγωγή [ 'κείμενο' τύπος =] {}

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

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

Φανταστείτε ότι η σελίδα σας έχει είσοδο με το χαρακτηριστικό σύμβολο κράτησης θέσης = «Εισάγετε ένα όνομα» και σύμβολο κράτησης θέσης εισόδου = «Εισάγετε κωδικό». Μπορούν επίσης να επιλεγεί χρησιμοποιώντας τον επιλογέα! Για να το κάνετε αυτό, χρησιμοποιήστε την ακόλουθη δομή:

εισόδου [placeholder = "Εισάγετε το όνομα"] {} ή εισόδου [placeholder = "Εισάγετε τον κωδικό"]

Ίσως πιο ευέλικτη εργασία με χαρακτηριστικά. Ας πούμε ότι έχετε μια σειρά από ετικέτες με παρόμοια χαρακτηριστικά τίτλο (για παράδειγμα, «Κασπίας» και «Κασπίας»). Για να επιλέξετε και τα δύο, χρησιμοποιήστε τις ακόλουθες επιλογές:

[Τίτλος * = "Kaspiysk"]

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

Μπορείτε επίσης να επιλέξετε ετικέτες που αρχίζουν με χαρακτηριστικά ένα συγκεκριμένο χαρακτήρα:

[Τίτλος ^ = "χαρακτήρα που θέλετε"] {}

ή να τερματίσει:

[Τίτλος $ = "δεξιά χαρακτήρα"] {}.

Πλεονεκτήματα - μέγιστη ευελιξία. Μπορείτε να επιλέξετε τα υπάρχοντα στοιχεία της σελίδας χωρίς μπέρδεμα με τις τάξεις.

Μειονεκτήματα - χρησιμοποιείται σχετικά σπάνια, μόνο σε ειδικές περιπτώσεις. Πολλοί σχεδιαστές ιστοσελίδων προτιμούν να μεθοδολογία, δεδομένου ότι η κατηγορία σημείο είναι πιο εύκολο από ό, τι να οργανώσει πολλές αγκύλες και σημεία «ίση». Επιπλέον, αυτές οι επιλογείς δεν λειτουργούν σε εκδόσεις του Internet Explorer 7 και κάτω. Ωστόσο, οι οποίοι πρέπει τώρα την παλιά του Internet Explorer;

επιλογείς ψευδο-class

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

Αυτό το είδος της επιλογής χρησιμοποιείται ενεργά στη σύγχρονη διαρρύθμιση, γιατί χάρη σε αυτό μπορείτε να κάνετε μια σελίδα «live» χωρίς τη χρήση JavaScript. Για παράδειγμα, θέλετε να βεβαιωθείτε ότι όταν αιωρείται πάνω από το κουμπί με την κατηγορία της btn το χρώμα του αλλάζει. Για να γίνει αυτό, χρησιμοποιούμε την ακόλουθη δομή:

.btn: hover {

υπόβαθρο-χρώμα: κόκκινο?

}

Ομορφιά μπορούν να καθορίζονται στις βασικές ιδιότητες του κουμπιού, τη μετάβαση ακινήτου, για παράδειγμα, 0.5s - σε αυτήν την περίπτωση, το κουμπί δεν θα κοκκινίζει αμέσως, και μέσα σε μισό δευτερόλεπτο.

Αρετές - χρησιμοποιούνται ευρέως για την «αναβίωση» των σελίδων. Εύκολο στη χρήση.

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

ψευδο-επιλογείς

«Ψευδο» - αυτά είναι τα τμήματα της σελίδας που δεν είναι σε μορφή HTML, αλλά εξακολουθούν να μπορούν να αντιμετωπιστούν. Δεν κατάλαβα; Είναι πολύ πιο εύκολο από ό, τι φαίνεται. Για παράδειγμα, θέλετε να κάνετε το πρώτο γράμμα στη σειρά μεγάλο και κόκκινο, αφήνοντας το άλλο μικρό και μαύρο κείμενο. Φυσικά, μπορεί να συναχθεί το συμπέρασμα ότι η επιστολή σε ένα διάστημα με μια ορισμένη τάξη, αλλά είναι μακρύ και βαρετό. Είναι πολύ πιο εύκολο να επιλέξετε ολόκληρη την παράγραφο και να χρησιμοποιούν ψευδο :: πρώτη επιστολή. Δίνει τη δυνατότητα να ελέγχει την εμφάνιση του το πρώτο γράμμα.

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

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

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

Για να συνοψίσουμε

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