CSS-Tutorial II ”Komma igång”
Oavsett om du sitter med en klar templet-design från något bloggvertyg eller vill skapa en webbplats helt från start är det en god idé att känna till grunderna i stilmallen och veta i vilken ände man ska börja.
Hur du startar?
En sida kan vara uppbyggd på flera sätt, min imaginära webbplats som jag ska använda som exempel är uppbyggd med ett sidhuvud (head), en sidopanel (sidebar), en innehållsdel (content) och sist en sidfot (footer). Jag och min sambo har debatterat kring vilken ordning man ska skriva de olika reglerna i stilmallen och egentligen spelar det ingen roll. Oftast blir det lite olika.
Först tänkte jag visa hur min imaginära webbplats ser ut på dess index-sida (index.html):
- <html>
- <head>
- <title>Titel på sidan </title>
- <link rel=”stylesheet” href=”http://www.dinsida.se/style.css” type=”text/css” media=”screen” />
- </head>
- <body>
- <div id=”wrapper”>
- <div id=”header”>
- Allt inom headern
- </div>
- <div id=”side”>
- Allt inom sidopanelen
- </div>
- <div id=”content”>
- Allt inom innehållssidan
- </div>
- <div id=”footer”>
- Allt i sidfoten
- </div>
- </div>
- </body>
- </html>
Detta skrev jag upp för att visa lite i vilken ordning det kan vara bra att tänka. html kommer först och sedan kommer body som omsluter hela fönstret. Allt som ska visas i fönstret omsluts av body-taggen. Wrapper omsluter själva sidan. Resten är div-id:erna för respektive del (header, sidebar, content, footer).
Det är bra att ha en sådant här struktur när du startar så du vet med vilken div-id du ska starta.
Arv och hierarki
För er som studerat biologi på gymnasiet eller helt enkelt inte är helt tappade bakom flötet vet att barn ärver attribut (utseende) från sina föräldrar. Precis så fungerar det även inom css. Stammfadern av allt som ska synas i webbläsaren är body-taggen. Alla taggar har arv från body-taggen. Sedan kommer diverse taggar i ordning efter det. Det kommer garanterat spara dig lite tandgnissel om du lär dig lite kring arv och hierarki.
Det finns vissa modifikationer med denna bild, en sida behöver inte starta med en div-tagg men eftersom min imaginära sida ska starta med en wrapper så tänkte jag ta med den ändå. Sedan kommer p, img, ul ol och h1. img-taggen är ett inline-element så den ärvs från p, dock tog jag den för sig själv eftersom img-taggen inte nödvändigtvis behöver omslutas av ett p och i de fall p ej omsluter img ärver inte img.
Det finns vissa saker som alltid ärvs och andra saker som aldrig eller sällan ärvs. Saker som alltid ärvs är font och font-color. Saker som aldrig ärvs är margin, padding och floats. Men kan säga att det som hör till text-attribut ärvs medan det som hör till positionering i block-element aldrig ärvs.
OBS. Det är viktigt att hålla reda på arv när du stilar med relativa element som em och procent. Har du specificerat div-content med 80% textstorlek och sedan specifierat p med 80% så kommer den egentliga storleken på p vara 80% av contents 80%. Alltså 64%, detta är något som kan ställa till väldiga irritationer om man glömmer bort hierarkin.
Kaskaden
Detta är antagligen lite överkurs men jag tänkte skriva lite kort om vad kaskaden är. Kortfattat är kaskaden varifrån stilarna kommer ifrån. Mer kortfattat än så går det nog inte att få det.
Du kanske har tänkt på att saker som b, p, a (vanligtvis stilad skitfullt) och listor är förstilade. Denna stilen finns vanligtvis redan i webbläsarens standardformatmall. Det är den som är absolut överst i den ordning som webbläsaren väljer att hämta formateringen. Detta är specifikt störigt för alla som sitter med I.E. Så här ser ordningen ut:
- Webbläsarens standardformatmall
- Användarformatmall
- Författarstilmall
- Inbäddade stilar skapade av författaren
- Inline stilar skapade av författaren
Användarformatmall används vanligtvis av de som har nedsatt synfunktion och/eller färgblindhet. Det flesta av oss ställer inte in något specifikt i användarformatmallen så jag tänkte hoppa den helt. Sedan efter har vi det som är lite mer intressant för de som vill arbeta med hemsidor, nämligen stilmallen. Grundprincipen är alltså att om vi har taggen p som är specificerad med arial i stilmallen men en inbäddad stil har p specificerat med verdana kommer p att visas som verdana. Är dock inget specificerat i varken den inbäddade stilen, stilmallen, användarformatmallen kommer p att visa Times eftesom det är standard för alla webbläsare. Vi kan ta ett konkret exempel med p-taggen.
- Webbläsarens standardformatmall
- p: color: black
- Användarformatmall
- p ej specificerat
- Förtfattarstilmall
- p: red
- Inbäddade stilar skapade av författaren
- p ej specificerat
- Inline stilar skapade av författaren
- p: blue
Texten kommer i detta fall vara röd förutom på de inline-element där texten blir blå. Det finns även en hel del andra regler kring kaskaden som jag inte riktigt har lust att förklara just nu, vi tar det vid ett senare tillfälle när vi kommit mer in på klass-attribut osv. Men tanken bakom detta är först och främst få er att uppmärksamma formateringen webbläsare går efter och förklara lite kortfattat varför viss formatering kan se latjo ut beroende på vilken webbläsare ni använder. Detta är specifikt synligt när det kommer till margin och padding har jag själv märkt.
Man man kan använda ”resetters” om man vill knäppa webbläsare på näsan och designa lite mer fritt. Det finns en hel del olika resetters som funkar mer eller mindre bra. Den jag använder ser ut som följande:
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,
- h5,h6,pre,form,fieldset,input,p,th,td {
- margin: 0;
- padding: 0;
- }
Jag tycker att den funkar ganska bra och ni her helt fria att den den om ni själva vill ha en resetter.
- * {
- margin: 0;
- padding: 0;
- }
Denna funkar även men jag skulle vara lite försiktig med den, denna tar nämligen bort allt, verkligen allt. Den kan bli lite onödig markup bara för att specificera b/strong som fetstil.
Onödig markup
Hur vacker var inte den övergången? Jag är nästan lite stolt över mig själv. Min svensklärare skulle säkerligen vara stolt över den övergången. Men nu ska jag skriva om onödig markup som så många kanske inte funderat kring. Det finns två bra anledningar till att effektivisera sin markup först och främst är det mycket lättare att hitta i en stilmall som har ordning och reda, för det andra så tar mindre information i stilmallen mindre plats. Låt oss beskriva det hela med ett exempel:
Du äger en butik som har ett förråd, i ditt förråd har du din inventarier. Du betalar naturligtvis hyra för detta förråd (för er som inte hänger med så drar jag en allegori mellan förråd och webbhotell/server). Du kan antingen slänga in alla dina lådor huller om buller vilket kommer resultera i att färre lådor får plats än om du hade organiserat lådorna och staplat dem, samt att du kommer få svårt att hitta bland alla dina lådor.
Det kan vara svårt att i början veta vad som är onödigt och inte, därför tänkte jag inte gå in närmare på det nu. Sedan kan tilläggas att det går att ta det här med onödig markup lite för extremt. När du börjar kompromissa på din vision för att spara markup har du helt och hållet missat poängen med att designa.
