CSS lokalt på grupp länkar?

Helena · 2004-11-10, 14:35

Nu har jag slitit med det här i timmar, så jag chansar och frågar här. :unsure:

Jag vill använda CSS på länkarna i min meny (ingen understrykning m.m.) och bara där - inte på resten av sajten. Problemet är att menyn är en separat fil utan head-taggar, som klistras in på alla övriga sidor med hjälp av PHP.

Jag tror att det kan funka genom att använda class och span, men så vitt jag förstår måste själva instruktionerna ligga i head och för mig betyder det att alla 150 sidor måste ha denna "instruktion" trots att det bara gäller en enda fil (menyn). Det vore ju betydligt mer praktiskt att ha "instruktionerna" direkt i meny-filen. Går det överhuvudtaget att specificera utseendet på en grupp länkar lokalt? Att fixa font och teckenstorlek är inga problem, men jag får det inte att funka med understrykningen och andra textdekorationer.

~ Helena

ric · 2004-11-10, 14:44

Har du provat att sätta en class på <a> ?

ex.

Helena · 2004-11-10, 14:49

Jag är total nybörjare på CSS, så ursäkta om det här är en dum fråga, men måste jag inte skriva något i head-taggen om jag använder mig av class? Eller menar du att det inte behövs?

Jag får det att funka om jag gör så här (bara ett exempel):

Kod:

<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;}
</style>
</head>

och sen detta i meny-filen:

Kod:

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

Men jag vill alltså ha allting i menyfilen om det går, eftersom den är unik och det bara är den som ska påverkas.

mypay · 2004-11-10, 14:54

om du "klistrar in" den med hjälp av PHP så bör den filen nyttja samma CSS som den fil den klistras in i..

så här är ett enkelt sätt att lösa det

<style type="text/css">
a:link { color: #0000FF; }
a:visited { color: #0000FF; }
a:hover { color: #00AA00; }

.menu a:link { color: #0000FF; text-decoration: none; }
.menu a:visited { color: #0000FF; text-decoration: none; }
.menu a:hover { color: #00AA00; text-decoration: none; }
</style>

<body>

den här länken får en linje under: Länk
</p>

<p class="menu">
den här länken får INTE en linje under: Länk
</p>

Helena · 2004-11-10, 14:59

Tack, det har jag redan provat och det funkar. Jag ville alltså helst undvika att ha något i head. Alla mina 150 sidor har unika head-taggar (mest pga. sökmotorer och mitt eget sökscript) och ingen av dessa sidor har idag någon CSS, utan det är bara menyn som ska ha det.

Det verkade som sagt dumt att lägga in CSS-intruktioner i 150 filer när det bara gäller menyn, men jag börjar inse att jag inte har något val. Säkert blir det mer CSS med tiden och då måste jag ju ändå in i head-taggarna, så jag kan väl lika gärna börja nu...

ric · 2004-11-10, 15:01

Det är en fördel att lägga css:en i en separat css-fil

lägg en sådan här tagg inom head:

<link rel="stylesheet" href="stilmall.css" type="text/css">

skapa filen stilmall.css

lägg in classer i stilmallen

ex.

.menulink {
font-family: Verdana, Arial;
font-size: 10px;
color: #000000;
text-decoration: none;
}

notera punkten framför classnamnet. egna påhittade klasser ska ha en sådan. För att styla en tagg som ska gälla för alla taggarna använder man ingen punkt framför ex.

body {

}

sen kan du anropa classen från htmlkoden. ex. <a href="" class=""> eller <span class=""> eller <div class="">

Det finns även andra sätt att använda css på.
Här är en guide: http://www.ninetnet.com/

ric · 2004-11-10, 15:05

Du kan även lägga css i taggen direkt, men jag vet inte om det funkar i alla webbläsare.

<a href="" style="{font-size:10px;}">

Helena · 2004-11-10, 15:58

Jag valde att "bryta ut" CSS från head, som ric föreslog, och skapade olika klasser. Nu är allt fixat och fort och lätt gick det också. Tack alla för hjälpen!

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

CSS lokalt på grupp länkar?