CASCADING STYLE SHEETS Digitalisering av kulturarvet.

Slides:



Advertisements
Liknande presentationer
3. Text Välkommen till övning 3. Här kommer du få lära dig bra grejer. Texthantering är något du bör kunna när du jobbar med Powerpoint. Det svåra är att.
Advertisements

Namn på tillfället (kan skrivas på två rader) Namn på den som presenterar Datum för tillfället.
II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.
XHTML.
1 MSPEL Föreläsning 1 DSV Peter Mozelius XML, XHTML, CSS och Java applets.
Introduktion till CSS CSS1 - EXEMPEL. Denna webbsida vill vi kopiera och förbättra.
5. Grafiska objekt Redan på övning fem av sex! Här handlar det om att rita själv, färglägga och att låta kreativiteten flöda. Något för dig? Ritverktyg.
XHTML 1 Designa din egen webbsida. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Validering.
Programmering?. Förslag till innehåll programmeringens grundläggande teori webbredigering, webbprogrammering html xml wml (wap 1) xhtml css javascript.
HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas.
Programmeringteknik Webbdelen. HTML H yper T ext M arkup L anguage Märker upp sidans innehåll så att webbläsaren kan avgöra hur innehållet ska visas.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
Webbutveckling grundkurs DA7710
Webbteknik lektion 3 Det handlar mer om stilmallar Per K, 2012.
Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.
XHTML och CSS En föreläsning om webbteknik , SK, PK TFE Umeå Universitet.
Webbteknik lektion 4 Det handlar mer om stilmallar Per K, 2012.
Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender.
Webben – intro Första föreläsningen i kursen Webbutveckling.
Stilark: CSS Digitalisering av text April 2005 Mats Dahlström.
Responsive design i praktiken Johan Kling
WEBMASTER DAG 4 Mahmud Al Hakim
Textkodning 2 Dokumentrepresentation. Idag  Teckenuppsättningar  Validering  Metadata  Elementen div och span  Klasser och.
CSS3 Några exempel på nyheter i CSS3. Basdokument – som används i flertalet exempel Pingvinsång Fyra små pingviner, klädda i svart och.
XSLT – en introduktion Digitalisering av kulturarvet.
Föreläsning 11 Arrayer.
DHTML Designa din egen webbsida.
XSLT – en introduktion Elektronisk publicering.
TEI Header Mats Dahlström Digitalisering av kulturarvet April 2007.
1 ITK:P2 F2 Stilsättning av XHTML DSV Peter Mozelius.
(Cascading Style Sheets) Rebecca Landmér 2007 CSS.
1. Var förberedd och ha ett tydligt budskap!
CSS del 3 Kvarnbrinkx Medietyper En XHTML-sida kan ha olika CSS-filer för olika medier! Definieras med attributet “media” i link- taggen,
Webbutveckling Med fokus på grunder i html och css.
XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink
XHTML & CSS Introduktion Erik Nahkala
TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML- dokument är text – brödtext, rubriker, avgränsande linjer.
W EBBUTVECKLING, HT 2013 En webbplats Källa: pragmatisk.se.
XHTML & CSS 2 del 2 Designa din egen webbsida. Idag  Boxmodellen  Bakgrundsbilder  Rubriker  Clear och float  Positionering.
XHTML 1 Elektronisk publicering. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Klasser och.
XHTML – Dokumentets grundstruktur Body - head. Grundläggande dokument
XSLT 2 Digitalisering av kulturarvet.
UTVECKLING MED RAMVERKET.NET Marcus Medina. Dagens visdomsord ”Google is your friend”
Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim
Föreläsning 13 Appletprogram/fristående grafiska program Arv Rita linjer, rektanglar mm Skriva text, byta färg Appletprogram & HTML Grafiska användargränssnitt.
2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
XSLT 1 Digitalisering av kulturarvet.
1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
CSS del 2 Kvarnbrink Mer elementreferens ID refererar man till med #-tecken #content { width: 600px; } Klassnamn har en punkt före.newsitem.
CSS del 1 Kvarnbrink I början… Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets.
Copyright, Mahmud Al Hakim, Lektion 3 Ramar, Navigeringsfält, Lager Mahmud Al Hakim
XHTML & CSS 2 del 1 Elektronisk publicering. Idag  Repetition  Teckenuppsättningar  Metadata  Mer om klasser och ID:n  CSS.
ATT SKAPA TABELLER Tabeller skall endast användas om man verkligen vill presentera något i tabellform Använd INTE tabeller för att strukturera hela sidor.
Impact DETTA ÄR INTE DIN PENNA verdana DETTA ÄR INTE DIN PENNA Verdana bold DETTA ÄR INTE DIN PENNA.
Textkodning 1 Dokumentrepresentation. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Standarder.
CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll.
Repetition webbteknik Per K. Selektorer metod 1 1. Elementreferens CSS-kod: p { font-family: georgia, serif; } HTML: Text skrivs i en brödtext.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
Wordgenomgång.
CSS del 2 Samuel Kvarnbrink
CSS del 2 Samuel Kvarnbrink
Välkomna! Logga in som er själva Gå in på
Introduktion till CSS CSS1 - EXEMPEL.
JULEN Varför firar man jul inom kristendomen? (Svårt)
CSS del 2 Kvarnbrink
CSS del 1 Kvarnbrink
Appen CLIPS Filmremsa (Medel)
Internet A HTML Grunder
CSS del 1 Samuel Kvarnbrink
Logotyp, färger & typografi
Presentationens avskrift:

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