Provläs boken!
Max räckvidd med HTML & CSS – webbguruns smartaste stilknep av Tommy Olsson 336 sidor, illustrerad, häftad utkom i november 2008 ISBN: 978-91-972705-2-6
Ur innehållet
Omslagets framsida...... 2 Omslagets baksida...... 3 Innehållsförteckning...... 5 Förord av Roger Johansson...... 11 Kapitel 3: Stilmallar...... 13 Bilaga A: Elementreferens för HTML 4.01 Strict...... 91 Sakregister...... 97 Köpställen och kontakt...... 113
Förlaget påminner om att varje form av kopi- ering eller annat mångfaldigande av text och bild ur följande utdrag är förbjuden enligt la- gen om upphovsrätt. ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page v --- #5
✐ ✐
INNEHÅLL
Förord xi Introduktion . Vem, när, hur, var, varför?...... Vem bör läsa den här boken? ...... Hur läser man boken lämpligast? ...... Vad behöver man för att följa med i bokens exempel? ...... . De tre skikten...... Innehåll: HTML...... Presentation: CSS ...... Interaktion: JavaScript ...... . Glasnost – den öppna dörrens politik ...... Funktionshinder ...... Tekniska hinder ...... Tillgänglighet på webben ...... Myter och vanföreställningar ...... Med användaren i centrum ...... Ett webbdokuments anatomi . För protokollets skull ...... . Som man frågar får man svar ...... . Hur ettor och nollor blir till bokstäver ...... ASCII ...... ISO ...... Unicode och UTF- ...... Deklarera rätt teckenkodning ...... . HTML – en revolution ...... Länkar ...... . Välj mellan tre smaker ...... Att sniffa dokumenttyper ...... Validering ......
v
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 5 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page vi --- #6
✐ ✐
. Bland taggar och element ...... Ett HTML-dokuments skelett ...... Kommentarer ...... Specialtecken ...... . Vad har en webbsida i huvudet? ...... Lägg inte bort titlarna ...... Externa resurser ...... Information om information...... Relativitetsteori ...... Exempel...... . Det är kroppen som räknas...... Kroppsfixerad?...... Vanliga attribut ...... I stort och smått ...... Vad är meningen med HTML? ...... Det elementäraste ...... Neutralitet...... Bilder och multimedia ...... Listor ...... Tabeller ...... Formulär ...... Citat och hänvisningar ...... Smått och gott...... Skript ...... Stilmallar . Varför finns CSS? ...... Nivåer, inte versioner ...... Att lära om från layouttabeller till CSS ...... . Fågel, fisk eller mittemellan? ...... Externa stilmallar...... Interna stilmallar ...... Inline-stilregler...... . Begrepp att begripa ...... Hur långt då? ...... Tänk på procenten ...... I klartext ...... Färger...... Identifikativt...... Gå någon annanstans ...... . Ett selektivt urval ...... Enkla selektorer ...... Kombinatorer ......
vi INNEHÅLL
✐ 6 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page vii --- #7
✐ ✐
Pseudoklasser ...... Pseudoelement ...... Gruppering ...... . Arv och kaskad ...... Arvsanlag ...... En kaskad av regler ...... . Typografisk kontroll ...... Vilken typ! ...... Full kontroll (nästan) ...... Avancerat finlir...... . Layoutkontroll ...... Rektanglarnas underbara värld ...... Att flyta ovanpå ...... En fin position ...... Pest eller kolera ...... . Specifik CSS ...... Listor ...... Tabeller ...... Genererat innehåll ...... . På papperet ...... Änkor och horungar ...... Sidbrytningar ...... . @-regler ...... Teckenkodning ...... Import ...... Medier och mediefrågor ...... Utskriftsmarginaler ...... Namnrymder ...... Teckensnitt ...... . Hack ...... Villkorliga kommentarer ...... Ett stjärnhack ...... Hack för IE/Win ...... Has det layout? ...... Mac-hack ...... Hacka inte i onödan ...... Skript . Historiskt...... . Kort översikt för programmerare ...... Satser och block ...... Variabler ...... Vektorer......
INNEHÅLL vii
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 7 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page viii --- #8
✐ ✐
Objekt ...... Funktioner ...... Prototyper...... En arvsfråga ...... Räckvidd ...... Villkor...... Slingor ...... . Här eller där? ...... . Vi och DOM...... Dokumentobjektmodellen ...... Att hitta rätt nod ...... . Lite försynt så där ...... . Händelserikt ...... Händelsehanterare ...... Händelselyssnare ...... . Grekiska krigare, fotbollslag och fönsterputs ...... Konsten att skapa bra webbdokument . Det var INTE bättre förr ...... . Degradering kontra förbättring...... . Inifrån och ut ...... Den visuella metoden ...... Den strukturella metoden ...... Resultatet ...... Mission:Impossible . Uppdraget ...... . Planeringen ...... . Etapp : Mallbygge och startsida ...... Grundstrukturen i HTML ...... Sidhuvudet ...... Huvudinnehållet ...... Relaterat innehåll ...... Navigeringen ...... Sidfoten...... . Etapp : Design ...... Sidhuvudet tar form ...... Vi erövrar Mittens Rike ...... Vi inflikar flikar ...... Sidfoten...... Att få det att se bra ut på papperet ...... Och så var det Internet Explorer… ...... En mall blir till ......
viii INNEHÅLL
✐ 8 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page ix --- #9
✐ ✐
. Implementation ...... Sidan ”Våra tjänster” ...... Sidan ”Priser” ...... Sidan ”Kontakta oss” ...... . Finputsning ...... . Debriefing ...... Kravställning...... Tester ...... Dynamiska sidor ...... Tillbaka till framtiden . Ex-HTML ...... Vad är XHTML?...... Vad skiljer det från HTML?...... Skillnader som berör CSS ...... Skillnader som berör JavaScript ...... Är det något att ha? ...... Vad skiljer XHTML . från XHTML .? ...... . Vad händer nu? ...... HTML, XHTML ...... CSS ...... Den semantiska webben ...... . Ja men … ...... A Elementreferens för HTML . Strict B Attributreferens för HTML . Strict C Selektorreferens för CSS . D Egenskapsreferens för CSS .
INNEHÅLL ix
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 9 ✐
✐ ✐ 10 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page xi --- #11
✐ ✐
FÖRORD
Webbens framgång och genomslag på några få år har, tillsammans med hem- mens och arbetsplatsernas datorisering och internetuppkoppling, inneburit en informationsrevolution. Det är lättare och snabbare än någonsin att hitta information om allt man kan tänka sig (och ganska mycket som man absolut inte kan tänka sig). Men det gäller tyvärr inte alltid för alla människor. I alldeles för många fall är viktig eller intressant information på de webbplatser vi besöker förbe- hållna människor som inte har några funktionshinder eller som använder den vanligaste webbläsaren på det vanligaste operativsystemet. För övriga besö- kare, till exempel den som är synskadad, rörelsehindrad, färgblind, eller helt enkelt använder en mindre vanlig webbläsare eller ett alternativt operativsy- stem, kan informationen vara svår eller till och med omöjlig att ta del av. Det borde inte vara så, men det har blivit så eftersom många webbdesig- ners och webbutvecklare har lärt sig formge och programmera webbplatser med metoder som gör att deras webbplatser inte får den räckvidd de borde ha. Ett sätt att minska förekomsten av otillgängliga webbplatser är utbildning; att nå ut till webbdesigners och webbutvecklare med information om bättre metoder. Det kan man göra med hjälp av böcker, och det finns ett allt stör- re utbud av böcker som beskriver modern och tillgänglig webbdesign och -utveckling. Problemet är att de oftast bara finns på engelska. Därför har jag länge saknat en bok om modern och tillgänglighetsinrik- tad webbutveckling på svenska. Det var med glädje jag fick beskedet att just Tommy Olsson arbetade med att skriva just en sådan bok. Tommy har länge varit en av de i mina ögon mest framstående och ihärdiga kämparna för en bättre webb som kan användas av alla, och det var ett nöje att samarbeta med honom vid arbetet med års utgåva av Vägledningen -timmarswebben. Tommy har skrivit ett stort antal lysande artiklar, publicerade bland annat på hans blogg The Autistic Cuckoo och på webbplatsen Sitepoint.com, som be- skriver komplicerade ämnen på ett enkelt sätt. Med dessa artiklar och boken The Ultimate CSS Reference i bakhuvudet förväntar jag mig inget mindre än att Tommy med Max räckvidd med HTML och CSS på ett välstrukturerat och pe-
xi
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 11 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page xii --- #12
✐ ✐
dagogiskt sätt når ut till nya och gamla webbdesigners och webbutvecklare, och förklarar hur man skapar webbplatser som inte stänger ute människor. För den som har väntat med att lära sig modern HTML och CSS i brist på en bra svensk bok i ämnet är väntan nu – äntligen – över.
Roger Johansson www.bereastreet.com
✐ 12 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 57 --- #69
✐ ✐
STILMALLAR
CSS står för Cascading Style Sheets där ”kaskaden” är ett centralt begrepp som ger oss stor frihet i hur vi ska- par våra stilmallar. CSS är ett språk som låter oss tala om hur ett webbdokument ska presenteras. I det här kapitlet kommer vi att gå igenom CSS i detalj.
Det finns inga kompletta exempel i det här kapitlet, eftersom boken då skulle bli alldeles för tjock (och dyr). Vi kommer att se gott om exempel på CSS i praktiken senare i boken, men experimentera gärna medan du läser det här kapitlet också. Skapa ett HTML-dokument med diverse olika element i, och pröva att tillämpa de olika egenskaperna för att se hur de fungerar. Vi måste dessvärre lära oss en hel del nya begrepp, men det sägs ju att kun- skap inte är tungt att bära.
. Varför finns CSS?
I begynnelsen var HTML. Webbläsaren bestämde hur innehållet skulle pre- senteras och det var inte meningen att författaren ens skulle försöka påverka. När författarna fick sällskap av formgivare ställdes andra krav på möjligheter att styra layout och typografi. Till en början försökte man åstadkomma det ge- nom att lägga till nya elementtyper i HTML; elementtyper som inte uttryckte vad innehållet var, utan bara hur det skulle se ut. Att blanda presentationskontroll med innehållet visade sig vara en olämp- lig lösning, eftersom det blev ohanterligt att underhålla. Varje gång man ville byta design på en webbplats var man tvungen att redigera HTML-koden för varenda sida – och det kunde handla om tusentals sidor! Skarpa hjärnor arbetade på olika håll för att komma på ett bättre sätt. Netscape, som var marknadsledande i mitten av -talet, lanserade ett stil-
Dock bara av personer som aldrig gjort storfynd på bokrean.
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 13 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 58 --- #70
✐ ✐
mallsspråk baserat på JavaScript, men det slog aldrig riktigt igenom. I stället var det CSS, utvecklat av norrmännen Bert Bos och Håkon Wium Lie, som eta- blerade sig som det ledande, och sedermera det enda, språket för stilmallar. Med CSS kan vi skapa en separat stilmall som kontrollerar presentationen för en hel webbplats, oavsett hur många sidor den innehåller. Vill vi byta de- sign behöver vi (i teorin) bara ändra i stilmallen och så slår ändringarna ige- nom på varenda sida. Vinsten ur underhållssynpunkt går inte att överskatta. Även om en total omdesign kanske inte inträffar så ofta, är det inte alls ovanligt att man vill göra mindre, men genomgående förändringar av presen- tationen. Kanske h2-rubrikerna är en aning för stora, eller kanske betonade element skulle göra sig bättre i fetstil än som kursiva. En sådan ändring gör vi på sekunder i en extern stilmall, medan det kan röra sig om flera veckors jobb på en stor webbplats där typografin styrs av föråldrade -taggar. En annan stor fördel med CSS jämfört med presentationskod är att vi kan ange olika CSS-regler för olika medier. Vi kan alltså styra hur sidorna ska se ut vid utskrift på papper, utan att behöva skapa särskilda ”utskriftsvänliga” sidor. Vi kan definiera en stilmall för mobila enheter med små bildskärmar, som skulle vara svåra att använda mot en webbplats med tre eller fyra spalter på varje sida. Även för användaren innebär CSS stora fördelar, eftersom en extern stil- mall lagras i webbläsarens cache och bara behöver hämtas en enda gång per webbplats. Eftersom HTML-koden blir mycket magrare utan alla presenta- tionselement går det snabbare att hämta sidorna. Det här innebär också fördelar för den som äger webbplatsen. Eftersom mindre data behöver skickas till varje användare minskar behovet av band- bredd, vilket i sin tur medför lägre kostnader.
Nivåer, inte versioner CSS finns, till skillnad från HTML, inte i flera olika versioner. I stället talar man om nivåer. Varje ny nivå lägger till nya finesser ovanpå de föregående nivåerna. Den första specifikationen, Cascading Style Sheets Level , eller CSS, gavs ut . Den ger oss möjligheter att styra färger och kantlinjer, marginaler och en del typografi. Det tog tid innan CSS anammades på allvar. Dels dröjde det innan webblä- sarna hade tillräckligt bra stöd för att CSS skulle bli användbart på allvar, dels var många formgivare ovilliga att kasta bort sina surt förvärvade kunskaper om layouttabeller och spacer-bilder för att lära sig något helt nytt. Den första webbläsaren med något som helst stöd för CSS var Internet Ex- plorer . Netscape var sena i starten och tvingades införa ett rudimentärt – och extremt buggigt – CSS-stöd nästan som en eftertanke i version .
STILMALLAR
✐ 14 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 59 --- #71
✐ ✐
År kom den efterlängtade Cascading Style Sheets Level (CSS). Äntligen fanns det möjligheter att styra layout med CSS och det verkade som om himmelriket var nära. Ganska snart förbyttes dock formgivarnas hoppful- la leenden mot irriterade grimaser i takt med den påtagliga avsaknaden av fungerande CSS-stöd i webbläsarna. Netscape hade tvingats tillbaka till ritbordet. Deras missbedömning av hur populärt CSS skull bli gjorde att Microsoft tog över ledartröjan och Internet Explorer blev den klart mest använda webbläsaren; en position den innehar än i dag. Några år senare försvann Netscape. Den nya version de arbetat på förvand- lades till ett öppen-källkodsprojekt under namnet Mozilla, vilket så småning- om resulterade i den webbläsare vi i dag känner som Firefox. Norska Opera arbetade oförtrutet vidare i skuggan av jätten från Redmond. Deras webbläsare kostade dock pengar, även om det fanns en gratisversion som visade lite reklam, och de kunde aldrig konkurrera med Internet Explorer som följde med varje sålt Windows-system. Tekniskt sett låg Opera långt före huvudkonkurrenten, men det hjälpte föga. Opera var exempelvis den första ”stora” webbläsaren som kunde visa webbsidor i tabbflikar. Numera är även Opera gratis, men för en oförtjänt tynande tillvaro – utom i mobiltelefoner där den är marknadsledande. Opera är oftast först med innovativa finesser som sedan kopieras av till exempel Firefox och Internet Explorer (zoom, kortnum- mer och musgester, för att nämna några). Inte förrän Internet Explorer för Windows kom () blev det praktiskt möjligt att börja använda CSS för all presentation. Tyvärr slutade Microsoft att utveckla sin webbläsare när IE lanserats; man hade krossat Netscape och var oomstridd herre på täppan, så det fanns ingen kommersiell anledning att lägga ned mer pengar på en gratisprodukt. När Firefox så småningom började ta marknadsandelar på allvar blev Microsoft emellertid tvungna att väcka liv i utvecklarteamet igen. IE rättade en hel del fel som föregångaren dragits med i ett halvt årtionde, och lade även till stöd för fler delar av CSS, men den är fortfarande ljusår efter Opera, Firefox och Apples Safari. Trots det står IE och IE tillsammans för en förkrossande majoritet av marknaden, vilket innebär att vi som bygger webbplatser måste anpassa oss efter deras fel och brister. Det visade sig att delar av CSS var svåra att förverkliga och dessutom fanns det en del brister i specifikationen. Efter några år reviderade därför WC specifikationen och anpassade den efter hur webbläsarna faktiskt fun- gerade. Den reviderade utgåvan heter Cascading Style Sheets Level Revision , eller CSS. i dagligt tal. Det är den gällande specifikationen, så när man talar om CSS är det CSS. man menar. Arbetet med den tredje nivån, CSS, pågår sedan flera år. Specifikationen är indelad i olika moduler, och tanken är att de ska kunna bli rekommenda-
VARFÖR FINNS CSS?
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 15 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 60 --- #72
✐ ✐
tioner oberoende av varandra. Opera, Firefox och Safari har stöd för vissa delar av CSS, trots att ingen modul ännu har officiell status.
Att lära om från layouttabeller till CSS Från -talets mitt och tio år framåt var det allra vanligaste sättet att kon- trollera webbsidors layout att använda tabeller (table-element) i HTML-kod- en. Mer avancerade layouter hade ofta tabeller i tabeller, ibland uppemot nio(!) nivåer. För att skapa ”luft” mellan designelementen använde man van- ligen en transparent GIF-bild i storleken × pixel, som man sedan töjde ut till önskad storlek i webbläsaren. Förutom att det här var ett gravt missbruk av HTML och att det orsakade stora användbarhetsproblem för människor med vissa funktionshinder, var det också ganska omständligt att lära sig. Det var också synnerligen felbenä- get, eftersom en enda missad sluttagg kunde få katastrofala följder för pre- sentationen. Även om CSS i vissa delar är ganska komplext är det i alla fall avsevärt mycket lättare att förstå och att använda. Trots det brukar webbdesigners som är vana vid layouttabeller och transparenta GIF-bilder tycka att CSS är nästin- till oöverstigligt svårt. Hur kan det komma sig? Orsaken är att man behöver tänka på helt olika sätt i de två metoderna. Med layouttabeller är man hänvisad till ett rutnät av rader och kolumner, där innehållet ska placeras i rätt cell. Rutnätet blir det som styr, och innehållet styckas upp efter de krav som rutnätet ställer för att åstadkomma den öns- kade layouten. Följden blir ofta en ologisk ordning på innehållet, vilket ger problem för användare som konsumerar dokumentet linjärt – exempelvis via en skärmläsare. Layoutarbete i CSS är mer ”objektorienterat” (för att använda ett populärt modeord). Här utgår man från innehållet och skapar stilregler för att placera objekten där man vill ha dem. Båda metoderna kräver sitt speciella sätt att tänka. Att skapa en tabellayout med objekttänk är praktiskt taget omöjligt, medan ett rutnätstänk leder till onödigt komplicerad CSS. Att lära om kan alltså vara lite utmanande, men det är inte detsamma som omöjligt. Den som är van att arbeta med layouttabeller kan mycket väl bli en utmärkt CSS-designer. En förutsättning är dock att man är beredd att lämna rutnätet bakom sig.
WC är inget standardiseringsorgan
STILMALLAR
✐ 16 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 61 --- #73
✐ ✐ . Fågel, fisk eller mittemellan?
Innan vi ger oss i kast med detaljerna i CSS ska vi titta på hur vi kan koppla presentationsregler i CSS till våra HTML-dokument. Det finns tre möjligheter: ◮ externa stilmallar ◮ interna stilmallar ◮ inline-stilregler. En extern stilmall är en separat CSS-fil som länkas till HTML-dokumentet (vi ska strax se hur). Det är det klart bästa sättet, eftersom presentationen då är helt separerad från innehållet och vi har ett enda ställe att ändra på om vi vill modifiera presentationen. En intern stilmall är en uppsättning CSS-regler som anges i ett style-ele- ment i huvudet (head) på ett HTML-dokument. Presentationen är visserligen delvis separerad från innehållet, men den gäller bara för den sidan och vi går miste om fördelarna med caching. Att ange stilregler inline (i ett style-attribut) är vanligtvis inte att rekom- mendera. Det skapar samma hårda koppling mellan presentation och inne- håll som forna tiders presentations-HTML. CSS-koden ligger blandad med HTML-koden och man måste redigera varje HTML-fil för sig.
Externa stilmallar
Vi länkar till en extern stilmall med hjälp av ett link-element i head-delen av ett HTML-dokument. Ett typiskt exempel kan se ut så här:
css" media="screen,projection">
Attributet rel anger vilken relation den länkade resursen har med doku- mentet; i det här fallet är det en stilmall (stylesheet). Attributet type anger MIME-typen och ska alltid anges som text/css. Attributet href anger URI:n till stilmallen som en dokumentrelativ, rotre- lativ eller absolut URI. Attributet media kan innehålla en kommaseparerad lista av medietyper för att ange att stilmallen bara ska användas för vissa medier. De giltiga medie- typerna i CSS. ser du i tabell .. En extern stilmall kan anges som ”alternativ”, vilket innebär att använda- ren kan välja mellan flera olika stilmallar. Opera och Firefox har stöd för al- ternativa stilmallar, men inte Internet Explorer.
Det borde egentligen vara style sheet, men rel kan innehålla flera blankseparerade värden så man måste skriva ihop det till ett ord.
FÅGEL, FISK ELLER MITTEMELLAN?
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 17 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 62 --- #74
✐ ✐
Medietyp Beskrivning all alla medier braille punktskriftsdisplayer embossed utskrift på brailleskrivare handheld handhållna enheter (mobiltelefoner, m.m.) print utskrift på papper, eller förhandsgranskning på skärmen projection visning via projektor screen grafisk bildskärm speech uppläsning via talsyntes tty textterminaler tv tv-apparater och liknande
Tabell .. Medietyper i CSS.
En stilmall markeras som alternativ genom att man anger ordet alternate i rel-attributet:
En stilmall som inte är alternativ kallas persistent (orubblig). Den tillämpas alltid för de medier den definierats för. En alternativ stilmall som i exemplet ovan kallas preferred (önskad). Den tillämpas såvida inte användaren valt en annan alternativ stilmall. En alternativ stilmall med ett title-attribut tillämpas bara om användaren valt den. Flera alternativa stilmallar kan ha samma title-attribut, och slås då av och på tillsammans. Låt oss se på ett mer avancerat exempel:
STILMALLAR
✐ 18 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 63 --- #75
✐ ✐
Den första stilmallen, layout.css, är persistent. Den kommer alltid att tilläm- pas, oavsett vad användaren väljer. De två som följer därnäst, default_color.css och default_font.css är preferred. De tillämpas tills användaren säger något annat. Det sista paret, contrast_color.css och contrast_font.css är alternate och tillämpas inte förrän användaren väljer ”Hög kontrast” i webbläsaren. Då stängs default_color.css och default_font.css av och ersätts istället av contrast_color.css och contrast_font.css. Figur . och figur . visar hur man kan välja de alternativa stilmallarna i Opera respektive Firefox.
Figur .. Alternativ stilmall i Opera .
Interna stilmallar
En intern stilmall utgörs av ett style-element i head-delen av ett HTML-doku- ment. Reglerna tillämpas bara i det dokument som innehåller stilmallen. Lik- som för externa stilmallar kan man använda attributet media för att begränsa
Opera använder projection i fullskärmsläge Reserveras, men definieras inte i CSS.. I CSS hette denna medietyp aural.
FÅGEL, FISK ELLER MITTEMELLAN?
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 19 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 64 --- #76
✐ ✐
Figur .. Alternativ stilmall i Firefox .
de medier en intern stilmall tillämpas för. Däremot kan interna stilmallar inte vara alternativa. Interna stilmallar kan vi använda i dokument som av någon anledning ska se annorlunda ut än resten av webbplatsen, eller som innehåller något speci- fikt element som inte finns på någon annan sida (ofta formulärfält). Exemplet nedan visar en intern stilmall med en enda regel.
Inline-stilregler
CSS-deklarationer kan anges för enstaka element med attributet style. Det är nästan aldrig att rekommendera. När man felsöker en CSS-layout kan det möjligen vara användbart att exempelvis sätta en skrikig bakgrundsfärg på ett element för att se dess dimensioner, som i nedanstående exempel.
. Begrepp att begripa
Så var vi där igen: det är dags att bekanta oss med en uppsättning termer vi behöver för att kunna diskutera CSS. Figur . visar de viktigaste begreppen som vi kommer att gå igenom i de- talj i det här kapitlet.
STILMALLAR
✐ 20 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 65 --- #77
✐ ✐
Figur .. Termer i CSS.
@import url("common.css"); Det här kallas en @-regel (@-rule) och vi återkommer till dem i slutet av @-regel kapitlet. De är direktiv till CSS-tolken.
p { margin-bottom:1.5em; }
Det här är en regel (rule eller rule set), bestående av en selektor (p) och ett regel block avgränsat av { och }. Selektorn anger vilka element regeln gäller för – i selektor det här fallet textstycken. block Blocket innehåller en deklaration, bestående av en egenskap (property)– deklaration margin-bottom – och ett värde – 1.5em – med ett kolon emellan. Deklaratio- egenskap nen säger att de element som matchar selektorn (textstycken) ska ha en bot- värde tenmarginal på , em. Om ett block innehåller flera deklarationer åtskiljs de av semikolon, men det är kutym att sätta ut ett semikolon även om man bara har en deklaration. Egenskaper motsvarar de presentationsaspekter vi kan styra med CSS. Oli- ka egenskaper kan ta olika typer av värden; vissa egenskaper tar till och med mer än ett värde. CSS kan skrivas på ett fritt format, där blanktecken och radbrytningar kan användas efter eget skön (med några få undantag). Ovanstående regel skulle till exempel kunna skrivas så här:
p{margin-bottom:1.5em} eller så här:
p { margin-bottom : 1.5em ;
BEGREPP ATT BEGRIPA
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 21 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 66 --- #78
✐ ✐
} Nyckelord, namn på egenskaper och liknande är skiftlägesokänsliga i CSS, men praxis är att enbart använda gemener. Vissa saker utanför CSS kontroll kan dock vara skiftlägeskänsliga. Selektorer är det inte i HTML, men däre- mot i XML och XHTML. Namn på typsnitt kan vara skiftlägeskänsliga i vissa operativsystem. Kommentarer i CSS-koden inleds med ”/*” och avslutas med ”*/”, precis som i många programmeringsspråk. En kommentar kan sträcka sig över flera rader.
/* En kommentar på en rad */ /* En kommentar på flera rader */ Härnäst ska vi titta lite närmare på de olika typer av värden vi kan använda till olika egenskaper.
Hur långt då?
längd En mycket vanlig typ av värden kallas längd (betecknas
Förr motsvarade en em bredden på ett versalt M, därav namnet. En x-höjd är definierad även i typsnitt som inte innehåller ett gement ”x”.
STILMALLAR
✐ 22 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 67 --- #79
✐ ✐
Figur .. Teckenhöjd och x-höjd.
För presentation på bildskärmen är em oftast den mest lämpliga enheten. Px är användbart för exempelvis dimensionen på bilder och för bredden på kantlinjer, men det är olämpligt att ange dimensioner i pixel för element som ska innehålla text, eftersom användaren kan ändra textstorleken i webbläsa- ren. Vid utskrift på papper är em fortfarande gångbart, men även de absoluta enheterna. Px bör man helst undvika vid utskrift, även om CSS-specifikationen säger att de ska räknas om automatiskt vid utskrift på högupplösande skriva- re. För längdvärden som är (noll) är det tillåtet – och till och med rekom- menderat – att utelämna enheten.
Tänk på procenten Vissa typer av värden kan uttryckas i procent, med ett siffervärde följt av ett %-tecken (utan blanktecken emellan). Ett procentvärde är per definition relativt mot någonting. Exakt vad pro- centen refererar till varierar dock från egenskap till egenskap.
I klartext Vissa värden ska anges som strängar, alltså som text. En sträng omges av citat- tecken ("text") eller apostrofer ('text'). Specialtecken kan ”skyddas” genom att man skriver ett bakvänt snedstreck framför tecknet. Exempelvis, om man behöver använda en apostrof inuti en sträng som omges av apostrofer: 'O\'Brien'. Det bakvända snedstrecket används också för att infoga tecken som in- te går att mata in från tangentbordet, eller som inte kan representeras med den teckenkodning man sparar CSS-filen i. Det ska då följas av – hexa- decimala siffror som anger tecknets kodposition i standardteckenkodningen ISO/IEC (Unicode). Ett copyrighttecken (©) kan till exempel anges som \a9. Ett blanktecken efter en sådan konstruktion (som kallas escape) ignoreras, vilket man kan utnyttja om tecknet ska följas av en siffra eller någon av bokstä- verna a–f (som är giltiga hexadecimala ”siffror”). Texten ”©” kan alltså skrivas som \a9 2008.
BEGREPP ATT BEGRIPA
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 23 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 68 --- #80
✐ ✐
Om man vill ha ett blanktecken efter en escape måste man alltså skriva två blanktecken, eftersom det första ignoreras.
Färger
Färgvärden kan anges på flera olika sätt. Dels finns ett antal nyckelord (red, green, blue, etc.), men alla webbläsare stödjer inte alla färgnyckelord. Nyckelordet transparent är viktigt, eftersom det anger en genomskinlig ”färg” som inte kan uttryckas med någon av de andra metoderna. Det vanligaste formatet för färger är hexadecimal RGB, vilket inleds med ett #-tecken som sedan följs av antingen eller hexadecimala siffror. Färgen #ff0080 anger att R-värdet (rött) är FF (), G-värdet (grönt) är och B-värdet (blått) är (). En ganska gräll cerise, alltså. Färgvärden med siffror är ett kortare skrivsätt för motsvarande -ställiga värde där varje siffra dubbleras; #fc9 är alltså detsamma som #ffcc99. Dessa kortformer räknas numera som ”webbsäkra” färger och jag brukar använda -ställig notation så ofta jag kan. Färgvärden kan också anges som RGB med en funktionsnotation, till exem- pel rgb(255, 0, 128). Observera att värdena ska anges decimalt, inte hexa- decimalt. De ska ligga in intervallet –. Det går även att ange värdena i procent, som rgb(100%, 0%, 50%).
Identifikativt Nyckelord och identifierare i CSS ser ut som strängar, men får inte omges av citattecken eller apostrofer.
color:green; /* korrekt */ color:"green"; /* fel */
Gå någon annanstans Vissa värden är URI:er. Dessa skrivs med en funktionsnotation, till exempel url("bg.png"). Citattecknen är inte obligatoriska, men vissa tecken måste skyddas om man inte använder dem, så det är vanligtvis bäst att skriva ut dem. En URI kan som vanligt vara dokumentrelativ, rotrelativ eller absolut. En relativ URI i en extern stilmall är relativ i förhållande till stilmallen, inte till HTML-dokumentet som länkar till stilmallen.
Notera att funktionen är url(), inte uri() IE/Mac hanterar inte URI-värden med apostrofer, utan bara med citattecken.
STILMALLAR
✐ 24 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 69 --- #81
✐ ✐ . Ett selektivt urval
En selektor anger vilka element som deklarationerna i ett regelblock ska tilläm- selektor pas för. Den kan bestå av en kedja av delar, där varje del kallas en enkel selek- tor (namnet till trots kan de vara nog så komplicerade). Mellan två delar finns enkel selektor alltid en kombinator som uttrycker hur delarna förhåller sig till varandra. kombinator Kedjan kan avslutas med ett pseudoelement; ett begrepp som förklaras ne- pseudoelement dan. En selektor kan allstå bestå av en enda ”enkel” selektor. Den kan också be- stå av ett godtyckligt antal enkla selektorer med kombinatorer emellan. Dess- utom kan den avslutas med ett pseudoelement.
Enkla selektorer En enkel selektor börjar med en typselektor eller med en explicit eller implicit typselektor universalselektor. En typselektor matchar en elementtyp (till exempel abbr, p universalselektor eller table i HTML). Universalselektorn är en asterisk (*) och matchar alla element. Den kan vara implicit (underförstådd) om den enkla selektorn in- nehåller andra komponenter, såsom id- eller attributselektorer. Enda gången universalselektorn måste skrivas ut är alltså om den står helt ensam. Efter typselektorn eller universalselektorn kan en enkel selektor innehålla id-selektorer, klasselektorer, attributselektorer och pseudoklasser.
Id-selektorer En id-selektor består av ett #-tecken följt av en identifierare, och matchar det element som har den angivna identiteten. I HTML motsvarar det id-attributet. Eftersom ett id måste vara unikt brukar man inte ange någon typselektor framför, utan använda en implicit universalselektor.
#nav {...} *#nav {...} De två selektorerna ovan betyder samma sak. I den första är universalse- lektorn implicit, i den andra är den explicit. Om du läser andras stilmallar kan du stöta på båda varianterna, men när du skriver egen kod bör du välja en variant och hålla dig till den. Jag rekommenderar att utelämna universal- selektorn. Det går naturligtvis att använda en typselektor också, och det finns fall då det är användbart. Netscape stödjer dock inte id-selektorer med en typse- lektor framför. Observera att id-selektorer är skiftlägeskänsliga i HTML, eftersom id-attri- butet är det.
ETT SELEKTIVT URVAL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 25 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 70 --- #82
✐ ✐
Klasselektorer En klasselektor består av en punkt följd av en identifierare, och matchar al- la element som tillhör den angivna klassen. I HTML motsvarar det class- attributet.
.message {...}
Ovanstående selektor (som är *.message med en implicit universalselek- tor) matchar alla element som tillhör klassen message, exempelvis dessa:
...
- ...
Den formella definitionen för klasselektorn ”.C” är att den matchar alla ele- ment vars class-attribut är en blankseparerad lista av ord, varav ett är exakt ”C”. Observera att klasselektorer är skiftlägeskänsliga i HTML, eftersom class- attributet är det.
Attributselektorer En attributselektor omges av hakparenteser (”[” och ”]”) och matchar ett namn- givet attribut. Internet Explorer och tidigare stödjer inte attributselektorer. Attributnamnen är skiftlägesokänsliga i HTML, men inte i XML. Värdena kan vara antingen eller i HTML, beroende på attribut. I XML är dock värdena alltid skiftlägeskänsliga.
abbr[title] {...} Den enklaste formen innehåller bara ett attributnamn, och matchar då al- la element för vilka detta attribut är angivet. Exemplet ovan matchar alla för- kortningar (abbr-element) med ett title-attribut, oavsett vilket värde attri- butet har.
input[type="text"] {...} En attributselektor kan även matcha element där attributet har ett specifikt värde. Exemplet ovan matchar textfält – input-element med type="text". Opera, Firefox och Safari stödjer också tre attributselektorer från CSS, som kan vara användbara:
a[href^="http://"] {...}
STILMALLAR
✐ 26 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 71 --- #83
✐ ✐
img[src$=".png"] {...} [id*="foo"] {...}
Den första (^=) matchar länkar vars href-attribut börjar med ”http://”. Den andra ($=) matchar bilder vars src-attribut slutar med ”.png”. Den tredje (*=) matchar alla element vars id-attribut innehåller ”foo”. Observera att attributselektorer bara matchar attribut som är angivna i HTML-koden. Vissa attribut har ju standardvärden som används om attribu- tet utelämnas (till exempel method-attributet för form-element), men dessa matchas inte av en attributselektor. Observera också att [id="nav"] inte är helt ekvivalent med #nav. De mat- char visserligen samma element, men det är skillnad i specificitet – ett be- grepp vi återkommer till. Det finns ett par andra varianter av attributselektorer som inte används så ofta.
[lang|="en"] {...} [class~="message"] {...}
Den första matchar ett lang-attribut som börjar med ”en” och eventuellt följs av ett bindestreck och mer text. Den är tänkt att användas just för lang- attribut, där språkangivelsen till exempel kan vara ”en-GB” för brittisk eng- elska, ”en-CA” för kanadensisk engelska, ”en-US” för amerikansk engelska, och så vidare. Se även pseudoklassen :lang() nedan. Den andra selektorn är ekvivalent med .message, men kan teoretiskt an- vändas även för andra attribut än class.
Kombinatorer En selektor kan bestå av flera enkla selektorer åtskilda av kombinatorer. En kombinator anger hur selektorerna förhåller sig till varandra. Den vanligaste kombinatorn kallas descendant combinator och utgörs av ett blanktecken. X Y anger att elementet som matchas av Y är ett underordnat element till elementet som matchas av X.
-
- Första elementet
- Andra elementet
-
- Underelement 1
- Underelement 2
- Tredje elementet
ETT SELEKTIVT URVAL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 27 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 72 --- #84
✐ ✐
Selektorn ul li matchar alla fem li-elementen i exemplet ovan; såväl de tre som är direkt underordnade ul-elementet (barn) som de två som hör till ol-elementet (barnbarnsbarn). Kombinatorn ”>” kallas child combinator. X>Y anger att elementet som mat- chas av Y är ett direkt underordnat element (barn) till elementet som matchas av X. Selektorn ul>li matchar alltså de tre listelement som är direkt underord- nade ul-elementet i exemplet ovan, men inte de två som hör till ol-elementet. Internet Explorer och äldre stödjer inte denna kombinator. Kombinatorn ”+” kallas adjacent sibling combinator. X+Y anger att elemen- tet som matchas av Y är ett syskon till elementet som matchas av X, och att det inte finns något element mellan dem; de är intilliggande (adjacent). Internet Explorer och äldre stödjer inte denna kombinator. CSS definierar kombinatorn ”~”, sibling combinator. X~Y fungerar ungefär som X+Y, men tillåter att det finns andra element mellan X och Y. X och Y mås- te vara syskon och Y måste komma efter X i HTML-koden. Internet Explorer och äldre stödjer inte denna kombinator.
Rubrik
Första stycket.
Andra stycket.
Tredje stycket.
Selektorn h2+p matchar det första stycket, men inte det tredje efter som det inte är intilliggande relativt rubriken. Selektorn h2~p matchar det första och det tredje stycket. Ingen av selektorerna matchar det andra stycket, eftersom det inte är ett syskonelement till rubriken, utan ett syskonbarn.
Pseudoklasser
Pseudoklasser kan liknas vid de klasser vi kan ange med class-attributet i HTML, men de anges aldrig i koden utan ”inträffar” automatiskt. Två ofta använda pseudoklasser är :link och :visited, som betecknar obesökta respektive besökta länkar. De är ömsesidigt uteslutande; en länk är alltså antingen obesökt eller besökt. Pseudoklassen :focus betecknar ett element (vanligen en länk eller ett for- mulärfält) som har fokus, det vill säga reagerar på tangenttryckningar. Ett for- mulärfält kan få fokus när användaren klickar på det eller navigerar till det via tangentbordet (med Tabb i de flesta webbläsare). En länk får fokus när användaren tabbat till den. Internet Explorer och äldre stödjer inte :focus. Pseudoklassen :hover betecknar ett element som muspekaren befinner sig över. I Internet Explorer och äldre stöds den bara för länkar (a-element med ett href-attribut).
STILMALLAR
✐ 28 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 73 --- #85
✐ ✐
Pseudoklassen :active betecknar ett element medan det ”aktiveras”, allt- så från det att musknappen eller returtangenten trycks ned tills dess att den släpps upp. I Internet Explorer och äldre stöds den bara för länkar (a-element med ett href-attribut). I version och äldre tillämpas den dessutom (felak- tigt) för tangentbordsfokus. Pseudoklasserna :focus, :hover och :active är inte ömsesidigt uteslutan- de, utan kan förekomma samtidigt. De kan också kombineras med antingen :link eller :visited när det gäller länkar. De fem pseudoklasser jag nämnt ovan kallas dynamiska pseudoklasser, ef- tersom de appliceras på olika element beroende på vad användaren gör på sidan. Det är mycket vanligt att man vill styra presentationen för dessa pseudo- klasser, särskilt när det gäller länkar. Ordningen på reglerna har då stor bety- delse för resultatet. Det finns ingen ordning som är rätt eller fel, utan det beror helt på vad man vill åstadkomma. Följande ordning torde dock ge önskvärt resultat i de flesta fall:
a:link {...} a:visited {...} a:focus {...} a:hover {...} a:active {...}
:link och :visited bör anges först, eftersom de styr hur länkar ser ut i största allmänhet. Därefter är det lämpligt att ange :focus och :hover, medan :active bör komma sist för att ge någon verkan. Det går även att kombinera pseudoklasserna om man vill detaljstyra pre- sentationen. Exempelvis, om man vill ha olika utseende på obesökta och besökta länkar när muspekaren befinner sig över dem:
a:link:hover {...} a:visited:hover {...}
Pseudoklassen :lang() kan vi använda om vi vill ha olika stilregler för oli- ka språk. Den tar en språkkod som argument, till exempel :lang(en-US) för amerikansk engelska eller :lang(en) för alla engelska dialekter. Det finns en del skillnader jämfört med attributselektorn [lang|="en"]. Den matchar ett element som har attributet lang="en" (eller lang="en-US", etc.). Pseudoklassen :lang(en) matchar dock ett element där språket är eng- elska; språket behöver inte nödvändigtvis vara angivet för just det elementet, utan kan ha specificerats för ett överordnat element. Ett användningsområde för den här pseudoklassen är när man vill ange olika citattecken för q-elementet för olika språk:
Det stöds dock inte i Internet Explorer och äldre.
ETT SELEKTIVT URVAL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 29 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 74 --- #86
✐ ✐
:lang(en) q {...} :lang(fr) q {...} :lang(sv) q {...}
Pseudoklassen :first-child matchar ett element som är det första under- ordnade elementet till sin förälder.
Frukter
-
- Äpplen
- Päron
- Apelsiner
I ovanstående lista skulle selektorn li:first-child alltså matcha listele- mentet ”Äpplen”. Observera att :first-child matchar ett element som är det första under- elementet; den anger alltså inte det första underelementet till ett annat ele- ment. Selektorn ul:first-child skulle inte matcha någonting i ovanstående exempel. I CSS finns en hel uppsättning nya pseudoklasser, varav en hel del redan fungerar i moderna webbläsare. De stöds dock inte av äldre webbläsare, så man bör inte förlita sig på dem på publika webbplatser. Pseudoklassen :last-child i CSS fungerar i analogi med :first-child i CSS; den matchar alltså ett element som är det allra sista underordnade elementet till sin förälder. Varianterna :first-of-type och :last-of-type matchar det första respektive sista underelementet av angiven elementtyp, så p:first-of-type matchar det första stycket i ett element. Specifikationen för CSS anger dessutom pseudoklasserna :nth-child(), :nth-last-child(), :nth-of-type() och :nth-last-of-type(). Alla fyra tar ett argument på formen an+b, där a och b är heltal. Om a eller b är noll kan de utelämnas (a också om det är ett). Båda värdena kan vara negativa. Webbläsaren sätter n=, , , , … och pseudoklassen matchar de unde- relement som har ordningsnumren som ges av uttrycket an+b för varje värde på n. Första underelementet har ordningsnummer . Pseudoklasserna :nth-child(N) och :nth-of-type(N) matchar underele- ment som har N- syskon före sig. Pseudoklasserna :nth-last-child(N) och :nth-last-of-type(N) matchar underelement som har N- syskon efter sig. Pseudoklassen :nth-child(2n+1) matchar alltså underelement med ord- ningsnumren , , , , …; :nth-child(3n-1) matchar ordningsnumren , , , , …; :nth-child(-n+4) matchar de fyra första underelementen och :nth-child(n+2) matchar alla underelement utom det första. Argumentet kan också anges som odd (synonym för 2n+1) eller even (sy- nonym för 2n).
STILMALLAR
✐ 30 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 75 --- #87
✐ ✐
Dessa pseudoklasser gör det enkelt att skapa zebrarandiga tabeller utan att behöva sätta klasser i HTML-koden:
tr:nth-child(odd) td {background-color:#cfc} tr:nth-child(even) td {background-color:#fff}
Andra pseudoklasser i CSS är :only-child och :only-of-type, som mat- char element som är det enda underelementet till sin förälder; :root som matchar rotelementet (html); :empty som matchar alla tomma element och :target som matchar ett element som är målet för en fragmentidentifierare. Det finns också några pseudoklasser i CSS som kan användas för att mat- cha formulärfält. :enabled och :disabled matchar fält som är klickbara re- spektive utgråade, medan :checked matchar kryssrutor och radioknappar som är ”valda”. CSS definierar också pseudoklassen :not(), som tar en enkel selektor som argument. Den matchar alla element som inte matchar den enkla se- lektorn. Exempelvis matchar table:not(.result) alla tabeller utom de som har klassen result; *:not(form) matchar alla element utom formulär, och abbr:not([title]) matchar förkortningar utan title-attribut.
Pseudoelement Pseudoelement är element som inte uttryckligen finns i HTML-koden, utan antingen är underförstådda eller genererade via CSS. Pseudoelementet :first-letter är den första bokstaven eller siffran i ett blockelement eller en tabellcell. Vissa skiljetecken, till exempel citattecken, omedelbart före eller efter den första bokstaven eller siffran ingår också. I följande exempel matchar selektorn p:first-letter bokstaven ”H”.
Hej!
Vi kan tänka oss att koden i ovanstående exempel skulle se ut så här med pseudoelementet utskrivet:
:first-letter används främst när man vill skapa en anfang (begynnelse- bokstav som är större än efterföljande text). Om den första bokstaven ligger i ett underordnat blockelement matchar :first-letter ändå.
Hej!
I ovanstående exempel matchar selektorn div:first-letter bokstaven ”H”.
ETT SELEKTIVT URVAL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 31 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 76 --- #88
✐ ✐
Figur .. Exempel på anfang.
Pseudoelementet :first-line matchar den första textraden i elementet. Vilka tecken det motsvarar kan bero på textstorleken eller bredden på webb- läsarfönstret. Liksom för :first-letter kan texten befinna sig i ett under- ordnat blockelement.
Pseudoelement är element som inte uttryckligen finns i HTML-koden, utan antingen är underförstådda eller genererade via CSS.
Låt säga att vi har följande CSS-regel: p:first-line {text-transform:uppercase} Regeln säger att första textraden i varje stycke ska omvandlas till versaler. Texten kanske visas så här:
Figur .. Resultatet av text-transform:uppercase i ett bredare fönster.
I ett smalare fönster kan den visas så här i stället:
Figur .. Resultatet av text-transform:uppercase i ett smalare fönster.
Pseudoelementen :before och :after anger innehåll som genererats med hjälp av CSS, vilket vi kommer att återkomma till senare i det här kapitlet. Inte helt oväntat anger :before innehåll som genererats före ett element och :after anger innehåll som genererats efter ett element. Exemplet nedan visar en regel som lägger till texten ”(SLUT)” efter ett element med klassen last.
.last:after {content:"(SLUT)"}
STILMALLAR
✐ 32 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 77 --- #89
✐ ✐
I CSS använder man två kolon framför pseudoelement, för att skilja dem från pseudoklasser, alltså ::first-letter, etc. CSS definierar också pseu- doelementet ::selection, som matchar text som användaren markerat, till exempel i en textruta:
textarea::selection {...}
Gruppering Ibland vill man ange samma deklarationer för flera olika selektorer, och då är det bekvämt att använda gruppering för att slippa upprepa deklarationsbloc- ket. Selektorer grupperas med kommatecken:
td, th {text-align:left} Exemplet gör texten vänsterjusterad i såväl dataceller som rubrikceller. Det är ekvivalent med följande två regler:
td {text-align:left} th {text-align:left} Varje selektor i gruppen är självständig och oberoende av de övriga. Om vi vill begränsa ovanstående regel till tabeller med klassen result måste vi skriva så här:
.result td, .result th {text-align:left} Om vi i stället skriver som i exemplet nedan får regeln en helt annan bety- delse.
.result td, th {text-align:left} Denna regel är ekvivalent med följande:
.result td {text-align:left} th {text-align:left} Den påverkar alltså alla rubrikceller, inte bara de som hör till tabeller med klassen result.
. Arv och kaskad
Arv och kaskad är två mycket centrala begrepp i CSS. Båda är hyfsat enkla att förstå, men deras inverkan i en komplicerad stilmall kan ändå vara besvärlig att reda ut. Hjälpmedel som Dragonfly för Opera (inbyggt fr.o.m. version .) eller Firebug för Firefox är till stor hjälp.
http://www.opera.com/products/dragonfly/ http://www.getfirebug.com/
ARV OCH KASKAD
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 33 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 78 --- #90
✐ ✐
I grova drag kan man säga att arv har med HTML-koden att göra, medan kaskaden rör CSS-reglerna. De två mekanismerna i samverkan styr vilka CSS- deklarationer som tillämpas på varje element i HTML-dokumentet.
Arvsanlag För varje egenskap som definieras i CSS-specifikationen finns det ett initialt initialt värde värde som egenskapen har om inget annat sägs. Vissa CSS-egenskaper, men inte alla, går i arv från ett element till dess un- derordnade element. De egenskaper som ärvs är sådana som det är troligt att de ska vara desamma även för underordnade element, som förgrundsfärg, teckensnitt och radavstånd. Egenskaper som marginaler och kantlinjer ärvs inte, eftersom det inte är sannolikt att ett underordnat element ska ha samma marginaler som sin förälder. Bakgrundsfärger ärvs inte, men det initiala värdet för background-color- egenskapen är alltid transparent (genomskinlig). Vi kan begära att ett underordnat element ska ärva en viss egenskap från sin förälder, med hjälp av nyckelordet inherit (ärv). Det stöds dock inte av Internet Explorer och äldre.
p a {color:inherit} Arv i CSS fungerar ungefär som arv i genetiken. Blåögda föräldrar får barn med blå ögon; om förgrundsfärgen för stycken är satt till blå kommer texten i förkortningar och andra underordnade element att vara blå. I CSS kan vi emellertid genmanipulera friskt och ändra de egenskaper vi vill. beräknade värdet Det värde som ärvs är oftast, men inte alltid, det beräknade värdet. Anta att vi har följande CSS-regel i vår stilmall:
div {font-size:150%}
För varje div-element beräknar webbläsaren vilken faktisk storlek texten ska ha, och det är detta beräknade värde som ärvs av underordnade element.
Ett stycke.
STILMALLAR
✐ 34 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 79 --- #91
✐ ✐
Arvsmekanismen gör livet mycket lättare för oss, eftersom vi kan ange egen- skaper som förgrundsfärg och teckensnitt för ett element högt upp i struktu- ren, exempelvis html eller body, och låta dem ärvas av alla underordnade ele- ment i dokumentet. Utan arv skulle vi behöva specificera dessa egenskaper för varje elementtyp, vilket skulle bli ohållbart i längden.
En kaskad av regler Som vi sett tidigare är selektorer ett slags mönster, och deklarationerna i en regel tillämpas på alla element som matchar selektorn. Men vad händer om ett element matchar flera olika selektorer? Om reglerna innehåller deklara- tioner för samma egenskaper, men med olika värden, får vi en konflikt. Kas- kaden är den mekanism som reder ut vilken deklaration som ska tillämpas när det uppstår konflikter. Anta till exempel att vi har följande två regler i vår stilmall:
#special {color:blue} p {color:green} Vilken färg får texten i följande stycke?
Ett speciellt stycke.
Det kommer du att kunna räkna ut efter att ha läst det här avsnittet. (För den otålige kan jag avslöja att texten blir blå.) Kaskaden utgår från tre olika kriterier: . hur viktig deklarationen är . hur specifik selektorn är . i vilken ordning deklarationerna kommer. En viktig deklaration vinner alltid över en som är mindre viktig. Om två de- klarationer är lika viktiga vinner den som deklarerats för den mest specifika selektorn. Om deklarationerna är lika viktiga och selektorerna är lika specifi- ka vinner den som angivits sist.Viktigt och mindre viktigt Det första kriteriet är alltså hur ”viktig” deklarationen är. Det beror på två saker: var den är angiven och om den är markerad som extra viktig. Vikten delas in i fem grader; från minst till mest viktig: . webbläsarens inbyggda stilmall . normala deklarationer i användarens stilmall . normala deklarationer i författarens stilmall
ARV OCH KASKAD
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 35 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 80 --- #92
✐ ✐
. viktiga deklarationer i författarens stilmall . viktiga deklarationer i användarens stilmall. En webbläsare har en inbyggd stilmall, en user agent style sheet, som styr hur olika HTML-element presenteras. Den räknas som minst viktig, och reglerna i den används bara om varken användaren eller författaren säger något annat. Författarens stilmall är den vi skriver när vi designar sidan, alltså det vi normalt menar när vi säger ”stilmall”. Vissa webbläsare låter också användaren definiera en egen stilmall, som kallas user style sheet. Den är främst tänkt för människor med särskilda behov, exempelvis på grund av något funktionshinder. En person med nedsatt syn kan till exempel ha en användarstilmall som gör texten större. Vi kan markera en deklaration som extra viktig genom att skriva in tillägget !important efter värdet. Ett exempel:
.special { color:red !important; font-size:120%; }
Regeln säger att texten i element med klassen special ska vara % av den normala textstorleken och att den ska vara röd. Färgdeklarationen är markerad som extra viktig, vilket innebär att den inte kan skrivas över av nå- gon normal deklaration. Jag rekommenderar inte att du använder !important-deklarationer i onö- dan, eftersom de brukar leda till att stilmallen blir svår att underhålla. Viktiga deklarationer i användarens stilmall har högst vikt, så användare med speciella behov markerar ofta sina regler med !important för att de alltid ska tillämpas.
Specificitet
Om vi undviker att trassla in oss i !important-deklarationer behöver vi nästan aldrig bekymra oss om vikten hos våra deklarationer. De kan ersättas av regler i en användarstilmall, men det varken kan eller bör vi göra något åt. Däremot är det ytterst viktigt att vi förstår begreppet specificitet, eftersom det är något som alla CSS-författare förr eller senare får problem med. Specificiteten kommer in i bilden när vi har en konflikt, alltså två eller flera deklarationer för samma egenskap i ett element, förutsatt att deklarationerna är lika viktiga (vilket de vanligtvis är). Begreppet specificitet anger hur specifik en viss selektor är. Ju mer specifik selektor, desto högre vikt får deklarationen.
STILMALLAR
✐ 36 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 81 --- #93
✐ ✐
Specificiteten kan vi beräkna med enkla medel. Den består av fyra kom- ponenter som brukar betecknas a, b, c och d, där a är mest signifikant och d minst. Värdet för a är om deklarationen är angiven i ett style-attribut, och om den är angiven i en extern eller intern stilmall. Värdet för b är antalet id-selektorer i selektorn. Värdet för c är antalet klasselektorer, attributselektorer och pseudoklasser i selektorn. Värdet för d är antalet typselektorer och pseudoelement i selektorn. Av detta kan vi se att deklarationer som anges i style-attribut i HTML- koden alltid vinner över deklarationer i externa CSS-filer eller interna stil- mallar (style-element). Vi ser också att id-selektorer har hög specificitet. En id-selektor matchar ju högst ett element, så den är mycket specifik. Observera också att universalselektorn (*) och kombinatorer inte påverkar specificiteten. Tabell . visar några exempel på selektorer och deras specificitet.
Selektor a b c d p .result #special [id="special"] a.external:hover #nav li a:link:before
Tabell .. Exempel på specificitet
Om vi ser tillbaka på exemplet i början av avsnittet kan vi nu beräkna de två selektorernas specificitet:
#special {color:blue} p {color:green}
Den första selektorn, #special, har specificiteten ,,,. Den andra, p, har specificiteten ,,,. Eftersom man jämför siffrorna från vänster till hö- ger ser vi att ,,, är avsevärt mer specifik än ,,,. Alltså är det deklara- tionen för #special som vinner, och texten blir blå. Här ser vi också skillnaden mellan en id-selektor och en attributselektor som refererar till ett id-attribut. #special har specificiteten ,,,, medan [id="special"] bara har specificiteten ,,,.
ARV OCH KASKAD
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 37 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 82 --- #94
✐ ✐
Om du lägger till en regel i en stilmall och den inte ger något resultat är det mest troliga att du har en regel med en mer specifik selektor som deklarerar samma egenskaper.
En ordningsfråga Om vi har en konflikt mellan deklarationer som är lika viktiga och där selek- torerna har samma specificitet, är det ordningen som styr vilken som kommer att tillämpas. Den deklaration som står sist vinner över de som kommer före. Deklarationerna kan förekomma i samma stilmall eller i olika stilmallar, men det är den som kommer sist som vinner. Låt säga att vi har följande två regler i vår stilmall:
.book {color:blue} .foreign {color:green} Vilken färg får texten i följande hänvisning?
Les mots Ingen av deklarationerna är viktigare än den andra. Båda selektorerna har samma specificitet (,,,). Därför är det den sista deklarationen som vin- ner, och texten blir grön.
. Typografisk kontroll
Avsikten med CSS var i första hand att ersätta de elementtyper och attribut i HTML som bara hade med presentation att göra. HTML . innehöll till ex- empel elementtypen font för att ändra teckensnitt och textstorlek. Med CSS kan vi nu göra allt som font-elementet kunde, och mycket mer därtill.
Vilken typ!
Egenskapen font-family låter oss ange vilket teckensnitt vi vill använda. Ef- tersom vi aldrig kan veta om ett visst teckensnitt finns installerat på använ- darens dator kan vi ange värdet som en kommaseparerad lista. Webbläsaren väljer det första teckensnittet i listan som den har tillgång till. CSS definierar också några generella teckensnitt, som visas i tabell .. Webbläsaren mappar dessa mot installerade teckensnitt, och brukar låta an- vändaren ändra inställningarna. Man bör alltid avsluta teckensnittslistan med ett generellt teckensnitt. (Och eftersom ett generellt teckensnitt alltid ger träff är det meningslöst att ange fler teckensnitt efteråt.) Teckensnittsnamn som innehåller blanktecken eller andra icke-alfanume- riska tecken bör omges av citattecken. Två exempel på typiska deklarationer:
STILMALLAR
✐ 38 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 83 --- #95
✐ ✐
Namn Beskrivning Exempel serif antikva Times sans-serif linjär Verdana monospace ickeproportionellt Courier cursive kursivt skript Brush Script MT fantasy dekorativ URW Chancery
Tabell .. Generella teckensnitt
font-family:Georgia,Times,"Times New Roman",serif; font-family:Helvetica,Verdana,Arial,sans-serif; Notera att båda deklarationerna avslutas med ett generellt teckensnitts- namn.
Textstorlek
Egenskapen font-size anger textstorleken (graden). Den kan anges som en absolut eller relativ storlek, som en längd eller som ett procentvärde. De absoluta storlekarna är: ◮ xx-small ◮ x-small ◮ small ◮ medium ◮ large ◮ x-large ◮ xx-large Trots namnet är dessa värden inte kopplade till några exakta, absoluta stor- lekar. CSS-specifikationen säger bara att varje värde måste vara mindre än eller lika stort som det efterföljande. Webbläsarna bör garantera att en ab- solut storlek aldrig blir mindre än px, vilket är den minsta storlek som kan representera gemena latinska bokstäver. De relativa storlekarna är två till antalet: ◮ smaller ◮ larger Kallas även T-shirtstorlekar.
TYPOGRAFISK KONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 39 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 84 --- #96
✐ ✐
De gör texten mindre respektive större än den ärvda storleken, vanligen med en faktor på ,. Om textstorleken anges som en längd (mätetal plus enhet) finns det några saker att tänka på. Enheten em är synnerligen väl lämpad för textstorlekar, då em motsvarar den ärvda storleken. .em anger alltså en storlek som är procent större än den ärvda, medan .em anger en -procentig minskning av graden. Fysiska enheter som mm (millimeter) och pt (punkter) är inte lämpliga för visning på bildskärm, men kan mycket väl användas vid utskrift på papper. Enheten px (pixel) kan vid första anblicken förefalla lämplig för bildskärms- visning, men det är den inte. Internet Explorer låter nämligen inte använda- ren ändra textstorleken om den är angiven i px eller i någon fysisk storlek. Det är i och för sig logiskt, men ger problem för många användare. Ett procentvärde för font-size fungerar på motsvarande sätt som en längd angiven med em. % motsvarar den ärvda storleken (em), % är , gånger större (.em) och % är procent mindre (.em). Min rekommendation är att använda em eller procent. Basstorleken, exempelvis för html-elementet, bör anges i procent, för att kringgå en känd bugg i Internet Explorer som annars gör em-baserade värden mindre än em mikroskopiska. En basstorlek i procent anger storleken i för- hållande till webbläsarens standardstorlek. I de flesta moderna webbläsare är det px, men användaren kan ändra det. em motsvarar alltså den ”aktuella” textstorleken, oavsett vilka inställning- ar användaren gjort i sin webbläsare. Det finns ingen koppling mellan em och px, även om många låtsas som om det gör det. Ett vanligt ”tips” är att sät- ta basstorleken till ,% för att em ska motsvara px, men det finns inga garantier för att det fungerar. Dessutom är px för litet för att använda för löpande text. Egentligen vore det enda rätta att alltid sätta basstorleken till %, för att respektera användarens inställningar. Problemet är bara att ytterst få använ- dare ändrar basstorleken, och de flesta teckensnitt blir lite väl stora i px. Personligen väljer jag ofta en basstorlek på ,%, vilket motsvarar px i de flesta webbläsare.
Svärta
Egenskapen font-weight styr svärtan hos texten. Värdet kan anges som , , , …, , eller med något av nyckelorden normal, bold, bolder eller lighter. Nyckelordet normal motsvarar , medan bold (fet) är en synonym för . De flesta teckensnitt hos en normal användare finns bara som normal och fet.
STILMALLAR
✐ 40 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 85 --- #97
✐ ✐
Det lutar åt kursivstil
Egenskapen font-style anger vilken stil som ska användas för teckensnittet. Värdena kan vara normal, italic eller oblique. Värdet normal representerar vanlig rak text, medan italic anger kursiv stil och oblique anger en lutande stil.
Varianter
Egenskapen font-variant har värdena normal och small-caps (kapitäler). Kapitäler ser ut som versaler, men har samma höjd som gemener. K Figur .. Kapitäler.
Allt på en gång Eftersom man ofta vill ange flera teckensnittsrelaterade egenskaper samtidigt finns en samlingsegenskap (shorthand property) som låter oss göra just det. Den heter kort och gott font och låter oss inte bara ange alla egenskaperna ovan i ett svep, utan ger oss också vissa möjligheter som inte går att åstadkom- ma med de enskilda egenskaperna. Värdet för font är antingen teckensnittsegenskaper, ett systemteckensnitt eller nyckelordet inherit. Det allra vanligaste är att man anger ett antal egenskaper för teckensnittet. Först kan man ange stil, variant och/eller svärta. Därefter anger man graden, eventuellt följd av ett ”/” och det önskade radavståndet. Till sist anger man teckensnitten. Storleken (graden) och teckensnittet är alltså obligatoriska, de övriga egen- skaperna kan man utelämna. De får då sitt initiala värde, som är normal.
font:100% Helvetica,Verdana,Arial,sans-serif; font:italic bold 1.2em/1.5 Georgia,serif; Ett systemteckensnitt är ett nyckelord, som sätter alla egenskaperna på samma gång. Det är användbart om man vill representera något med samma utseende som i webbläsaren eller operativsystemet.
font:menu; De tillåtna värdena visas i tabell ..
TYPOGRAFISK KONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 41 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 86 --- #98
✐ ✐
Värde Beskrivning caption text i knappar icon text under ikoner menu text i menyer message-box text i dialogrutor small-caption text i ”små” kontroller status-bar text i statusraden
Tabell .. Systemteckensnitt
Full kontroll (nästan) CSS ger oss betydligt mer kontroll över typografin än att bara ändra tecken- snittet. Gå inte till överdrift och ändra på allting bara för att det är möjligt. Lär dig gärna lite om typografi innan du ger dig i kast med nedanstående egen- skaper.
Justering
Egenskapen text-align styr textens justering på raden. Värdet kan vara left (vänsterjusterad), right (högerjusterad), center (centrerad) eller justify (vänster- och högerjusterad). Löpande text bör vara vänsterjusterad, eftersom det ger bäst läsbarhet. Un- dertryck helst impulser att använda text-align:justify. Det kanske ser till- talande ut i romaner och tidskrifter, men fungerar sällan särskilt bra på skär- men. Det kan också göra texten svårare att läsa för användare med vissa typer av dyslexi, då det kan uppstå så kallade ”vita floder” genom texten.
#sidebar h3 {text-align:right} #nav li {text-align:center}
Indrag I tryck är det vanligt att man inte har något mellanrum mellan styckena, utan att man i stället använder ett indrag på första raden i varje stycke. Egenskapen text-indent styr indraget. Värdet kan vara en längd eller ett procentvärde som refererar till bredden på det block som innehåller texten. Negativa värden är tillåtna och kan användas för att skapa hängande indrag. På webben är det bättre för läsbarheten att använda mellanrum mellan styckena än att enbart ha indrag. Det går förstås att kombinera båda meto- derna. Indraget bör då helst anges som en längd med enheten em.
STILMALLAR
✐ 42 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 87 --- #99
✐ ✐
p.hanging { padding-left:1.5em; text-indent:-1.5em; }
Transformering
Egenskapen text-transform styr hur texten ska transformeras innan den pre- senteras. Värdena kan vara none, uppercase, lowercase eller capitalize. Värdena uppercase och lowercase omvandlar texten till versaler respekti- ve gemener. Värdet capitalize är sällan användbart för svenska webbplatser, men kan möjligen användas för rubriker på engelskspråkiga webbplatser. Det omvand- lar första bokstaven i varje ord till en versal. Notera dock att det inte omvand- lar övriga tecken till gemener. Olika webbläsare har olika uppfattning om vad som menas med ”ord”. Ex- empelvis kan ordet ”storm-swept” med text-transform:capitalize visas an- tingen som ”Storm-swept” eller som ”Storm-Swept”.
h1 {text-transform:uppercase}
Dekoration
Egenskapen text-decoration kan ta ett eller flera av följande värden: blink, line-through, overline eller underline. Värdet kan också anges som none. Värdet blink stöds inte av alla webbläsare, och bör definitivt inte användas i vilket fall som helst. Blinkande innehåll är extremt störande, och kan till och med vara farligt för personer med vissa typer av epilepsi. Värdena line-through, overline och underline ger en linje genom, över respektive under texten. En dekoration som angivits för ett element kan inte ”stängas av” av ett un- derordnat element. Ett vanligt användningsområde för den här egenskapen är att ta bort un- derstrykningen från länkar i en meny:
#nav a {text-decoration:none} #nav a:hover {text-decoration:overline underline} Däremot är det inte att rekommendera att ta bort understrykningen från länkar i löpande text, eftersom många datorovana användare då inte uppfat- tar att länkarna är klickbara länkar. Att använda en annan färg hjälper inte heller, eftersom inte alla kan uppfatta alla färger.
TYPOGRAFISK KONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 43 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 88 --- #100
✐ ✐ Avancerat finlir Egenskaperna i det här avsnittet ger oss ännu större kontroll över typografin, men de bör användas måttfullt. Om du inte har goda kunskaper om typografi bör du förmodligen oftast låta bli dem.
Radavstånd
Egenskapen line-height anger radavståndet: avståndet mellan två baslinjer – den tänkta linje som bokstäverna står på (se figur .). Underslängar på gemener går nedanför baslinjen.
Figur .. Baslinje.
Värdet kan anges med nyckelordet normal, som en längd, en numerisk fak- tor eller ett procentvärde. Det har stor betydelse vilken typ av värde man anger, särskilt om elementet har underordnade element med en annan textstorlek. Anges värdet som en längd eller ett procentvärde är det det beräknade värdet som ärvs (procentvärden multipliceras med den aktuella textstorle- ken). Om vi anger line-height som .em eller % och textstorleken är px blir alltså det beräknade värdet px. Underordnade element ärver då line-height:24px, oavsett vilken textstorlek de har. Om vi däremot anger värdet som en numerisk faktor är det den som ärvs. Sätter vi line-height:2.0 kommer texten att visas med dubbelt radavstånd även i underordnade element med en annan textstorlek. Inget av sätten är rätt eller fel, utan det beror helt på vad man vill åstad- komma. Notera att radavståndet också kan anges i egenskapen font, exempelvis
font:1em/2.0 sans-serif;
Blanka tecken Som blanka tecken räknas mellanslag, tabb, radmatning, sidmatning och vagn- retur (däremot inte fast mellanslag, non-breaking space). Normalt ersätts fle- ra på varandra följande blanka tecken med ett enda mellanslag i ett HTML- dokument, men med egenskapen white-space får vi mer kontroll. Förutom värdet normal finns ytterligare fyra möjliga värden:
Plus inherit, som finns för alla egenskaper.
STILMALLAR
✐ 44 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 89 --- #101
✐ ✐
Värdet nowrap gör att blanka tecken kollapsar till ett mellanslag, men att radmatningar undertrycks. Text radbryts alltså inte. Värdet pre ger samma presentation som HTML-elementet pre, det vill säga att blanka tecken inte kollapsar och att radbrytning bara sker där det finns radmatningar i texten. Värdet pre-line gör att blanka tecken kollapsar till ett mellanslag. Rad- brytning sker där det förekommer radmatningar i texten, men även för att för- hindra att texten hamnar utanför elementet. Det fungerar alltså som normal, förutom att det även radbryter vid radmatningar i texten. Värdet pre-wrap gör att blanka tecken inte kollapsar. Radbrytning sker som för pre-line. Det fungerar alltså som pre, förutom att det också radbry- ter där det behövs. Stödet för värdena pre-line och pre-wrap är inte alltför utbrett. Dessutom har flera webbläsare begränsningar i vad som går att göra för textarea-ele- ment.
Vertikal justering Som vi kommer att se i nästa avsnitt utgörs varje rad på skärmen eller pap- peret av en rektangel som kallas radbox. Den innehåller i sin tur en eller flera inline-boxar, som genereras av text och inline-element. Egenskapen vertical-align kontrollerar hur en inline-box placeras verti- kalt inom sin radbox. De giltiga nyckelorden och vad de ger för resultat visas i figur .. I figuren visas radboxarna med streckade linjer; radhöjden är större än nor- malt för att skillnaderna mellan de olika värdena ska synas tydligare. Den fär- gade rutan är en liten bild som justerats vertikalt med det värde som står strax före bilden. Värdet baseline är det initiala värdet och innebär att elementet justeras vertikalt så att dess baslinje hamnar på föräldraelementets baslinje. Om ele- mentet inte har någon baslinje, vilket är fallet med bilder som i figur ., justeras dess nederkant mot förälderns baslinje. Värdena sub och super gör att elementets baslinje skiftas nedåt respektive uppåt till en position som är lämpad för ett subskript respektive superskript. Värdet text-bottom justerar elementets nederkant mot nederkanten på teckensnittet. För text-top justeras elementets överkant mot överkanten på teckensnittet. Värdena bottom och top justerar elementet mot motsvarande position i radboxen. Värdet middle justerar elementets vertikala mittpunkt mot en position som ligger en halv x-höjd ovanför förälderns baslinje.
TYPOGRAFISK KONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 45 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 90 --- #102
✐ ✐
Figur .. Vertikal justering.
Värdet för vertical-align kan också anges som en längd eller ett procent- värde, och anger då det avstånd som elementets baslinje ska förskjutas. Pro- centvärden är relativa mot radhöjden.
Spärra och knipa Full typografisk kontroll för att spärra och knipa text har vi inte med CSS, men vi kan ange extra avstånd mellan tecknen (letter-spacing) och mellan orden (word-spacing). Värdena anges som en längd och får vara negativa. Om letter-spacing anges som en längd får webbläsaren inte ändra av- ståndet mellan tecknen för att justera texten vid text-align:justify, utan kan då bara ändra avståndet mellan orden. Ett längdvärde för word-spacing anger ett extra avstånd utöver det norma- la ordmellanrummet. Om du inte har goda kunskaper om typografi rekommenderar jag att du lämnar dessa två egenskaper ifred.
. Layoutkontroll
Den stora nyheten i CSS var möjligheten att styra hela sidans layout på ett sätt som inte var möjligt med CSS. Tyvärr tog det ganska länge innan webb- läsarna infört tillräckligt bra stöd för CSS – särskilt Internet Explorer, som ännu i version saknar stöd för många viktiga delar av specifikationen. Hu- vudkonkurrenterna Opera, Firefox och Safari ligger dock långt framme, även om ingen av dem är helt felfri.
STILMALLAR
✐ 46 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 91 --- #103
✐ ✐ Rektanglarnas underbara värld CSS handlar i grund och botten om rektanglar. Varje HTML-element som ska visas för en webbsida genererar en eller flera rektanglar, som går under be- nämningen boxar. boxar På samma sätt som HTML är indelat i blockelement och inline-element har CSS två grundtyper av boxar: blockboxar och inline-boxar. Grundregeln är att blockelement genererar blockboxar och inline-element genererar inline- boxar. När en webbläsare ska visa ett HTML-dokument händer det en hel del bak- om kulisserna. Processen sker i två faser: tolkningsfasen (parsing) och ritfa- sen (rendering). I tolkningsfasen läser och tolkar webbläsaren HTML-koden, och bygger upp ett så kallat DOM-träd. CSS-reglerna tillämpas på DOM-trädet och ska- par en liknande hierarkisk struktur av boxar. I ritfasen ritar webbläsaren boxhierarkin enligt tämligen komplicerade reg- ler. Vi behöver tack och lov inte känna till alla detaljerna, men det kan vara bra att känna till de stora dragen i processen, eftersom det underlättar förstå- elsen för hur vi skriver våra CSS-regler på bästa sätt.
Boxmodellen Först och främst bör vi bekanta oss med den så kallade boxmodellen. Det inne- bär några nya termer – igen – men de är inte så många och bör vara ganska lätta att förstå. Den prickade ramen i figur . motsvarar själva innehållet i elementet, och har bredden (width) em och höjden (height) em. Utanför innehållet finns padding (stoppning) på em. Paddingen omges av en kantlinje med bredden ,em. Utanför kantlinjen finns elementets marginaler; i det här fallet em. CSS-koden för elementet i figur . ser ut så här:
width:8em; height:6em; margin:2em; padding:1em; border:0.5em solid #060; background-color:#ccf; Innehållsrutans prickade kantlinje är tillagd i figuren för att visa var själ- va innehållet finns. Den streckade kantlinjen runt marginalzonen är också tillagd i figuren för att göra den tydligare.
Se kapitel för detaljer om DOM-trädet.
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 47 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 92 --- #104
✐ ✐
Figur .. Boxmodellen.
Vi har alltså angivit elementets bredd som em och dess höjd som em. Den totala bredden för boxen är: + , + + + + , + = em Den totala höjden är: + , + + + + , + = em Padding, kantlinjer och marginaler läggs alltså till utanpå de dimensioner vi anger för elementet. Internet Explorer för Windows version , och även nyare versioner i ”quirks mode” har dock en helt felaktig boxmodell där de angivna dimensionerna an- vänds för den totala boxen (exklusive marginaler). Innehållets dimensioner blir där alltså det som återstår när kantlinjer och padding subtraherats från de angivna dimensionerna. I vårt exempel skulle innehållet alltså bara bli em brett och höjden skulle bli ynka em.
Rita rektanglar I ritfasen ritar webbläsaren alla de genererade boxarna till utmediet. Det sker på två nivåer: blockboxar ritas på sitt sätt och inuti dem ritas inline-boxarna. Om vi inte säger något annat ritas boxarna i den ordning elementen före- kommer i HTML-koden. Blockboxarna läggs ut vertikalt, den ena efter den andra. Avståndet mellan dem bestäms av eventuella vertikala marginaler. Om innehållen i två på varandra följande blockboxar bara skiljs åt av deras marginaler, det vill säga att ingen padding och inga kantlinjer förekommer
STILMALLAR
✐ 48 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 93 --- #105
✐ ✐
emellan, kommer marginalerna att kollapsa. Det innebär att de överlappar, och nettoresultatet blir den största av de två. Figur . visar ett exempel på kollapsande marginaler. Den övre boxen har en bottenmarginal på px. Den streckade linjen visar dess totala utbred- ning. Den undre boxen har en toppmarginal på px, och dess utbredning markeras av den prickade linjen.
Figur .. Kollapsande marginaler.
Som du ser överlappar de två marginalerna varandra, så att avståndet mel- lan innehållet i den övre boxen och innehållet i den undre boxen är px, inte px+px. Vertikala marginaler på ett element kan också kollapsa med förälderns marginaler, om de är i kontakt med varandra. Det finns ett antal faktorer utöver padding och kantlinjer som förhindrar att marginaler kollapsar. Vi återkommer till dem efterhand som vi träffar på dem. Inline-boxar läggs ut horisontellt inuti blockboxarna. Riktningen beror på skrivriktningen i dokumentet, men för svenskt vidkommande kan vi lugnt räkna med att de läggs ut från vänster till höger. Varje rad på bildskärmen eller papperet utgörs av en tänkt rektangel som kallas radbox (line box). En väldigt bred inline-box, till exempel texten i ett radbox långt stycke, delas vid behov upp i flera på varandra följande radboxar. Rad- boxar läggs ut uppifrån och ned, utan något avstånd emellan. Själva höjden på radboxen kan vi dock påverka via egenskapen line-height, som vi sett tidigare. En radbox kan också innehålla flera inline-boxar. Deras vertikala justering styrs då, som vi sett, via egenskapen vertical-align. För blockboxen styr egenskapen text-align hur inline-boxarna fördelas horisontellt inom rad- boxen.
Våga välja visningssätt Varje synligt HTML-element genererar alltså en eller flera boxar. Lite förenk- lat kan man säga att blockelement genererar blockboxar, medan inline-ele- ment genererar inline-boxar. Om det behövs kan vi ändra på den saken. Med egenskapen display kan vi styra exakt vilken typ av box som ska genereras för ett visst element.
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 49 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 94 --- #106
✐ ✐
Värde Ger resultat none ingen box alls block en blockbox inline en inline-box inline-block en blockbox som läggs ut som en inline-box run-in (se nedan) list-item en blockbox plus en inline-box för en listmarkör table en tabellbox inline-table en tabellbox som läggs ut som en inline-box table-caption en tabellrubrikbox table-column-group en kolumngrupp table-column en tabellkolumn table-header-group en radgrupp för tabellhuvud table-row-group en radgrupp för tabellkropp table-footer-group en radgrupp för tabellfot table-row en tabellrad table-cell en tabellcell
Tabell .. Styr visningen av element med hjälp av egenskapen display.
Boxar av typerna inline-block och inline-table beter sig som inline- boxar på utsidan, men som en blockbox respektive tabell inuti. En run-in-box är främst tänkt att användas för rubriker som visas i början av ett stycke, i stället för på en egen rad ovanför stycket. Den genererar anting- en en blockbox eller en inline-box, beroende på den boxtyp som nästa element har. Reglerna är lite komplicerade, och eftersom stödet för display:run-in är uselt (i skrivande stund är det bara Opera och Safari som stödjer värdet) lämnar vi det därhän. Experimentera gärna själv i Opera eller Safari. De list- och tabellrelaterade display-värdena kommer vi att se närmare på lite senare. Vissa andra egenskaper påverkar värdet på display, vilket vi ska se när vi kommer in på flytande boxar och absolut positionering. Nedanstående exempel gör att listelementen i listan med id="nav" gene- rerar inline-boxar och alltså läggs ut horisontellt.
#nav li {display:inline}
STILMALLAR
✐ 50 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 95 --- #107
✐ ✐
När storleken har betydelse
Vi kan ange dimensionerna för en blockbox med egenskaperna width och height. Värdena kan anges som en längd, ett procentvärde eller med nyckelordet auto (som är det initiala värdet). Procentvärden refererar till motsvarande dimension hos det innehållande blocket (containing block), vilket för normala innehållande blocket boxar är den box som genereras av det överordnade blockelementet. Värdet auto innebär att webbläsaren räknar ut värdet för dimensionen ba- serat på andra kända värden, exempelvis marginaler. En bredd eller höjd får naturligtvis inte vara negativ. Kom ihåg att width och height anger dimensionerna för innehållet i ele- mentet; eventuella kantlinjer, marginaler och padding läggs till utöver den angivna storleken. Det är alltså ingen höjdare att sätta width:100% och dess- utom lägga till padding eller kantlinjer. Procentvärden för height kräver att det innehållande blocket har en angi- ven höjd. En procentuell höjd för rotelementet (html) refererar till höjden på webbläsarfönstret eller papperets utskriftsyta. Exemplet nedan sätter dimensionerna för den box som genereras av ele- ment med klassen product.
.product { width:100%; height:4em; } Boxen fyller ut hela föräldrablockets bredd och höjden är teckenenheter. Vi kan också ange gränsvärden för dimensionerna, med hjälp av egenska- perna min-width, max-width, min-height och max-height. Värdena är läng- der eller procentvärden. Följande exempel anger att stycken ska generera boxar som är tecken- enheter breda, men att de inte får bli bredare än det innehållande blocket.
p { width:80em; max-width:100%; } Nästa exempel anger att elementet ska generera en box som är minst teckenenheter hög. Om innehållet kräver mer plats än så kommer boxen att bli så hög som det behövs.
#nav {min-height:12em} Observera att det är meningslöst att ange en dimension och ett gränsvärde med samma måttenhet.
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 51 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 96 --- #108
✐ ✐
Internet Explorer version och tidigare stödjer inte min- och max-varian- terna, men behandlar height som om det vore min-height.
I marginalen Det finns fyra egenskaper som vi kan använda för att ange marginalen på en sida på en box. De heter margin-top, margin-bottom, margin-left och margin-right. Liksom för width kan värdena anges som längder, procentvärden eller med nyckelordet auto. Procentvärden anges relativt det innehållande blockets bredd – även för de vertikala marginalerna! Värdet auto är ekvivalent med för vertikala marginaler. För horisontella marginaler gör det att marginalen räknas ut automatiskt. Om både vänster- och högermarginalen anges som auto beräknas de så att de blir lika stora. Med andra ord kommer boxen att bli horisontellt centrerad inom det innehållande blocket. Nedanstående exempel gör att sidan anpassar sig till bredden på webblä- sarfönstret, men sätter en minimibredd och en maximibredd. Om fönstret är smalare än minimibredden får vi en horisontell rullist. Om fönstret är bredare än maximibredden kommer sidan att centreras horisontellt i fönstret.
body { min-width:20em; max-width:70em; margin-left: auto; margin-right:auto; } Eftersom det är vanligt att man vill ange marginalerna för flera sidor på ett element finns även en samlingsegenskap som heter margin. Den låter oss ange marginalerna för alla fyra sidorna på en gång, via ett, två, tre eller fyra värden. Om vi anger ett enda värde gäller det för alla sidorna.
margin:1em; Ovanstående deklaration är alltså ekvivalent med följande:
margin-top:1em; margin-bottom:1em; margin-left:1em; margin-right:1em; Anger vi fyra värden sätter vi förstås samtliga sidor separat. Ordningen är av stor betydelse: värden anges som top, right, bottom, left; alltså medurs med början från toppen.
STILMALLAR
✐ 52 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 97 --- #109
✐ ✐
En hjälp för minnet kan vara det engelska ordet TRouBLe. Om man kom- mer ihåg det slipper man trubbel.
margin:10px 20px 30px 40px; Ovanstående deklaration är alltså ekvivalent med följande:
margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px; Om vi använder två eller tre värden tillämpas de i TRouBLe-ordning, och de utelämnade värdena kopieras från motstående sida.
margin:0 auto; Ovanstående är detsamma som:
margin-top:0; margin-right:auto; margin-bottom:0; /* samma som top */ margin-left:auto; /* samma som right */ Eller med tre värden:
margin:2em 0 1em; Detta är ekvivalent med:
margin-top:2em; margin-right:0; margin-bottom:1em; margin-left:0; /* samma som right */
En madrasserad cell Padding är, som vi sett, ett slags ”inre” marginal mellan innehållet och en eventuell kantlinje. Till skillnad från marginaler kollapsar aldrig padding, och paddingarean är en del av boxen såtillvida att en bakgrundsfärg eller bak- grundsbild syns därunder. Likheterna med marginaler är stora; det finns fyra specifika egenskaper (padding-top, padding-bottom, padding-left och padding-right) samt en samlingsegenskap (padding). Värdena kan anges som längder eller procentvärden, men nyckelordet auto finns inte för padding. Procentvärden refererar till det innehållande blockets bredd, även för vertikal padding. Samlingsegenskapen padding tar ett, två, tre eller fyra värden i TRouBLe- ordning, precis som margin.
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 53 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 98 --- #110
✐ ✐
Exemplet nedan visar hur man kan ange padding för tabellceller med CSS i stället för med det föråldrade HTML-attributet cellpadding.
td, th {padding:0.5em 1em} Här ser vi att vi har betydligt större kontroll med CSS. Vi kan ange padding- en i teckenenheter (cellpadding bara i pixel) och vi kan dessutom ha olika padding för olika sidor på cellen; i exemplet används ,em vertikal padding och em horisontell padding. En madrasserad cell, helt enkelt.
Utåt kanterna En box kan ha kantlinjer utanför paddingarean. Varje kantlinje kan definieras separat via tre värden: linjebredd, linjetyp och linjefärg. Det går att ange linjebredden för varje enskild kant med egenskaperna border-top-width, border-right-width, och så vidare. Det går också att ange bredderna för alla fyra kantlinjerna med samlingsegenskapen border-width, som tar ett, två, tre eller fyra värden i den vanliga TRouBLe-ordningen. Linjebredden kan anges som en längd eller med något av nyckelorden thin, medium eller thick. Det initiala värdet är medium. CSS-specifikationen definie- rar inga exakta bredder för de tre nyckelorden, utan det är upp till varje webb- läsare att bestämma. Linjetypen (border-top-style, etc.) anges med något av nyckelorden ne- dan. Exempel på de synliga typerna visas i figur ..
Nyckelord Ger resultat none ingen kantlinje hidden dold (se nedan) solid heldragen linje dotted prickad linje dashed streckad linje double dubbel heldragen linje groove D-effekt för inristad linje ridge D-effekt för relieflinje inset D-effekt för nedsänkt box outset D-effekt för upphöjd box
Tabell .. Välj linjetyp med hjälp av nyckelord.
STILMALLAR
✐ 54 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 99 --- #111
✐ ✐
Egenskaperna heter alltså border-top-style etc, och det finns en sam- lingsegenskap som heter border-style som tar ett, två, tre eller fyra värden i TRouBLe-ordning. Värdet hidden fungerar som none, men det finns en väsentlig skillnad när det gäller tabellceller. Vi återkommer till det när vi tittar närmare på tabell- relaterade CSS-egenskaper. Värdet double ritas som två heldragna linjer, där border-width anger sum- man av linjebredderna och avståndet mellan linjerna. Internet Explorer och äldre ritar linjer av typen dotted som om de vore dashed om linjebredden är px. Det gör även IE i vissa fall.
Figur .. Exempel på linjetyper.
Linjefärgen anges med border-top-color etc, eller med samlingsegenska- pen border-color. Anger man ingen färg används boxens förgrundsfärg. Det finns fyra samlingsegenskaper där vi kan ange bredd, typ och färg sam- tidigt för en kantlinje. De heter border-top, border-bottom, border-left och border-right.
border-bottom:1px solid #00f; Ordningen på värdena spelar ingen roll, men jag rekommenderar att du är konsekvent. Själv föredrar jag ordningen i exemplet ovan: bredd, typ, färg. Utelämnar man ett värde sätts det initiala värdet för den egenskapen. Slutligen finns det också en samlingsegenskap, border, som låter oss ange bredd, typ och färg för alla fyra kantlinjerna på en enda gång.
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 55 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 100 --- #112
✐ ✐
border:8px ridge #66f; Om man vill ha likadana kantlinjer på tre sidor, men ingen kantlinje på den fjärde, är det enklast att först använda border och sedan ta bort den fjärde linjen, som i följande exempel.
border:1px solid #ffca00; border-left:none;
Värdet none medför automatiskt att linjebredden blir . Vill man ha en annan färg på en kantlinje gör man enklast på liknande sätt, som i följande exempel.
border:1px solid #000; border-bottom-color:#fff;
Konturer Kantlinjer påverkar som vi sett boxens dimensioner. Ibland vill man ha en ram runt en box utan att dimensionerna förändras, särskilt om förändringen sker dynamiskt (exempelvis via en pseudoklass som :hover). Då kan man använda en outline (kontur) i stället för en kantlinje. Internet Explorer och äldre stödjer dock inte konturer. Konturer kan inte anges separat för de fyra sidorna, utan bara för ramen som helhet. Vi kan sätta linjebredd, linjetyp och linjefärg med egenskaper- na outline-width, outline-style och outline-color. Dessutom finns sam- lingsegenskapen outline som motsvarar border. En kontur ritas runt boxen, men påverkar inte boxens dimensioner. En tjock kontur kan alltså skymma annat innehåll som befinner sig nära boxen. Konturer kan vara användbara när man felsöker en CSS-design, för att vi- sa var boxarna befinner sig och hur stora de är. De kan också användas för att ge visuell återkoppling till användaren, till exempel för att indikera det formulärfält som har tangentbordsfokus:
input[type="text"]:focus { outline:2px solid yellow; }
Färger och bakgrunder
Egenskapen color styr förgrundsfärgen i en box, det vill säga färgen på text, textdekorationer och – om inget annat sägs – kantlinjer. Värdet kan anges som ett nyckelord (exempelvis red), hexadecimalt (#f00 eller #ff0000), eller RGB (rgb(255,0,0) eller rgb(100%,0%,0%)). Kantlinjer kan även ha ”färgen” transparent.
STILMALLAR
✐ 56 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 101 --- #113
✐ ✐
.warning {color:red} En box har även en bakgrund, som kan ha en färg och en bakgrundsbild. Bakgrunden omfattar innehållet, paddingarean och går även ut under kant- linjen, vilket man kan se om man har kantlinjer med typerna dotted, dashed eller double. Egenskapen background-color styr bakgrundsfärgen. Värdet kan anges på samma sätt som för color, men kan också ha värdet transparent (genom- skinlig), som är det initiala värdet. Man bör som regel ange bakgrundsfärg och förgrundsfärg samtidigt, för att vara säker på att inte råka ut för oläsliga kombinationer.
.important {background-color:red} .warning {color:red} Ovanstående regler gör texten omöjlig att läsa i ett stycke som det följande:
Databasen kommer att raderas om du trycker på OK!
Om de två CSS-reglerna dessutom är deklarerade i separata CSS-filer kan det vara svårt att upptäcka att de inte bör kombineras. Genom att ange både bakgrundsfärg och förgrundsfärg tillsammans elimi- nerar vi åtminstone det problemet. .important { background-color:red; color:white; } .warning { background-color:yellow; color:red; } Enligt kaskadreglerna kommer stycket nu att få röd text på gul bakgrund, eftersom regeln för .warning deklareras sist (de är ju lika viktiga och har sam- ma specificitet). Med egenskapen background-image kan vi ange en bakgrundsbild för box- en. Värdet är en relativ eller absolut URI.
background-image:url("/images/bg.jpg");
Värdet kan också vara none, vilket är det initiala värdet. En bakgrundsbild kan vara ett mönster som man vill ska upprepas så att det fyller ut hela boxen. Egenskapen background-repeat ger oss möjlighet att upprepa bilden horisontellt (repeat-x), vertikalt (repeat-y) eller både och
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 57 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 102 --- #114
✐ ✐
(repeat). Det initiala värdet är repeat, så om vi inte vill att bakgrundsbilden ska upprepas måste vi använda värdet no-repeat. För att kontrollera placeringen av en bakgrundsbild kan vi använda egen- skapen background-position. Den tar ett eller två värden: det första anger den horisontella placeringen och det andra den vertikala. Om bara ett värde anges blir bilden vertikalt centrerad. Värdena kan anges som längder, procentvärden eller nyckelord. En längd anger avståndet mellan boxens vänsterkant eller överkant till bildens väns- terkant respektive överkant. Nyckelorden kan anges som left, center eller right för horisontell place- ring och som top, center eller bottom för vertikal justering. Använder man nyckelord spelar ordningen på värdena ingen roll. Ett procentvärde är lite mer komplicerat. Värdet % innebär att en punkt som ligger % från bildens kant kommer att justeras mot en punkt som ligger % från boxens kant. Värdet % är alltså detsamma som left eller top; vär- det % är detsamma som center och värdet % är detsamma som right eller bottom. Egenskapen background-attachment kan ha värdena scroll eller fixed. Det initiala värdet är scroll, vilket innebär att bakgrundsbilden rullar till- sammans med innehållet i boxen om elementet har en rullist. Värdet fixed gör att bakgrundsbilden är fixerad och innehållet rullar ovanpå den. Slutligen finns samlingsegenskapen background som låter oss ange alla bak- grundsegenskaperna samtidigt.
background:blue url("/blue.png") repeat-x fixed left top; Kom ihåg att utelämnade värden får det initiala värdet för motsvarande egenskap.
background:url("/blue.png"); Ovanstående regel är alltså ekvivalent med följande:
background-color:transparent; background-image:url("/blue.png"); background-repeat:repeat; background-attachment:scroll; background-position:0% 0%;
Konsten att göra sig osynlig I dynamiska layouter vill man ibland visa eller dölja delar av sidan när an- vändaren utför olika åtgärder. Ett vanligt sätt att dölja en box är att sätta display:none med hjälp av JavaScript. Det innebär att elementet och dess underordnade inte längre genererar några boxar alls; boxarna försvinner från
STILMALLAR
✐ 58 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 103 --- #115
✐ ✐
sidan och det påverkar layouten, då efterföljande boxar flyttas runt för att fyl- la det utrymme som frigjorts. Ibland är detta inte önskvärt, utan man vill tända och släcka boxar utan att sidlayouten påverkas. Egenskapen visibility låter oss göra just det. Det initiala värdet är visible (synlig), men genom att sätta det till hidden (dold) förhindrar vi att boxen visas. Den upptar fortfarande samma utrymme i layouten, men den ritas inte ut. Ett tredje tillåtet värde är collapse, men det kan bara tillämpas på vissa interna tabellobjekt och vi återkommer till det i avsnittet om tabeller. Sätter vi display:none förhindrar vi att elementet genererar en box. Vi för- hindrar också att alla underordnade element genererar några boxar. Det hjäl- per inte att sätta display till något annat värde för en underordnad box; om föräldern inte genererar någon box kan inga underordnade boxar genereras heller. Om vi däremot använder visibility:hidden kan vi göra underordnade boxar synliga genom att sätta visibility:visible för dem. Både display:none och visibility:hidden hindrar vissa skärmläsare att läsa upp innehållet, så de bör användas med urskillning.
Spill inte på duken! Låt säga att vi specificerat bredd och höjd för ett blockelement, men innehållet kräver mer utrymme än våra angivna dimensioner. Vad händer? Normalt kommer innehållet att visas, men det spiller utanför elementets gränser. Med egenskapen overflow kan vi reglera vad som ska hända. Det initiala värdet är visible, som alltså gör spillet synligt. Det kan leda till att det innehåll som spiller utanför elementet hamnar under efterföljande innehåll. Värdet hidden medför att innehåll som spiller utanför elementet inte visas alls. Det finns inget sätt för användaren att komma åt det (förutom att titta på HTML-koden, något som förvånansvärt få normalanvändare uppskattar). Värdet scroll ger rullister på elementet, så att användaren kan komma åt det innehåll som inte ryms inom boxens dimensioner. Värdet auto fungerar som scroll, men visar bara rullisterna om det be- hövs.
pre.viewport { width:50em; height:20em; overflow:auto; }
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 59 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 104 --- #116
✐ ✐
I exemplet sätter vi overflow:auto för pre-element med klassen viewport. Den genererade boxen är em bred och em hög. Om innehållet inte får plats i boxen visas en eller två rullister. I en box med overflow satt till något annat än visible kollapsar inte mar- ginalerna med marginalerna på underordnade boxar.
Att flyta ovanpå I veckotidningar är det vanligt att man har bilder mitt i artikeltexten, så att texten ”flyter” runt bilden. Det kan vi åstadkomma med CSS också, med hjälp av egenskapen float. Den har funnits ända sedan CSS, just för det ända- målet. På senare år har float dock fått ett nytt, viktigt användningsområde: layouthantering. Egenskapen float kan ta något av värdena none, left eller right. Värdet none är det initiala värdet och innebär att boxen inte flyter alls. Värdena left och right gör boxen flytande till vänster respektive höger. När en box görs flytande lyfts den ut ur det normala dokumentflödet och skiftas så långt det går till vänster eller höger, beroende på float-värdet. In- nehåll i det normala flödet går runt boxen på den motsatta sidan, som i fi- gur .. En flytande box förskjuts åt sidan tills den stöter emot förälderns padding- area, eller tills den krockar med en annan box som flyter i samma riktning. Om det inte finns plats för en flytande box på grund av andra boxar som flyter i samma riktning skiftas boxen nedåt. Den skiftas inte nödvändigtvis nedanför alla tidigare flytande boxar, utan bara så långt det behövs för att den ska få plats, som framgår av figur ..
Figur .. Flytande box.
Den fjärde boxen ryms inte på samma rad som de andra flytande boxarna, så den måste skiftas nedåt. Så snart den går fri från den tredje boxen finns det plats; den behöver inte skiftas nedanför den stora box nummer två. Att sätta float till left eller right får vissa konsekvenser utöver att gö- ra boxen flytande. Boxen blir automatiskt en blockbox, och dess marginaler kollapsar inte med intilliggande element. Flytande boxar lyfts alltså ur det normala dokumentflödet. Det innebär att de inte påverkar den blockbox som är förälder till den; föräldraboxens
STILMALLAR
✐ 60 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 105 --- #117
✐ ✐
Figur .. En flytande box skiftas nedåt om den inte får plats på raden.
höjd ökar inte för att ge plats åt den flytande boxen. Inte heller efterföljande blockboxar påverkas. Däremot kortas radboxarna av jämte den flytande box- en. Detta framgår av figur ., där det första stycket innehåller en flytande box. Styckena har kantlinjer och bakgrundsfärg som visar att de inte påverkas av den flytande boxen. Däremot ser vi att radboxarna intill den flytande boxen kortats av, så att texten löper vid sidan av den.
Figur .. Flytande boxar påverkar inte blockboxar.
Om man vill att en box ska expandera så att den omsluter alla flytande underordnade boxar finns det flera alternativ. Man kan göra även föräldern flytande, sätta overflow till något annat än visible, eller använda sig av ge- nererat innehåll som vi kommer att se närmare på senare i det här kapitlet. Alla metoderna har sina nackdelar, så ibland måste man helt enkelt lägga till ett extra element i HTML-koden och sätta clear (se nedan) på det. Internet Explorer och äldre har många märkliga buggar i hanteringen av flytande boxar. Bland annat lägger den alltid till en marginal om px på höger
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 61 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 106 --- #118
✐ ✐
sida om en box som flyter till vänster (och på vänster sida om en box som flyter till höger). Om en flytande box har en marginal i den riktning den flyter, och den marginalen snuddar vid förälderns kant, fördubblas marginalen.
Frigång Effekten i figur . är ofta önskvärd, särskilt för bilder i löpande text. Ibland vill man dock inte att exempelvis en rubrik ska visas vid sidan av en flytande bild. Egenskapen clear låter oss ange att en box ska gå fri från flytande boxar. Värdena left och right begränsar frigången till att gälla boxar som flyter i den angivna riktningen, medan both avser alla flytande boxar. Värdet kan också anges som none, vilket är det initiala värdet och anger att boxen inte behöver gå fri från några flytande boxar. Frigången åstadkoms genom att boxen skiftas nedåt tills dess överkant ham- nar nedanför den undre kanten av den flytande boxen. Om boxen har en topp- marginal räknas den från det föregående icke-flytande blockelementet, inte från den flytande boxen. Den skiftas bara så långt ned att den går fri från den flytande boxen, som synes i figur .. Vill vi vara säkra på att få ett visst av- stånd mellan en flytande box och en box med frigång kan vi antingen sätta en bottenmarginal på den flytande boxen eller en toppadding på boxen med frigång. En vanlig layoutlösning för sidor med flera kolumner är att göra kolum- nerna flytande. Vill man ha en sidfot nedanför sätter man bara clear:both på den, så hamnar den nedanför alla kolumner, oavsett vilken som är längst.
Figur .. Exempel på frigång.
STILMALLAR
✐ 62 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 107 --- #119
✐ ✐
Negativa marginaler på flytande boxar Om vi anger ett negativt värde för en marginal på en flytande box händer in- tressanta saker. En negativ vänstermarginal på en box som flyter till vänster gör att hela boxen skiftas till vänster. Om boxen skiftats nedåt för att den inte fick plats bredvid andra flytande boxar kan en negativ marginal göra att den plötsligt ryms! En negativ högermarginal på en box som flyter till vänster flyttar in margi- nalen inom boxen, så att innehåll till höger om boxen kan överlappa den. Det här låter kanske som rena grekiskan, men det kan faktiskt vara oerhört användbart för vissa typer av layouter. Innan vi kan titta närmare på detaljer- na behöver vi emellertid bekanta oss med ännu en finess i CSS: positione- ring.
Tajta trikåer
Om en normal blockbox har width:auto, vilket är det initiala värdet, beräknas dess bredd utifrån förälderns bredd och eventuella marginaler, padding och kantlinjer. Det gäller inte för flytande boxar; istället beräknas bredden på en flytande box med width:auto utifrån dess innehåll. Boxen blir precis så bred som det behövs, något som kallas shrink-wrapping på engelska, ungefär som plastfolie runt ett paket köttfärs.
En fin position Hittills har vi bara sett boxar som hamnar där de hamnar på grund av det innehåll som kommer före dem, samt flytande boxar som skiftas till vänster eller till höger. CSS ger oss större möjligheter än så. Vi kan faktiskt placera boxar precis var som helst på sidan. Hemligheten heter positionering. positionering Egenskapen position styr om en box är positionerad eller inte. Det initiala värdet är static, vilket innebär att boxen inte är positionerad utan läggs ut i det normala flödet. Värdet relative låter oss skifta boxen horisontellt och/el- ler vertikalt i förhållande till dess ursprungliga position. Värdena absolute och fixed gör att vi kan placera boxen var som helst. Termerna avser boxens placering i förhållande till det normala flödet, inte till webbläsarfönstret. Fem andra egenskaper är intimt förknippade med position: nämligen top, right, bottom, left och z-index. De fyra första har olika innebörd beroende på vilken typ av positionering vi använder, medan z-index styr den vertikala ordningen på överlappande boxar.
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 63 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 108 --- #120
✐ ✐
Innehållande block Innan vi kastar oss över positioneringens detaljer finns det ett begrepp vi be- höver förstå: innehållande block (containing block). För statiska boxar, alltså boxar som inte är positionerade, är det innehål- lande blocket alltid närmaste överordnade blockbox. Detsamma gäller för re- lativt positionerade boxar. För absolut positionerade boxar är reglerna lite annorlunda. Där är det in- nehållande blocket den närmast överordnade positionerade boxen. Om det vyn inte finns någon överordnad box som är positionerad är vyn (viewport) inne- hållande block. CSS-specifikationen är lite otydlig, men vi kan anse vyn vara ekvivalent med html-elementet. Boxar med position:fixed har alltid vyn som innehållande block.
Relativt sett
En relativt positionerad box läggs först ut som en vanlig, statisk box. Om top eller bottom har ett värde skilt från noll skiftas sedan boxen vertikalt. Om left eller right har ett värde skilt från noll skiftas boxen horisontellt. Det är viktigt att förstå att det bara är den ritade boxen som flyttas; själ- va elementet upptar fortfarande den ursprungliga platsen och övriga boxar i layouten läggs ut som om den vore kvar där. Om vi anger top:1em kommer boxens överkant att förskjutas em. Den för- skjuts mot den motsatta kanten – alltså nederkanten – så boxen flyttas em nedåt. Värdet left:20px skiftar boxen px åt höger. Ett negativt värde ger en förflyttning i andra riktningen, så bottom:-1em är detsamma som top:1em. Det är med andra ord meningslöst att ange både top och bottom eller både left och right. Däremot är det fullt möjligt att ange en vertikal och en horisontell förflyttning samtidigt, exempelvis top och left. Eftersom det bara är den ritade boxen som flyttas, och övriga boxar beter sig som om den relativt positionerade boxen vore kvar i sin ursprungsposi- tion, kan relativ positionering medföra att boxar överlappar varandra. Om boxen flyttas ett längre avstånd uppstår ett ”hål” i dokumentet där den låg från början. Relativ positionering går att kombinera med flytande boxar: en flytande box kan förflyttas vertikalt och horisontellt. Tillsammans med negativa mar- ginaler ger det mycket intressanta möjligheter för layouter med flera spalter, som vi kommer att se i kapitel . I ett av de viktigaste användningsområdena för position:relative flyttas boxen inte över huvud taget. Målet är då inte att skifta boxen, utan att göra den positionerad. Anledningen har att göra med innehållande block. Positio- nen för ett absolut positionerat block anges relativt dess innehållande block, och det gäller även för procentuella dimensioner. Därför är det ytterst viktigt
STILMALLAR
✐ 64 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 109 --- #121
✐ ✐
att ha kontroll på vad som är det innehållande blocket när man använder ab- solut positionering. Genom att sätta position:relative på det block vi vill ha som innehållande block för ett absolut positionerat underordnat block får vi full kontroll.
Absolutism En absolut positionerad box lyfts ut ur det normala flödet helt och hållet. Den påverkar varken sin förälder eller efterföljande element; det är som om den inte längre fanns kvar i layouten. Det är inte helt fel att tänka sig att boxen lyfts upp i ett lager ovanför det statiska innehållet, och att de element som kommer efter helt enkelt glider in i det utrymme den tog upp. En absolut positionerad box blir automatiskt en blockbox och den kan inte flyta (det beräknade värdet på float blir none). Dess marginaler kollapsar inte med intilliggande boxars. Egenskaperna top, right, bottom och left anger avståndet mellan boxens respektive kanter och motsvarande kanter på det innehållande blocket. Det innebär alltså att right:1.2em placerar den absolut positionerade boxens hö- gerkant ,em från det innehållande blockets högerkant, inte dess vänster- kant. Det går alltså att ange dimensionerna för en absolut positionerad box med hjälp av de fyra positionsegenskaperna. Vi kan också ange positionen för ett hörn samt en bredd och en höjd. Procentuella värden för positionsegenskaperna eller för width och height är relativa mot det innehållande blocket, vilket inte nödvändigtvis är detsam- ma som föräldern. Såväl Internet Explorer och äldre som Opera och äldre använder felaktigt föräldern som utgångspunkt. Det är fullt möjligt att placera en absolut positionerad box helt eller delvis utanför det synliga dokumentet, något som kan användas för strukturellt in- nehåll som behövs för textwebbläsare eller skärmläsare, men inte i en grafisk webbläsare med stöd för CSS.
.structural { position:absolute; left:-999em; } Eftersom absolut positionerade boxar lyfts ur det normala flödet finns det inget sätt att garantera att efterföljande innehåll placeras nedanför dem, som vi kan göra med clear för att ge frigång från flytande boxar. Absolut positio- nering är därför inte lämpligt för flerspaltslayouter där man vill ha en sidfot med full bredd. Det stöds dock inte av Internet Explorer och äldre.
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 65 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 110 --- #122
✐ ✐
Rör dig inte!
Fast placering – position:fixed – är ett specialfall av absolut positionering där vyn alltid är det innehållande blocket. En fast placerad box behåller sin po- sition i webbläsarfönstret när användaren skrollar dokumentet. Vid utskrift visas en fast placerad box på varje sida. Internet Explorer och äldre har inte stöd för position:fixed.
Tredje dimensionen Trots att vi vanligen räknar med två dimensioner i ett webbdokument han- terar CSS faktiskt tre. Vi kan visserligen inte ange att en box ska sväva fem centimeter framför bildskärmen, men vi behöver ändå vara medvetna om den tredje dimensionen i vissa fall. I CSS räknas X-axeln horisontellt och Y-axeln vertikalt, med origo i övre vänstra hörnet av skärmen eller papperet. Men det finns också en Z-axel, i rät vinkel mot de andra två. Den löper alltså rakt ut från ritytan. Vi kan inte ange en position längs Z-axeln som en längd eller ett procent- värde, men med egenskapen z-index kan vi styra över ordningsföljden på överlappande, positionerade boxar. Värdet är ett heltal eller nyckelordet auto. lager Boxar ritas i ett antal lager. Nedifrån räknat: . bakgrunder och kantlinjer . underordnade positionerade boxar med negativt index . underordnade blockboxar i det normala flödet . flytande underordnade boxar och deras innehåll . underordnade inline-boxar i det normala flödet . underordnade positionerade boxar vars index är auto eller . underordnade positionerade boxar med positivt index. kontext Positionerade boxar med z-index angivet som ett heltal skapar en kontext med dessa sju lager, där boxen själv har index . Om det finns flera boxar med samma index är det källkodsordningen som styr. Det är viktigt att komma ihåg att varje kontext är atomär. En box i kontext A kan aldrig placeras mellan boxar i kontext B; bara ovanför eller nedanför dem.
Snabba klipp
Egenskapen clip definierar det synliga området i en positionerad box. Värdet är en rektangel eller nyckelordet auto.
STILMALLAR
✐ 66 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 111 --- #123
✐ ✐
En rektangel anges med funktionsnotation: rect(top,right,bottom,left). Varje parameter är en längd eller auto. Värdena för top och bottom räknas från boxens överkant. Värdena för left och right beror på skrivriktningen, men för svenskt vidkommande kan vi anta att de räknas från boxens vänsterkant. Ett värde angivet som auto är detsamma som motsvarande kant.
#tunnel { position:absolute; width:500px; height:300px; clip:rect(100px, 300px, 200px, 100px); } Exemplet ovan genererar en absolut positionerad box som är px bred och px hög. Den sista deklarationen avgränsar det synliga området till en rektangel vars övre vänstra hörn är (,) och som är px bred och px hög. Allt innehåll i elementet med id="tunnel" som inte befinner sig inom den angivna rektangeln blir alltså osynligt.
Pest eller kolera Efter all denna teori inställer sig naturligtvis frågan huruvida det är bättre att använda flytande boxar eller absolut positionering för layout av ett webbdo- kument. Dessvärre, om än inte helt oväntat, är svaret att det beror på. Båda metoderna har sina för- och nackdelar. Såväl flytande som absolut positionerade boxar tas ur det normala flödet, vilket innebär att vi oftast behöver se till att det finns plats för dem utan att de hamnar i vägen för annat innehåll. Internet Explorer för Windows innehåller många bisarra buggar när det gäller flytande boxar. De är väl dokumenterade och det finns kända metoder för att kringgå dem, men det går oftast åt några timmars testande och en del svordomar innan allt fungerar. Internet Explorer har också en del besvärande buggar som rör absolut positionering, och där kan det vara svårare att kringgå problemen. Till råga på allt har denna webbläsare vissa buggar som uppträder när man har en absolut positionerad box efter en flytande box…! För en layout med flera spalter, där man vill ha en sidfot med full bredd, är valet enkelt: bara flytande boxar kan komma ifråga, eftersom det generellt inte går att placera en box nedanför en absolut positionerad box med okänd höjd. Behöver man ingen sidfot är det en mer öppen fråga. Med flytande boxar är det mer komplicerat att åstadkomma en presentationsordning som skiljer sig från källkodsordningen. Det är helt enkelt en bedömning man får göra för varje webbplats.
http://positioniseverything.net/
LAYOUTKONTROLL
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 67 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 112 --- #124
✐ ✐
I teorin skulle vi förstås kunna använda de tabellrelaterade värdena för egenskapen display, men i praktiken är det ogenomförbart så länge som In- ternet Explorer och har en betydande marknadsandel, eftersom de saknar stöd för dessa värden.
. Specifik CSS
Vissa egenskaper tillämpas bara på vissa typer av boxar, exempelvis sådana som genereras av listelement eller tabeller. I det här avsnittet kommer vi också att titta lite närmare på genererat in- nehåll, eftersom det hör nära ihop med listor och citat.
Listor
En ordnad lista (ol) eller en oordnad lista (ul) genererar en vanlig blockbox. Den har vanligen vissa marginaler eller padding som standard i webbläsarnas inbyggda stilmallar, men egenskapen display har värdet block. Ett listelement (li) i en sådan lista, däremot, har ett alldeles speciellt värde för display, nämligen list-item. En sådan box genererar en blockbox för innehållet, men även en extra box för listmarkören. Placeringen av den extra boxen beror på värdet av en annan egenskap: list-style-position. Om värdet är outside, vilket är det initiala värdet, placeras markörboxen utanför blockboxen. Om läsriktningen är vänster-till- höger hamnar markörboxen till vänster om blockboxen. Det är därför själva listans box har en vänstermarginal (eller padding): för att lämna utrymme för markörboxarna. Den exakta placeringen kan vi inte styra över, och den skiljer sig en aning mellan olika webbläsare. Om värdet är inside blir markörboxen en inline-box allra först i listelemen- tets blockbox. Egenskapen list-style-type styr vilken typ av listmarkör som visas i mar- körboxarna. De giltiga värdena ser du i tabell . och tabell ..
Värde Beskrivning circle en ofylld cirkel disc en fylld cirkel square en fylld kvadrat
Tabell .. Listtyper för oordnade listor
Värdet kan också vara none för att indikera att inga listmarkörer ska ritas ut.
STILMALLAR
✐ 68 Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. Innehåll ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 113 --- #125
✐ ✐
Värde Beskrivning armenian armenisk numrering decimal decimal numrering decimal-leading-zero tvåsiffrig nollutfylld decimal numrering georgian georgisk numrering lower-alpha, lower-latin gemena latinska bokstäver lower-greek gemena grekiska bokstäver lower-roman gemena romerska siffror upper-alpha, upper-latin versala latinska bokstäver upper-roman versala romerska siffror
Tabell .. Listtyper för ordnade listor
För Internet Explorer och äldre gäller att de inte stödjer värdena armenian, decimal-leading-zero, georgian och lower-greek. De stödjer inte heller vär- dena lower-latin och upper-latin, men de stödjer de alternativa formerna lower-alpha och upper-alpha. De flesta webbläsare använder disc för oordnade listor och decimal för ordnade listor som standard. Vill man ha en annan listmarkör kan man istället infoga en bild genom att använda egenskapen list-style-image. Värdet är en URI, till exempel:
list-style-image:url("/css/marker.png"); Eftersom vi inte kan påverka placeringen av listmarkören, förutom att ange om den ska ligga inom eller utom blockboxen, är det oftast bättre att sätta list-style-type:none och använda en vanlig bakgrundsbild för li-elemen- ten i stället. Slutligen finns en samlingsegenskap som låter oss sätta alla tre egenska- perna på en gång. Den heter list-style och tar upp till tre värden i valfri ordning: listtyp, listposition och bild. Om ett värde utelämnas används det initiala värdet för motsvarande egenskap.
list-style:disc url("ball.png") outside; Det är bra att ange en listtyp även om man använder en bild som markör. Om bilden är oåtkomlig, eller om webbläsaren inte har stöd för bilder, visas då den angivna markörtypen.
SPECIFIK CSS
✐ Innehåll Utdrag ur Max räckvidd med HTML & CSS. c 2008 HME Publishing. Kopiering förbjuden. 69 ✐
✐ ✐ ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page 114 --- #126
✐ ✐ Tabeller Tabeller är komplicerade i HTML, och de är även tämligen komplicerade i CSS. Dels finns det några egenskaper som bara tillämpas för tabeller, dels finns det ett antal värden för mer generella egenskaper som bara är menings- fulla i tabeller. Det är naturligtvis så att många av de här värdena är standardvärden för tabeller och deras underordnade elementtyper i webbläsarnas inbyggda stil- mallar, men det är också fullt möjligt att använda dem på helt andra element för att få dem att bete sig som exempelvis tabellceller. Det här kan vi se som det moderna och acceptabla sättet att använda tabel- ler för layout. Att märka upp innehållet med