Hvordan å style en kobling med CSS
Websidehyperkoblinger har mange egenskaper du kan style. Du kan endre farge, understreking, bakgrunn og mange andre aspekter av utseende med CSS. Her er noen tips for å komme i gang.
Bruksanvisning
Link stiler for alle linker
1 CSS-velgeren for hyperkoblinger er det A-velgeren. Den korrekte betegnelsen er anker, ikke link, men A-element er ofte kalles koblinger. Noen elementer kan være målrettet med CSS pseudo klassevelgere, basert på state of the link. De vanligste pseudo klasser bruke disse CSS-velgere:
en kobling
a: besøkt
a: hover
a: aktiv
2 CSS-regler for ulike lenke statene bestemme skrift, tekst-dekorasjon (hvorvidt koblingen er understreket), farge, bakgrunnsfarge eller bakgrunnsbilde, skjermegenskaper som inline eller blokker, border, padding, margin og andre CSS egenskaper
3 Denne enkle sett med regler som gjør først alle A element vises med fet skrift. Det går så gjennom de enkelte kobling statene til å sette forskjellige farger og tekst-dekorasjon verdier for hver stat.
et {
font-weight: bold;
}
en kobling {
color: #660066;
text-decoration: none;
}
a: besøkte {
color: #663366;
text-decoration: none;
}
a: hover {
color: #660066;
text-decoration: underline;
}
a: active {
color: #660066;
text-decoration: none;
}
4 Regler som eksemplene i trinn 3 gjelder for alle lenker på en hel side. Egenskaper som bakgrunnsfarge, border og andre kan alle bli lagt til regler som eksempelet i trinn tre.
Link stiler for bestemte områder i en web-side
5 De fleste nettsider er lagt ut i divisjoner eller områder som kan identifiseres med en id eller klasse. Når du legger lenker i en div eller annen nettside seksjon identifisert med en id eller klasse, kan du opprette kommer velgere å style koblinger med reglene som gjelder i denne delen.
6 Bildet ved åpningen av denne artikkelen viste et eksempel på en side med linker med forskjellige stiler basert på kommer velgere. Anta de to områdene av nettsiden ble opprettet med divs med tildelte IDer. Innholdet div bruker id "innhold" og navbar div bruker id "navbar."
7 Bruk id (eller klasser) som identifiserer ulike divisjonene av en nettside for å skape velgere som bare fungerer i den delen av siden. Ved hjelp av de forutsetninger som i trinn 2, regler for disse velgerne ville skape forskjellige stiler i to områder av en side:
Innhold a: linkcontent en: visitedcontent en: hovercontent en: activenavbar en: linknavbar en: visitednavbar en: hovernavbar en: aktiv
8 Anta at siden din bruker en klasse som heter "innlegget" for hver oppføring. Du kan style lenker individuelt for bare disse områdene på siden, også. Kommer velgere for koblingene i bare det området på siden kan se slik ut:
.blogpost en: link
.blogpost en: besøkt
.blogpost a: hover
.blogpost en: aktiv
Hint
- En mindre vanlig brukte pseudo klasse velgerne er en: fokus.
- For å finne ut hvordan du kan lage en link skjerm som en navbar, se artikkelen Hvordan å style en liste med CSS
- For best resultat, holde reglene i stilark i denne rekkefølgen: LVHA, eller link, besøkt, hover, aktiv.