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?
Annonceindlæg fra GlobalConnect
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;
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*
17. januar 2005 - 23:15
#3
Så går jeg ud fra at f.eks. "hvidelinksbold" er dens id??? Kan du uddybe dette?
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*
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; }
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)
17. januar 2005 - 23:29
#7
Ja, spørgsmålet er bare hvor styles skal placeres i selve koden.
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>
17. januar 2005 - 23:40
#9
Tak for hjælpen...
17. januar 2005 - 23:48
#10
Selvtak *S*
Kurser inden for grundlæggende programmering