Webbutveckling grundkurs DA7710 2017-04-06 Webbutveckling grundkurs DA7710 Föreläsning 7

Formatmallar Från början var inte HTML ämnat för avancerad layout 2017-04-06 Formatmallar Från början var inte HTML ämnat för avancerad layout När kraven ökade började HTML utnyttjades på fel sätt: Användning av ej standardiserade taggar (Netscape och IE) Tabeller och bilder för layout Användning av bilder för white space control* Tack vare introduktionen av formatmallar (Style Sheets), kan HTML nu användas till sitt syfte Logisk strukturering av text och bilder Typografin överlämnas till formatmallar * white space control: Användning av bilder, ofta i samma färg som bakgrunden för att uppta utrymme, t.ex. för att få text på rätt plats i dokumentet.

CSS - Cascading Style Sheets 2017-04-06 CSS - Cascading Style Sheets Det finns olika typer av formatmallar HTML är oberoende av vilket språk som används Vi skall gå igenom CSS (Cascading Style Sheets) CSS är precis som HTML rekommenderat av W3C CSS är standardspråket för formatmallar CSS är som namnet antyder hierarkiskt ordnat Formatmallar från olika källor kan sammanblandas

CSS Fördelar Ger åtskillnad av presentation och innehåll 2017-04-06 CSS Fördelar Ger åtskillnad av presentation och innehåll Designer  Författare Författaren behöver inte lägga resurser på utseende Konsistent design/formatering av en hemsida Alla dokument kan få likartad layout utan ingrepp i varje fil Cascading - hierarkisk struktur Inbyggd prioritetsordning för olika formatkällor. Dessa kan användas samtidigt och sammanblandas En ändring på ett ställe kan påverka hela webbplatsen Bra på stora webbplatser

CSS Koppling till HTML Koppling till HTML kan göras på 4 sätt 2017-04-06 CSS Koppling till HTML Koppling till HTML kan göras på 4 sätt Externa formatmallar (<LINK>-taggen) Inbäddade formatmallar (<STYLE>-taggen) Importerade formatmallar (@import) Partiella format (style-attributet hos taggarna) 1,2 och 4 är generella sätt i HTML 3 är inbyggt i CSS Mer om implementeringsätten längre fram...

P {color: blue} CSS Syntax CSS-syntax: Var noga med syntaxen 2017-04-06 CSS Syntax CSS-syntax: Var noga med syntaxen Fel tolereras inte! Det måste skrivas exakt! Deklarationsblock Egenskap Värde Regel P {color: blue} Selektor I CSS skapar man regler. En regel talar om hur ett element skall presenteras typografiskt. Vilket element man avser anges med selektorn. En regel kan innehålla en eller flera deklarationer. I deklarationsblocket anger man olika fördefinierade egenskaper och sätter olika värden till dessa. Egenskaperna styr olika typografiska fenomen hos elementet som t.ex. typsnitt, storlek, färg etc.

CSS Syntax Deklarationsblocket inleds med { och avslutas med } 2017-04-06 CSS Syntax Deklarationsblocket inleds med { och avslutas med } En deklaration skrivs: {egenskap: värde} Flera deklarationer i samma block separeras med semikolon: {egenskap1: värde; egenskap2: värde} Exempel: H1{ font-family: Verdana; font-size: 18pt; color: gray; margin-left: 0.5in} OBS! Skriv inte attribut="värde" som i HTML Vi specificerar alltså formatinstruktionerna inom spets- parenteser och vi anger flera egenskaper genom att dela av dessa med semokolon (;). OBS att det INTE ska vara mellanslag mellan siffra och enhet för typsnitt (fonts) mm [fel angivet i flera böcker]).

2017-04-06 CSS Box-modellen Alla element (stycken, rubriker, bilder etc.) baseras i CSS på den s.k. Box-modellen Höjd och bredd baseras på innehållet (content) Topp, botten, höger och vänster kan ställas individuellt Ramen (border) kan vara synlig och i olika färg och format Olika taggar har olika standardvärden på de olika delarna

CSS Om egenskaper och värden 2017-04-06 CSS Om egenskaper och värden Olika egenskaper kräver olika typer av värden Textbaserade värden Sifferbaserade: absoluta eller relativa beroende på vald enhet Procentvärden URL:er Absoluta siffervärden Används med fördel för utskrift, tryck etc. in, cm, mm, pt (punkter) eller pc (pica) 1pt = 1/72in 1pc = 12pt Relativa siffervärden Används med fördel för presentation på monitorer etc. px (pixlar), em (baseras på fontstorleken) Om em förekommer i ”font-size” blir det baserat på utomliggande taggs fontstorlek OBS! Decimaltal skrivs med . (punkt) inte , (komma)

CSS Relativa och absoluta enheter 2017-04-06 CSS Relativa och absoluta enheter Relativa enheter till monitorer etc. och absoluta till tryck etc. För en yta som på en monitor är 1px kan det behövas 16 punkter på en laserskrivare. Tänk på vilket medium du riktar dig till! Laserprinter 1px Monitor 1px

CSS Egenskaper för typsnitt 2017-04-06 CSS Egenskaper för typsnitt font-family – Arial, Courier, Times etc. font-size – Absolut storlek i pt eller relativ i em font-style – normal, italic (kursiv) eller oblique font-weight – normal eller bold (fetsilt) Exempel: {font-family: Times; font-weight: bold; font-style: italic; font-size: 40pt} Dessa egenskaper påverkar typsnittet

CSS Egenskaper för text 2017-04-06 CSS Egenskaper för text text-decoration – (underline, overline eller line-through) text-indent – Indentering i pt, px, em etc. text-align – Horisontell justering (left, center eller right) word-spacing – Avstånd mellan ord letter-spacing – Avstånd mellan bokstäver vertical-align – Vertikal justering (top, middle eller bottom) Exempel: {letter-spacing: 0.5em; word-spacing: 0.5em; text-decoration: underline} D e s s a e g e n s k a p e r p å v e r k a r t e x t

CSS Egenskaper för färg och bakgrund 2017-04-06 CSS Egenskaper för färg och bakgrund color (namn eller #RRGGBB) background (URL till bild eller färg enligt ovan) Exempel: {color: blue; background: yellow} Dessa egenskaper påverkar färger

CSS Egenskaper för boxmodellen 2017-04-06 CSS Egenskaper för boxmodellen margin – tomrum utanför elementet padding – ”luft” innanför ramen (border) border-width – tjocklek på ramen border-color – färg på ramen border-style – format på ramen Ovanstående påverkar alla fyra sidor i boxen Topp, botten, vänster och höger kan påverkas enskilt Ex: border-left-color påverkar endast vänster ram Exempel: Dessa egenskaper påverkar boxmodellen

4 sätt att implementera CSS 2017-04-06 4 sätt att implementera CSS 1. Extern mall Alla formategenskaper skrivs i en extern fil som länkas till HTML-huvudet med taggen <LINK> Kallas ibland även för länkad mall 2. Inbäddad mall Alla formategenskaper skrivs i huvudet i HTML filen mellan <STYLE> och </STYLE> Engelska: embedded Exempel på 1. Länkad mall: <head> <link rel="stylesheet" href="stilmall.css" type="text/css"> </head> Exempel på 2. Inbäddad mall: <style> <!-- /* detta är en inbäddad mall */ p {color: blue} p.nils {color: magenta} h1 {font-weight: bold; font-size: 25pt} --> </style>

4 sätt att implementera CSS 2017-04-06 4 sätt att implementera CSS 3 Importerad mall Alla formategenskaper skrivs i en extern fil som importeras med @import till huvudet i HMTL-filen mellan <STYLE> och </STYLE> OBS! Måste stå först innan eventuell inbäddad mall 4. Partiell mall Alla formategenskaper skrivs direkt i taggen med attributet style Engelska: inline Exempel på 3. Importerad mall: <head><style>@import url(specialstil.css);</style></head> Exempel på 4. Partiell mall: <body><p style="color: red; font-style: italic ">hej</p></body>

1. Externa formatmallar Alla egenskaperna skrivs i en egen textfil 2017-04-06 1. Externa formatmallar Alla egenskaperna skrivs i en egen textfil Fördelar Central administration Ändringar ger genomslag på alla undersidor Formatmallen länkas till HTML-filer enligt följande: <HEAD> <TITLE>Ett formatbaserat dok</TITLE> <LINK href="style.css" rel="stylesheet" type="text/css"> </HEAD> type=”text/css” (MIMETYP: anger typ/innehåll) BODY {background: #F8F0E2; font-family: Verdana; margin-left: 2%; margin-right: 2%} P {font-family: Verdana; color: #FFFFAA} A:link {font-family: Verdana; color: #7A00A4} A:visited {font-family: Verdana; color: #7A77A4}

2. Inbäddade formatmallar 2017-04-06 2. Inbäddade formatmallar Formaten definieras i samma fil som HTML-koden formaten endast tillgängliga i samma dokument skall skrivas i huvudet <HEAD></HEAD> i dokumentet Exempel: <STYLE type="text/css"> <!— H1 {font: 18pt Verdana; color: magenta} H2 {font: 14pt Verdana; color: FFC900} --> </STYLE> Vi kommenterar (gömmer) format-koden för äldre webbläsare som inte kan hantera CSS. Annars finns det risk för att koden skrivs ut i klartext i webbläsaren.

3. Importerade formatmallar 2017-04-06 3. Importerade formatmallar Definieras i samma fil som HMTL-koden Länk till extern fil ungefär som en extern formatmall Denna form är definierad i CSS och tillhör inte HTML Exempel: <STYLE type="text/css"> <!-- @import url(style.css); ... andra regler skrivs efter inlänkningen ... --> </STYLE> Används om man har mycket direktiv i varje huvud Måste ligga först i <STYLE>-taggen

4. Partiella formatmallar 2017-04-06 4. Partiella formatmallar Formatmallen anges i style-attributet till taggen. Gäller till och med slut-taggen Exempel: <P style="text-align: right; color: blue"> Blå, högerjusterad text </P> Används för format som endast förekommer en gång OBS! Glöm inte sluttaggen

2017-04-06 Undantag i partiella mallar <DIV></DIV> och <SPAN></SPAN> <DIV> för block-nivå och <SPAN> för tagg-nivå Vill man ge en grupp olika taggar speciella egenskaper kan man omsluta dem med <DIV></DIV> En del av innehållet i en tagg kan omslutas med <SPAN></SPAN> Dessa ger ingen egen inverkan på utseendet i dokumentet och kan användas för formatering Exempel: <DIV style="text-align: right; color: blue"> <H1>Rubrik</H1> <P>Stycke 1</P> </DIV>

Prioritet i hierarkin Inbördes prioritet 2017-04-06 Prioritet i hierarkin Inbördes prioritet Partiella mallar Inbäddade och Importerade mallar Externa mallar Högst prioritet bestämmer utseende (1 högst) Alla kan användas samtidigt (Cascading) Hemsidans standard i externa mallar Inbäddade för sidspecifikt Importerade för "stor mängd" sidspecifikt Partiella på tagg-nivå för enskaka formatering

Mer om CSS Klasser och identiteter 2017-04-06 Mer om CSS Klasser och identiteter För att kunna ge samma typ av element olika format på olika ställen i dokumentet finns klasser och identiteter Klasser för flera förekomster, identiteter för enskilt förekommande Klass Identitet

Mer om CSS Klasser och identiteter 2017-04-06 Mer om CSS Klasser och identiteter I CSS: En klass skapas med ett tillägget .namn till selektorn P.green {color: green} En identitet skapas med ett tillägget #namn till selektorn P#blue {color: blue} I HMTL: Det finns två attribut som alla taggar har, class och id För att ange klasstillhörighet: <P class="green">Grönt</P> För att ange identitet: <P id="blue">Blått</P> OBS! Identiteter är enskilda. Det får inte finnas flera.

Mer om CSS Generella klasser 2017-04-06 Mer om CSS Generella klasser Man kan skapa klasser som är oberoende av tagg-typ Det görs med selektorn * *.green {color: green} Det är likvärdigt att utelämna * .green {color: green} De två ovanstående skrivsätten ger samma resultat I HMTL-koden: Ovanstående klass kan nu användas i olika taggtyper: <H1 class="green">Grön rubrik</H1> <P class="green">Grönt stycke</P> OBS! När man anger klassnamn får man inte använda mellanslag, å, ä eller ö. Använd engelska så går det bra!

Mer om CSS Kombinera klasser och identiteter 2017-04-06 Mer om CSS Kombinera klasser och identiteter Vi kan kombinera klasser och identiteter En tagg kan ha en klasstillhörighet och en egen identitet P.green {color: green} P#big {font-size: 16em} I HMTL-koden: Ovanstående regler kan användas i samma tagg: <P class="green" id="big"> Stor grön rubrik </P> Ett element kan även tillhöra flera klasser <P class="green big special"> Identiteter får endast förekomma en gång!

Mer om CSS Pseudoklasser & pseudoelement 2017-04-06 Mer om CSS Pseudoklasser & pseudoelement Pseudoelement För ge speciella format till element baserat på saker utanför dokumentstrukturen Vanliga exempel: Första bostaven i ett stycke Första raden i ett stycke Pseudoklasser För att ge speciella format till element baserat på logiska och dynamiska fenomen Länkar: ej besökta, besökta och aktiva Element som muspekaren förs över Anfangen är ett effektivt sätt att markera början på en text med en versal bokstav.

Mer om CSS Pseudoelement 2017-04-06 Mer om CSS Pseudoelement Pseudoelement Exempel: P:first-line {font-weight: bold} P:first-letter {font-size: 200%} Detta kan man använda för att skapa en anfang eller för att efterlikna en tidningsartikel Pseudoelement fungerar dåligt i IE!

Mer om CSS Pseudoklasser 2017-04-06 Mer om CSS Pseudoklasser Pseudoklasser :link – egenskaper för länkar :visited – egenskaper för besökta länkar :active – egenskaper för aktiva länkar :hover – egenskaper för element som muspekaren förs över Exempel: A:link {color: blue; text-decoration: none} A:visited {color: blue ; text-decoration: none} A:active {color: red ; text-decoration: none} A:hover {text-decoration: underline}

Mer om CSS Gruppering av selektorer 2017-04-06 Mer om CSS Gruppering av selektorer För att slippa skriva så mycket… Om flera taggar ska ha samma format H1, H2, H3 {font-family: Verdana} Likvärdigt med H1 {font-family: Verdana} H2 {font-family: Verdana} H3 {font-family: Verdana} OBS! PGA en bugg i vissa versioner av Netscape ärver inte tabeller sin förälders egenskaper. Därför bör TD ha sin egen deklaration. /SD

Mer om CSS Positionering 2017-04-06 Mer om CSS Positionering Relativ och absolut positionering av element Vi tittar bara på absolut positionering DIV{ position: absolute; left: 100px; top: 250px; z-index: 1} Med z-index får vi ”lager på lager” Understa lagret: 1 i IE, 0 i Mozilla Vid lägre index hamnar man bakom Titta på exemplet: http://www.ts.mah.se/utbild/da7710/st04/material/f7/positionering.htm 0,0 Positionen utgår från övre vänstra hörnet med top och left Olika z-index ger ”lager på lager” CSS2 ingår inte i kursen och behandlas ej på tentamen.

Övrigt Mozilla stödjer CSS allra bäst men det mesta fungerar även i IE 2017-04-06 Övrigt Mozilla stödjer CSS allra bäst men det mesta fungerar även i IE Tabeller används fortfarande för layout eftersom positioneringen inte fungerar fullt ut i webbläsarna Prova noggrant i båda webbläsarna VARNING! Lita ej blint på din bok då det gäller formatmallar, konsultera hellre W3C på webben Länkar till specifikationerna av CSS: CSS 1.0 – http://www.w3.org/TR/REC-CSS1 CSS 2.1 – http://www.w3.org/TR/CSS21 Ett tips är att titta på denna länk när ni gör tentamen om ni har svårigheter med CSS.

2017-04-06 Tips inför laboration 6 Följande egenskaper skall ni använda i laboration 6 width och height Skall sättas som definitionen till <TD> och <TH> Gör samma sak som attributen width och height Höjden och bredden kan anges i pixlar, em etc. Ett tips är att titta på denna länk när ni gör tentamen om ni har svårigheter med CSS.

2017-04-06 Tips inför laboration 6 Följande egenskap kan vara bra att känna till inför labben border-collapse: collapse Skall sättas som en av definitionerna till <TABLE> Gör att ramen och utrymmet mellan cellerna försvinner Jämför med cellpadding="0" & cellspacing="0” Inga attribut förutom colspan och rowspan får anges! OBS! Vi gör fortfarande en tabell för layouten eftersom webbläsarna inte stödjer CSS 2.1 fullt ut ännu. Annars hade vi kunnat göra layouten i labben helt med CSS. Ett tips är att titta på denna länk när ni gör tentamen om ni har svårigheter med CSS.