IGÅR. Internet, www, TCP/IP, IP-adress, DNS, URL. HTTP Request. HTTP Response (HTML & status code)

Storlek: px

Starta visningen från sidan:

Download "IGÅR. Internet, www, TCP/IP, IP-adress, DNS, URL. HTTP Request. HTTP Response (HTML & status code)"

Daniel Bengtsson
för 5 år sedan
Visningar:

1 CSS Presentation

2 IGÅR Internet, www, TCP/IP, IP-adress, DNS, URL client HTTP Request server HTTP Response (HTML & status code) HTML Innehåll och struktur via semantiska märkningar Block, inline element

3 VAD ÄR CSS? Cascading Style Sheets (CSS) språk som beskriver hur HTML element ska se ut Utseende Layout Presentation (HTML beskriver enbart innehållet) Lätt att byta utseende på en hemsida

4 CSS3 Började utvecklas ihop med HTML5 av W3C Utveckling pågående men flesta webbläsare stödjer de nya CSS3 egenskaperna Helt bakåtkompatibel Delad i moduler Exempel på nya egenskaper: Animationer och transitions Gradienter, Skuggor, Reflektioner Rundade hörn Kantbilder Multipla bakgrundsbilder Kolumnbaserade layout

5 CSS SYNTAX CSS består av regler Selector: vilket/vilka html element regeln ska gälla för selector { property: value; property: value; } selector1, selector2, { property: value; property: value; } Gemener, bindestreck /* kommentarer */

6 LÄGGS TILL Inline: i samband med ett html element <h1 style= text-style: italic; > innehåll <h1>! Har högre prioritet över andra stilregler Embedded: i <head> via <style> elementet <style type="text/css"> h1 { color: red;} </style>! Extern.css fil: via <link> elementet Semantisk separation Mer flexibelt: kan återanvändas, kan länka till olika css Att föredra!

7 CASCADING För att egenskaperna som css reglerna specificerar faller i kaskader, dvs de ärvs och skrivs över i prioriteringsordning: Webbläsarens default stilmallar Externa css filer Interna inbäddade stiler Inline stil regler När flera regler definiera för samma elelement den som definieras närmast består Exempel:

färgnamn #ff0000; rgb(125,0,255); rgb(125,0,125,0.

8 FÄRGER I CSS color: för text, ramar background-color: för bakgrund Hexadecimal RGB RGBA HSL HSLA Fördefinerade färgnamn #ff0000; rgb(125,0,255); rgb(125,0,125,0.5); hsl(120,100%,25%); hsl(120,100%,25%,0.3); Cyan, Blue, Lime, Magenta, Yellow

9 MÅTT/ENHETER I CSS %: procent in: inch cm: centimeter mm: millimeter em: 1em = nuvarande fontstorlek, 2em = 2 x fontstorlek etc. Kan anpassa sig till storleken som den som läser dokumentet använder ex: 1 ex = x-höjd av en font (x-höjd ½ fontstorlek) pt: punkt (1 pt =1/72 inch) pc: pica (1 pc =12 punkter) px: pixel (en bildpunkt i skärmen)

10 CSS FONT & TEXT CSS font font-family! font-size! font-style!! font-variant! font-weight! CSS text text-align! text-decoration! text-indent! text-transform! line-height! word-spacing! letter-spacing! Exempel:

11 ID & ID SELECTOR Unik ID för ett html element Kan bara användas en gång på en websida Exempel:

12 CLASS & CLASS SELECTOR Exempel:

13 PSEUDO-CLASS SELECTOR Används för att definiera en speciell tillstånd av ett html element Mouse over Besökta länkar Kan kombineras med CSS klasser selector:pseudo-class { property:value; } selector.class:pseudo-class { property:value; } a:visited {! color: red;! }! a.listlinks:visited {! color: red;! }! Exempel:

14 ANDRA CSS SELECTORS Context selector: Sätta stil i nästlade element Tillämpar CSS egenskaper bara i element som befinner sig inuti ett annat element Separeras med mellanslag yttreselector innreselector { property:value; }.menylista li {!!color: red;!!font-weight: bold;! }! Exempel: Lista över alla typer av selectors:

15 LAYOUT Dela upp sidan i sektioner Styla element separat Avancerade/komplexa webbsidor <div> - behållare för innehåll och andra html element Block element - ny radbrytning före och efter i webbläsaren <span> - behållare för text Inline element ingen radbrytning före/efter Viktiga html egenskaper för layout id! class!

16 BOX MODEL margin visible width= margin+border+padding+width border padding Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. height width Exempel:

17 SEMANTISK LAYOUT <div id= header > <div id= nav > <div id= article > <div id= section > <div id= sidebar > <div id= footer >

18 SEMANTISK LAYOUT I HTML5 <header> <nav> <article> <section> <aside> <footer>

19 DOKUMENT FLÖDE Block element à radbrytning Inline element à flytande i ordning h1 h2 p text a text img text width: attribut används för att sätta bredden på block och bild (<img>) element.

20 FLYTANDE ELEMENT Lyfts från dokumentets normala flöde och flyttas till vänster/höger Underliggande text lindar sig runt elementet h1 h2 img p text a text img text Exempel:

21 POSITION position: static! default positionen position: relative! förskjutet från den statiska positionen position: absolute! fast inom ett elementet position: fixed! fast position inom hela webbläsarfönstret Kan också bestämma top, bottom, left, right positionen av ett elements kanter Exempel:

22 DEV TOOLS Elements/Inspect: Inspektera DOM och CSSregler Console: skriv ut, command line Sources/Debugger: debugging Network/Timelines: vilka resurser har laddats och hur lång tid Chrome/Firefox/Safari

23 VALIDERING Validera alltid din kod Testa i olika webbläsare

24 ATT TÄNKA PÅ: CSS Separera innehåll från utseende! Undvik att definiera css information i headern och inline Ange semantiska namn till ID och klasser för att bättre förstå koden och komma ihåg vad den gör Ange alltid en generisk typsnitt familj efter de specifika för att garantera dig sidan kommer att se ungefär samma i olika operativsystem Använd CSS context selectors istället för att upprepa användning av klassattribut Validera din CSS för att se till att syntaxen är korrekt

25 INFÖR LABBEN Skriv upp er på labblistorna om ni inte redan har gjort det Gå igenom W3schools tutorial för HTML och CSS Gå igenom föreläsningsexemplen Ladda hem från hemsidan, Följ jsfiddle länkarna från föreläsningsbilderna

26 INFÖR LABBEN TIPS PÅ ARBETSFLÖDE 1. Gör en skiss av webbsidan du vill skapa 2. Skriv din initiala HTML kod så att den semantiskt representerar innehållet, använd meningsfulla taggar 3. Titta på din skiss och bestäm hur du ska dela upp sidan i sektioner. Lägg in div element i din kod för att representera dem 4. Länka till en CSS fil och bygg den successivt 5. Lägg in generella stilregler först (fonter, färger, justering) Lab1: HTML Lab2: CSS 6. Gå vidare med detalj layouten av varje sektion

27 LÄNKAR TILL MATERIAL/LÄSNING CSS tutorial: CSS, wikipedia: Cascading_Style_Sheets CSS Selectors: CSS positioning i 10 steg:

28 Imorgon blir sidan interaktiv! TP2 kl. 08:15

Relevanta dokument

CSS. TNMK30 - Elektronisk publicering

CSS. TNMK30 - Elektronisk publicering CSS TNMK30 - Elektronisk publicering Dagens föreläsning CSS Layout med CSS Vad är CSS? Cascading Style Sheets (CSS), ett språk som beskriver hur HTML element ska se ut. Utseende Layout Presentation (HTML