F07 Stilmallar Dagens agenda

Relevanta dokument
12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">

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

Lektion 2 - CSS. CSS - Fortsätt så här

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

ORDLISTA WEBBDESIGN 100P

CSS- Cascading Stylesheets

Lektion 2 Del 1 Kapitel 6

/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }

Cascading Style Sheets (CSS) An Introduction. Nayeb Maleki

Föreläsning 4. CSS Stilmallar för webben

Lektion 3 HTML, CSS och JavaScript

Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er

TDDD52 CSS. Färger. Färger 1/3/13

CSS-övningar. 1. Grunder

CSS-WORKSHOP. Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek

Styla med CSS3. Översikt. Lektion 1: Styla text med CSS3

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.

En stiligare portal Laboration 3

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

CSS. TNMK30 - Elektronisk publicering

CSS. Cascading Style Sheets

Laboration 2: Xhtml och CSS.

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

En grundkurs i hemsidor och hur de är uppbyggda

Internet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

Labora&on 4 CSS och validering övningar/uppgi9er

Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er

EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript

Övning (X)HTML 2. Sidan 1 av

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

Internet A. HTML Grunder Maximilien Chiang 1

Inför prov 1 i webbdesign

F10 Mer CSS Dagens agenda

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

F03 Stilmallar. Föreläsning 3, HT2014 Stilmallar. Kurser: Webbteknisk introduktion 1IK415. Johan Leitet

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:

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

Webbteknik för ingenjörer

Att styla webbsidor. Nivå. Uppgiften

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er

Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20

Web (html+xhtml), CSS. Dagens föreläsning. Web - grundprinciper. Syfte Ge er grunderna för att skapa och publicera websidor.

En introduktion till stilmallar (CSS) Cascading Style Sheets (CSS)? 2002 Ulf Tornert 1

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Innan man börjar bygga ett skin i LUVIT bör man göra vissa förberedelser. Dessa är beskrivna nedan.

Tentamen ITK:P2. Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng.

Laboration 2. Webbproduktion En stiligare webbsida HT2015

Copyright Mahmud Al Hakim, Copyright Mahmud Al Hakim, 2014 NÅGRA EXEMPEL

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:

Gilla r d u d en h ä r g u id en? Vill d u a tt vi ska f o rtsä tta g ö ra f ler g u id er? - lä s mer h ä r»

Webbstandarder för fler än en plattform

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI

Webbutveckling Laboration 1: HTML5 och CSS3.

Övningar i CSS för anpassning till olika enheter

Övnings hemtentamen med förslag till lösning, webbprogrammering

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

Frågor och svar Gränssnittsdesign/Webbutveckling

Kravspecifika.on, pappersprototyp & CSS

E07 "Greased Lightning"

Labbrapport: HTML och CSS

TNMK30. Elektronisk publicering

Övningar i layout med CSS

Skapa en webbplats med WordPress

Programmeringteknik. Planering MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Nätet. Uppgiften. Nivå

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?

Införande av CSS i existerande tabellbaserat HTML-dokument

Introducerande övningar i HTML

Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.

Vad är XLink. XLink/XPointer/XSLT-FO. Namespace. Simple Links

Grafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida.

Grundläggande instruktioner för att publicera webbsidor på webbservern.se

Webbdesign vt Innehållsförteckning

Utveckla den moderna släktboken vidare

Introducerande övningar i CSS

Webbdesign vt Innehållsförteckning

F13 HTML5 Dagens agenda

EDAF90 - Webprogrammering HTML och CSS

On-line produktion TDDC61

Spelprogrammering med JavaScript och HTML5

Styla och formatera text

En bortsprungen katt

HEJO MAIL - HTML och CSS för

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT Mitthögskolan ITM Telefon

Att berätta med webb + En introduktion till HTML

Utveckling av Jönköpings Sportdansklubbs webbplats

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener <scenes>... 3 Typsnitt <fonts>... 3 Övergångar <transitions>...

Lathund för HTML-kodning

CSS Cascading Style Sheets

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm

Labora&on 8 Formulär övningar/uppgi6er

Produktion för tryckta medier och webb

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den

Copy Cat Laboration 4

E07 "Greased Lightning"

Transkript:

F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet

Stilmallar

Stilmallar på vår sida Webbläsarens inbyggda stilmall Användarspecifika ändringar Våra, utvecklarens, stilmallar: o Lokala stilar (inline styles) o Interna stilmallar (internal styles) o Externa stilmallar (external styles) Dessa kan vi påverka

Lokala stilar Fördelar: Enkelt och smidigt Nackdelar: Mycket svårt att underhålla Blandar upp innehåll och presentation Alla stilmallar finns inte på samma ställe Återupprepning av kod <p style="color:#6c9; text-align:center"> Centrerad, blåaktig text </p> Undvik för allt annat än testsyfte, och vissa specialfall Centrerad, blåaktig text

Interna stilmallar <head> <style type="text/css"> p { color: red; </style> </head> "text/css" default. Behöver inte anges Använd enbart för sidspecifika avvikelser, om än då

Externa stilmallar Fördelar: Lätt att ändra stilmall för flera sidor samtidigt Du får ett enhetligt utseende på sajten <head> <title>sida med stilmallar</title> <link rel="stylesheet" type="text/css" href="basic.css" /> </head> Använd denna metod uteslutande Man kan även använda direktivet @import inom <style>. Mer om detta senare.

Syntax selektor { egenskap: värde; selektor { egenskap: värde; egenskap: värde; egenskap: värde; Exempel: h1 { color: #CDF; background-color: #9FF; Testrubrik Skrivs antingen mellan <style></style> eller i en inlänkad css-fil

Selektorer selektor { egenskap: värde; selektor { egenskap: värde; egenskap: värde; egenskap: värde;

Taggselektor h1 { egenskap: värde; h1 em { egenskap: värde; p em strong { egenskap: värde; <p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong> </p>

Klasselektor..avatar { egenskap: värde; <p class="avatar"></p> <p class="avatar"></p> <div class="avatar"></div> <p class="avatar"></p> p.avatar { egenskap: värde; <p class="avatar"></p> <p class="avatar"></p> <div class="avatar"></div> <p class="avatar"></p>

ID-selektor # <div id="content"> #content { egenskap: värde; </div> <div id="footer"></div> På en och samma sida får det aldrig förekomma att två id-attribut har samma värde!

Egenskapsarv (property inheritance) Vissa egenskaper, satta på en förälder ärvs ned till dess barnnoder. p { color: red; <p> Detta är ett <em><strong>exempel</strong></em> på <em>egenskapsarv</em>. </p> Detta är ett exempel på egenskapsarv. Alla egenskaper ärvs dock inte ned.

Pseudoklasser orörd a:link { egenskap: värde; a:visited { egenskap: värde; a:focus { egenskap: värde; a:hover { egenskap: värde; a:active { egenskap: värde; div p:first-child { egenskap: värde; Alla p-taggar som är förstabarn och har en förfader i form av div Först från och med IE7 stöds :hover på andra element än a. Även :first-child stöds i och med IE7 <div> <p>jag är första barn.</p> <ul> <li><p>jag också!</p></li> </ul> <p>inte jag :(</p> </div> <p>inte jag heller :(</p>

Pseudoelement p:first-letter { font-size: 2em; <p>första bokstaven är större</p> Första bokstaven är större p:first-line { font-weight: bold; <p>första textraden som webbläsaren rendrerar blir fetmarkerad</p> Första textraden som webbläsaren rendrerar blir fetmarkerad I CSS2 finns även :before och :after som kan användas för att dynamiskt lägga in innehåll före eller efter ett element. Första textraden som webbläsaren rendrerar blir fetmarkerad

Kombinatorer Ättling (A B) p em strong { egenskap: värde; "Direkt syskon-väljare" (A+B) li + li { color: red; <ul> <li>ett</li> <li>två</li> <li>tre</li> </ul> <p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong> </p> Ett Två Tre Barn (A>B) p > strong { egenskap: värde; <p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong> </p> CSS3: A~B Välj B om A föregår B och A och B delar samma förälder

Gruppering av selektorer Önskas liknande egenskaper på flera element så grupperar man dessa: h1,h2,h3 { font-family: verdana, san-serif; color: #6CF; h2 { text-decoration: underline; Rubriknivå 1 Rubriknivå 2 Rubriknivå 3 p.red strong.hidden, #content p:first-line { font-family: verdana, san-serif; color: #6CF;

Läsbar CSS Personliga stilar för att skriva CSS: #content p { font-size: 1.1em; color: #4D83A4; margin-left: 10px; #content { float: left; font-size: 1.6em; #content p { color: #4D83A4; font-size: 1.1em; #content p:first-letter { font-size: 1.7em; #content { font-size : 1.6em; float : left; margin-right: left;

Kommentarer /* Layout Using: Two columns floating layout Total width: 250px */ #content { margin-right: 250px; width: 600px; float: left; /* Main Menu */ ol li { float: left;

Specificity Olika selektorer har olika "vikt". Ju högre vikt, desto högre prioritet. p#firstptagg { color: yellow; p.content { color: green; p { color: red; p { color: blue; 101 11 1 1+senast angiven id-elektorer (vikt 100) har högst prioritet följt av klasselektorer (vikt 10) och lägst prioritet har övriga selektorer (vikt 1) http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Ordningen spelar roll <head> <link rel="stylesheet" href="basic.css" /> <style> h3 { text-align: right; font-size: 20px; p { color: blue; </style> </head> <body> <h3 style="font-size: 10px">Rubrik</h3> <p class="intro">lite text</p> </body> h3 { color: red; text-align: left; font-size: 8px; basic.css Rubrik Lite text... Lite text... Effektiv stilmall: Rubrik h3 { color: red; text-align: right; font-size: 10px; 10px p.intro { color: silver; p.intro { color: silver; Vad händer om man byter plats på <style> och <link>?

Reset CSS * {margin:0; padding:0 Att använda * är inget man rekommenderar då det tar hårt på webbläsaren att gå igenom samtliga element på webbsidan och nollställa dess marginaler och padding. Bättre är då att specificera exakt vilka element som ska nollställas. Enklast är att använda något av alla de nollställningsstilmallar som finns att hitta på nätet.