15 svar · 1 132 visningar · startad av haider
Det värsta jag vet när man sackar efter med kunskap är att man går miste om grundläggande saker som småbarn har fått lära sig i dagis. Det vill säga om det undervisas CSS där. :p
Jo, min fråga är, vad är skillnaden mellan dessa två rader:
#Produkttabell p {
... }
.Produkttabell p {
... }
tack i förväg :stud
# är id = unikt
. är för class. kan användas (rent standard) till flera element. men endast en tagg i dokumentent får ha <div id="produkttabell"><p>Ett stycke text</p></div>
Fel skrivning av mig
Möjligen kan detta inlägg förklara lite mer:
http://www.webforum.nu/showthread.php?p=1378309#post1378309
Tack!
jag har nämligen slarvat med programmering och haft flera element med samma ID och på så vis har jag tilldelat CSS:er åt dem. Japp, pinsamt men sant ;)
Så nu när jag vet är det bara o skriva punkt och ersätta ID= med CLASS=
Och tack aasah för länken, den gav upphov till lite fler frågor:
Om jag anger en class åt en tabell, kan man då dela upp de olika elementen på detta vis:
.TableClass { .... }
.TableClass p td { ... }
.TableClass tr { ... }
med frågan menar jag, att om bara table-taggen har denna class, kan underliggande taggar ärva denna class?
haider: Ja du kan göra så du skriver. (förutom .TableClass p td) då det är fel HTML struktur. Eftersom du namnge .TableClass och inte table.TableClass så kan andra taggar också få de egenskaper du sätter på din klass.
Jaha, för att isolera så måste jag med andra ord skriva table.TableClass, p.TableClass osv?
Jag tänkte att man kunde använda samma class-namn men att denna class ger olika effekt på olika taggar.
haider skrev:
Jaha, för att isolera så måste jag med andra ord skriva table.TableClass, p.TableClass osv?
Nej. Jag tror voigtann1s förklaring blev lite konstig.
Han menar nog att du inte kan skriva ".TableClass p td" eftersom "p" inte kan vara förälder till "td". Men du ska kunna skriva tvärtom om du vill: ".TableClass td p" som alltså fungerar hierarkiskt korrekt. Men det ska egentligen räcka med bara ".TableClass p" eller bara ".TableClass" lite beroende på vilka attribut det är du jobbar med.
haider skrev:
Jag tänkte att man kunde använda samma class-namn men att denna class ger olika effekt på olika taggar.
Jo, i princip och i teorin skulle det kunna vara så i några enstaka fall (om jag förstår dig rätt, vill säga). Du skulle t.ex. kunna ha en class där du har både font och t.ex. höjd och applicera den på både en <hr> och en <p>. Men det skulle inte funka i längden. Det bästa är att ha en class för varje tag, annars blir man nog snart ganska förvirrad (och om andra ska jobba med sajten kommer dom definitivt att få högt blodtryck).
Tack Danne!
Hmm, jag har tänkt lite mer på det här. Jag glömde ett tag vad jag egentligen ville veta.
I grund och botten tänkte jag att jag har en class, tex "TableClass".
Nu skrev jag kanske fel som tog med både p och td på samma gång, men vad jag försökte säga är att om tabellen skulle få classen TableClass, kunde jag då "isolera" de taggar som fanns inne i tabellen? Det som kan finnas i en tabell är ju tr, td, p, img mm.
Men så skriver du Danne att det räcker med .TableClass. Så om jag bara har attribut som bara tillämpas för tex fonter, så är det bara att stoppa in dem i .TableClass medan om jag vill ha sådant som är unikt för TD, så skriver jag .TableClass td, har jag förstått det rätt?
Annars tror jag att jag har förstått vad du menar att det kan bli förvirrande i längden. Sådant måste jag låta smälta lite i taget och att man behöver fråga på och få nya svar för att fylla ut alla luckorna.
En sak till förresten. Kan man alltså skriva "table.TableClass" ? eller kommer ta namnet alltid efter klassnamnet? Vad är isåfall skillnaden?
För övrigt, varför skulle man vilja skapa ID-baserade css:er? Nu när jag har förstått detta med ID lite mer så känns det lite meningslöst, eller?
haider skrev:
För övrigt, varför skulle man vilja skapa ID-baserade css:er? Nu när jag har förstått detta med ID lite mer så känns det lite meningslöst, eller?
Bland annat för att id har högre prioritering än en klass.
.tjo {color:green;}
#hej { color:black;}
<p class="tjo" id="hej">Välkommen</p>
Så kommer din text bli svart, inte grön.
okej, men eftersom rätt arbetssät innebär att man bara får ha ett objekt med ett visst ID, hur kan detta användas rent praktiskt?
<div id="newsContainer"></div>
document.getElementById("newContainer").innerHTML = "Senaste nytt";
Om du skulle sätta två st divar med samma id så kommer bara den första div taggen få innehållet "Senaste nytt". Du kan testa olika ajax lösningar som byter innehållet i idn.
haider skrev:
okej, men eftersom rätt arbetssät innebär att man bara får ha ett objekt med ett visst ID, hur kan detta användas rent praktiskt?
Bara din uppfinningsförmåga sätter gränsen ;)
Antag att du har en knippe regler för en snygg "blänkare" på en sida som du håller ihop med .TableClass.
Då kan du *enkelt* definiera om valfri egenskap (bakgrundsfärgen i exemplet) utan att byta klass på blänkaren genom att förse en container med ett id.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>w333!</title>
<style type="text/css">
.TableClass {background-color: #eee}
.TableClass th {background-color: #ffc}
#turbo th {background-color: #cff}
</style>
</head>
<body>
<div id="standard">
<table class="TableClass">
<tr><th>Rubrik</th></tr><tr><td>Innehåll<br/>Innehåll<br/>Innehåll</td></tr>
</table>
<table class="TableClass">
<tr><th>Rubrik</th></tr><tr><td>Innehåll<br/>Innehåll<br/>Innehåll</td></tr>
</table>
</div>
<div id="turbo">
<table class="TableClass">
<tr><th>Rubrik</th></tr><tr><td>Innehåll<br/>Innehåll<br/>Innehåll</td></tr>
</table>
<table class="TableClass">
<tr><th>Rubrik</th></tr><tr><td>Innehåll<br/>Innehåll<br/>Innehåll</td></tr>
</table>
</div>
</body>
</html>
Oavsett om du sätter id på en div (som i exemplet) eller i en tabellcell (om du t.ex. föredrar tabellbaserade layouter) kan du på så sätt utnyttja CSS för att snabbt t.ex. definiera rubrikfärg för en hel spalt åt gången. (praktiskt t.ex. om ett CMS genererar samma blänkarkod överallt och layouten ligger i en separat mall ;)
Ett annat(?) sätt att använda id på är att låta samma tag få olika utseende baserat på id:t. Om man definierar ett visst utseende på a, p, ... et c i id:t content och ett annat för foot (copyright text mm som man sällan vill ha lika stor) så behöver man inte ange någon class i taggarna.
//Ur CSS:n
#content p {
color: #663300;
font-size: 14px;
}
#content a:link {
color: #336699;
}
#foot p {
color: #000000;
font-size: 8px;
}
#foot:link {
color: #333333;
}
//Ur sidan
<div id = "content"><p>Min fina brödtext med <a href="next.html">länk</a> i.</p></div>
<div id = "foot"><p>Copyright ägs av <a href="x.html">Mr X</a>.</p></div>
aasah skrev:
Ett annat(?) sätt att använda id på är att låta samma tag få olika utseende baserat på id:t. Om man definierar ett visst utseende på a, p, ... et c i id:t content och ett annat för foot (copyright text mm som man sällan vill ha lika stor) så behöver man inte ange någon class i taggarna.
//Ur CSS:n #content p { color: #663300; font-size: 14px; } #content a:link { color: #336699; } #foot p { color: #000000; font-size: 8px; } #foot:link { color: #333333; } //Ur sidan <div id = "content"><p>Min fina brödtext med <a href="next.html">länk</a> i.</p></div> <div id = "foot"><p>Copyright ägs av <a href="x.html">Mr X</a>.</p></div>
Fast exakt samma sak får du om du byter ut dina ID:en mot klasser. Detta arbetssätt är alltså inget du behöver begränsa till enbart ID:en, utan går lika bra att implementera på klasser och element.
Okkido skrev:
Fast exakt samma sak får du om du byter ut dina ID:en mot klasser. Detta arbetssätt är alltså inget du behöver begränsa till enbart ID:en, utan går lika bra att implementera på klasser och element.
Helt sant. Fast man har väl sällan just foot på mer än ett ställe i dokumentet och då bör man väl använda id, eller? Dvs sånt som det finns högst ett av på alla sidor, och som används för att bygga sidan, så att säga...