Πώς να ορίσετε στυλ με τον επιλογέα ετικετών στο Dreamweaver - ανδρείκελα

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

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

Μπορείτε να ρωτήσετε: "Γιατί να επαναπροσδιορίσω την ετικέτα

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

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

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

μπορεί να πάρει ιδιαίτερη προσοχή από τις μηχανές αναζήτησης.

Για να δημιουργήσετε ένα στυλ που επαναπροσδιορίζει μια ετικέτα HTML (όπως την ετικέτα

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

1Στον πίνακα επιλογών του πίνακα σχεδιαστή CSS, επιλέξτε το φύλλο στυλ στο οποίο θέλετε να προσθέσετε το νέο στυλ.

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

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

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

3Κάντε κλικ στο σύμβολο συν (+) στον πίνακα επιλογών.

Ένας νέος επιλογέας προστίθεται στον πίνακα επιλογής.

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

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

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

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

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

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

.

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

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