6 svar · 466 visningar · startad av learn
Jag läser ofta att man ska försöka undvika att skriva sina styles direkt på hemsidan, utan istället i en separat css-fil. Detta håller jag med om, man får ju en mer välstädad kod och det blir lite enklare att i efterhand ändra sidans utseende. Men om det t.ex. bara gäller en 'clear:both' eller 'float:left' så känns det liksom lite töntigt att ge objektet en helt egen klass eller eget id...
Vad anser ni? Ge mig några bra tips på hur man bör resonera kring detta.
TackTack! :)
Om du en vacker dag exempelvis vill byta float:left mot float:right så måste du in i HTML-koden och ändra det på alla ställen. Den stora fördelen med CSS är att du istället bara behöver ändra på ett ställe i din stilmall. Så man ska alltid sträva efter att separera innehåll från utseende.
Ok, så tänker du.
Jag vill gärna ha fler åsikter.
Sedan har jag en följdfråga gällande bilder och dess css:
När jag har en bild på min sajt så ska man ju enligt många ange dess storlek, bredd och höjd. Då ska jag alltså ha en class för varje bild på sidan... Blir ju en massa kod... Tips?
Jag har också läst i Internet world att man endast bör ha en version av alla bilder, men detta medför ju att bilden får klart mkt sämre kvalitet om man via css förminskar den...?
learn skrev:
Ok, så tänker du.
Jag vill gärna ha fler åsikter.
HTML-koden borde bara innehålla sånt som har med struktur och semantik att göra. (Det är åt minstone nåt att sträva efter.) Saker som <div class="clearer"></div> finns inte där för varken struktur eller semantik, utan endast i syfte för utseendet. (En tom div är förstås ganska harmlös, men det förändrar inte situationen.)
learn skrev:
Sedan har jag en följdfråga gällande bilder och dess css:
När jag har en bild på min sajt så ska man ju enligt många ange dess storlek, bredd och höjd.
Frågan är varför? Kanske för att innehållet på sidan inte ska hoppa runt medan bilderna laddas.
learn skrev:
Då ska jag alltså ha en class för varje bild på sidan... Blir ju en massa kod... Tips?
Varför skulle man det? Du kan fortfarande använda width="" och height="" för att ange dimentionerna på bilder. Annars om du har många bilder med samma storlek, såsom i ett galleri, kan du ange dimentionerna med CSS utan att behöva klassa alla bilder.
#gallery img { width:120px; height:120px; }
learn skrev:
Jag har också läst i Internet world att man endast bör ha en version av alla bilder, men detta medför ju att bilden får klart mkt sämre kvalitet om man via css förminskar den...?
Varför skulle man bara ha en version av alla bilder? (Det kan vara logiskt om man använder vektor-bilder, men inte nödvändigtvis för raster-bilder.)
Tack för dina svar zcorpan! :bire
zcorpan skrev:
Du kan fortfarande använda width="" och height="" för att ange dimentionerna på bilder.
Aha, så det är "tillåtet" att använda <img>-taggens egna width och height... Dvs: <img src="..." width="100px" height="50px" />. Vad jag förstått så ska man i största möjliga mån använda CSS. Lite förvirrad nu...
zcorpan skrev:
Varför skulle man bara ha en version av alla bilder? (Det kan vara logiskt om man använder vektor-bilder, men inte nödvändigtvis för raster-bilder.)
Undrar jag också.
Internetworld, nr 2, sid 53 skrev:
4 experttips för webbilder:
1. Välj bara en
Lagra bara en version av alla bilder, gärna en av så hög upplösning som möjligt.
[...]
learn skrev:
Aha, så det är "tillåtet" att använda <img>-taggens egna width och height... Dvs: <img src="..." width="100px" height="50px" />. Vad jag förstått så ska man i största möjliga mån använda CSS. Lite förvirrad nu...
Visst, men frågan är vilket som är bäst, <img class="w100 h50"> eller <img width="100" height="50">? Båda innehåller presentationskod invävt i HTML-koden (bara det att den ena är lättare att underhålla).
Det kanske går att ange varför vissa bilder har olika storlek, tex <img class="icon">, <img class="photo">, <img class="logo">, osv.
Eller så låter man helt enkelt bli att ange dimentionerna. :)
Mm.
Jag har en fråga till. När man bygger upp en sidas struktur mha float (2 div bredvid varandra) spelar det någon i vilken ordning man placerar dem i koden? Alltså, kan jag lägga diven med float:left efter den med float:right?