CASCADING STYLE SHEETS Digitalisering av kulturarvet
IDAG XML, XSLT, CSS och XHTML Peka ut element Selektorer Kontextuella selektorer Formatera element Regler
To the Right Honourable MR PITT SIR, never poor Wight of a Dedicator had /.../ this Fragment of Life. I humbly beg, Sir, /.../ that I have read or heard of. I am, Great Sir, Your Well-wisher, and most humble Fellow-subject, THE AUTHOR.
To the Right Honourable MR PITT SIR, never poor Wight of a Dedicator had /.../ this Fragment of Life. I humbly beg, Sir, /.../ that I have read or heard of. I am, Great Sir, Your Well-wisher, and most humble Fellow- subject, THE AUTHOR.
To the Right Honourable MR PITT SIR, never poor Wight of a Dedicator had /.../ this Fragment of Life. I humbly beg, Sir, /.../ that I have read or heard of. I am, Great Sir, Your Well-wisher, and most humble Fellow -subject, THE AUTHOR.
XML, XSLT, XHTML och CSS XML XSLT CSS XHTML Omvandling (XALAN)
CASCADING STYLE SHEETS – vad är det? Stylesheet – en mall som formaterar något Här: en mall som formaterar ett XHTML- dokument (men även XML och HTML) XSLT – en mall som transformerar ett XML-dokument Cascade – ett prioriteringsschema för att bestämma vilka stilregler som gäller om mer än en regel matchar ett element
SÅ GÅR DET TILL Ett XHTML-dokument läser in eller länkar in en stilmall I stilmallen pekas element i XHTML- dokumentet ut De utpekade elementen tilldelas stilregler som talar om hur de ska presenteras visuellt
VARFÖR? Därför att vi gärna vill separera innehåll från presentation, vilket 1.Förenklar underhåll och uppdatering 2.Minskar filstorlekar 3.Ökar tillgängligheten 4.Ger oss möjligheten att med en enda stilmall formatera ett oändligt antal XHTML- dokument
VAD KAN MAN GÖRA MED CSS? Mycket… Typsnitt, justering, kantlinjer, bakgrundsfärger, textfärger, textstilar, bakgrundsbilder, storlek, positionering, visning/synlighet Med mera CSS ger fullständig kontroll över layout utan att stöka till innehållet
FLERA MEDIA… En stilmall för visning på skärm… …en annan anpassad för utskrift… …och kanske en tredje för visning i mobiltelefon?
FORMATERA ETT XHTML-DOKUMENT Tre alternativ Inbäddning i XHTML-dokumentet Länkning till CSS-dokumentet Importering till XHTML-dokumentet
INBÄDDNING <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Notera att print kan användas för att specificera regler för utskrift
INBÄDDNING body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }
LÄNKNING <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
LÄNKNING, stilmall.css body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }
IMPORTERING <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "stilmall.css";
IMPORTERING, stilmall.css body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }
SYNTAXEN… En CSS-regel består av en selektor och en till flera deklarationer Selektorn avgör vilket eller vilka XHTML- element som ska påverkas av regeln Varje deklaration består av en egenskap och ett värde
SYNTAXEN… Selektor Egenskap Värden Enheter body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }
SYNTAXEN… Regelblock omges av krullparenteser { } och varje deklaration avslutas med ett semikolon ;
REGLER OCH SELEKTORER Regel – talar om hur något ska formateras Selektor – talar om vad som ska formateras
REGEL body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }
SELEKTORER Element h1 { font-weight: bold } Klasser h2.text { font-variant: uppercase } Identifierare #container { border: 1px solid black } Kontextuella selektorer #main h1 { font-weight: bold } div p { font-family: geneva } div p.legend { font-variant: italic }
KLASSER OCH IDENTIFIERARE? I XHTML (och HTML) finns möjligheten att tilldela ett eller flera element ett klassnamn Varje element kan också tilldelas ett unikt ID
KLASSER En klass är en grupp av element som identifieras av ett klassnamn Elementen kan vara av samma typ men behöver inte vara det I XHTML-koden: Text I CSS-koden: p.text { color: blue; } Alternativt:.text { color: blue; }
IDENTIFIERARE En identifierare refererar till exakt ett element i ett dokument I XHTML-koden: A I CSS-koden: span#firstLetter { color: blue; font- size: 3em;} Alternativt: #firstLetter { color: blue; font-size: 3em;}
NÄR SKA VAD ANVÄNDAS? Tumregel: använd id:n för sektioner (vanligtvis div-element) id:n är också användbart för listor, särskilt länklistor Använd klasser då flera element av samma typ ska ha samma visuella formatering Tänk på att ett id alltid måste vara unikt!
PSEUDOKLASSER Klasser som inte finns i dokumentstrukturen Används bland annat för länkegenskaper a:link {color: black} a:visited {color: grey} a:hover {color: red} a:active {color: red}
PSEUDOKLASSER Men även för andra element: p:first-letter { font-style: italic; font-size: 3em; font-family: georgia, serif; } p:first-line { font-size: 2em; font-family: georgia, serif; font-variant: small-caps; }
FÄRGER Färg anges i RGB, hex eller med färgkonstant Hex - #99cc33 (eller #9c3) RGB – rgb(153, 204, 51) Färgkonstant - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white och yellow h1 {background-color: #99cc33;} h1 {background-color: rgb(153, 204, 51);} h1 {background-color: maroon;}
TYPOGRAFI Teckensnitt kan också anges Verdana, Trebuchet MS, Georgia, Tahoma mfl är anpassade speciellt för webben p { font-family: verdana, sans-serif; font-size: 0.8em; } p { font-family: georgia, serif; font-size: 12pt; }
MÅTT Absoluta mått mm – millimeter cm – centimeter in – inch pt – point (72pt = 1in) pc – pica (1pc = 12pt) px – pixel Relativa mått em – fyrkanten (emspace) ex – x-höjden % – procent
BOXMODELLEN innehåll margin padding border ”TRouBLed”: När man använder kortformen för att specificera margin, padding eller border för ett element börjar man med den övre sidan och går medsols: Top, Right, Bottom, Left. Ex.: h1 { margin: 1em 1em 0 1em; }
BOXMODELLEN p { width: 300px; padding: 20px; margin: 10px; border: 2px solid } Total bredd 300px +40px +20px +4px px
FLOAT Tillåtna värden: left, right och none Låter ett element flyta till vänster (höger) om nästa element.vers1 { float: left; border: 1px solid #000; width: 200px; }
CLEAR Tillåtna värden: left, right, both och none Specificerar på vilka sidor om elementet där ett annat element inte tillåts flyta.vers3 { clear: left; }
Exempel 1 #vers1 { float: left; width: 200px; background: #efefef; margin-right: 45px; } #vers2 { float: left; width: 350px; background: royalblue; color: white; } #vers3 { clear: both; background: darkred; color: #efefef; } Exempel 1
Exempel 2 #vers1 { float: left; width: 190px; background: #efefef; margin-right: 10px; } #vers2 { width: 190px; background: royalblue; color: white; float: left; margin-right: 10px; } #vers3 { width: 190px; background: darkred; color: #efefef; float: left; } #navigation { text-align: center; margin-left: 0; clear: both; } Exempel 2 Exempel 2
Exempel 2 - spegelvänd #vers1 { float: right; width: 190px; background: #efefef; margin-left: 10px; } #vers2 { width: 190px; background: royalblue; color: white; float: right; margin-left: 10px; } #vers3 { width: 190px; background: darkred; color: #efefef; float: right; } #navigation { text-align: center; margin-left: 0; clear: both; } Exempel 2 - spegelvänd Exempel 2 - spegelvänd
Exempel 3 #vers1 { float: left; width: 190px; background: #efefef; margin-right: 10px; } #vers2 { width: 190px; float: left; background: royalblue; color: white; margin-right: 10px; margin-bottom: 10px; } #vers3 { background: darkred; clear: both; color: #efefef; } #navigation { text-align: center; margin-left: 0; position: absolute; top: 70px; right: 10px; } Exempel 3 Exempel 3
Exempel 4 #header h1 { float: left; background: white; padding: 5px; margin: 0; } #vers1 { background: #efefef; } #vers2 { float: left; width: 190px; background: royalblue; color: white; margin-right: 10px; } #vers3 { background: darkred; color: #efefef; width: 395px; float: left; } Exempel 4 Exempel 4
FLOAT: att tänka på Ange alltid en bredd för ett float-element (behövs dock inte om elementet är img) Ett float-element bryts ut från övriga element vilket kan resultera i att det överlappar andra element. Innehållet kommer dock att inte att överlappas. Ett float-element placeras mot vänstra (högra) kanten av det omgivande elementet eller föregående float-element (med samma riktning). Saknas det horisontellt utrymme för float- elementet på aktuell rad kommer det att flyttas till nästa rad.
POSITIONERING Egenskap: position, värde: absolute, relative, static eller fixed Absolute – placerar elementet i en position relativ till elementets förälder Relative – placerar elementet i en position relativ till dess utgångsposition
ABSOLUTE #navigation { text-align: center; margin-left: 0; position: absolute; top: 70px; right: 10px; } Dokumentträdet: #container > #navigation #container är #navigation:s förälder #navigation placeras 70px från #container:s topp och 10px från #container:s högerkant
RELATIVE h1 { background: white; width: 200px; border: 1px solid black; position: relative; top: -20px; left: -20px; } Elementet h1 placeras 20px ovanför och 20px till vänster om dess utgångsposition Rubrik