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

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

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

Μπορεί να ρωτήσετε, «Γιατί να επαναπροσδιορίσω το

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ετικέτα.

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

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