-16
Tags:
css
Skrevet af
Bruger #4525
@ 26.11.2003
Du har sikkert set det masser af steder og vil gerne lære det
CSSDet ultimative sprog til hjemmesider
I denne guide vil jeg fortælle lidt om Hvordan man lave en hover effekt og blandt andet skifter farver på Aktive links, Visited links og bare links
Så lad os sprænge ud i det.
Aktive links
Normalt vil et aktiv link få en grim blå farve.
Det er nu muligt med CSS at ændre det via en enkel fil
a {
color: black;
text-decoration: none;
font-family: verdana;
}
såen her kunne en typisk css fil se ud som ændrer på et aktiv link farve
Gemmen gang:
a { starter koden til aktive links . Man skal altdi huske at lave { for ellers vil det ikke virke
color: black; det gør at teksten bliver sort på et Aktiv link husk altid at bruge et simikolon (
til at afslutte en linie
text-decoration: none; fjerner under stregning af Aktive links og husk at slutte linien med et simikolon (
font-family: verdana; det kan man næsten gætte sig til. den ændrer fonten til verdana
det var såen set det at fortælle om A links.
Visited links
Her skal vi se lidt på V links som normalt får en grim lilla farve.
Det er også muligt at ændre det via CSS som jeg vil gemmengå her.
a:visited {
color: black;
text-decoration: none;
font-family: verdana;
}
Såen kunne en typisk CSS kommando se ud.
Som i nok kan se er det kune kommandoen der er blevet ændret på hvor hved et aktivt link bare var a { som nu er :visited {.
farven er stadig sort og i verdana, der er heller ikke understregning på.
Hover på links
Her vil jeg vise lidt om en af de mest brugte CSS funktioner.
Som A og V links skal vi også igemmen de kommandoer vi har brugt indtel vidre.
a:hover {
color: #929292;
text-decoration: none;
font-family: verdana;
}
såen er en typisk kode for hover se ud.
Det eneste man faktisk ændrer er kommandoen med a og vi kun farven så nå du ligger den ud på nettet vil alle links få hover automatisk.
Det var såen set det jeg gerne ville fortælle om CSS lig nu men jeg lover der nok skal komme flere artikler
Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.
Del også gerne artiklen med dine Facebook venner:
Kommentarer (11)
Denne regel:
a {
color: black;
text-decoration: none;
font-family: verdana;
}
du har lavet har intet med aktive links at gøre som du skriver, men er derimod en generel indstilling for html taget a.
En erklæring for aktive links hedder følgende:
a:active
{
color: black;
text-decoration: none;
font-family: verdana;
}
den helt korrekte rækkefølge for link erklæringer er denne:
a:link
{
color: black;
text-decoration: none;
font-family: verdana;
}
a:visited
{
color: black;
text-decoration: none;
font-family: verdana;
}
a:hover
{
color: black;
text-decoration: none;
font-family: verdana;
}
a:active
{
color: black;
text-decoration: none;
font-family: verdana;
}
Det er også vigtigt at denne rækkefølge benyttes da resultatet kan være at nogle browsere ikke fortolker CSS'en korrekt hvis rækkefølgen ikke følges.
Du taler kun om en CSS fil, men glemmer 2 ting.
1. Hvordan inkludere man filen i sit html dokument --> <link rel="stylesheet" type="text/css" href=stien til din CSS fil">
2. At man ikke nødvendigvis behøver at inkludere det i en fil, man kan sagtens inkludere det i sin <head> sektion, man skal bare omgive CSS koden med følgende tags <style>her placere du koden</style>
Man kan så sige at det med at inkludere en fil er det smarteste, men ved nogle lejligheder kan man godt have behov for kun at skrive det i head
Synes det er en god artikel, viser det på en god måde..
skulle også lige refreshe det selv..
Lige et spørgsmål..
Hvordan ændrer man baggrunden i hover-effekten????? Kan ikke huske hvad man skal skrive!!
det er en meget god forklaring efter min mening... efter som jeg er begynder til css så kan jeg godt bruge det du skrev...
Til Flux. Her er koden for baggrund i hover effekten. Koden skal være mellem <style> og </style>
a:hover {background: #FF9600}
#apoc
background-color: #xxxxxx;
Virkelig god Artikel til mig som ikke har kigget på CSS så meget.. Hjalp mig godt i gang og gav et nice indblik!
Den er meget god for Nybegyndere, derfor har jeg givet den top karaktere, jeg lærte nu meget af den. Jeg har også læst den inde på HTML.dk men synes ikke den er særlig god..
Er det muligt at lave det her i inline styling? Jeg har prøvet både at have det i head og i min CSS fil, men hver gang påvirker det samtlige link på hjemmeside? Og hvordan kunne man evt. skrive det hvis man ville lave inline styling på sin menubar? (:
Du skal være
logget ind for at skrive en kommentar.