CSS del 2 Samuel Kvarnbrink 06-03-23.

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.
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.
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.
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.
Webben – intro Första föreläsningen i kursen Webbutveckling.
Stilark: CSS Digitalisering av text April 2005 Mats Dahlström.
WEBMASTER DAG 4 Mahmud Al Hakim
Mahmud Al Hakim Webmaster DAG 9 VT09 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.
Föreläsning 11 Arrayer.
Programmering i C# 3. Klasser.
DHTML Designa din egen webbsida.
Vektorer (klassen Vector) Sortering
Programmeringsteknik för Media1 & K1
1 ITK:P2 F2 Stilsättning av XHTML DSV Peter Mozelius.
(Cascading Style Sheets) Rebecca Landmér 2007 CSS.
Daniel Cronholm biblios.se/data © Övning 7 Dispositionsläget Börja med att spara den här presentationen som Min presentation 7.
Första sidan Underrubrik Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Kontakta.
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.
Dreamweaver fortsättning DAG 2 VT09 Mahmud Al Hakim
XHTML 1 Elektronisk publicering. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Klasser och.
UTVECKLING MED RAMVERKET.NET Marcus Medina. Dagens visdomsord ”Google is your friend”
Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim
2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
XSLT 1 Digitalisering av kulturarvet.
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.
© Anders Broberg, Lena Kallin Westin, 2007 Datastrukturer och algoritmer Föreläsning 14.
CASCADING STYLE SHEETS Digitalisering av kulturarvet.
1 Föreläsning 6 Repetition på metoder Referenser Objekt som parametrar public/private Klassvariabler och klassmetoder.
CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll.
STARTSIDA DIN PRESENTATION. RUBRIK- ANPASSA RUTAN EFTER RUBRIK
Du hittar de 13 sidmallar som finns att välja bland när du klickar på Ny bild på startfliken. Använder du helsidesbild, så måste flaggan i vänsterhörnet.
Repetition webbteknik Per K. Selektorer metod 1 1. Elementreferens CSS-kod: p { font-family: georgia, serif; } HTML: Text skrivs i en brödtext.
Webben – en sammanfattning Sista föreläsningen i kursen Produktion för tryckta medier och webb.
Python.
Wordgenomgång.
Kontinensutredning – så funkar det
RUBRIKEN RUBRICERAR Mellanrubrik
CSS del 2 Samuel Kvarnbrink
© Anders Broberg, Ulrika Hägglund, Lena Kallin Westin, 2003
Introduktion till CSS CSS1 - EXEMPEL.
Första sidan Underrubrik Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Kontakta.
CSS del 2 Kvarnbrink
CSS del 1 Kvarnbrink
RUBRIKEN RUBRICERAR Mellanrubrik
Rubrik Mellanrubrik Rubriken är normalt satt i Arial Black 21 pt. Brödtexten är som vanligt satt i Georgia, max. 18 pt. Lorem ipsum dolor sit amet, consectetuer.
Internet A HTML Grunder
CSS del 1 Samuel Kvarnbrink
[Planschens rubrik] Lorem ipsum dolor sit amet, consectetuer adipiscing elit maecenas porttitor congue massa fusce [Ersätt följande namn och rubriker med.
Enpunktsperspektiv.
Rubrik Mellanrubrik Rubriken är normalt satt i Arial Black 21 pt. Brödtexten är som vanligt satt i Georgia, max. 18 pt. Lorem ipsum dolor sit amet, consectetuer.
Presentationens avskrift:

CSS del 2 Samuel Kvarnbrink 06-03-23

Mer elementreferens ID refererar man till med #-tecken #content { width: 600px; } Klassnamn har en punkt före .newsitem { width: 600px; } Också möjligt att vara mer specifik div.newsitem { width: 600px; } h1#page_title { color: black; }

Pseudoklasser Fungerar precis som vanliga CSS- klasser... men: Du kan inte själv tilldela dem! Är en sorts CSS-klasser som webbläsaren delar ut och tar bort automatiskt

Pseudoklasser Partiellt stöd i Explorer, fullt stöd i övriga a:link { color: blue; } a:active { color: red; } a:visited { color: purple; } a:hover { color: red; text-decoration: underline; } input:focus { border: 3px solid red; } p:first-letter { font-size: 24pt; } Partiellt stöd i Explorer, fullt stöd i övriga mer: http://www.w3.org/TR/REC-CSS2/selector.html#q15

Enkel elementreferens <div id="header"> <h1>Kurts bilskrot</h1> </div> <div id="content"> <h1>Välkommen!</h1> ... <div id="sidebar"> <h1>Länkar</h1> h1 { font-size: 30pt; color: green; }

Nästlad elementref. #header h1 { font-size: 30pt; color: green; } <div id="header"> <h1>Kurts bilskrot</h1> </div> <div id="content"> <h1>Välkommen!</h1> ... <div id="sidebar"> <h1>Länkar</h1> #content h1 { font-size: 30pt; color: green; } #sidebar h1 { font-size: 30pt; color: green; }

Indirekt nästlad elementref. <div id="content"> <div class="nyhet"> <h1>Man bet hund</h1> Lorem ipsum dolor... <a href="#">Läs mer...</a> </div> #content .nyhet a:hover { text-decoration: underline; font-weight: bold; color: red; }

Indirekt nästlad elementref. <div id="content"> <div class="nyhet"> <h1>Man bet hund</h1> Lorem ipsum dolor... <a href="#">Läs mer...</a> </div> #content a:hover { text-decoration: underline; font-weight: bold; color: red; }

Direkt nästlad elementref. <div id="content"> <div class="nyhet"> <h1>Man bet hund</h1> Lorem ipsum dolor... <a href="#">Läs mer...</a> </div> #content > a:hover { text-decoration: underline; font-weight: bold; color: red; } Ingen matchning

Direkt nästlad elementref. <div id="content"> <div class="nyhet"> <h1>Man bet hund</h1> Lorem ipsum dolor... <a href="#">Läs mer...</a> </div> .nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; }

Direkt nästlad elementref. <div id="content"> <div class="nyhet"> <h1>Man bet hund</h1> Lorem ipsum dolor... <a href="#">Läs mer...</a> </div> #content > .nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; }

Boxmodellen top/right top/left margin padding height width

Positionering Absolut positionering (position: absolute) flyttar elementet till en “egen värld” och placerar det relativt till föräldraelementet. Relativ positionering (position: relative) får ett element att anta en position relativ till det läge elementet annars skulle ha haft

Z-index Z-index bestämmer positionen i djupled Tänk lager i Photoshop! Ju högre Z-index, desto längre upp hamnar ett element Normalt har alla element Z-index noll

Flytande objekt Får ett element att flytta sig till vänster (float: left) eller höger (float: right) i det inneslutande elementet Bra för figursatta bilder, anfanger, och en del oväntade saker http://www.w3schools.com/css/css_clas sification.asp