Introduktion till CSS
- 1. DA106A Introduktion till webbutveckling HT23 7.5hp Anton Tibblin
- 3. Innehåll 1.CSS, vad är det? 2.Repetition av HTML-element 3.CSS, hur, var, när? 4.CSS & arv?
- 5. CSS – Cascading Style Sheet Same, same, but different
- 6. Samma innehåll – fast olika utseende
- 13. Samma innehåll – fast olika utseende
- 14. Samma innehåll – fast olika utseende Produkter – olika utseende, samma innehåll
- 15. Samma innehåll – fast olika utseende Produkter – olika utseende, samma innehåll
- 17. Samma innehåll – fast olika utseende http://www.csszengarden.com
- 18. Cascading Style Sheets är ett språk som beskriver presentationsstilen för ett strukturerat dokument som till exempel typsnitt, textstorlek och färg.
- 19. CSS – Snabb historik • Hette ursprungligen Cascading HTML Style Sheets (CHSS) • Håkon Wium Lie • Döptes sedan om för att inte vara specifikt till HTML
- 20. Har tre nivåer • Nivå 1: Urspring rekommendation från 1996 • Nivå 2 (2.1): 2007, primär version med bra (dock inte fullständigt) webbläsarstöd • Nivå 3: Under aktiv utveckling. Kan användas, men har bara stöd i de nyaste webbläsarna.
- 21. Kort om CSS • CSS sköter formgivning av innehåll, medan HTML sköter struktur av innehåll. • CSS styr hur HTML-elementen ska visas • Typisk användning av CSS är för typografi, layout, bildhantering, animationer m.m. • CSS är ett eget språk, men går att använda tillsammans med HTML • Genom att koppla olika CSS-mallar till samma HTML-dokument kan informationen presenteras på olika sätt
- 22. Varför CSS? • Det gör webbplatser grafiskt tilltalande • Det är smidigt att bygga upp layouter • Det gör webbplatser lättare att underhålla • Anpassa webbplatsen efter målgruppen • Öka användbarhet • Öka attraktivitet • Optimera för användaren
- 24. Olika typer av element • Det finns två huvudtyper av element (finns fler, mer om det sen). • Block • Inline • Block-element visas generellt (utan styling från css) upp över hela skärmen horisontellt, som ett block • Inline-element visas generellt (utan styling från css) endast upp där dess innehåll finns.
- 25. Olika element • Block-element för layout: • Section, article, div m.m. • Block-element för innehåll • p, table, ul, h1 • Inline-element • i, span, strong, b, a, img
- 27. Demo!
- 29. CSS – Same same but different •Formgivning åt HTML-dokument •Typografi •Layout •Färger •Bildhantering m.m.
- 31. När man ska formge något, behöver man:
- 32. 1. Veta vad man ska formge p h1 a img ul em h2 strong form table td tbody input
- 33. 2. Veta hur man ska formge det textfärg bakgrundsfärg typsnitt rundade hörn skugga storlek avstånd textstorlek position
- 34. Hur skriver man CSS? h1{ color: blue; text-align: center; }
- 35. Hur fungerar det? • Man kan skriva CSS-kod på tre olika ställen: 1. i html-taggar m.h.a. attributet style=””: <h1 style=”color:blue;”>Rubrik</h1> • 2. i html-dokumentet inom <style>-taggen: <style type=”text/css”> h1{color:blue} </style> • 3. i ett externa CSS-dokument: h1 { color:blue }
- 36. Exempelkod •Göra alla paragrafer kursiva: •Gör alla rubriker av typen h2 understrukna och gröna:
- 37. Olika egenskaper för text i css
- 38. CSS - Boxmodellen • Element i HTML kan beskrivas som boxar, och kan tilldelas olika egenskaper som t.ex. • Höjd • Bredd • Ram • Marginaler mellan varandra • Var de ska ligga • Färg • Osv. • OBS. block-element
- 39. Boxmodellen Total bredd för en box är: Content (width) + Padding + Border. Margin är sedan marginalen från boxen
- 40. <h1> som en box •En vanlig <h1>-tagg: •En vanlig <h1>-tagg med CSS:
- 41. Boxar
- 42. Exempel
- 43. Om jag vill formge bara en paragraf?
- 44. Identifiera element genom id • I HTML kan man identifiera specifika element genom att ge dem ett unikt id • Ett id ges genom attributet ”id” samt namnet på id:t • T.ex. för att ange ett id för en paragraf kan man skriva: • Eller för att ge en rubrik ett id: • Eller för att ge en bild ett id:
- 45. • För att referera från CSS till ett element med ett specifikt id i HTML använder man tecknet # (brädgård) • T.ex. för att referera till paragrafen: Så skriver man i CSS: • Och för att ge texten i paragrafen med id:t ”start” blå färg skriver man i CSS: Att formge element genom att ange id i CSS
- 46. Om jag vill formge några paragrafer?
- 47. Identifiera element genom klasser • I HTML kan man identifiera element genom att ge dem en klass • En klass ges genom attributet ”class” samt namnet på klassen • T.ex. för att ange en klass för en paragraf kan man skriva: • Eller för att ge en rubrik en klass : • Eller för att ge en bild en klass :
- 48. Att formge element genom att ange klasser i CSS • För att referera från CSS till de element som har tilldelat sig en viss klass skriver man . (punkt) och klassnamnet • T.ex. för att referera till paragraferna: Så skriver man i CSS: • Och för att ge texten i paragraferna med klassen ”blue” blå färg skriver man i CSS:
- 49. CSS Repetition • För att referera till ett element skriver man: • element{egenskap:värde;} • För att referera till element med en klass skriver man: • .klassnamn{egenskap:värde;} • För att referera till ett element med ett id skriver man: • #id{egenskap:värde;}
- 50. CSS i ett externt dokument?
- 51. CSS i ett externt dokument • Ofta när man jobbat med CSS så separerar man på HTML och CSS-koden. De största fördelarna med detta är: 1. Om en webbplats består av mer än en HTML-sida så återanvänds CSS-koden på alla sidor där den är inkluderad. 2. Genom att separera HTML och CSS så får man en ”renare” och mer lättläst källkod.
- 52. Hur länkar man till ett externa CSS-dokument • Det sker i taggen <head> • Man skriver: <link href=”sökväg” rel="stylesheet" type="text/css"> • T.ex. <link href=”style.css" rel="stylesheet" type="text/css"> • OBS. Det externa dokument som innehåller all CSS-kod måste sluta på ”.css” alltså t.ex. ”style.css”.
- 53. Demo – CSS i externt dokument
- 55. Frågor? 55
- 56. Arv
- 57. Trädstruktur
- 58. Trädstruktur • Trädstruktur används i datalogi för att beskriva en struktur • Ofta hierarkisk • Är ett verktyg för abstraktion och därmed klassificering, arv, regler etc. • Kan implementeras som en datastruktur för lagring/sökning av information • Trädstruktur kan liknas med • Filstruktur med mappar och filer • Släktträd vid släktforskning • Biologin, klassificering av arter • Växter (flora), insekter osv.
- 59. Träd – Centrala begrepp
- 63. Centralt i webbteknik – DOM Modellen • Document Object Model • Är en presenation av HTML-dokumentets struktur som en modell, där de olika elementen är kopplade till varandra genom olika relationer. • DOM är standardiserat av W3C • Trädliknande modell av sidan som den ”finns inne i webbläsaren” • Stödjer koppling mellan statisk information t.ex. HTML och dynamiskt beteende som t.ex. JavaScript. • Exempel på användning är AJAX, vilket kort innebär att sidan modifieras (saker tas bort, läggs till, förändras) utan att man behöver ladda om sidan. • T.ex. Facebook, Gmail, m.m.
- 64. HTML - DOM
- 65. HTML – DOM
- 67. Arv i CSS •För att inte behöva skriva specifika egenskaper för alla element på hela webbsida så finns något som kallas för arv. •Detta innebär att, i ett nodträd, så ärver barnet sin förälders egenskaper (i CSS).
- 68. Arv - exempel
- 69. Arv - färgläggning body{ color: blue; }
- 72. Arv – flera färger body{ color:green; } p{ color:blue; }
- 73. Representation – att använda en kod (tal) för att presentera något • Nödvänligt att använda då datorn bara förstår 1 och 0. • Det betyder att allt i datorn (färger, figurer, knapptryckningar, beräkningar, musrörelser, bokstäver, siffror, typsnitt, bilder) representeras binärt. • T.ex. bokstaven A = 65 (dec) = 01000001 (bin) = 41 (hex) • I webbteknik kommer vi i kontakt med flera sådana bestämda regelsystem & standarder för hur saker och ting är representerade • CharacterEncoding(charset), hur tecken ska beskrivas, exempel ISO 8859, UTF 8, Unicode, …(äldre standard: ASCII) • Färgmodell, hur färger ska beskrivas, exempel RGB, CMY, CMYK
- 74. Färger i HTML/CSS •Man kan använda namn ”red/green/blue” osv. Fast detta begränsar färgvalet något enormt! •Istället använder man s.k. hexadecimal t.ex. #08ht5s för att ange en viss färg.
- 78. CSS Repetition • För att referera till ett element skriver man: • element{egenskap:värde;} • För att referera till element med en klass skriver man: • .klassnamn{egenskap:värde;} • För att referera till ett element med ett id skriver man: • #id{egenskap:värde;}