CSS del 2 Kvarnbrink 2 06-03-23. Mer elementreferens ID refererar man till med #-tecken #content { width: 600px; } Klassnamn har en punkt före.newsitem.

Slides:



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

II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.
XHTML.
MANGE_MANIAC Ämne A Ämne B Viktig information Länkar till dina favoritplatser Skriv ett välkomstmeddelande här. Det kan vara ett långt meddelande eller.
1 MSPEL Föreläsning 1 DSV Peter Mozelius XML, XHTML, CSS och Java applets.
Introduktion till CSS CSS1 - EXEMPEL. Denna webbsida vill vi kopiera och förbättra.
XHTML 1 Designa din egen webbsida. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Validering.
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.
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.
Introföreläsning CS Om publiceringssystem, lektion ett.
Stilark: CSS Digitalisering av text April 2005 Mats Dahlström.
Responsive design i praktiken Johan Kling
WEBMASTER DAG 4 Mahmud Al Hakim
W EBMASTER DAG 8 HT08 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.
Programmering B PHP Lektion 3
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.
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
XHTML & CSS Introduktion Erik Nahkala
Logikprogrammering 21/10 Binära träd
TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML- dokument är text – brödtext, rubriker, avgränsande linjer.
XHTML Digitalisering av kulturarvet.
Välkommen till årets andra nätverksträff Sundsvall 30 maj, 2006 Funda Denizhan och Magnus Burell Verva, Nätverket 24-timmarswebben.
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.
CopyRight Lars Valentin1 Strukturformat CSS Lars Valentin.
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
DATABASHANTERING för programmerare Lektion 5 Mahmud Al Hakim
1 Föreläsning 11 Grafisk användargränssnitt med Tkinter.
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 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.
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.
Webben – en sammanfattning Sista föreläsningen i kursen Produktion för tryckta medier och webb.
Wordgenomgång.
CSS del 2 Samuel Kvarnbrink
Kontinensutredning – så funkar det
CSS del 2 Samuel Kvarnbrink
Introduktion till CSS CSS1 - EXEMPEL.
CSS del 2 Kvarnbrink
CSS del 1 Kvarnbrink
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
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 Kvarnbrink

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

Enkel elementreferens h1 { font-size: 30pt; color: green; } Kurts bilskrot Välkommen!... Länkar

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

Indirekt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content.nyhet a:hover { text-decoration: underline; font-weight: bold; color: red; }

Indirekt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content a:hover { text-decoration: underline; font-weight: bold; color: red; }

Direkt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content > a:hover { text-decoration: underline; font-weight: bold; color: red; } Ingen matchning

Direkt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer....nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; }

Direkt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content >.nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; }

Boxmodellen padding margintop/left width height top/right

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 Positionering

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 sification.asp sification.asp