CSS. Cascading Style Sheets
|
|
|
- Elisabeth Maja Ström
- för 8 år sedan
- Visningar:
Transkript
1 CSS Cascading Style Sheets
2
3 <div class="thumbnail"> <img src="bild1 100.jpg" alt="bild 1" /> <p>första bilden</p> <div class="thumbnail"> <img src="bild2 100.jpg" alt="bild 2" /> <p>andra bilden</p> <div class="thumbnail"> <img src="bild3 100.jpg" alt="bild 3" /> <p>tredje bilden</p> <div class="thumbnail"> <img src="bild4 100.jpg" alt="bild 4" /> <p>fjärdebilden</p> <div class="thumbnail"> <img src="bild5 100.jpg" alt="bild 5" /> <p>femte "utf 8"; div.thumbnail { width: 130px; float:left; margin: 0 10px 10px 0; background: url(bild_bak.jpg) norepeat; }
4
5 <div class="thumbnail"> <img src="bild1 100.jpg" alt="bild 1" /> <p>första bilden</p> <div class="thumbnail"> <img src="bild2 100.jpg" alt="bild 2" /> <p>andra bilden</p> <div class="thumbnail clear"> <img src="bild3 100.jpg" alt="bild 3" /> <p>tredje bilden</p> <div class="thumbnail"> <img src="bild4 100.jpg" alt="bild 4" /> <p>fjärdebilden</p> <div class="thumbnail clear"> <img src="bild5 100.jpg" alt="bild 5" /> <p>femte bilden</p> div.thumbnail {width: 130px; float:left; margin: 0 10px 10px 0; background: url(bild_bak.jpg) no repeat;} div.thumbnail img {margin:10px px; border:1px solid #777;} div.thumbnail p { margin: 0; padding:0 20px 20px 10px; background: url(bild_bak.jpg) no repeat 0 100%; }.clear { clear:left;}
6
7 div.thumbnail {float:left; width: 250px; margin: 0 10px 10px 0; padding bottom:10px; border:1px solid #777;} div.thumbnail img {float: left; border:1px solid #777; margin:10px 10px 0 10px;} div.thumbnail p { margin: 0; padding:10px; } <div class="thumbnail"> <img src="bild1 100.jpg" alt="bild 1" /> <p>första bilden</p> <div class="thumbnail"> <img src="bild2 100.jpg" alt="bild 2" /> <p>andra bilden</p> <div class="thumbnail"> <img src="bild3 100.jpg" alt="bild 3" /> <p>tredje bilden</p> <div class="thumbnail"> <img src="bild4 100.jpg" alt="bild 4" /> <p>fjärdebilden</p> <div class="thumbnail"> <img src="bild5 100.jpg" alt="bild 5" /> <p>femte bilden</p>
8
9 Tvåspaltig sidlayout inte ännu
10 <body> <div id="nav"> <ul> <li><a href="#">länk 1 </a></li> <li><a href="#">länk 2 </a></li> <li><a href="#">länk 3 </a></li> </ul> <div id="content"> <h1>tvåspaltig design</h1> <p>lorem ipsum dolor sit amet, </p> </body>
11 body{ margin: 0px; padding: 0px; } div#nav{ position:absolute; width: 150px; border top width: 0px; border right width: 2px; border bottom width: 0px; border left width: 0px; border top style: solid; border right style: solid; border bottom style: solid; border left style: solid; border right color: #CC0000; } div#content{margin left:150px;}
12
13 body{ margin: 0px; padding: 0px; font family: Verdana, Arial, Helvetica, sans serif; font size: 1em;} div#nav{ position:absolute; width: 150px; left: 0px; top: 0px; margin top: 22px; margin left: 15px; padding top:.5em; border top width: 2px; border bottom width: 1px; border top style: solid; border bottom style: solid; border top color: #069; border bottom color: #069;}
14 div#nav ul{ margin top: 0px; margin bottom:.8em; } div#nav li{ font size:.75em; font weight: bold; } div#content{ margin left:165px; margin top: 20px; padding right: 1em; padding bottom: 0px; padding left: 1em; }
15
16 Trespaltig med float och div
17 <body> <div id="header"><h1>detta är rubriken</h1> <div id="content"> <div id="spalt1"><p>claritas est </p> <div id="spalt2"><p>claritas est etiam </p> <div id="spalt3"><p>nam liber tempor cum </p> <div class="bryt"> <div id="foot">sidfot med exempelvis författarnamn </body>
18 body{ margin: 0px; padding: 0px; font family: Verdana, Arial, Helvetica, sans serif; font size: 1em;} #content{width:450px;border:solid;} div.bryt{clear:both} #header{ color: #CC0000; width:450px;} #spalt1{ color: #CC9900; width:150px; width:150px; float:left;}
19 ul#navigation {margin left: 0; padding left: 0; list style type:none;} ul#navigation a {display:block; text decoration:none; background:#036; color:#fff; padding:.2em.5em; border bottom:1px solid #fff; width: 7em;} ul#navigation a:hover {background:#69c; color:#000;}
20 <ul id="navigation"> <li><a href="#">hem</a></li> <li><a href="#">om</a></li> <li><a href="#">tjänster</a></li> <li><a href="#">personal</a></li> <li><a href="#">portfölj</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">webbkartan</a></li> </ul> ul#navigation {margin left: 0; padding left: 0; list style type:none;} ul#navigation a {display:block; text decoration:none; background:#036; color:#fff; padding:.2em.5em; border bottom:1px solid #fff; width: 7em;}
21
22 body{ font family: Verdana, Arial, Helvetica, sans serif; font size: 1em;} * {margin:0;padding:0;} div#vertmenu{ width: 100%; font size:.8em; background color: #CCF; margin top: 20px; border top width: 1px; border bottom width: 1px; border top style: solid; border bottom style: solid; border top color: #069; border bottom color: #069;} div#vertmenu ul{ margin left: 30px;} div#vertmenu li{ background color: #FFA; float: left;}
23
24 <ul id="navigation"> <li><a href="#">hem</a></li> <li><a href="#">om</a></li> <li><a href="#">tjänster</a></li> <li><a href="#">personal</a></li> <li><a href="#">portfölj</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">webbkartan</a></li> </ul>
25 ul#navigation {margin left: 0; padding left: 0; list style type:none; background: #036; float:left; width:100%;} ul#navigation li {display:inline;} ul#navigation a {display:block; float:left; padding:.2em 1em; color:#fff; text decoration:none; background:#036; border right:1px solid #fff;} ul#navigation a:hover {background:#69c; color:#000;}
26 <div id="container"> <h1>fyrfolket</h1> <div id="nav"> <ul> <li><a href="#">direkt </a></li> <li><a href="#">hem</a></li> <li><a href="#">om</a></li> <li><a href="#">tjänster</a></li> <li><a href="#">medarbetare</a></li> <li><a href="#">portfölj</a></li> <li><a href="#">kontakta oss</a></li> </ul> <div id="content"> <h2>om Stora Fjäderäggs fyrplats</h2> <p>lorem ipsum dolor sit amet, in torquent nunc pretium pharetra...</p> <p>dui nunc dui ultrices nulla....</p> <div id="footer"> Copyright webbplatsen 2006
27 body {text align:center; background: #B0BFC2; color:#444} #container {text align:left; margin: 0 auto; width: 700px; background:#fff url(header base.jpg) repeat y;} h1 {background:#d36832; color:#fff; margin:0; padding:20px; border bottom:5px solid #387a9b;} #nav {float:left; width:130px; display:inline; margin left:20px; padding:0;} #nav ul {margin:0; padding:25px 0; list style type:none; text align:right;} #nav li {background:url(header bullet.jpg) no repeat 95%.4em; padding:0 20px 5px 0;} #content {float:left; width:475px; margin left:45px; padding:15px 0;} #footer {clear:both; background:#387a9b; color:#fff; padding:5px 10px; text align: right; font size: 80%} h2 {margin top:0; color:b23b00; font weight:normal;} a:link {color:#175b7d; text decoration:none;} a:visited {color:#600; text decoration:none;} a:hover, a:active {color:#fff; background:#175b7d;}
28
29 CSS3 Några exempel på nyheter i CSS3
30 Basdokument som används i flertalet exempel <!DOCTYPE HTML> <html> <link href="ex_a_base.css" rel="stylesheet" type="text/css"> <body> <div id="left"> <H1>Pingvinsång</H1> <p> Fyra små pingviner, klädda i svart och vitt<br> Leker i Arctic snön så ljus<br> Det snöade och snöade hela dagen<br> Och en liten pingvin vaggade bort.<br> Tre små pingviner klädda i svart och vitt,<br> leker i Arctic snön så ljus.</p> <img src="penguins.jpg" width="200" height="150" alt="penguins"> </body> "utf 8"; /* CSS Document */ #left{padding:15px; background color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding left: 25px;} p{ img{ color: #333; font weight: bold;} padding left: 25px;}
31
32 Runda hörn img{ } #left { } border radius:10px; padding:15px; background color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding left: 25px; border:2px solid; border radius:25px; border color: #C00;
33 Skugga Box shadow #left { } padding:15px; background color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding left: 25px; border:2px solid; border radius:25px; border color: #C00; webkit box shadow: 10px 10px 5px #888888;
34 Webkit renderingsmotor
35 Skugga bakom text h1 { text shadow: 5px 5px 2px #888;}
36 HSL färger #middle2 { padding:15px; border:6px double rgb( ); border radius: 25px; border top right radius: 0px; border bottom left radius: 0px; background color: hsl(120, 50%, 50%);
37 Transparenta färger HSLA #middle3 { padding:15px; border radius: 25px; border top right radius: 0px; border bottom left radius: 0px; background image: url(test.jpg); color: hsla(120,0%,40%,.6); }
38 Gradienter #lower { padding:15px; background color: #36F; border radius: 25px; border top right radius: 0px; border bottom left radius: 0px; background: webkit gradient (linear, left top, left bottom, from(#00abeb), to(#015));}
39 Egna face { font family: rubrikfont; src: url('maturasc.ttf'); } h1 { font family:rubrikfont;} #left { } padding:15px; background color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding left: 25px; border:2px solid; border radius:25px; border color: #C00; font family:rubrikfont;
40 Rotera img{ border radius:10px; /*transform:rotate(30deg);*/ webkit transform:rotate(30deg); }
41 Spalter.newspaper { moz column count:3; /* Firefox */ webkit column count:3; /* Safari and Chrome */ column count:3; } <p class="newspaper"> Utseende<br> Pingviner skiljer sig ganska mycket åt i storlek och vikt trots att de är tämligen lika i kroppsform och dräkt. Huvudsakligen är de blåsvarta eller blåg
42
CSS Cascading Style Sheets
CSS Cascading Style Sheets första bilden andra bilden tredje bilden
/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }
/*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height:
Innan man börjar bygga ett skin i LUVIT bör man göra vissa förberedelser. Dessa är beskrivna nedan.
1. Introduktion LUVITs standardutseende för portal och utbildningsmiljö vad gäller logotyp, färger, typsnitt mm kan ändras genom att skapa nya så kallade skins. Skinnen kan man sedan ladda upp i LUVIT
12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration
REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap
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.
21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html
Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar
F07 Stilmallar Dagens agenda
F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar
F10 Mer CSS Dagens agenda
F10 Mer CSS Dagens agenda Stila formulär CSS-genererat innehåll Mediatyper Utskrift Negativa marginaler Sprites Gridbaserade layouter Ramverk Formulär Prydliga formulär #cform { width: 500px;} #cform
Lektion 3 HTML, CSS och JavaScript
Lektion 3 HTML, CSS och JavaScript I den här lektionen behandlas HTML, CSS och JavaScript (JS). Det förutsätts att lektion 1 och 2 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML
CSS. TNMK30 - Elektronisk publicering
CSS TNMK30 - Elektronisk publicering Dagens föreläsning CSS Layout med CSS Vad är CSS? Cascading Style Sheets (CSS), ett språk som beskriver hur HTML element ska se ut. Utseende Layout Presentation (HTML
Styla med CSS3. Översikt. Lektion 1: Styla text med CSS3
Styla med CSS3 Översikt Styla text med CSS3. Styla med Block element. Pseudo-Classes och Pseudo-Elements. Förhöja grafiska effekter med CSS3. Lektion 1: Styla text med CSS3 Fonter och storlek. @font-face.
Lektion 2 - CSS. CSS - Fortsätt så här
Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt
<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim
Kursledare: Mahmud Al Hakim Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet
Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">
CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning
TDDD52 CSS. Färger. Färger 1/3/13
Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis
Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014. Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014 NÅGRA EXEMPEL WWW.CSSZENGARDEN.
CSS CASCADING STYLE SHEETS GRUNDKURS Introduktion till stilmallar, 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 (formatering och layout)
Cascading Style Sheets (CSS) An Introduction. Nayeb Maleki
Cascading Style Sheets (CSS) An Introduction Nayeb Maleki CSS CSS utvecklades under mitten av 90-talet för att kunna separera stilformatering och formateringsinformation från innehåll i HTML sidor. Fungerar
Prototyper används för att
Skapa en prototyp Prototyper används för att Demonstrera ett koncept i ett tidigt stadium Testa detaljer i ett senare stadium Som en specifikation för den färdiga produkten Lo-fi Prototyp: pappers prototyp
Lektion 2 Del 1 Kapitel 6
Lektion 2 Del 1 Kapitel 6 Inlärningsmål Att kunna kontrollera och styra webbsidors utseende med hjälp av CSS mallar Att med hjälp av CSS mallar kunna ge en hel website ett gemensamt utseende Att med hjälp
IGÅR. Internet, www, TCP/IP, IP-adress, DNS, URL. HTTP Request. HTTP Response (HTML & status code)
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
Labora&on 4 CSS och validering övningar/uppgi9er
Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Dokument i övningarna I denna labora&on finns inga filer ar
CSS-WORKSHOP. Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek
CSS-WORKSHOP Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek sarabritta.jadelius@trollhattan.se 0520-49 76 65 HTML strukturerar innehåll det här är
Inför prov 1 i webbdesign
Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke
Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er
Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna
Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20
Laboration 3 CSS del 2 1 av 20 Vad kommer jag att lära mig på laboration 3? 1. Skriva en stilmall Boxegenskaper o border o margin o padding o width o float o clear Färger och bakgrundsbilder Positionering
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.
Tentamen ITK:P2 lördag 2007-04-14 Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng. 40 poäng ger betyget G, 55 ger VG Peter Mozelius DSV 1.) Ditt
HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)
HTML och CSS Eric Elfving Institutionen för Datavetenskap (IDA) Upplägg Introduktion Grundläggande HTML Ändra utseende med CSS 2 Introduktion HyperText Markup Language används för att strukturera text
Introducerande övningar i CSS
Intrducerande övningar i CSS CSS (Cascading Style Sheets) är ett språk sm används för att göra stilinställningar av en webbsida skapad i HTML. Stilinställningarna kan läggas in på tre ställen: sm attribut
Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma
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 Föreläsning 2 Internet Hypertext Server och klient HTTP HTML Internet Många sammankopplade nät Gemensamma adresser T ex 10.10.0.1 Gemensamma protokoll Protokoll = regler och algoritmer för kommunikation
Att berätta med webb + En introduktion till HTML
Att berätta med webb + En introduktion till HTML Vad är en bra historia? Uppbyggnad En serie handlingar/händelser som tillsammans bildar en enhet Budskap Produkt Bra, användarvänlig, lättförståelig, etc.
Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1
Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min
Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.
Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny
En stiligare portal Laboration 3
Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt
Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er
Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on
HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015
. HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17
CSS- Cascading Stylesheets
CSS- Cascading Stylesheets 2D1525 Programmering för interaktiva medier http://www.nada.kth.se/kurser/kth/2d1525/ Cascading Stylesheets Ett språk för att definiera hur XML-dokument ska rendreras på web,
EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript
EDA095 HTML Per Andersson Lund University http://cs.lth.se/pierre_nugues/ April 26, 2017 Innehåll: HTML, CSS, DOM, JavaScript Per Andersson EDA095 HTML April 26, 2017 1 / 23 Webben Webben byggs upp av
Införande av CSS i existerande tabellbaserat HTML-dokument
Institutionen för kommunikation och information Examensarbete i datalogi 10p C-nivå Vårterminen 2006 Införande av CSS i existerande tabellbaserat HTML-dokument Henrik Larsson HS-IKI-EA-06-604 Examensrapport
Övnings hemtentamen med förslag till lösning, webbprogrammering
Övnings hemtentamen med förslag till lösning, webbprogrammering Se detta som ett förslag efter som uppgifterna ofta går att lösa få flera sätt. Uppgift 1 CSS 4 poäng Alla css regler skall placeras i en
Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)
Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet
Laboration 2: Xhtml och CSS.
Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och
Föreläsning 4. CSS Stilmallar för webben
Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll
F03 Stilmallar. Föreläsning 3, HT2014 Stilmallar. Kurser: Webbteknisk introduktion 1IK415. Johan Leitet
Föreläsning 3, HT2014 Stilmallar F03 Stilmallar Kurser: Webbteknisk introduktion 1IK415 Johan Leitet F03 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Mediatyper Selektorer - Taggselektorer
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi
Kravspecifika.on, pappersprototyp & CSS
1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna
Webbprogrammering. En introduktion till html & CSS
Webbprogrammering En introduktion till html & CSS Vi ser dem överallt och för många, varje dag Sedan WWW tillkom under tidigt 90-tal har webben idag vuxit till att omfatta många hundratals miljoner sidor
Utveckla den moderna släktboken vidare
22-1 Utveckla den moderna släktboken vidare 22 I detta kapitel utvecklas den moderna släktboken ytterligare, för att få med mer information om de olika personerna genom en mer-knapp med variabel text.
Rapport Webbutveckling LAB 1 Författare: Christofer Wållberg
Rapport Webbutveckling LAB 1 Författare: Christofer Wållberg 1 Innehållsförteckning 1.Inledning s. 3 1.1 Syfte s. 3 1.2 Mål s. 3 1.3 Metod s. 3 1.4 Material s. 3 1.5 Avgränsning s. 3 2 Resultat s. 3 2.1
En grundkurs i hemsidor och hur de är uppbyggda
En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och
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
Övningar i layout med CSS
Övningar i layut med CSS Med CSS strukturerar man innehållet i lika delar. Med div-taggar kan man avgränsa delar av kden för sidhuvud, navigeringslänkar, innehåll, etc. Med CSS kan man sedan ge dessa delar
CSS-övningar. 1. Grunder
CSS-övningar 1. Grunder CSS Testa stilmallar Klasser Elementen div och span Ärvda egenskaper Mer om typsnitt, marginaler och mått Textdekor Fristående CSS -fil Attributet style Prioritetsordning hos stilelement
Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod
html och css Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa : http://www.w3schools.com/browsers/
Skapa en webbplats med WordPress
Skapa en webbplats med WordPress Daniel Karlsson 2016-01- 26 Licens Creative Commons Attribution- NonCommercial 2.0 Du får fritt sprida, redigera och kopiera guiden, men ej för ekonomisk vinning och endast
F13 HTML5 Dagens agenda
F13 HTML5 Dagens agenda HTML5 Struktur Outline Nya element APIr Microdata/RDF/Microformats WHAT Working Group? Initiativ, 2004, startat av Apple, Mozilla och Opera WHATWG adapterades 2007 av W3C och rekommendationen
Vägen till en lyckad responsiv webbdesign.
Vägen till en lyckad responsiv webbdesign. Tänk mobilt först! Utgå ALLTID från den mista skärmen och jobba dig uppåt. Man brukar räkna med att 320px är i minsta laget idag. Korrekt ViewPort är mycket viktig,
<header> </header> <footer> </footer>
Tidigare har man använt taggen för att märka delar av dokument. I HTML5 har man lagt till stöd för de nya taggarna för att det inte ska bli så många -taggar. I exemplet nedan använder
Frågor och svar Gränssnittsdesign/Webbutveckling
Frågor och svar Gränssnittsdesign/Webbutveckling Bilder och optimering 1. Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96
Övningar i CSS för anpassning till olika enheter
Övningar i CSS för anpassning till lika enheter Hittills har vi i föregående labratiner tittat på hur man med CSS utfrmar en presentatin för bildskärm på en vanlig datr. Men det finns fler presentatiner
Lektion 4 HTML, CSS och PHP
Lektion 4 HTML, CSS och PHP I den här lektionen behandlas i huvudsak PHP. Det förutsätts att lektion 1, 2 och 3 är gjorda, eller att du har tillräckliga kunskaper i grundläggande HTML och CSS för att klara
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»
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» skriv ut» C SS - gr unde r Infor mation om C S S CS S i exter n mall eller i dokumentet? A
Lathund för HTML-kodning
Lathund för HTML-kodning Grunderna i dokumentet Starttagg för Html-dokument, berättar för webbläsaren att här börjar det en sida med Html-koder. Hela dokumentet skall finnas inom dessa. Starttagg
Föreläsning 06, HT2013 HTML5 F06 HTML5. Johan Leitet
Föreläsning 06, HT2013 HTML5 F06 HTML5 Johan Leitet F06 HTML5 Dagens agenda HTML5 Struktur Outline Nya element APIr Microdata/RDF/Microformats WHAT Working Group? Web Hypertext Application Technology Initiativ,
Designhäftet. När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se
Designhäftet När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se Materialet är framtaget i samband med utbildningstunrén 2011. Praktiska designtips En lista
Vad är XLink. XLink/XPointer/XSLT-FO. Namespace. Simple Links
Vad är XLink XLink/XPointer/XSLT-FO XMLs motsvarighet till HTMLs -länkar fast med mycket större funktionalitet. Simple Links motsvarar ungefär vanliga länkar Extended links kan länka till grupper av
Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.
Lab1 - CV-sidan Du ska bygga en variant av en CV-sida i HTML och CSS. Sidan ska åtminstone innehålla en bild på dig, en klassisk tabell med utbildningar/erfarenheter, ditt favoritcitat, en eller flera
Övrigt Ljud Bild Kyrkvärd. Gun Björk. Liv Ek Nattvard Jon Gran
acal version 1.1 Översikt Den centrala delen i acal är en kalender. Till skillnad från andra digitala kalendrar som vanligen har ett par olika fält kan man här fritt skapa fält utifrån de behov man har.
On-line produktion TDDC61
On-line produktion TDDC61 Hej! Jakob Bandelin jakob.bandelin@liu.se Kognitionsvetenskap, interaktionsdesign, webbdesign On-line produktion (GDK), Elektronisk publicering (MT), Webbprogrammering (SVP),
Web (html+xhtml), CSS. Dagens föreläsning. Web - grundprinciper. Syfte Ge er grunderna för att skapa och publicera websidor.
Web (html+xhtml), CSS 2D1553 Mediaproduktion http://www.nada.kth.se/kurser/kth/2d1553/ 2003-11-04 Björn Hedin, NADA/KTH 2003 1 Dagens föreläsning Syfte Ge er grunderna för att skapa och publicera websidor.
F02 En första sida. Dagens agenda
F02 En första sida Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML Indentering Block/inline-element Struktur Se demo #2
För att få respektive betyg krävs: 25 för godkänt, 37,5 för väl godkänt (obs betyget gäller tentan, inte kursen som helhet)
Webbdesign Provmoment: Ladokkod: Tentamen ges för: TentamensKod: TEN NWD011 SV16 7,5 högskolepoäng Tentamensdatum: 31 okt 2017 Tid: 9-13 Hjälpmedel: Färgpennor är tillåtna. Totalt antal poäng på tentamen:
WEBBUTVECKLING 1 LÄROBOK ERRATA UPPLAGA 1
Errata för J200 4500 Webbutveckling 1 av Lars Gunther Exklusive stavnings och grammatikfel. Sidan 33: Hela avsnitt 1.10.3 är omskrivet Här samlas artiklar och dokumentation, samt ett diskussionsforum.
En introduktion till stilmallar (CSS) Cascading Style Sheets (CSS)? 2002 Ulf Tornert 1
En introduktion till Stilmallar eller Cascading Style Sheets (CSS) 1 Stilmallar en introduktion... 4 Vad är stilmallar?...4 Vad behöver du för att lära dig stilmallar?...4 Hur stilmallar integreras i en
Webbstandarder för fler än en plattform
Beteckning: Institutionen för matematik, natur- och datavetenskap Webbstandarder för fler än en plattform Mikael Norling, Tomas Wigren Juni 2008 Examensarbete, 15 poäng, B Datavetenskap Internetteknologi
Produktion för tryckta medier och webb
Ulrik Söderström ulrik.soderstrom@tfe.umu.se 8 Dec 2008 Produktion för tryckta medier och webb XHTML 1 HTML Hypertext text som via hyperlänkar är förbunden med andra texter Uppmärkning sker med taggar
Dagens föreläsning. Ställa in Apache för Python. Skapa ett Pythonscript. Skapa en statisk sida. Lagerdesign för webbkommunikation
Dagens föreläsning Scriptprogrammering Sommaren 2007 Webbuppgift HTTP och hur kontakten sker mellan klient och server. Apache-servern HTML. Exekvera Pythonscript. Formulär. Model-View-Controller på webben.
Webbteknik för ingenjörer
Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera
F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet
Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet F02 HTML Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML
Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller
Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller Beräknad tidsåtgång: ca. 3 timmar. I ASP.NET 4.5 finns en stor mängd nya funktioner för att förenkla utvecklingen
Webbplats. Projektplan för webbplats. Karin Tuvell
Webbplats Projektplan för webbplats Karin Tuvell Innehåll Syfte... 3 Mål... 3 Målgrupp... 3 Innehåll och avgränsningar... 3 Utformning... 3 Storyboard... 4 Flödesschema... 5 Tidsplan... 6 Resurser... 6
TNMK30. Elektronisk publicering
TNMK30 Elektronisk publicering Välkomna till kursen Niklas Rönnberg niklas.ronnberg@liu.se Kopparhammaren 2, rum 2011 Medverkande Stefan Gustavson, stefan.gustavson@liu.se Camilla Forsell, camilla.forsell@liu.se
Grundläggande instruktioner för att publicera webbsidor på webbservern.se
Grundläggande instruktioner för att publicera webbsidor på webbservern.se Av Julia Klingvall i samarbete med webbservern.se. Version 1.1, januari 2005. I denna guide kommer du att lära dig de viktigaste
Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)
Webbpublicering Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Föreläsningsöversikt Föreläsning 1 Vad är webbpublicering? Lite historia - Internet och webben Statiska webbplatser Grundkoncept: webbläsare,
[HTML] [Elevens namn ] [Klassens namn ] [Lärarens namn ]
![[HTML] [Elevens namn ] [Klassens namn ] [Lärarens namn ]](/thumbs/91/105280236.jpg "[HTML] [Elevens namn ] [Klassens namn ] [Lärarens namn ]")
[HTML] av [Elevens namn ] [Klassens namn ] [Lärarens namn ] INNEHÅLLSFÖRTECKNING INTRODUKTION TILLHTML # KAPITEL 1 VAD ÄR HTML? # Kapitel 2 TEXTFORMATERING # KAPITEL 3 FÄRG OCH HORISONTELLA STECK # KAPITEL
EDAF90 - Webprogrammering HTML och CSS
EDAF90 - Webprogrammering HTML och CSS Per Andersson Lund University http://cs.lth.se/edaf90/ Januari 28, 2019 Innehåll: Teminologi, HTML, CSS, DOM Per Andersson EDAF90 - Webprogrammering HTML och CSS
Omtentamen på kursen Webbdesign, 7,5 hp
Högskolan i Borås Handels- och IT-högskolan Malin Nilsson Tentamen Omtentamen på kursen Webbdesign, 7,5 hp Tentamenstid: 2012-08-29, kl. 9-13 Hjälpmedel: Inga hjälpmedel tillåtna Betyg: Tentamen omfattar
Webbdesign vt. 2010. Innehållsförteckning
Webbdesign vt. 2010 mångar: Kl. 8:30 12:00 Innehållsförteckning 2. FTP-hur gör man? 3. Grundtaggar 5. Tabeller 6. Infoga bilder 7. Rubriker och fonter 8. Övning 1 9. Installera HTML-edit 11. Startsidans
Struktur & Layout med CSS
1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs
HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00
Mitthögskolan ITM Telefon 063-16 53 00 HTML Laborationskompendium i konstruktion av webbsidor Detta exemplar tillhör: VT 2005 Mittuniversitetet, ITM Telefon 063-16 53 00 Laborationskompendium för konstruktion
Labora&on 8 Formulär övningar/uppgi6er
Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument
Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:
Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både
Webbdesign vt. 2009. Innehållsförteckning
Webbdesign vt. 2009 Fysiska träffar onsdagkvällar: Kl. 18:00 21:00 28/1 11/2 11/3 25/3 1/4 22/4 6/5 Innehållsförteckning 2. FTP-hur gör man? 3. Vad ska jag göra? 4. Grundtaggar 6. Tabeller 7. Infoga bilder
Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener <scenes>... 3 Typsnitt <fonts>... 3 Övergångar <transitions>...
Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener ... 3 Typsnitt ... 3 Övergångar ... 4 Mall för slide ... 5 , ...
Laborationsanvisning. HTML5 Laboration 6. Författare: Johan Leitet Version: 1 Datum: 2011-10-03
Laborationsanvisning HTML5 Laboration 6 Författare: Johan Leitet Version: 1 Datum: 2011-10-03 Inledning I denna avslutande laboration ska du testa att märka upp en sida med de nya taggarna i HTML5. Mikroformat
Att styla webbsidor. Nivå. Uppgiften
Nivå 2 Att styla webbsidor All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.
Styla och formatera text
Nivå 2 Styla och formatera text All Code Clubs must be registered. By registering your club we can measure our impact, and we can continue to provide free resources that help children learn to code. You
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:
Hemsida CSS Introduktion till Cascading Style Sheets (CSS) Detta är en mycket kort genomgång av CSS med exempel på hur sådan kod ska läsas och hur den kan användas på IdrottOnline-sidor. Är man ute efter
Övning (X)HTML 2. Sidan 1 av 7 2010-11-11
Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan