1 / 46

CASCADING STYLE SHEETS

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.

grady
Download Presentation

CASCADING STYLE SHEETS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. <front> <div type="dedication"> <head>To the Right Honourable <rs>MR PITT</rs></head> <p><salute>SIR</salute>, never poor Wight of a Dedicator had /.../ this Fragment of Life.</p> <p>I humbly beg, Sir, /.../ that I have read or heard of.</p> <closer> <hi>I am, Great Sir, </hi> <salute>Your Well-wisher, and most humble Fellow-subject,</salute> <signed>THE AUTHOR.</signed> </closer> </div> </front>

  5. <div class="front"> <div class="dedication"> <p class="head">To the Right Honourable <span class=“rs">MR PITT</span></p> <p><span class="salute">SIR</span>, never poor Wight of a Dedicator had /.../ this Fragment of Life.</p> <p>I humbly beg, Sir, /.../ that I have read or heard of.</p> <p class="closer"> <em>I am, Great Sir, </em> <span class="salute">Your Well-wisher, and most humble Fellow - subject,</span> <span class="signed">THE AUTHOR.</span> </p> </div> </div>

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

  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 • Förenklar underhåll och uppdatering • Minskar filstorlekar • Ökar tillgängligheten • 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sw"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css" media="screen"> </style> </head> <body> </body> </html> Notera att print kan användas för att specificera regler för utskrift

  14. INBÄDDNING <style type="text/css" media="screen"> body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; } </style>

  15. LÄNKNING <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sw"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="stilmall.css" /> </head> <body> </body> </html>

  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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sw"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css" media="screen">@import "stilmall.css";</style> </head> <body> </body> </html>

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

  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: <p class="text">Text</p> 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: <span id="firstLetter">A</span> 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. innehåll margin padding border BOXMODELLEN ”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; } david.gunnarsson@hb.se

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

  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

  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

  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

  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

  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

More Related