<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim

Storlek: px

Starta visningen från sidan:

Download "<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim"

Britta Ingrid Månsson
för 5 år sedan
Visningar:

1 <Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim

2 Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet style Färger: RGB och HEX Textjustering Textformatering Google Fonts CSS Selektorer Klasser och ID-regler Formatera länkar Google Icons Font Awesome

3 Frontend-teknologier HTML Struktur CSS Utseende JavaScript Beteende

4 Vad är CSS? CSS står för Cascading Style Sheets CSS är ett språk som används för att få bättre kontroll över utseendet på webbsidor. CSS används tillsammans med HTML för att definiera hur innehållet ska presenteras!

5 CSS Nivåer (Levels) CSS level 1: 1996 CSS level 2.1: 2011 CSS level 3 Media Queries: 2012 CSS level 3 Selectors: 2018 Tips:

6 Varför CSS? CSS CSS är en samling regler som styr utseendet på en eller flera webbsidor. Med CSS får vi bättre kontroll över sidlayout, teckensnitt, färger och mycket mer! Man får renare HTML-dokument som är lättare att felsöka och är mer tillgängliga/sökmotorvänliga! HTML HTML HTML

7 Två olika lager HTML Struktur T.ex. Rubriker, listor, tabeller m.m. CSS Utseende T.ex. textformatering, färger kantlinjer, marginaler m.m. Kom ihåg! I HTML koncentrerar du dig på att strukturera innehållet (semantik). I CSS arbetar du med att presentera innehållet (utseendet).

8 SoC = Separation of concerns På svenska ungefär att hålla isär saker och ting. Rekommendationen när det gäller webbutveckling är att hålla isär HTML och CSS.

9 Några exempel CSS Zen Garden är en välkänd webbplats vars syfte är att visa upp vad man kan åstadkomma med CSS. Webbplatsen skapades av Dave Shea 2001 och målet är att inspirera och uppmuntra användandet av webbstandarder med vackra exempel.

10 HTML Struktur CSS baserad design CSS Utseende

11 CSS-Regler Syntax

12 Skapa en CSS-Regel Selektor h1 { color: red; Värde Egenskap

13 Koppla HTML och CSS Metod 1: Extern CSS (separat CSS-fil) Skriv CSS-reglerna i en separat CSS-fil (t.ex. style.css) Länka till CSS-filen med hjälp av en taggen <link> index.html <head> <title>extern CSS</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1>rubrik</h1> </body style.css h1{ color: red;

14 Koppla HTML och CSS Metod 2: Intern CSS (i head) Skriv CSS-reglerna i dokumenthuvudet i taggen <style> <head> </head> <body> <title>css</title> <style> h1{ </style> color: red; <h1>rubrik</h1> </body>

15 Koppla HTML och CSS Metod 3: Inline CSS (inne i HTML-taggar) Inline CSS innebär att man skriver CSS-egenskaper inne i en HTML-tagg med hjälp av attributet style. <p style="color:blue;"> Blå text och lite annat smått och gott. </p> OBS! Grundtanken är att separera innehåll från utseende därför bör man använda denna teknik i undantagsfall!

16 CSS Colors Bildkälla:

17 CSS Färger Exempel /* color name */ h1 { color: DarkCyan; /* rgb value */ p { color: rgb(100, 100, 90); /* hex code */ h2 { color: #ee3e80;

18 Bakgrundsfärger h1 { background-color: darkcyan; color: white;

19 Tips:

20 Textjustering h1 { h2 { p { text-align: center; text-align: right; text-align: justify;

21 Arbeta med teckensnitt Källa:

22 Teckensnitt Exempel body { font-family: Arial, sans-serif; h1 { font-family: Palatino, serif; Tips

23 Teckenstorlek Bildkälla:

24 Teckenstorlek Exempel body { h1 { h2 { font-size: 16px; font-size: 200%; font-size: 1.5em;

25 Övning Skapa ett HTML-dokument som innehåller en huvudrubrik (h1), en underrubrik (h2) och 3 stycken (p). Formatera dokumentet enligt nedan: H1: Georgia, 3em, # H2: Times, 2em, #808e9b P: Tahoma, 1.1em, #1e272e

26 Text-transform h1 { text-transform: uppercase; h2 { text-transform: capitalize; h3 { text-transform: lowercase;

27 Radavstånd p{ line-height: 2em;

28 Fet och kursiv <p style="font-weight: bold"> </p> Lorem ipsum dolor sit amet. <p style="font-style: italic"> </p> Lorem ipsum dolor sit amet.

29 Google Fonts Google Fonts är en gratis tjänst som erbjuder ickestandardtypsnitt som du enkelt kan använda på webbsidor.

30 Källa CSS-Selektorer

31 Tips:CSS Selector Reference

32 CSS klasser Du kan dela in dina regler i olika klasser. Med klasser specificerar man en regel som kan återanvändas. En klass kan användas i valfritt HTML-element.

33 Arbeta med CSS-klasser Observera punkten <head> <style>.text-center { text-align: center; </style> </head> <body> <h1 class="text-center">rubrik</h1> <p class="text-center"> OBS! Klassnamn får inte påbörjas med en siffra</p> </body>

Namngivning av CSS-klasser Ge dina klasser tydliga namn. Klasser ska beskriva vart den används och vad den gör. Understreck rekommenderas inte i CSS.

34 Namngivning av CSS-klasser Ge dina klasser tydliga namn. Klasser ska beskriva vart den används och vad den gör. Understreck rekommenderas inte i CSS. Följande namn är inte bra: text_center eller page_title Använd bindestreck (hyphen) mellan dina ord t.ex..text-center.text-right.page-title Att skriva på detta sätt kallas kebab-case J

35 ID-regler Med en ID-regel specificerar man en regel som kopplas till ett enda HTML-element. #header{ color: blueviolet; font-size: 2.5em; text-align: center; <h1 id="header">this is the header</h1>

36 Formatera länkar med Pseudo-klasser a:link { /* unvisited link */ color: red; a:visited { /* visited link */ color: green; a:hover { /* mouse over link */ color: hotpink; a:active { /* selected link */ color: blue;

37 Text-decoration a { text-decoration: none; a:hover { text-decoration: underline;

38 Google Icons (Material Icons) 1. Lägg till följande kod i head. <link rel="stylesheet" href=" 2. Gå till 3. Sök efter en önskad ikon. 4. Klistra in koden i ditt dokument t.ex. <i class="material-icons"> </i> Bra att läsa

39 Font Awesome 1. Gå till Kopiera länken (link-taggen) och klistra in i ditt dokument. 2. Gå till 3. Leta efter en önskad ikon. 4. Klistra in koden i ditt dokument t.ex. <i class="fab fa-facebook-f"></i> Bra att läsa

40 Övning 1 Skapa ett nytt HTML-dokument. Lägg till en huvudrubrik (h1) och ett stycke (p). Använd lorem Ipsum som exempeltext. Ändra sidans bakgrundsfärg (valfri färg). Formatera rubriken med en valfri Google Font och valfri teckenfärg. Centrera rubriken. Formatera stycket med en annan Google Font och valfri teckenfärg.

41 Övning 2 Skapa ett nytt HTML-dokument. Skapa en lista på dina favoritlänkar. Formatera länkarna. Ta bort understrykning och ändra färg vid överrullning.

42 Övning 3 Skapa ett nytt HTML-dokument. Lägg till 3 stycken (p-taggar) och lite lorem ipsum. Skapa en CSS-regel som formaterar alla p enligt följande: Verdana, 0.8em, #34495e. Skapa en CSS-klass som heter ingress. Lägg till följande formateringar: Tahoma, 1.1em, fet, #8e44ad. Koppla klassen ingress till det första stycket i dokumentet!

Relevanta dokument

ORDLISTA WEBBDESIGN 100P

ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.