Funktion hos stilmallar (CSS3)

Innehåll

Här beskrivs den grundläggande funktionen hos (eller teorin bakom) stilmallar och längst ner finns länkar till valideringsprogram för stilmallar.

(X)HTML ska (bör) endast användas för att märka upp olika element i ett (X)HTML-dokument, t.ex. rubriker, stycken, listor och tabeller. Det ska m.a.o. inte förekomma några instruktioner i (X)HTML om hur elementen ska presenteras. Stilmallar (CSS) används för att ändra hur elementen i (X)HTML ska presenteras, t.ex. för- och bakgrundsfärg, storlek och position. En fördel med detta är att man kan separera struktur (d.v.s. (X)HTML med information) från presentation (CSS). Man vinner också möjligheten att ändra design (utseende) för en hel webbplats genom att ändra på ett ställe: i de gemensamma stilmallarna (CSS).

CSS är inte begränsat till att endast användas med (X)HTML utan kan, i teorin, användas med alla typer av uppmärkningsspråk (eng. mark-up languages).

Varje webbläsare har en "standardmall" för hur respektive element i (X)HTML ska presenteras, något som vi användare av webbläsare kan anpassa till vårt eget tycke. (Dessa ändringar kan göra på lite olika sätt, ibland med dialogrutor och ibland genom att redigera en fil med stilmallar [CSS].) Men den grundläggande principen är att element i (X)HTML-dokument presenteras, uppifrån och ner, i den ordning de finns i dokument. Elementen anpassas (oftast) även till bredden på fönstret för besökarens webbläsare. Detta innebär, oftast, även att höjden (längden) på element påverkas. Tycker vi inte om detta, d.v.s. vi vill snygga till elementens presentation, så bör vi använda CSS för detta - vilket är ämnet för denna underwebb. :-)

En stilmall appliceras på (gäller för) en eller flera taggar för att påverka hur elementen presenteras i webbläsare. Stilmallar kan appliceras direkt på en tagg eller genom arv från en övergripande tagg (kallat cascading, d.v.s. att stilmallar "rinner" ner till underliggande/omslutna taggar). En övergripande/omslutande tagg är en tagg som innehåller (eller kan innehålla) andra taggar. T.ex. kan taggen HTML innehålla taggen BODY som, i sin tur, kan innehålla taggar som Hx, P, TABLE och UL. En stil som appliceras på taggen BODY (vilket är den första taggen som det är meningsfullt att applicera en stil på) kommer att (eller bör) gälla även för alla rubriker och stycken som placerats i taggen BODY. (Vi återkommer till de två orden "eller bör" längre ner på sidan.)

I exempel nedan så har vi t.ex. först en rubrik (H1) som ärver från BODY. Efter det finns det två stycken (P) som också ärver från BODY. Men i det andra stycket så finns betonad text (EM) som ärver från både BODY och P.

Vi skulle alltså kunna ändra typsnitt för alla element i ett dokument genom att ange en stilmall för taggen body. Om vi sen skulle vilja ha ett annat typsnitt i ett stycke, t.ex. för lite exempelkod, så behöver vi endast ändra typsnittet för det stycket.

Ofta består dokument av ett antal delar (t.ex. sidhuvud, meny, innehåll och sidfot) - detta dokument "består" t.ex. av menyn till vänster och innehållet som du läser just nu. Om vi vill att olika delar i dokument (så som meny och innehåll i detta dokument) ska ha olika stilar så brukar man använda HTML:s tagg div. I exempel nedan så har jag anpassat koden ovan för att skapa två s.k. block: ett för meny (överst) och innehåll (som exempel ovan). Jag använder mig av div-taggens attribut id för att göra blocken unikt identifierbara. (div, id och block, eller boxar, samt positionering av blocken - t.ex. bredvid varandra, som i detta dokument - behandlas på efterföljande sidor i denna underwebb.)

För att applicera stilmallar på taggar så använder man s.k. selektorer (eng. selectors), eller "namnger" stilmallar, som jag vill kalla det (och gör i denna underwebb - se Namngivning). Det är tillåtet, och vanligt förekommande, att applicera flera stilmallar på en och samma tagg, bl.a. då stilmallar kan ärvas. Detta innebär att det kan uppstå "konflikter", d.v.s. att två stilmallar vill ändra samma egenskap till olika värden, något som webbläsare har till uppgift att lösa. För att lösa dessa konflikter så har olika typer av stilmallar (se Namngivning) olika prioritet.

Nedan visas (något förenklat) vilken prioritet som olika typer av stilmallar har, d.v.s. vilken stilmall som "vinner" om det finns flera stilmallar (eller snarare egenskap eller egenskaper i stilmall) för samma tagg.

1. Stilmall i en tagg (i taggs attribut style)
2. Stilmall finns för attributet id
3. Stilmall finns för klass eller pseudoklass (eller attribut - behandlas inte i denna underwebb)
4. Stilmall finns för tagg

Men högst prioritet har eventuella stilmallar som besökare har skapat i sin webbläsare (något som [nästan] inte tas hänsyn till eller behandlas i denna underwebb). Detta kan, till viss del, motverkas m.h.a. märkningen !important (vilket inte heller behandlas i denna underwebb).

Dagens (2008-07-09) webbläsare hanterar konflikter mellan stilmallar någorlunda lika, men det kan finnas avvikelser (främst i IE) - därav "eller bör" inom parenteser ovan. Tanken är att om en stilmall appliceras på en övergripande tagg så ska dess egenskaper ärvas av inneslutna taggar. Men vissa webbläsare bryr sig ibland inte om detta arv. (Tidigare exempel, för CSS 1, gäller inte längre då de flesta uppgraderat till senare generation av webbläsare, d.v.s. webbläsare som stödjer det mesta av CSS.)

Men konflikter är varför vi webbutvecklare alltid måste testa våra webbsidor i alla webbläsare, och versioner av dessa webbläsare, som vi kan förutsätta att besökare kommer att använda. (Nåja... vi kanske kan bortse från Lynx - den textbaserade webbläsaren i UNIX-världen - eftersom den ändå inte verkar, eller behöver, stödja stilmallar. :-) Vi bör, om möjligt, även testa webbläsare i olika operativsystem (Windows, MacOS, Linux, m.fl.).

För att kunna visa på stilmallarnas påverkan på (X)HTML-elements utseende behövs ibland lite textmassa med olika typer av (X)HTML-taggar. Därför kommer många exempel att utgå från filen i exempel (nedan). I exempel innehåller XHTML-dokumentet ingen formatering alls - texten kommer t.ex. att visas med typsnittet Times New Roman i Windows.

Exempel (och underwebbens webbsidor) använder numera XHTML version 1 istället för HTML (av obestämd version då dokumenttyp saknas i början på alla HTML-filer). Detta innebär främst att (X)HTML-kod validerats, d.v.s. har korrekt syntax (se underwebben HTML), och ser lite annorlunda ut. XHTML version 1 är i stort sett HTML 4.01 fast med striktare regler för hur koden får skrivas.

Även stillmallar kan och bör, liksom (X)HTML, valideras av speciella program på Internet. Nedan finns länkar till några.

• World Wide Web Consortium (W3C)
• Web Design Group

Om man använder Firefox kan man även installera insticksprogram (plug-ins eller add-ons) som validerar sidor när man t.ex. tittar på dem i webbläsaren (så som HTML Validator) eller lägger till en verktygsrad i webbläsarens fönster (så som Web Developer) med flera verktyg för bl.a. (X)HTML, CSS och JavaScript.