Tycker det känns som jag blandar ihop vad ID och classer är.
Om jag förstått rätt så är ID oftast en "grej" ,Layer eller tabell exempelvis som endast kan användas en gång i ett htmldokument?
Class kan användas fler gånger i ett htmldok!?
Skillnaden id och class..
7 svar · 602 visningar · startad av Kalle M
ID är ett html-attribut som används för att unikt identifiera ett element. ID måste vara unikt och kan sättas på vilket element som helst.
Class däremot är inte unikt och används om man vill att flera element ska tilldelas samma css-egenskaper. Så class-namn är inte unika och kan tilldelas hur många gånger som helst på vilka element som helst.
Hej,
Som du antyder i frågan och som Troxy skriver är id unika och classer kan återanvändas många gånger på flera olika saker.
Ett typiskt exempel på en klass kan vara:
.inside {
padding: 1em;
}
Den vill du ju kunna använda på många olika divar eller andra taggar. Kom även ihåg att man kan använda många klasser på en tagg, typ:
<div id="content" class="right-space inside">
I detta exempel så kommer kontent att få stilar från bägge inside och right-space.
Tänk på att skapa klasser som beskriver innehållet och inte hur de ska presenteras. Klasser med namn som "right-side-content" eller "top-menu" kommer att kännas väldigt fel när/om layouten ändras till att bli horisontal, eller nåt. Då är det bättre med namn som "secondary-content", "related-content" eller "main-menu" för då kan du ändra layouten helt och hållet utan att ha missvisande klassnamn i html-koden. Det är samma visa för id:n.
Om det är "rätt" ska jag låta vara osagt men jag brukar göra så här:
Jag delar upp min sida i block, block som återkommer på alla sidor men som är unika.
Dessa block tilldelar jag sedan id:n, brukar kunna se ut så här:
<body id="body">
<div id="layout">
<div id="layout_header"></div
<div id="layout_content"></div>
<div id="layout_footer"></div>
</div>
</body>
I dessa block placerar jag sedan all info som ska visas och dessa har om det behövs klasser.
Ex:
<body id="body">
<div id="layout">
<div id="layout_header">
<span class="white">blabla</span>
</div
<div id="layout_content">
<span class="red">bleble</span>
</div>
<div id="layout_footer">
<span class="white">bloblo</span>
</div>
</div>
</body>
Behöver dock sällan använda klasser, jag ställer alla "default" värden i id:na. Brukar räcka långt!
Ex:
#layout_header {
font-size:1.2em;
}
#layout_content {
font-size:1em;
}
#layout_footer {
font-size:0.8em;
color:#ff0000;
}
#layout_footer a {
text-decoration:none;
}
Hej,
Min miss, erkänner jag villigt. dAEk har helt rätt så läs doggelitos förslag övergripande och kolla inte på namnen som där är lite missvisande. Man kan ju tycka att det är fånigt att inte döpa en varningstext till red men som dAEk påpekar kan man nästan alltid hitta på meningsfulla namn. I just mitt ex skulle ju varning vara en bra klass.
PierreR skrev:
läs doggelitos förslag övergripande och kolla inte på namnen som där är lite missvisande
Det är väl till viss del tycke och smak hur man namnger men jag måste bara försvara min namngivning.
Hur kan mina namn var missvisande? header, content, footer?
Det ska vara att dom startar med layout_ då, men jag skriver så för att veta att det är ett designblock som det gäller.
Och att namnen ska funka i både horisontellt och vertikalt läge köper jag inte.
Det finns ju inte en chans att marginaler, paddings, färger, storlekar osv. passar i båda lägena.
doggelito skrev:
Och att namnen ska funka i både horisontellt och vertikalt läge köper jag inte.
Det finns ju inte en chans att marginaler, paddings, färger, storlekar osv. passar i båda lägena.
Det spelar ingen roll om du köper det eller ej -det är så. ;)