Avatar billede bmd8403 Nybegynder
17. januar 2005 - 23:06 Der er 9 kommentarer og
1 løsning

Flere CSS-effekter på samme side?

Kan man have flere tekst efekter på samme side, f.eks. link hvor teksten ved mouseover bliver understreget og hvor et andet link hvor teksten ved mouseover skifter farve?
Avatar billede miss-g Seniormester
17. januar 2005 - 23:10 #1
Ja det kan man godt.

F.eks.:

/* alm. tekst bold */
.hvidelinksbold a:link {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;

}

.hvidelinksbold a:visited {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;

}

.hvidelinksbold a:hover {
    color: #ffffff;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;


}

.hvidelinksbold a:active {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}
/* alm. tekst bold */
.gulelinksbold a:link {
    color: #FFCC00;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;

}

.gulelinksbold a:visited {
    color: #FFCC00;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;

}

.gulelinksbold a:hover {
    color: #FFCC00;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;


}

.gulelinksbold a:active {
    color: #FFCC00;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
Avatar billede miss-g Seniormester
17. januar 2005 - 23:12 #2
}

Mangler i slutningen.

Ovenstående er bare et eksempel, det er ikke lige de effekter du spørger om *S*
Avatar billede bmd8403 Nybegynder
17. januar 2005 - 23:15 #3
Så går jeg ud fra at f.eks. "hvidelinksbold" er dens id??? Kan du uddybe dette?
Avatar billede miss-g Seniormester
17. januar 2005 - 23:21 #4
Ja jeg har kaldt den ene slags for hvidelinksbold og den anden for gulelinksbold, så jeg kan kende forskel.

Nu gør jeg ikke så meget i koder men bruger programmet Dreamweaver som laver koderne for mig. Men i styles kan jeg så se ordet hvidelinksbold og ordet gulelinksbold. Når jeg klikker på ordet får jeg den style på mit link....

Svært at forklare *S*
Avatar billede miss-g Seniormester
17. januar 2005 - 23:25 #5
Den her afgør hvad der sker med dit link når du kører musen over (hover). Den sætter netop streg under (text-decoration):

.almlink a:hover {
    color: #FFCC00;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
}
Avatar billede miss-g Seniormester
17. januar 2005 - 23:27 #6
Så du skal lave 4 styles pr. effekt/style.

Hvordan ser et link ud (a:link)
Hvordan ser en mouseover ud (a:hover)
Hvordan ser et besøgt links ud (a:visited)
Hvordan ser et aktivt links ud (a:active)
Avatar billede bmd8403 Nybegynder
17. januar 2005 - 23:29 #7
Ja, spørgsmålet er bare hvor styles skal placeres i selve koden.
Avatar billede miss-g Seniormester
17. januar 2005 - 23:33 #8
Man kan lave et internt stylesheet som kun gælder pågældende side eller man kan lave et externt som kan bruges på alle sider.

Det externe ligger som en selvstændig fil og hedder f.eks. styles.css. På en side bliver der så henvist til stylesheetet sådan her:

<html>
<head>
<title>Min hjemmeside</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

Hvis det er internt i selve koden ser det f.eks. sådan her ud:
<html>
<head>
<title>Min hjemmeside</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.font {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #ffffff;
}
.question {
    font-size: 12px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.border {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #1B578F;
}
.borderdark {
    border: 1px solid #1B578F;
}
-->
</style>
</head>
Avatar billede bmd8403 Nybegynder
17. januar 2005 - 23:40 #9
Tak for hjælpen...
Avatar billede miss-g Seniormester
17. januar 2005 - 23:48 #10
Selvtak *S*
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester