Introduktion till CSS CSS1 - EXEMPEL.

Slides:



Advertisements
Liknande presentationer
HTML - grunder. Program •Html kan skrivas i anteckningar, eller vilket annat textbehandlingsprogram som helst. Mitt tips: Notepad ++ Notepad ++ •Grafiska.
Advertisements

HTML – vad är det och varför ska vi använda det Och vad är XHTML.
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.
En kort och ofullständig intro
Introduktion till CSS CSS1 - EXEMPEL. Denna webbsida vill vi kopiera och förbättra.
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.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
HTML – vad är det och varför ska vi använda det
Webbutveckling grundkurs DA7710
Föreläsning 9 Sökning, sortering, grafikprogrammering.
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
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.
Sidan Meningen göra en hemsida för företaget Zoohelsinki. P.g.a. Materialets brist så enkel sida som möjligt Fick ide från vertaaverkkoja och nikebetterworld.
DHTML Designa din egen webbsida.
1 ITK:P2 F2 Stilsättning av XHTML DSV Peter Mozelius.
(Cascading Style Sheets) Rebecca Landmér 2007 CSS.
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
XHTML & CSS Introduktion Erik Nahkala
TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML- dokument är text – brödtext, rubriker, avgränsande linjer.
Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender.
XHTML & CSS 2 del 2 Designa din egen webbsida. Idag  Boxmodellen  Bakgrundsbilder  Rubriker  Clear och float  Positionering.
Spelprogrammering med bilder och ljud
1. Ett problem/uppgift.
UTVECKLING MED RAMVERKET.NET Marcus Medina. Dagens visdomsord ”Google is your friend”
© Björn Hedin, NADA/KTH Kursintro, Web, CSS och WAP 2D1553 Mediaproduktion
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.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
Use only Netinsight colors from the theme color palette. Icons are only to be used on a light grey or white background. Do not place icons over images,
Webbteknik En kort introduktion.
Författarens för – och efternamn Arial regular
Wordgenomgång.
Rubrik Skriv kort och kärnfullt i Arial Regular
CSS del 2 Samuel Kvarnbrink
CSS del 2 Samuel Kvarnbrink
PowerPointmall för ”vetenskaplig poster” – rubrik med teckensnitt Mundo Sans eller Arial i regular 80 pt Författarens för – och efternamn 28pt regular.
Rörelse utomhus i naturmiljö
JULEN Varför firar man jul inom kristendomen? (Svårt)
PowerPointmall för ”vetenskaplig poster” – rubrik med teckensnitt Mundo Sans eller Arial i regular 72 pt Författarens för – och efternamn 28pt regular.
PowerPointmall för ”vetenskaplig poster” – rubrik med teckensnitt Mundo Sans eller Arial i regular 80 pt Författarens för – och efternamn 28pt regular.
CSS del 2 Kvarnbrink
CSS del 1 Kvarnbrink
PowerPointmall för ”vetenskaplig poster” – rubrik med teckensnitt Mundo Sans eller Arial i regular 72 pt Författarens för – och efternamn 28pt regular.
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

<body> <div id="container"> <div id="content2"> <div id="left"></div> <div id="right"> </div> </body>

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 }

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; }

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

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

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

<body> <div id="container"> <div id="content2"> <div id="left"> </div> <div id="right"> <div id="head"> <div id="content"> <div id="foot"> </body>

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; 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