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

Relevanta dokument
CSS. TNMK30 - Elektronisk publicering

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

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Objektorienterad Programkonstruktion. Föreläsning 8 30 nov 2015

GRAFISK MANUAL TL BYGG VERSION

Chefer och Ledare grafisk manual

Systematiskt kvalitetsarbete

On-line produktion TDDC61

våra grafiska riktlinjer

GRAFISK Profil. inl4_lisen_a_grafisk_profil_me106a.indd :29

Beställ data och statistik

guide till centerpartiets nya profilering

ScandiRec. Läs mer: Nya Volvo V90 Cross Country SID 23. ScandiRec.se - Skandinavisk Rekrytering Sverige

Luleå gymnasieskola. Rapportens namn. [Dokumentets underrubrik] Författare [Datum]

Nya samlade läroplaner

Planera smidiga utskick. Guide för planering av maskinsorterbara försändelser

Kommunikativ plattform

Organisation: SLB-analys vid Miljöförvaltningen i Stockholm KontaktpersonMalin Täppefur E-post: Telefonnr:

Arbetsintegrerande Kooperativ

Remissutgåva. Program för informationssäkerhet

GRAFISK MANUAL

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

Schildts & Söderströms LOGOTYP

FÖRSÄKRINGSBOLAGSDAGEN 2016

Att berätta med webb + En introduktion till HTML

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

Mebook 360 Special DEMO. Rapport. Vår egen 360. John Doe

Grafisk manual version

Kursplanerna i svenska och svenska som andraspråk Göteborg 18 oktober 2011

WINDOWSPROGRAMMERING LEKTION 2

Topblock. En del av VERKSAMHET AKTUELLT LÄNKAR DOKUMENT KALENDARIUM BÅTKLUBBAR KONTAKT. Lorem ipsum dolores datum Mälarens Båtförbund OKT 25

GRAFISKA RIKTLINJER FÖR ÅRSMÖTEN AUGUSTI 2015

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

Sweden AB. Stilmall & presentation av grafisk profil

DESIGN HANDBOKEN , Version 2

AGENDA WINDOWS PRESENTATION FOUNDATION LEKTION 2. Mer om Kontroller. Mer om Paneler Grid Stack Panel Wrap Panel Dock Panel

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

LOGOTYP. Färgen i logotypen är: CMYK: 100, 80, 20, 20 RGB: 20, 55, 110 PANTONE: 294 C. Vi kallar förgen MC Blå. PRIMÄR LOGOTYP SEKUNDÄR LOGOTYP

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

LGR 11 bygger på samma kunskapssyn och värdegrund som Lpo 94

LGR 11 bygger påsamma kunskapssyn och värdegrund som Lpo94

ORDLISTA WEBBDESIGN 100P

F07 Stilmallar Dagens agenda

DESIGN. Juni 2016, Version 3

ÅBO AKADEMI GRAFISK GUIDE

SÄTERGLÄNTAN / VISUELL IDENTITET.

Näringslivsprogram 2020 bästa näringslivsklimatet

Kursplanen i modersmål Göteborg 14 november 2011

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

Grafisk manual Märke, typografi, färger Stockholm konst. stockholmkonst.se/grafisk-profil

Objektorienterad Programkonstruktion

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

INNEHÅLL 1. LOGOTYP 2.TYPSNITT 3. FÄRGER 1.1 KONCEPT 1.2 STORLEKAR 1.3 FÄRGSÄTTNING 1.4 FRIZON & PLACERING 1.5 EXEMPEL 1.

Vice Vd Marie Hansson FÖRDJUPNING - KUNDAVTAL SAMARBETE MED FÖRSÄKRINGSBOLAG

Seminarium Riktade hälsosamtal/ hälsoundersökningar. Digitaliseringsprocess

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

Laboration 2: Xhtml och CSS.

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

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)

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

Onsdag 12 september 2018

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

CSS- Cascading Stylesheets

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

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

Grafisk profil RIKTLINJER OCH STÖD I VÅRT KOMMUNIKATIONSARBETE. osthammar.se

Webbutveckling Laboration 1: HTML5 och CSS3.

GRAFISK MANUAL 6/2012

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

Uppdaterad i november Grafisk manual

Lektion 2 Del 1 Kapitel 6

F10 Mer CSS Dagens agenda

CSS-övningar. 1. Grunder

Labora&on 4 CSS och validering övningar/uppgi9er

F13 HTML5 Dagens agenda

Landstinget Kronobergs grafiska profil

Grafiska regler för jubileumssymbolen

Nya reformer. Nya kursplaner årskurs januari Den nya skollagen. En förändrad läroplan för förskolan

TDP013. Webbprogrammering och interaktivitet. Introduktion, HTML5, CSS & Selenium. Anders Fröberg Institutionen för Datavetenskap (IDA)

TDP013. Kursens nyckelpersoner. Kursens design. Kursens litteratur Kursens kunskapsfilosofi. Examinator: Anders Fröberg. Kursansvarig: Anders Fröberg

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

Grafisk manual Oxelösunds kommunkoncern. Dec 2015

Lektion 3 HTML, CSS och JavaScript

Som man sår får man skörda...

Anvisningar för skyltning vid Motala kommuns verksamheter. Motala kommun Version

Att styla webbsidor. Nivå. Uppgiften

Webbteknik för ingenjörer

Cascading Style Sheets (CSS) An Introduction. Nayeb Maleki

TÄVLINGSKRITERIER INFÖR

Inför prov 1 i webbdesign

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:

Du har i uppgift att agera rådgivare åt det tillförordnade statsöverhuvudet i Grubien, Franklin Jefferson. Läs Jeffersons brev och "

F02 En första sida. Dagens agenda

Unga Aktiesparares varumärke

Valutec Grafisk manual. Grafisk manual

OUR ENERGY YOUR SUCCESS. Grafisk profil Graphic guidelines

TNMK30. Elektronisk publicering

On-line produktion TDDC61

Transkript:

CSS Presentation

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

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 http://www.w3schools.com/css/demo_default.htm

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

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 */

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!

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: http://jsfiddle.net/tnmk30/6ymxznom/

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

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)

CSS FONT & TEXT CSS font font-family! font-size! font-style!! font-variant! font-weight! font! @font-face! CSS text text-align! text-decoration! text-indent! text-transform! line-height! word-spacing! letter-spacing! Exempel: http://jsfiddle.net/tnmk30/6ymxznom/

ID & ID SELECTOR Unik ID för ett html element Kan bara användas en gång på en websida Exempel: http://jsfiddle.net/tnmk30/zaoz6frs/

CLASS & CLASS SELECTOR Exempel: http://jsfiddle.net/tnmk30/3x8l4r4z/

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: http://jsfiddle.net/tnmk30/26npfvh1/

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: http://jsfiddle.net/tnmk30/nv8yb4n8/ Lista över alla typer av selectors: http://www.w3schools.com/cssref/css_selectors.asp

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!

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: http://jsfiddle.net/tnmk30/25v6pfhb/

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

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

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.

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: http://jsfiddle.net/tnmk30/u0b288x9/

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: http://jsfiddle.net/tnmk30/x568hlzu/

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

VALIDERING Validera alltid din kod http://jigsaw.w3.org/css-validator/ Testa i olika webbläsare

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

INFÖR LABBEN Skriv upp er på labblistorna om ni inte redan har gjort det Gå igenom W3schools tutorial för HTML och CSS http://www.w3schools.com/html/default.asp http://www.w3schools.com/css/ Gå igenom föreläsningsexemplen Ladda hem från hemsidan, http://www.itn.liu.se/~katvr62/tnmk30/2014/ Följ jsfiddle länkarna från föreläsningsbilderna

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

LÄNKAR TILL MATERIAL/LÄSNING CSS tutorial: http://www.w3schools.com/css/ CSS, wikipedia: http://en.wikipedia.org/wiki/ Cascading_Style_Sheets CSS Selectors: http://www.w3schools.com/cssref/css_selectors.asp CSS positioning i 10 steg: http://www.barelyfitz.com/screencast/htmltraining/css/positioning/

Imorgon blir sidan interaktiv! TP2 kl. 08:15