Οι συνδέσεις είναι πολύ συνηθισμένες σε ιστοσελίδες, αλλά πολλοί σχεδιαστές ιστοσελίδων δεν αντιλαμβάνονται τη δύναμη που διαθέτουν με το CSS για να χειραγωγούν και να διαχειρίζονται αποτελεσματικά τους συνδέσμους τους. Μπορείτε να ορίσετε δεσμούς με τις επισκέψεις, την επίσκεψη και τις ενεργές καταστάσεις. Μπορείτε επίσης να εργαστείτε με σύνορα και φόντο για να δώσετε στους συνδέσμους σας περισσότερο pizzaz ή να τα κάνετε να μοιάζουν με κουμπιά ή ακόμα και εικόνες.
Οι περισσότεροι σχεδιαστές ιστοσελίδων ξεκινούν με τον ορισμό ενός στυλ στην ετικέτα "a":
α {χρώμα: κόκκινο; }}Αυτό θα στυλ όλες τις πτυχές του συνδέσμου (hover, επισκέφθηκε και ενεργό). Για να διαμορφώσετε ξεχωριστά κάθε τμήμα, πρέπει να χρησιμοποιήσετε ψευδοκλάδιες συνδέσμων.
Link ψευδο-τάξεις
Υπάρχουν τέσσερις βασικοί τύποι ψευδοκλάδων συνδέσμων που μπορείτε να ορίσετε:
- : link - αυτό είναι το προεπιλεγμένο στυλ για τη σύνδεση
- : επισκέφθηκε - μετά από κλικ σε ένα σύνδεσμο
- : αιωρούνται - καθώς ένα ποντίκι είναι τοποθετημένο πάνω σε μια σύνδεση (προ-κλικ)
- : ενεργή - δεξιά καθώς γίνεται κλικ στο σύνδεσμο
Για να ορίσετε μια ψευδο-τάξη σύνδεσης, χρησιμοποιήστε την με την ετικέτα a στον επιλογέα CSS . Έτσι, για να αλλάξετε το χρώμα που έχετε επισκεφθεί σε όλες τις συνδέσεις σας σε γκρι, γράψτε:
α: επισκέφθηκε {χρώμα: γκρι; }}Αν στυλ ένα ψευδο-τάξη συνδέσεων, είναι καλή ιδέα να τα στυλ όλα. Με αυτόν τον τρόπο δεν θα εκπλαγείτε από εξωτερικά αποτελέσματα. Επομένως, αν θέλετε απλώς να αλλάξετε το χρώμα που έχετε επισκεφθεί στο γκρι, ενώ όλες οι άλλες ψευδο-ιδιότητες των συνδέσεών σας παραμένουν μαύρες, θα γράψετε:
a: σύνδεσμος, a: hover, a: ενεργός {χρώμα: μαύρο; } α: επισκέφθηκε {χρώμα: γκρι; }}Αλλάξτε τα χρώματα του συνδέσμου
Ο πιο δημοφιλής τρόπος για να συνδέσετε στυλ είναι να αλλάξετε το χρώμα όταν το ποντίκι κρέμεται πάνω από αυτό:
α {χρώμα: # 00f; } α: αιώρηση {χρώμα: # 0f0; }}Αλλά μην ξεχνάτε ότι μπορείτε να επηρεάσετε τον τρόπο εμφάνισης του συνδέσμου καθώς κάνετε κλικ πάνω του με την: ενεργή ιδιότητα:
α {χρώμα: # 00f; } α: ενεργή {χρώμα: # f00; }}Ή πώς φροντίζει ο σύνδεσμος μετά την επίσκεψή σας με την ιδιότητα: επισκέφθηκε:
α {χρώμα: # 00f; } α: επισκέφθηκε {χρώμα: # f0f; }}Για να τα βάλω όλα μαζί:
α {χρώμα: # 00f; } α: επισκέφθηκε {χρώμα: # f0f; } α: αιώρηση {χρώμα: # 0f0; } α: ενεργή {χρώμα: # f00; }}Τοποθετήστε Backgrounds στους συνδέσμους για να προσθέσετε εικονίδια ή σφαίρες
Μπορείτε να βάλετε ένα φόντο σε έναν σύνδεσμο όπως στο άρθρο Stylish Backgrounds, αλλά παίζοντας με λίγο το φόντο, μπορείτε να δημιουργήσετε έναν σύνδεσμο που έχει ένα σχετικό εικονίδιο. Επιλέξτε ένα εικονίδιο που είναι μικρό, περίπου 15px με 15px, εκτός αν το κείμενο σας είναι μεγαλύτερο. Τοποθετήστε το φόντο σε μια πλευρά του συνδέσμου και ρυθμίστε την επιλογή επανάληψης σε μη επαναλαμβανόμενη. Στη συνέχεια, πληκτρολογήστε τον σύνδεσμο έτσι ώστε το κείμενο εντός του συνδέσμου να μετακινηθεί αρκετά μακριά προς τα αριστερά ή προς τα δεξιά για να δείτε το εικονίδιο.
ένα {padding: 0 2px 1px 15px; υπόβαθρο: #fff url (ball.gif) αριστερά κέντρο no-repeat; χρώμα: # c00; }}Αφού αποκτήσετε το εικονίδιο σας, μπορείτε να ορίσετε μια διαφορετική εικόνα, όπως τα εικονίδια που εμφανίζονται στην οθόνη σας, ενεργή και επισκέφτηκαν, για να αλλάξετε τη σύνδεση:
ένα {padding: 0 2px 1px 15px; υπόβαθρο: #fff url (ball.gif) αριστερά κέντρο no-repeat; χρώμα: # c00; } a: αιωρείται {background: #fff url (ball2.gif) αριστερό κέντρο χωρίς επανάληψη. } a: ενεργό {background: #fff url (ball3.gif) αριστερό κέντρο χωρίς επανάληψη. }}Κάντε τις συνδέσεις σας να μοιάζουν με κουμπιά
Τα κουμπιά είναι πολύ δημοφιλή, αλλά μέχρι να εμφανιστεί το CSS, θα έπρεπε να δημιουργήσετε κουμπιά χρησιμοποιώντας εικόνες , γεγονός που καθιστά τις σελίδες σας περισσότερο χρόνο φόρτωσης. Ευτυχώς, υπάρχει ένα στυλ περιγράμματος που μπορεί να σας βοηθήσει να δημιουργήσετε εύκολα ένα κουμπί με CSS.
ένα {περιθώριο: αρχή 4px; padding: 2px; κείμενο-διακόσμηση: κανένα? } α: ενεργό {border: 4px insert; }}Σημειώστε ότι, όταν βάζετε χρώματα στην αρχή και σε ένθετα στυλ, τα προγράμματα περιήγησης δεν είναι τόσο πιθανό να τα καταστήσουν όπως θα περίμενε κανείς. Έτσι, εδώ είναι ένα πιο φτηνό κουμπί με έγχρωμα σύνορα:
ένα {border-style: solid; πλάτος συνόρου: 1px 4px 4px 1px; κείμενο-διακόσμηση: κανένα? padding: 4px; Χρώμα περιγράμματος: # 69f # 00f # 00f # 69f; }}Και μπορείτε να επηρεάσετε την κίνηση και τα ενεργά στυλ ενός συνδέσμου κουμπιού, χρησιμοποιήστε μόνο αυτές τις ψευδοκλάδιες:
a: σύνδεσμος {style-border: solid; πλάτος συνόρου: 1px 4px 4px 1px; κείμενο-διακόσμηση: κανένα? padding: 4px; Χρώμα περιγράμματος: # 69f # 00f # 00f # 69f; } a: αιώρηση {border-color: #ccc; }}