Post on 22-Feb-2016
description
CASCADING STYLE SHEETSCASCADING STYLE SHEETS
Digitalisering av kulturarvet
IDAGIDAG
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.
<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>
<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>
XML, XSLT, XHTML och CSSXML, XSLT, XHTML och CSS
XML XSLTCSS
XHTMLOmvandling(XALAN)
CASCADING STYLE SHEETS – vad är CASCADING STYLE SHEETS – vad är det?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 TILLSÅ 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?VARFÖR?
Därför att vi gärna vill separera innehåll från presentation, vilket
1. Förenklar underhåll och uppdatering2. Minskar filstorlekar3. Ökar tillgängligheten4. Ger oss möjligheten att med en enda
stilmall formatera ett oändligt antal XHTML-dokument
VAD KAN MAN GÖRA MED CSS?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…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-DOKUMENTFORMATERA ETT XHTML-DOKUMENT
Tre alternativ• Inbäddning i XHTML-dokumentet• Länkning till CSS-dokumentet• Importering till XHTML-dokumentet
INBÄDDNINGINBÄ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 attprint kananvändasför attspecificeraregler förutskrift
INBÄDDNINGINBÄ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>
LÄNKNINGLÄ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>
LÄNKNING, stilmall.cssLÄNKNING, stilmall.css
body {
font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-size: 0.8em;background: #2baffa;color: #ffffff;padding-bottom: 20px;
}
IMPORTERINGIMPORTERING<!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>
IMPORTERING, stilmall.cssIMPORTERING, stilmall.css
body {
font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-size: 0.8em;background: #2baffa;color: #ffffff;padding-bottom: 20px;
}
SYNTAXEN…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…SYNTAXEN…Selektor
EgenskapVärden
Enheter
body {
font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-size: 0.8em;background: #2baffa;color: #ffffff;padding-bottom: 20px;
}
SYNTAXEN…SYNTAXEN…
Regelblock omges av krullparenteser { } och varje deklaration avslutas med ett semikolon ;
REGLER OCH SELEKTORERREGLER OCH SELEKTORER
Regel – talar om hur något ska formateras
Selektor – talar om vad som ska formateras
REGELREGEL
body {
font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-size: 0.8em;background: #2baffa;color: #ffffff;padding-bottom: 20px;
}
SELEKTORERSELEKTORER 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?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
KLASSERKLASSER En klass är en grupp av element som
identifieras av ett klassnamn Elementen kan vara av samma typ men
behöver inte vara detI XHTML-koden:
<p class="text">Text</p>I CSS-koden:
p.text { color: blue; }Alternativt:
.text { color: blue; }
IDENTIFIERAREIDENTIFIERARE En identifierare refererar till exakt ett
element i ett dokumentI XHTML-koden:
<span id="firstLetter">A</span>I CSS-koden:
span#firstLetter { color: blue; font-size: 3em;}
Alternativt:#firstLetter { color: blue; font-size: 3em;}
NÄR SKA VAD ANVÄNDAS?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!
PSEUDOKLASSERPSEUDOKLASSER
Klasser som inte finns i dokumentstrukturen
Används bland annat för länkegenskapera:link {color: black}a:visited {color: grey}a:hover {color: red}a:active {color: red}
PSEUDOKLASSERPSEUDOKLASSER 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ÄRGERFÄ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;}
TYPOGRAFITYPOGRAFI Teckensnitt kan också anges Verdana, Trebuchet MS, Georgia, Tahoma
mfl är anpassade speciellt för webbenp {font-family: verdana, sans-serif;font-size: 0.8em;}p {font-family: georgia, serif;font-size: 12pt;}
MÅTTMÅ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
david.gunnarsson@hb.se
BOXMODELLENBOXMODELLEN
innehållmargin
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; }
BOXMODELLENBOXMODELLENp {width: 300px;padding: 20px;margin: 10px;border: 2px solid}
Total bredd300px+40px+20px+4px-----364px
FLOATFLOAT 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;}
CLEARCLEAR 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 1Exempel 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 2Exempel 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 - spegelvändExempel 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 3Exempel 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 4Exempel 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
FLOAT: att tänka på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.
POSITIONERINGPOSITIONERING 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
ABSOLUTEABSOLUTE#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
RELATIVERELATIVEh1 {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