Πώς να δημιουργήσετε στυλ με επιλογείς κλάσεων και αναγνωριστικών στο Dreamweaver

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

Τα στυλ κλάσης και ταυτότητας έχουν τις ακόλουθες ομοιότητες:

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

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

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

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

1Εάν ορίζετε ένα νέο στυλ που θέλετε να εφαρμόσετε σε ένα υπάρχον στοιχείο, κάντε κλικ για να τοποθετήσετε τον κέρσορα πάνω από το στοιχείο που θέλετε να μορφοποιήσετε με το νέο στυλ.

Παρόλο που αυτό το βήμα δεν απαιτείται (μπορείτε να δημιουργήσετε στυλ για στοιχεία που δεν βρίσκονται ακόμη στη σελίδα), το Dreamweaver δημιουργεί αυτόματα ονόματα επιλογέα με βάση το στοιχείο σελίδας που επιλέγει αυτήν τη στιγμή ο δρομέας σας.

2 Στον πίνακα Επιλογείς του πίνακα σχεδιασμού CSS, επιλέξτε το όνομα του φύλλου στυλ στο οποίο θέλετε να προσθέσετε το νέο στυλ.

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

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

3 Στον πίνακα Επιλογείς, κάντε κλικ στο σύμβολο συν (+).

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

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

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

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

5 Στον πίνακα Ιδιότητες, καθορίστε τις ρυθμίσεις στον κανόνα στυλ σας.

Οι επιλογείς κλάσεων και αναγνωριστικών εφαρμόζονται εύκολα σε περιεχόμενο αφού τους δημιουργήσετε, επειδή το Dreamweaver προσθέτει αυτά τα στυλ στις αναπτυσσόμενες λίστες Class και ID στο Property inspector, που βρίσκεται στο κάτω μέρος του χώρου εργασίας.