Presentation laddar. Vänta.

Presentation laddar. Vänta.

CASCADING STYLE SHEETS Digitalisering av kulturarvet.

Liknande presentationer


En presentation över ämnet: "CASCADING STYLE SHEETS Digitalisering av kulturarvet."— Presentationens avskrift:

1 CASCADING STYLE SHEETS Digitalisering av kulturarvet

2 IDAG  XML, XSLT, CSS och XHTML  Peka ut element Selektorer Kontextuella selektorer  Formatera element Regler

3 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.

4 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.

5 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.

6 XML, XSLT, XHTML och CSS XML XSLT CSS XHTML Omvandling (XALAN)

7 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

8 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

9 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

10 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

11 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?

12 FORMATERA ETT XHTML-DOKUMENT  Tre alternativ Inbäddning i XHTML-dokumentet Länkning till CSS-dokumentet Importering till XHTML-dokumentet

13 INBÄDDNING Notera att print kan användas för att specificera regler för utskrift

14 INBÄDDNING body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }

15 LÄNKNING

16 LÄNKNING, stilmall.css body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }

17 IMPORTERING

18 IMPORTERING, stilmall.css body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }

19 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

20 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; }

21 SYNTAXEN…  Regelblock omges av krullparenteser { } och varje deklaration avslutas med ett semikolon ;

22 REGLER OCH SELEKTORER  Regel – talar om hur något ska formateras  Selektor – talar om vad som ska formateras

23 REGEL body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }

24 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 }

25 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

26 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; }

27 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;}

28 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!

29 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}

30 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; }

31 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;}

32 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; }

33 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

34 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; }

35 BOXMODELLEN p { width: 300px; padding: 20px; margin: 10px; border: 2px solid } Total bredd 300px +40px +20px +4px px

36 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; }

37 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; }

38 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

39 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

40 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

41 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

42 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

43 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.

44 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

45 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

46 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


Ladda ner ppt "CASCADING STYLE SHEETS Digitalisering av kulturarvet."

Liknande presentationer


Google-annonser