Søg
Avatar billede mr2wear Nybegynder
03. august 2005 - 16:26 Der er 34 kommentarer og
1 løsning

Flere a:link i en CSS

Jeg er igang med et site hvor der er 'almindelige links' som bare er sorte og så med en farve a:hover, og så 'læs mere' links som hele tiden skal ha en farve...

- Hvordan gør jeg det???

Håber nogen kan hjælpe!
Avatar billede foxmulder58 Praktikant
03. august 2005 - 16:34 #1
Her er et par beskrivelser:

A:link
Defines the style for normal unvisited links.

A:visited
Defines the style for visited links.

A:active
Defines the style for active links.
A link becomes active once you click on it.

A:hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
Note: Not supported by Netscape browsers prior to version 6.


Ser lige efter et par eksempler på kode også.....!
Avatar billede foxmulder58 Praktikant
03. august 2005 - 16:36 #2
Her er et eksempel på Hover:


<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
</style>




her er et eksempel på overline/underline:

<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline overline; color: red;}
</style>
Avatar billede foxmulder58 Praktikant
03. august 2005 - 16:36 #3
og her er et eksempel med 2 sags links i CSS:

<html>
<head>
<style type="text/css">
.class1 A:link {text-decoration: none}
.class1 A:visited {text-decoration: none}
.class1 A:active {text-decoration: none}
.class1 A:hover {text-decoration: underline; color: red;}

.class2 A:link {text-decoration: underline overline}
.class2 A:visited {text-decoration: underline overline}
.class2 A:active {text-decoration: underline overline}
.class2 A:hover {text-decoration: underline; color: green;}
</style>
</head>

<body>
EN TYPE LINK
<br>
<span class="class1">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
<br>
<br>
EN ANDEN TYPE LINK
<br>
<span class="class2">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
</body>
</html>






håber du kan bruge det!



mvh
mads
Avatar billede jokkejensen Novice
03. august 2005 - 16:38 #4
du laver flere links ved at sige

a.mitlink:link

a.mitlink:hover

a.etandetlink:link

a.etandetlink:hover

<a href="#" class="mitlink">
<a href="#" class="etandetlink">

a:link sætter formatering for alle links
Avatar billede foxmulder58 Praktikant
03. august 2005 - 16:39 #5
måske har jeg misforstået dit spørgsmål?

Men jeg er ikke sikker...ellers må du undskylde!


mvh
Mads
Avatar billede mr2wear Nybegynder
03. august 2005 - 16:42 #6
Hehe tusind tak til jer begge to.. - jeg tror du misforstod det lidt ja, hehe.. jokkejensen kom ihvertfald med lige præcis det jeg skulle bruge..

du skal lige lave et svar hvis du vil ha point..

fortsat go dag begge ;)
Avatar billede mr2wear Nybegynder
03. august 2005 - 16:45 #7
"a:link sætter formatering for alle links"
- vil det sige at jeg skal slette a.link og istedet lave a.1:link og a.2:link ??
Avatar billede jokkejensen Novice
03. august 2005 - 16:54 #8
man gør ofte det at man bruger a:link til ting ALLE links skal have.. eksempelvis.. hvis du gerne vil have understreget på ALLE :hover links...

så er det bare
a:link
{
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
a.1:link:
{
color:blue;
}
a.2:link
{
color:black;
}
Avatar billede jokkejensen Novice
03. august 2005 - 16:55 #9
ok ?
Avatar billede foxmulder58 Praktikant
03. august 2005 - 16:56 #10
skal linket have en ny farve hver gang man holder musen over dem? Altså skifte farve hele tiden?

mvh
Mads
Avatar billede foxmulder58 Praktikant
03. august 2005 - 16:57 #11
mit CSS gør da det samme som JokkeJensen`s eller er jeg forkert på den?`

mvh
Mads
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:03 #12
ok.. jeg har ik forklaret mig ordentlig.. jeg bruger en .css fil til det hele.

Der er så en masse links iblandt teksterne, men de skal ikke skille sig ud fra teksten, undtagen når man holder musen over, dvs. de har en hover effekt.

Så er der nogle andre links. Det er nogle 'Læs mere' links som skal have en farve hele tiden, men have den samme effekt som førnævnte link: skifte farve når musen er over.

Altså: To links, to forskellige farver.

- Hvordan?
Avatar billede foxmulder58 Praktikant
03. august 2005 - 17:08 #13
ja det er netop det mit eksempel gør ud på se ved at definere 2 forskellige klasser i CSS hvor du definerer at almindelige links skal have éet udseende og "læs mere" skal have et andet udseende´!. eksempel:


<style type="text/css">
.almLink A:link {text-decoration: none}
.almLink A:visited {text-decoration: none}
.almLink A:active {text-decoration: none}
.almLink A:hover {text-decoration: underline; color: red;}

.laesMere A:link {text-decoration: underline overline}
.laesMere A:visited {text-decoration: underline overline}
.laesMere A:active {text-decoration: underline overline}
.laesMere A:hover {text-decoration: underline; color: green;}
</style>

Du kan jo selv eventuel definere hvilket udseende de så skal have!


mvh
Mads
Avatar billede foxmulder58 Praktikant
03. august 2005 - 17:09 #14
<body>
2 forskellige links
<hr/>
<span class="almLink">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
<br>
<br>
EN ANDEN TYPE LINK
<br>
<span class="laesmere">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
</body>
</html>


Prøv at sætte dette ind i et dokument og brug de 2 klasser så har du 2 type af links !


mvh
Mads
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:14 #15
Ok, ja.. Men er det ikke muligt at gøre det hele fra en .css fil? For der 32 sider, og hvis jeg skal skrive en class på hvert enkelt link, så kommer det jo til at ta et stykke tid.. men det er jeg jo nok nødt til så :D
Avatar billede foxmulder58 Praktikant
03. august 2005 - 17:19 #16
jo selvfølgelig er det muligt via et enkelt style sheet.

Du skal bare lave 1 style sheet du kan kalde det mitStylesheet.css deri skal du definere disse 2 regler som ovenfor og linke til det fra <head> </head> i dine HTML dokumenter!


mvh
mads
Avatar billede foxmulder58 Praktikant
03. august 2005 - 17:25 #17
men nu siger du noget for gad vide om man egentlig kan have flere regler for <a> når man anvender et  eksternt CSS, så skal de forskellige <a> have hver deres class eller ID.

Men at definere <a> via eksternt CSS kan jo se således ud:

<-------------------mitStylesheet.css ----------------------------->
a:link, a:visited, a:active
{
text-decoration: none;
color: #3333bb;
background: transparent;
}

a:hover, a:focus
{
color: #cc0055;
background: transparent
text-decoration: underline overline
}




<------------------------------------------------------->
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:27 #18
det ser således ud nu :
<-------------------mitStylesheet.css ----------------------------->


a.almLink:link {
    color: #555555;
    text-decoration: none;
}
a.almLink:visited {
    color: #555555;
    text-decoration: none;
}
a.almLink:hover {
    color: #f7931d;
    text-decoration: none;
}

a.laesMig:link {
    color: #9ccb3b;
    text-decoration: none;
}
a.laesMig:visited {
    color: #555555;
    text-decoration: none;
}
a.laesMig:hover {
    color: #f7931d;
    text-decoration: none;
}
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:28 #19
og jeg har defineret de forskellige links med  class="almLink" og  class="laesMig"

- og det virker ik :-|
Avatar billede foxmulder58 Praktikant
03. august 2005 - 17:32 #20
nej for du har byttet rundt på det,


<style type="text/css">
.almLink A:link {text-decoration: none}
.almLink A:visited {text-decoration: none}
.almLink A:active {text-decoration: none}
.almLink A:hover {text-decoration: underline; color: red;}


mvh
Mads
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:33 #21
Byttet rundt?
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:34 #22
- now im lost!
Avatar billede foxmulder58 Praktikant
03. august 2005 - 17:34 #23
ja se det eksempel jeg gav dig det er den rigtige måde at definere dette på!

mvh
Mads
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:35 #24
i en .css fil??
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:37 #25
ok, nu forstår jeg.. undskyld jeg er forvirret :)
Avatar billede foxmulder58 Praktikant
03. august 2005 - 17:42 #26
måske sådan her:
<----mitStylesheet.css----->

a.mitLink {
text-decoration: underline;
color: red;
}

a.laesMig {
text-decoration: none;

}

<------------------------------------->


prøv  lige at teste denne engang!


mvh
MAds
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:44 #27
det andet virker ik ihvertfald.. - prøver lige :)
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:49 #28
det virker! sejt.. så mangler jeg bare en hover på dem..
er det så:

a.mitLink:hover {
text-decoration: underline;
color: red;
}

a.laesMig:hover {
text-decoration: none;

}


???
Avatar billede foxmulder58 Praktikant
03. august 2005 - 17:50 #29
ja den burde virke sådan her:

a.laesMig:hover {
text-decoration: none;

}


mvh
Mads
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:52 #30
det gør det minsandten!

jeg kan slet ik sige nok tak!!!
du skal lige have nogle velfortjente point ;)

/Frederik Frø
Avatar billede foxmulder58 Praktikant
03. august 2005 - 17:54 #31
ok svar!

:)

mvh
Mads
Avatar billede mr2wear Nybegynder
03. august 2005 - 17:58 #32
jeg sir tusind tak ;)
Avatar billede foxmulder58 Praktikant
03. august 2005 - 17:58 #33
selv tak!! :)
Avatar billede roenving Novice
03. august 2005 - 19:45 #34
Typisk vil man jo ønske at have forskellige links efter hvor de optræder i dokumentet, og så kan man ligespågodt benytte sig af cascading i css (Cascading StyleSheets !-), hvor underelementer kan adresseres med selektorer, som adskilt af mellemrum indeholder flere selektorer, f.eks. som fox'en viser med .almLink a @ 17:08:08
Avatar billede olebole Juniormester
04. august 2005 - 16:37 #35
<ole>

- og hvis man så er helt hysterisk, vælger man nok rækkefølgen:

a:link
a:visited
a:hover
a:active

- men det er blot en detalje  :)

/mvh
</bole>
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
08/0812:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
07/0821:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »