21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

Storlek: px

Starta visningen från sidan:

Download "21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html"

Rasmus Sandström
för 7 år sedan
Visningar:

1 Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1

2 Samma kod olika utseende Olika exempel om layout: Stilmallar CSS Presenterar form (utseende) Textformatering Sidformatering/Positionering Globala stilmallar/extern stilmall (Inbäddade stilmallar & Inline stilmallar) Sama kod olika utseende: 2

3 Utseende & Sidlayout Skilj på innehåll och utseende på en websida Innehållet på en websida: i HTML-dokumentet Websidans utseende och form: i stilmallar, så kallade CSS-dokument webbläseren (default-stilmall) Hur websidans utseende bestäms Extern stilmall Inbäddad stilmall Inline stilmall HTML attribute 3

4 Fonter Syntax för font: font: font-style font-variant font-weight font-size/lineheight font-family caption icon menu messagebox small-caption status-bar initial inherit; Fonters storlekar i pixlar: px, em, % Web säkra fonter: Webbade typsnitt: Använda egen font: Färger & färgval RGB färger på webben (färgblandning av Röd, Grön, Gul) Ange färger i stilmallar: Hexadecimal form ( till FF FF FF) = svart FF FF FF = vitt 22 FF 55 kan skrivas som 2F5 I stilmallen skrivs färgen med # framför det hexadecimala talet: #2F5 Eller med färgnamn: black white Färgvärden: 4

Stilmall h1{ color:#06f; font-family:georgia, "Times New Roman",serif; font-size:36px; p{ color:#666; font-family:verdana, Geneva, sans-serif; font-size:13px; a{ color:#06f; font-family:tahoma,

5 Stilmall h1{ color:#06f; font-family:georgia, "Times New Roman",serif; font-size:36px; p{ color:#666; font-family:verdana, Geneva, sans-serif; font-size:13px; a{ color:#06f; font-family:tahoma, Geneva, sans-serif; Stilmall Selektor: namnet på den tagg eller område på sajten som du bestämmer dig för att sätta upp en regler/deklaration för: p { color: red; Det som defineras i body ärvs ner till html-tagg: body { font-family: Geneva; 5

6 Stilmallen måste kopplas till html sidan. (Inline stilmall skrivs direkt i html-taggen) (Inbäddad stilmall skriv stilmallen direkt i html sidan. ) Global stilmall (Extern stilmall) stilmallen är ett eget dokument (.css) som kopplas ihop med html sidan (.html) Inbäddad stilmall Skrivs i html sidans head och gäller bara för den sidan: <!DOCTYPE html> <html lang="sv"> <head> <title>medieproducent utbildningen</title> <meta charset="utf-8"> <style> h1{ color:#06f; font-family:georgia, "Times New Roman",serif; font-size:36px; </style> </head> <body>... 6

7 Global stilmall Kopplingen mellan html sidan och global stilmall görs med en länk i html sidans head: <!DOCTYPE html> <html lang="sv"> <head> <title>medieproducent utbildningen</title> <meta charset="utf-8"> <link rel="stylesheet" href="stilmall.css type="text/css > </head> <body> <h1>medieproducent</h1> <img src="medieproducentbild.jpg" alt="två medieproducenter" width="500" height="350"/> <p>under två år läser du kurser med en produktionsteknisk inriktning.</p> <p>en utbildning i Umeå</p> <a href=" universitet</a> </body> </html> En global stilmall kan användas av flera html sidor sida1.html stilmall.css sida2.html sida3.html 7

8 Stilmall för skärm & utskrift I stilmallen definierar man vilket media man vill screen { p { font-family: verdana,sans-serif; font-size: 14px; color: print { p { font-family: garamond, times new roman, serif; font-size: 12px; color: black; Stilmall för skärm & utskrift I stilmall för skärm I stilmall för utskrift typsnitt San seriff (ex, Verdana) Seriff (ex. Times) typsnittsstorlek Pixlar, px Punkter, pt, ex.vis 10pt bilder Ta bort bakgrundsbild länkar Ta bort meny Ta bort display: none; 8

9 Klasser i stilmallar Använda stilmall för att förändra delar om utseendet av en text. I stilmall:.center{ text-align:center; I html sida: <h1 class="center"> Matsidan</h1> I detta fall gäller bara för just denna h1, inte för alla h1 på sidan. id i stilmallar I stilmall: #centrerad{ text-align:center; I html sida: <h1 id="centrerad"> Medieproducent</h1> I detta fall gäller bara för just denna h1, och kan INTE användas någon annan stans på sidan.. 9

10 Använda <span> i html Använda stilmall för att förändra delar om utseendet. Ändra bara ex.vis några ord i en text. I stilmall:.red{ color:#900; font-weight:bold; I html sida: <h2>en matsida för <span class="red">oss</span> som bor i Norrland.</h2> Nestling Inkapsling - nestling header h1{ font-size: 250%; Direkt nestling div > p { background-color: yellow; 10

11 Pseudoklasser Används för att beskriva ett stadium av ett element Länkar det valigaste: /* unvisited link */ a:link { color: #FF0000; /* visited link */ a:visited { color: #00FF00; /* mouse over link */ a:hover { color: #FF00FF; /* selected link */ a:active { color: #0000FF; Måste komma i rätt ordning för att funka. CSS metoder (sammanfattning) 1. Selektorer 2. Id-attribut 3. Class-attribut 4. Inkapsling 5. Direkt nestling 6. Pseudoklasser 11

12 Box modellen Detta gäller alla html-element: <h1> <a> <p> <img> <div> osv. Box modellens olika delar definieras och beskrivs i stilmallen. Box modellen height width width:250px; padding:10px; border:5px solid gray; margin:10px; Bredden blir: width+(padding*2)+(border*2)+(margin*2) = 250+(10*2)+(5*2)+(10*2) = = 300px 12

13 Positionering Flytande objekt float:left flyter vänster (om det finns plats) float:rigth flyter höger (om det finns plats) clear:both bryter flytandet Absolut och relativ o Kopplar bort från naturliga flödet relativ relativt var den skulle ha varit om den följd html flödet absolute relativt dokumentet Positionering static defaultläget, ordningen som det är i html-dokumentet. relativ relativt var den skulle ha varit om den följd html flödet absolute relativt dokumentet fixed relativt webbläsaren, dvs kommer inte flytta på sig om sidan scrollas. Z-index - lägga saker på och under (tänk lager) Testa på: 13

14 float Block element i html kan man få att flyta till höger eller vänster om andra blockelement. Viktigt att ha bredd på elementen för att de ska flyta bra. Ex på blockelement: <div>,<p>,<img>,<header>,<footer>,<nav> osv float:left flyter vänster (om det finns plats) float:rigth flyter höger (om det finns plats) clear:both bryter flytandet Filnamn Hemsidans första html-sida: index.html eller default.html det räcker att skriva Stilmallar: stilmall.css Filer på Linux-server: o o o Inga å, ä, ö i filnamn Bara små bokstäver i filnamn Inga mellanrum i filnamn 14

FileZilla FTP klient Används för att ladda upp webplatsen på server. Ip-adress:130.239.115.172 Användare och Lösenord får var och en. https://filezilla-project.

15 FileZilla FTP klient Används för att ladda upp webplatsen på server. Ip-adress: Användare och Lösenord får var och en. Skapa en mapp på servern, lägg din hemsida i den mappen. Ex. User1 lägger sin webbplts i en mapp på webbservern som heter karinswebbplats. Länken till min webbplats: /user1/ karinswebbplats /index.html Lokala datorn Server 15

Relevanta dokument

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html Stilmallar - styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html iecept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Utseende