Presentation laddar. Vänta.

Presentation laddar. Vänta.

Föreläsning 7 Webbutveckling grundkurs DA7710. Formatmallar Från början var inte HTML ämnat för avancerad layout När kraven ökade började HTML utnyttjades.

Liknande presentationer


En presentation över ämnet: "Föreläsning 7 Webbutveckling grundkurs DA7710. Formatmallar Från början var inte HTML ämnat för avancerad layout När kraven ökade började HTML utnyttjades."— Presentationens avskrift:

1 Föreläsning 7 Webbutveckling grundkurs DA7710

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

3 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

4 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

5 CSS Koppling till HTML Koppling till HTML kan göras på 4 sätt 1.Externa formatmallar ( -taggen) 2.Inbäddade formatmallar ( -taggen) 3.Importerade formatmallar ) 4.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...

6 CSS Syntax CSS-syntax: Var noga med syntaxen –Fel tolereras inte! –Det måste skrivas exakt! Deklarationsblock EgenskapVärde Regel P {color: blue} Selektor

7 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

8 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

9 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/72in1pc = 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)

10 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

11 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

12 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

13 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

14 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

15 4 sätt att implementera CSS 1. Extern mall –Alla formategenskaper skrivs i en extern fil som länkas till HTML-huvudet med taggen –Kallas ibland även för länkad mall 2. Inbäddad mall –Alla formategenskaper skrivs i huvudet i HTML filen mellan och –Engelska: embedded

16 4 sätt att implementera CSS 3 Importerad mall –Alla formategenskaper skrivs i en extern fil som importeras till huvudet i HMTL-filen mellan och –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

17 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: Ett formatbaserat dok 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}

18 2. Inbäddade formatmallar Formaten definieras i samma fil som HTML-koden –formaten endast tillgängliga i samma dokument –skall skrivas i huvudet i dokumentet Exempel: 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.

19 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: url(style.css);... andra regler skrivs efter inlänkningen... --> Används om man har mycket direktiv i varje huvud Måste ligga först i -taggen

20 4. Partiella formatmallar Formatmallen anges i style-attributet till taggen. Gäller till och med slut-taggen Exempel: Blå, högerjusterad text Används för format som endast förekommer en gång OBS! Glöm inte sluttaggen

21 Undantag i partiella mallar och för block-nivå och för tagg-nivå Vill man ge en grupp olika taggar speciella egenskaper kan man omsluta dem med En del av innehållet i en tagg kan omslutas med Dessa ger ingen egen inverkan på utseendet i dokumentet och kan användas för formatering Exempel: Rubrik Stycke 1

22 Prioritet i hierarkin Inbördes prioritet 1.Partiella mallar 2.Inbäddade och Importerade mallar 3.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

23 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

24 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: Grönt –För att ange identitet: Blått OBS! Identiteter är enskilda. Det får inte finnas flera.

25 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: Grön rubrik Grönt stycke OBS! När man anger klassnamn får man inte använda mellanslag, å, ä eller ö. Använd engelska så går det bra!

26 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: Stor grön rubrik Ett element kan även tillhöra flera klasser Identiteter får endast förekomma en gång!

27 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 –Vanliga exempel: –Länkar: ej besökta, besökta och aktiva –Element som muspekaren förs över

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

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

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

31 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: 0,0 Positionen utgår från övre vänstra hörnet med top och left Olika z-index ger ”lager på lager”

32 Ö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 – CSS 2.1 –

33 Tips inför laboration 6 Följande egenskaper skall ni använda i laboration 6 –width och height Skall sättas som definitionen till och Gör samma sak som attributen width och height Höjden och bredden kan anges i pixlar, em etc.

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


Ladda ner ppt "Föreläsning 7 Webbutveckling grundkurs DA7710. Formatmallar Från början var inte HTML ämnat för avancerad layout När kraven ökade började HTML utnyttjades."

Liknande presentationer


Google-annonser