Introduktion till CSS CSS1 - EXEMPEL. Denna webbsida vill vi kopiera och förbättra.

Slides:



Advertisements
Liknande presentationer
1 Windows programmering (2) Borland C++ Builder 4/5 Modsoft Ab Kent Westerholm.
Advertisements

II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.
XHTML.
1 MSPEL Föreläsning 1 DSV Peter Mozelius XML, XHTML, CSS och Java applets.
RUBRIKEN HÄR (en annan rad) En nedre rubrik här vid behov.
Programmering?. Förslag till innehåll programmeringens grundläggande teori webbredigering, webbprogrammering html xml wml (wap 1) xhtml css javascript.
HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas.
Programmeringteknik Webbdelen. HTML H yper T ext M arkup L anguage Märker upp sidans innehåll så att webbläsaren kan avgöra hur innehållet ska visas.
Eddie Arnold - Make The World Go Away Images colorées de par le monde Déroulement automatique ou manuel à votre choix 1 för dig.
Webbutveckling grundkurs DA7710
Webbteknik lektion 3 Det handlar mer om stilmallar Per K, 2012.
Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.
XHTML och CSS En föreläsning om webbteknik , SK, PK TFE Umeå Universitet.
Webbteknik lektion 4 Det handlar mer om stilmallar Per K, 2012.
Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender.
Stilark: CSS Digitalisering av text April 2005 Mats Dahlström.
WEBMASTER DAG 4 Mahmud Al Hakim
W EBMASTER DAG 8 HT08 Mahmud Al Hakim
Karolinska Institutet, studentundersökning Studentundersökning på Karolinska Institutet HT 2013.
Stora additionstabellen
V E R S I O N N R 2. 0 T A V E L I D É E R I M I L J Ö.
Bastugatan 2. Box S Stockholm. Blad 1 Läsarundersökning Maskinentreprenören 2004.
Bastugatan 2. Box S Stockholm. Blad 1 Läsarundersökning Maskinentreprenören 2007.
Textkodning 2 Dokumentrepresentation. Idag  Teckenuppsättningar  Validering  Metadata  Elementen div och span  Klasser och.
CSS3 Några exempel på nyheter i CSS3. Basdokument – som används i flertalet exempel Pingvinsång Fyra små pingviner, klädda i svart och.
DHTML Designa din egen webbsida.
Bild 1 Hur använder vi KursInfo idag? Högskolan i Skövde.
Från Gotland på kvällen (tågtider enligt 2007) 18:28 19:03 19:41 19:32 20:32 20:53 21:19 18:30 20:32 19:06 19:54 19:58 20:22 19:01 21:40 20:44 23:37 20:11.
Arbetspensionssystemet i bilder Bildserie med centrala uppgifter om arbetspensionssystemet och dess funktion
Det handlar om multiplikation
TÄNK PÅ ETT HELTAL MELLAN 1-50
1 Joomla © 2009 Stefan Andersson 1. 2 MÅL 2 3 Begrepp Aktör: en användare som interagerar med webbplatsen. I diagrammet till höger finns två aktörer:
Kouzlo starých časů… Letadla Pár foteček pro vzpomínku na dávné doby, tak hezké snění… M.K. 1 I Norrköping får man inte.
1 ITK:P2 F2 Stilsättning av XHTML DSV Peter Mozelius.
TietoEnator © 2007presentationPage 1 Mina meddelanden Procapita +
(Cascading Style Sheets) Rebecca Landmér 2007 CSS.
Best pictures on the internet 2007 Awards 1http:// (s), (v), och (mp) i Norrköping, gillar inte att vi använder grundlagarna.
Levnadsvanor Levnadsvanor handlar om specifikt mänskliga beteenden i vardagliga aktiviteter som individen själv kan påverka, som exempelvis, fysisk aktivitet,
CSS del 3 Kvarnbrinkx Medietyper En XHTML-sida kan ha olika CSS-filer för olika medier! Definieras med attributet “media” i link- taggen,
Webbutveckling Med fokus på grunder i html och css.
XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink
TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML- dokument är text – brödtext, rubriker, avgränsande linjer.
XHTML & CSS 2 del 2 Designa din egen webbsida. Idag  Boxmodellen  Bakgrundsbilder  Rubriker  Clear och float  Positionering.
Spelprogrammering med bilder och ljud
UTVECKLING MED RAMVERKET.NET Marcus Medina. Dagens visdomsord ”Google is your friend”
© Björn Hedin, NADA/KTH Kursintro, Web, CSS och WAP 2D1553 Mediaproduktion
Placera siffrorna i rutorna så att summorna i kanten stämmer
Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim
2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
CSS del 2 Kvarnbrink Mer elementreferens ID refererar man till med #-tecken #content { width: 600px; } Klassnamn har en punkt före.newsitem.
CSS del 1 Kvarnbrink I början… Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets.
Copyright, Mahmud Al Hakim, Lektion 3 Ramar, Navigeringsfält, Lager Mahmud Al Hakim
XHTML & CSS 2 del 1 Elektronisk publicering. Idag  Repetition  Teckenuppsättningar  Metadata  Mer om klasser och ID:n  CSS.
ATT SKAPA TABELLER Tabeller skall endast användas om man verkligen vill presentera något i tabellform Använd INTE tabeller för att strukturera hela sidor.
Impact DETTA ÄR INTE DIN PENNA verdana DETTA ÄR INTE DIN PENNA Verdana bold DETTA ÄR INTE DIN PENNA.
CASCADING STYLE SHEETS Digitalisering av kulturarvet.
CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll.
Repetition webbteknik Per K. Selektorer metod 1 1. Elementreferens CSS-kod: p { font-family: georgia, serif; } HTML: Text skrivs i en brödtext.
Wordgenomgång.
Rubrik Skriv kort och kärnfullt i Arial Regular
CSS del 2 Samuel Kvarnbrink
CSS del 2 Samuel Kvarnbrink
Rörelse utomhus i naturmiljö
Introduktion till CSS CSS1 - EXEMPEL.
JULEN Varför firar man jul inom kristendomen? (Svårt)
CSS del 2 Kvarnbrink
CSS del 1 Kvarnbrink
Internet A HTML Grunder
CSS del 1 Samuel Kvarnbrink
Presentationens avskrift:

Introduktion till CSS CSS1 - EXEMPEL

Denna webbsida vill vi kopiera och förbättra

Grundstruktur

Ungefär så här

BODY body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-weight: normal; text-align:center; background: #B0BFC2; color:#444 }

7

container #container { text-align:left; width: 816px; height: 522px; background-color: #222; background-repeat: no-repeat; background-position: center; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border: 2px solid #6699FF; }

9

content2 #content2{ height: 484px; width: 774px; margin-top: 19px; margin-right: 21px; margin-bottom: 19px; margin-left: 21px; background-color: #444; }

11

left #left { background-color: #666; height: 478px; width: 152px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; float: left; }

13

right #right{ background-color: #888; height: 478px; width: 560px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 32px; float: left; }

15

head #head{ background-color: #259; height: 50px; width: 560px; padding: 0px; }

content #content{ background-color: #592; height: 399px; width: 560px; }

foot #foot{ background-color: #925; height: 35px; width: 560px; text-align: center; /*padding-top:5px;*/ }

Med bilder inplockade

Rubriken i head #head h1{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18pt; color: #666699; background-color: #FFFFFF; margin-top: 0px; margin-right: 0px; margin-left: 0px; /*padding-top: 10px;*/ padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }

Foot - länkar #foot p{ text-align: center; } #foot a{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #666699; text-decoration: none; text-align: center; font-weight: bold; margin-top:0px; margin-top: 5px; }

Mer syling på länkar #foot a hoover{color: #A00;} #foot a:link, A:visited, A:active { text-decoration: none; color:#669; }

Bakgrundsfärger vitt