WEBBAPPLIKATIONER MODUL 2 - CSS · Positionering CSS Layouter 2. CSS, Cascading Style Sheets 2 3 Introduktion till stilmallar, CSS CSS står för ”CascadingStyleSheets” CSS är

1CSS, Cascading Style Sheets

WEBBAPPLIKATIONER

MODUL 2 - CSSCopyright

Mahmud Al Hakim

[email protected]

http://www.webbacademy.se

INNEHÅLL

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

Introduktion till stilmallar, CSS

Förstå CSS (Cascading Style Sheets)

Skapa CSS-Regler

Koppla HTML och CSS

Text- och styckeformatering

Formatera rubriker

Färger

Arv och Kaskaden

Sidmarginaler

Formatera länkar

CSS Klasser

Google Fonts

Skuggeffekter

Boxmodellen

Marginal, utfyllnad och kantlinjer

Kantlinjer runt bilder

Bakgrundsbilder

Container-element

Id-regler

CSS Listor

CSS Menyer

Flytande element (float)

Horisontella menyer

Positionering

CSS Layouter

2

http://www.webbacademy.se/


3

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) på

webbsidor.

CSS används tillsammans med HTML för att

definiera hur innehållet ska presenteras!

CSS 1 (1996)

CSS 2 (1998)

CSS 2.1 (2011)

CSS 3 (Start 1999 - Under utveckling)

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

4

Varför CSS?

CSS är en samling formateringsregler

som styr utseendet på en eller flera

webbsidor.

Med CSS skiljer man mellan

innehåll/struktur och

utseende/presentation.

Med CSS får du bättre kontroll över

layout, teckensnitt, färg, bakgrund och

mycket mer!

Man får renare HTML-dokument som är

lättare att felsöka och är oftast

tillgängliga/sökmotorvänliga!

HTML

CSS

HTML

HTML

HTML

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


TVÅ OLIKA OCH HELST SEPARATA SKIKT

HTML

• Struktur(Rubrik. Stycke. Lista, Tabell m.m).

• Innehåll (text).

CSS

•Presentation (Formatera text, rubriker, länkar. Kantlinjer. Marginaler m.m.)•Utseende (Layout. Menyer. Bakgrundsbilder m.m.)

Kom ihåg!

I HTML koncentrerar du dig på att strukturera innehållet

(semantik).

I CSS arbetar du med presentation och utseende.5

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

NÅGRA EXEMPEL

WWW.CSSZENGARDEN.COM

CSS Zen Garden är en

välkänd och inflytelserik

webbplats vars syfte är att

visa upp vad man kan

åstadkomma inom

webbdesign med CSS.

Den skapades av

webbdesignern Dave Shea

2001 och målet är att

inspirera och uppmuntra

användandet av

webbstandarder med

vackra och avancerade

exempel.6

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

http://www.csszengarden.com/


7

HTML

”Innehåll”

CSS

”Utseende”

Webbsida

”CSS–baserad design”

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

8

Skapa en CSS-Regel

Väljare (Selektor)

{

Egenskap: värde;

Egenskap: värde;

...

}

Dekla

ratio

n

Reg

el

Använd semikolon ; för att separera flera egenskaper!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


9

Skapa en CSS-Regel

Exempel

body

{

color:red;

}

Dekla

ratio

n

En C

SS

-Regel

Väljare (Selektor)

Egenskap

Värd

e

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

10

Koppla HTML och CSS

Metod 1: Intern CSS (i head)Kallas även Inbäddad format eller Rubrikformat

Skriv CSS-reglerna i dokumenthuvudet i taggen <style>

<!doctype html>

<html>

<head>

<title>CSS</title>

<style type="text/css">

body {color:red;

}

</style>

</head>

<body>

Lite text i kroppen.

</body>

</html>

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


11

Koppla HTML och CSS

Metod 2: Extern CSS (separat CSS-fil)

Skriv CSS-reglerna i en separat CSS-fil (t.ex. style.css)

Länka till CSS-filen med hjälp av en taggen <link>

<!doctype html>

<html>

<head>

<title>Hemsida med CSS</title>

<link href="style.css"

rel="stylesheet" type="text/css">

</head>

<body>

Lite text och annat smått och gott!

</body>

</html>

body{

color:red;

}

index.html

style.css

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

12

Koppla HTML och CSS

Metod 3: Inline CSS (i taggen)

Kallas även Inbyggda eller Infogade CSS

Inline CSS innebär att man skriver CSS-egenskaper direkt i

HTML-taggar med hjälp av attributet style.

Exempel

<p style="color:blue;">

Blå text och lite annat smått och

gott.

</p>

OBS!

Grundtanken är att separera innehåll från utseende därför bör

man använda denna teknik i undantagsfall!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


13

/* Kommentarer i CSS */

Kommentarer i CSS anges mellan /* och */

/* En kommentar kan placeras var som

helst i koden vilket gör det lättare

att senare förstå vad som var tanken

bakom en viss kod.

Du kan även använda en kommentar för

att bortkommentera kod! */

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

14

Teckensnitt och textformatering Egenskapen font-family ändrar standard teckensnitt.

font-size sätter teckenstorlek.

Storleken anges i följande enheter:

px : pixlar (bildskärmsupplösning)

pt : punkter (1 pt = 1/72 tum)

in : tum (inch), cm : centimeter och mm : millimeter

pc : pica (1 pc =12 punkter)

% : Procent (relativ till andra element)

em : Relativ storlek. Ex. Om webbläsaren standard-teckenstorlek

är 16px då blir 1em = 16px, 2em = 2x16 = 32px, 1,5em=? (Räkna

ut själv!)

Egenskapen color sätter teckenfärg. Här kan du ange färgnamn,

hexnummer eller RGB-värde.

Med egenskaper font-style kan du ange kursivstil.

Med egenskaper font-weight kan du ange fetstil.

Med egenskaper font-variant kan du ange SMALL-CAPS (KAPITÄLER).

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


15

CSS Web Safe Fonts – Olika familjer!

Läs mer: http://www.w3schools.com/cssref/css_websafe_fonts.asp

Serif

Fonts

Georgia, serif

"Palatino Linotype", "Book Antiqua", Palatino, serif

"Times New Roman", Times, serif

Sans-Serif Fonts

Arial, Helvetica, sans-serif

Arial Black, Gadget, sans-serif

"Comic Sans MS", cursive, sans-serif

Impact, Charcoal, sans-serif

"Lucida Sans Unicode", "Lucida Grande", sans-serif

Tahoma, Geneva, sans-serif

"Trebuchet MS", Helvetica, sans-serif

Verdana, Geneva, sans-serif

Monospace Fonts

"Courier New", Courier, monospace

"Lucida Console", Monaco, monospace

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

16

Textformatering - Exempelp{

font-family:Verdana, Geneva, sans-serif;

font-size:10px;

font-style:italic;

color:green;

}Kom ihåg!

Det är lättare att läsa sans-serif på en datorskärm.

Tips: http://www.w3schools.com/css/css_font.asp

T T T.1sans-serif Serif monospace

Seriffer

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

http://www.w3schools.com/cssref/css_websafe_fonts.asp

http://www.w3schools.com/css/css_font.asp


17

Formatera rubriker

h1{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

color:blue;

}

h2{


font-size:16px;

color:blue;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

18

Gruppering (Kombinera selektorer)

Gruppering innebär att man använder samma regel

(deklaration) till flera olika taggar

h1,h2{


color:blue;

}

h1{

font-size:18px;

}

h2{

font-size:16px;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


19

Textjustering

Justera text med egenskapen text-alignbody{

text-align:center; /* centrerar allt */

}

h1{

text-align:right;

/* högerjusterar alla huvudrubriker */

}

h2{

text-align:left; /* Vänsterjustera! */

}

p{

text-align:justify;

/* marginaljusterar alla stycken */

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

20

Styckeformatering

Word-spacing

Anger ordmellanrum dvs.

avstånd mellan orden.

Letter-spacing

Ökar eller minskar avståndet

mellan bokstäver eller tecken.

Text-indent

Anger ett indrag på styckets

första rad.

Line-height

Anger radhöjden. Sätter du

ett större värde än ”normal”

på ett stycke blir det större

mellanrum mellan

textraderna.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


21

Förkortade font-egenskaper

”The font shorthand property”

Med hjälp av egenskapen font kan du ange värden för

flera egenskaper i en enda rad.

Följande värden kan ställas (i ordning)

font-style

font-variant

font-weight

font-size/line-height

font-family

font-size och font-family är obligatoriska!

Exempel

p{

font:italic bold 0.75em/1.5em Georgia,serif;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

22

Bakgrundsfärger

Egenskapen background-color ändrar

bakgrundsfärgen.

body{

background-color:gold;

}

h1{

background-color:white;

}

p{

background-color:silver;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


23

Viktigt! HTML-formatering

HTML-formatering har högre prioritet än CSS-formatering vilket orsakar problem som är svåra att felsöka! t.ex.

<html>

<head>

<title>HTML formatering</title>

<style type="text/css">

body {color:gold;}

</style>

</head>

<body>

Lite text och annat!

<font color="silver">Text i font-taggen!</font>

</body>

</html>

Fr.o.m. HTML 4.0 rekommenderar W3C att använda stilmallar

istället för Font-taggen.

<font> är föråldrad och finns inte i HTML5

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

24

Övning

<html>

<head>

<link href="style.css"

rel="stylesheet"

type="text/css">

</head>

<body>

Lite text direkt i body.

<p style="color:black;">

Svart text.

</p>

<p>Lite text i ett stycke

(p).

</p>

<h1>Rubrik 1</h1>

<h2>Rubrik 2</h2>

</body>

</html>

body{

color:red

}

p{

font-family: Verdana;

font-size: 14px;

color: green

}

h1,h2{

font-family:Arial;

color:blue

}

h1{

font-size:24px

}

h2{

font-size:20px

}

style.csstext.html

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


25

HEX Färger

Färgkodningen i HTML och CSS sker enligt det

Hexadecimala talsystemet.

Några exempel:

Vit #FFFFFF

Svart #000000

Röd #FF0000

Blå #0000FF

http://www.w3schools.com/cssref/css_colors.asp

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

26

Arv

Arv är en viktig princip i CSS

Ett "barn-element" är ett element (en tagg) som

skrivs inuti ett annat element.

Barn ärver förälderns egenskaper.

Exempel

body {color:green; }

p {font-family:Verdana;}

Här ärver p egenskapen color från body

<html>

<head> <body>

<p>

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

http://www.w3schools.com/cssref/css_colors.asp


27

Arvselektorer

Arvselektorer används för att välja element som är

avkomlingar till andra element. Exempel:

a {color:#000; }

li a{text-decoration: none;}

Här sätts färgen (svart) på alla länkar och sedan tas

understrykningen bort enbart från länkar inuti

listelement.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

28

Vad betyder Cascading?

Cascading (kaskaden eller kaskadkoppling) innebär

att stilmallar kan överlappa varandra!

Ibland kan flera egenskaper säga emot varandra.

För att lösa detta behöver webbläsaren följa en

”Kaskadordning” (Prioritetsordning) som anger i

vilken ordning olika egenskaper ska gälla.

Viktigt!

CSS har stöd för

Överlappande regler!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


29

Olika typer av stilmallar

Webbläsarmallar

Webbläsarens standardmallar t.ex.

Teckenstorlek i de flesta webbläsare är 16px.

Användarmallar

En användare som besöker webbplatsen kan skapa

egna stilmallar d.v.s. ändra webbläsarens

standardmallar.

Författarmallar

Dessa är webbdesigners mallar och kallas för

huvudmallar! Dessa kan placeras i

Separata CSS-filer.

Taggen style i head.

Attributet style inuti en tagg.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

KASKADORDNING

Webbläsarmallar(Standardmallar)

Användarmallar

Externa MallarSeparata CSS-filer

Interna Mallar(Taggen Style i head)

Inline-Mallar(Attributet Style inuti en tagg)

OBS! Länken (link-taggen) till externa

mallar som placeras nedanför interna

mallar (style-taggen) har högre

prioritet.

Webbläsaren läser in ett HTML-

dokument uppifrån och ned!

Regler som läses in sist har högre

prioritet!

Tips! Kaskaden betyder vattenfall

30

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

Författarmallar (Huvudmallar)

Högst prioritet


INSPEKTERA I WEBBLÄSARE

31

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

32

CSS Övningar

Skapa en enkel hemsida med en huvudrubrik (h1)

och ett stycke (p). Använd Lorem Ipsum som

exempeltext.

Skapa en extern länk (tex. till Google).

Ändra sidans bakgrundsfärg (valfri färg).

Formatera rubriken med Arial, 1.5em och valfri

teckenfärg.

Centrera rubriken.

Formatera stycket med Verdana, 0.75em och valfri

teckenfärg.

Formatera länken. Ta bort understrykning och

ändra färg vid överrullning.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


33

CSS klasser

Du kan dela in dina regler i olika klasser.

Detta underlättar strukturering av webbsidan.

Med klasser specificerar man en regel som kan

återanvändas.

En klass kan användas i valfritt HTML-element.

Klasser ger möjlighet att skapa ett enhetligt

utseende!

Använd CSS klasser om du t.ex. vill att olika

stycken skall se olika ut!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

34

Skapa en klass

<head>

<style>

.centrera {

text-align: center;

}

</style>

</head>

<body>

<p class="centrera">Lite text och annat

smått och gott.</p>

</body>

OBS!

Klassnamn får inte påbörjas med en siffra

Observera

punkten

Här

används

klassen

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


35

Övning

Skapa ett HTML-dokument som innehåller 3

stycken (3 p-taggar)!

Skapa en CSS-regel som formaterar p enligt

följande: Verdana, 0.75em.

Skapa en CSS-klass som formaterar texten enligt

följande: Arial, fetstil. Namnge klassen som

ingress.

Koppla klassen ingress till det första stycket i

dokumentet!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

36

Google Fonts

Google Fonts är en gratis tjänst som erbjuder icke-standard

typsnitt som webbdesigners kan enkelt använda på

webbsidor. http://www.google.com/fonts

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

http://www.google.com/fonts


FÖRHANDSGRANSKA FONTER

Du kan förhandsgranska ett ord,

en mening eller ett stycke.

Du kan ange eget text.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

37

38

Steg 1: Choose

Välj en eller flera fonter genom att klicka på

knappen ”Add to Collection”

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


39

Steg 2: Review

Klicka på knappen ”Review” för att gå igenom dina

valda fonter!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

40

Steg 3: Use

Klicka på knappen ”Use” för hämta koderna!

Kopiera link-taggen och klistra in i HTML-

dokumentets huvud (head-taggen)

Använd CSS-egenskapen font-family för att välja en

font t.ex.

font-family: 'Crafty Girls', cursive;

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


FORMATERA ETT STYCKE MED GOOGLE WEB

FONTS

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

Tips!

Ge webbplatsen en god läsbarhet

http://www.webbriktlinjer.se/r/39-ge-webbplatsen-en-god-

lasbarhet/41

42

Skuggeffekter i CSS 3

Egenskapen text-shadow lägger till skugga.

OBS! Stöds inte i IE9 och tidigare versioner!

Exempel

h1{

font-family: 'Tangerine', serif;

font-size: 48px;

text-shadow: 4px 4px 4px #aaa;

}

Tips!

https://developers.google.com/webfonts/docs/getting_started?hl=sv-SE

http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

http://www.webbriktlinjer.se/r/39-ge-webbplatsen-en-god-lasbarhet/

https://developers.google.com/webfonts/docs/getting_started?hl=sv-SE

http://www.w3schools.com/cssref/css3_pr_text-shadow.asp


43

Boxmodellen - Introduktion

Boxmodellen är en av de viktigaste grundbegreppen i CSS.

Boxmodellen används för att bl.a. ange bredd, höjd, utfyllnad

(padding), kantlinjer (border) och marginaler på HTML-

element.

Alla CSS-baserade webbsidor består av ett antal boxar!

http://www.w3schools.com/css/css_boxmodel.asp

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

44

Margin och Padding

Margin anger marginaler d.v.s. avståndet mellan

kanten på ett element och ett annat element.

Padding anger utfyllnaden d.v.s. avståndet mellan

innehållet i ett element och elementets kant.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

http://www.w3schools.com/css/css_boxmodel.asp


MARGIN – EXEMPEL 1

margin:100px;

anger 100 pixlar på topp-, höger-,

botten- och vänster-marginaler!

Alltså samma som

margin-top: 100px;

margin-right: 100px;

margin-bottom: 100px;

margin-left: 100px;

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

45

MARGIN – EXEMPEL 2

margin:100px 200px;

anger 100 pixlar på topp och

botten marginaler.

Och 200 pixlar på höger och

vänster marginaler!

Alltså samma som

margin-top: 100px;

margin-right: 200px;

margin-bottom: 100px;

margin-left: 200px;

Tips!http://www.w3schools.com/css/css_margin.asp

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

46

http://www.w3schools.com/css/css_margin.asp


47

Padding - Exempel

padding:50px;

Anger 50 pixlar på topp-, höger-, botten- och vänster-

padding.

padding:20px 10px;

Anger 20 pixlar på topp- och botten-padding

och 10 pixlar på höger- och vänster-padding!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

top

bottom

right

left

48

Kortformer för margin och padding

padding:10px 20px 30px 40px;

margin: 10px 20px 30px 40px;

Anger 10 pixlar topp, 20 pixlar höger,

30 pixlar botten och 40 pixlar vänster

margin/padding.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

48


49

Ett sätt att centrera ett block

Automatiska marginaler till höger och vänster och

en fast bredd centerar ett block.

Exempel

.container{

width: 960px;

margin: 0 auto;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

KANTLINJER

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

50

border: 1px solid #000

border-width

border-color

border-style


KANTLINJER - OLIKA STILAR

SNYGGT :-)

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

51

KANTLINJER - FLERA EXEMPEL

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

52


BOXMODELLEN - EXEMPEL

Tips: http://www.w3.org/TR/CSS21/box.html

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

53

54

Tips! Undersök Boxmodellen i Chrome

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

http://www.w3.org/TR/CSS21/box.html


KANTLINJER RUNT BILDER

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

55

56

Kantlinjer runt bilder - Exempel

.kant1 {

border: 10px solid #000;

}

<img class="kant1" src="bild.jpg">

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

56


57

Övningar

1. Skapa en ny Webbplats

2. Skapa ett HTML-dokument.

3. Skriv några rubriker och lägg till lite Lorem Ipsum.

4. Formatera utseendet och rubrikerna (valfri formatering).

5. Skapa en CSS-klass som visar en textruta som en post-it lapp

(gul bakgrund med kantlinjer, testa även runda hörn).

6. Koppla klassen till ett valfritt stycke.

7. Flytta alla CSS-regler till en extern CSS-formatmall.

8. Skapa 3 nya HTML-sidor.

9. Koppla samma formatmall till alla sidor.

10. Länka alla sidor till varandra.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

58

Bakgrundsbilder

Ange sökväg och

filnamn till

bakgrundsbilden

background-repeat anger hur bakgrundsbilden ska visas på sidan.

Standardinställningen är upprepning (repeat) alltså bilden upprepas sida

vid sida och över och under.

Värdet no-repeat visar bakgrundsbilden en gång.

repeat-x upprepar bakgrundsbilden i horisontell ledd. repeat-y upprepar

bakgrundsbilden i vertikal ledd.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


59

Egenskapen background-position (x,y)

background-position anger placeringen av bakgrundsbilden

Exempel:

background-position: right bottom

x

y

Bakgrundsbilden visas

längst ner till höger

x y

Övningcentrera

bakgrundsbilden

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

body {

background-image: url(images/bg.jpg);

background-repeat: repeat;

}

body {


background-repeat: no-repeat;

}

body {


background-repeat: repeat-y;

}

body {


background-repeat: repeat-x;

}

Egenskapen background-repeat

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

60


61

Egenskapen background-attachment

background-attachment anger om bakgrundsbilden ska ha en fast

placering (fixed) eller rullas med innehållet (scroll).

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

62

Block- och Rad-element (Inline-element)

Blockelement visas normalt som textblock med

radbrytningar och marginaler före och efter, tex.

Rubriker, stycken och citatblock.

Radelement (inline) visas inte som block. Innehållet

visas i den aktuella raden och det visas inga

radbrytningar och marginaler före och efter, tex.

strong, em och a (länkar).

Med hjälp av egenskapen display kan du ändra

block till inline och vise versa, t.ex.

a{

display:block;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


CONTAINER-ELEMENT

Div är ett blockelement.

<div> är en container som

upptar hela området som

ska formateras med CSS.

div{

background-color: gold

}

<div>En div</div>

Span är ett inline-element.

<span> är en container som

bara formaterar ett område lika

stort som innehållet.

span{

background-color: gold

}

<span>En span</span>

<div> <span>

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

63

REPETITION - BOXMODELLEN

SKAPA BOXAR MED DIV-TAGGAR

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

64


65

Id-regler Id-regler används oftast för att bygga CSS-

baserade menyer och sidlayouter.

Id-regler får inte återanvändas!

Id används för endast ett HTML-element.

#logo {

font-family:Georgia;

font-size:26px;

color:#CC3300;

}

<div id="logo">LOGOTYP</div>

# betyder

Id-Regel

(Id-väljare/

Id-selektor)

Attributet id

används för

att koppla

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

66

CSS Listor

Punktlistor <ul> och Numrerade

listor <ol> kan formateras med

CSS.

Egenskapen list-style-type anger

listelements format (punkter eller

siffror).

list-style-type:none

tar bort punkarna

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


67

Egna bilder i punktade listor

Med egenskapen list-style-image kan du ange en anpassad

bild för alla punkter.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

68

Vertikala CSS menyer

En navigeringsmeny i CSS

består av två delar:

1. En punktlista med länkar till

andra sidor på webbplatsen.

2. En CSS formatmall som

formaterar alla element i listan

t.ex. ul och a.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


69

Att skapa en vertikal CSS-meny

Steg 1

Skapa en UL-lista i HTML-dokumentet.

Markera ul-taggen med ett ID-attribut tex. <ul id="navigation">

Tips! Nummertecknet (#) används för att aktivera

”tomma länkar” i webbläsaren!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

70


Steg 2

Förberedd CSS-kod med selektorerna för

formatering av alla element i listan.

Identifieraren #navigation används för att vara

säker på att formatera just denna specifika lista och

inta alla listor och länkar i dokumentet!

ul#navigation { }

ul#navigation a { }

ul#navigation a:hover { }

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


71


Steg 3

Formatera UL-taggen.

Här behöver vi nollställa marginaler och ta bort

punkarna med egenskapen list-style-type

ul#navigation

{

margin:0;

padding:0;

list-style-type:none;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

72


Steg 4

Formatera A-taggen!

<a> är ett inline-element dvs. formaterar ett område lika stort som

innehållet. För att ändra till blocknivå använder vi display:block;

Ta bort understrykning med text-decoration:none;

Ändra teckenfärg, bakgrundsfärg, bredd, padding och kantlinjer!

ul#navigation a{

display:block;

text-decoration:none;

color:#fff;

background-color:#036;

width: 100px;

padding:10px;

border-bottom: 1px solid #fff;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


73


Steg 5

Lägg till en överrullning (Hover-effekt)

Använd a:hover för att ändra utseendet på länkar

när musmarkören förs över dem.

Här räcker det att ändra teckenfärg och

bakgrundsfärg.

ul#navigation a:hover

{

color: #000;

background: #69C;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

TIPS! LISTAMATIC

HTTP://CSS.MAXDESIGN.COM.AU/LISTAMATIC/

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

74

http://css.maxdesign.com.au/listamatic/


75

Flytande element (float)

Egenskapen float anger om ett visst element ska ligga till

vänster eller till höger i förhållande till andra element.

.box {

background-color: #FF0;

margin: 10px;

padding: 10px;

height: 100px;

width: 100px;

border: thin solid #00F;

float: left;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

<body>

<div class="box">1</div>

<div class="box">2</div>

</body>

76

float exempel 2

.box {


margin: 10px;

padding: 10px;

height: 100px;

width: 100px;


float: right;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


77

Dynamiska flytande element

.box {


margin: 1%;

padding: 1%;

height: 200px;

width: 45%;


float: left;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

78

Problem med float

Försök att skapa följande

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015<body>

<div class="top">Top 1</div>


<div class="bottom">Bottom</div>

</body>


79

Problem med float fort.

Det räcker inte att ta bort float från nästa element!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

.top {


margin: 10px;

padding: 10px;

height: 100px;

width: 100px;


float: left;

}

.bottom {

background-color: #0F0;

margin: 10px;

padding: 10px;

height: 100px;

width: 240px;


}

80

Rensa flytande element (clear)

Egenskapen clear rensar flytande element!

clear förhindrar element att flyttas till vänster eller till höger.

clear:both rensar allt (höger och vänster).

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015.rensa{

clear:both;

}

. . .





<br class="rensa">



Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

.top {


margin: 10px;

padding: 10px;

height: 100px;

width: 100px;


float: left;

}

.bottom {

background-color: #0F0;

margin: 10px;

padding: 10px;

height: 100px;

width: 240px;


}

.rensa{

clear:both;

}

<body>



<br class="rensa">


</body>

81

82

Horisontella menyer

Öppna dokumentet som innehåller den vertikala

menyn som du har skapat förra veckan!

Om man lägger till float med värdet left i CSS-

reglen som formaterar länkarna så får man en

horisontell meny!ul#navigation a{

display:block;

text-decoration:none;

color:#fff;

background-color:#036;

width: 100px;

padding:10px;

border-bottom: 1px solid #fff;

float:left;

}

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


PLACERING (POSITIONERING)

Position

static relative absolute fixed

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

83

84

Statisk placering

Placeringen styrs av

ordningsföljden i HTML-koden.

Detta är standardplaceringen för

alla HTML-element som går att

placera

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


85

Relativ placering

Placeringen är relativ i förhållande till boxens statiska position.

Boxen flyttas med hjälp av koordinater för över- och

vänsterkant!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

86

Absolut placering

Med absolut placering kan du ange exakt var på sidan ett

element ska visas med hjälp koordinater för bl.a. över- och

vänsterkant (top, left)!

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


87

Fixerad placering

Här placeras (fixeras) ett element i förhållande till

webbläsarens fönster. Detta innebär att elementet

kommer att finnas vid i samma plats även när du

rullar (skrolla) i dokumentet.

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

FIXERAD PLACERING - EXEMPEL

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

88


89

CSS LAYOUTER

Fast

Bredd anges i pixlar

Flytande

Bredd anges i procent

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

90

CSS Fast Layout - En kolumn, centrerad

body {

margin: 0;

padding: 0;

background: #CCC;

}

/* Container är en behållare som

omsluter alla element */

.container {

width: 800px;

/* Fast bredd anges i pixlar */

margin: auto;

/* Automatiska marginaler

tillsammans med bredden centrerar

layouten */

background: #FFF;

}

/* Innehållet placeras i en div med

klassen content */

.content {

padding: 10px;

background: #FFF;

}

<body>

<div class="container">

<div class="content">

<h1>CSS Fast Layout</h1>

<h2> En kolumn, centrerad</h2>

<p>Lorem ipsum dolor sit amet,

consectetur adipisicing elit, sed

do eiusmod tempor incididunt ut

labore et dolore magna aliqua.

</p>

</div>

</div>

</body>

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


CSS Flytande Layout - en kolumn

body {

margin: 0;

padding: 0;

background: #CCC;

}

.container {

width: 80%;

/* Flytande bredd anges i procent */

margin: auto;

/* Automatiska marginaler

tillsammans med bredden centrerar

layouten */

background: #FFF;

}

.content {

padding: 10px;

background: #FFF;

}

<body>



<h1>CSS Flytande Layout</h1>

<h2> En kolumn</h2>

<p>Lorem ipsum dolor sit amet,

consectetur adipisicing elit, sed

do eiusmod tempor incididunt ut

labore et dolore magna aliqua.

</p>

</div>

</div>

</body>

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

91

92

CSS Fast Layout - Två kolumnerbody {

margin: 0;

padding: 0;

background: #CCC;

}

.container {

width: 800px;

margin: auto;

background: #FFF;

}

.content {

width: 580px;

float: left;

padding: 10px;

background: #FFF;

min-height:300px;

}

.sidebar {

width: 180px;

float: left;

padding: 10px;

background: #FFC;

min-height:300px;

}


<div class="sidebar">

<h1>Vänster</h1>

</div>


<h1>CSS Fast Layout</h1>

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015


93

Tips: Gratis CSS mallar

http://templated.co

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

Tips: Hela kapitel 3, Stilmallar (76 sidor)

finns att läsa gratis!

Ladda ner från webbacademy.se

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

94


95

Övningar

1. Skapa en webbplats som innehåller 3 sidor

Start (Hem): Skriv ditt namn (H1) och visa din bild.

Formatera ditt namn med en snygg ”Google Font”.

Meritförteckning: Skriv ditt CV. Formatera rubriker och

text med CSS.

Kontakt: Skriv dina kontaktuppgifter. Skapa en epost-

länk.

Skapa en horisontell meny där du länkar alla sidor till

varandra.

Placera allt i mitten av webbläsarfönstret. Lägg till

kantlinjer och runda hörn runt sidorna.

All CSS-kod ska sparas i en separat fil (Extern CSS).

2. Gå igenom CSS Tutorial på W3Schools

http://www.w3schools.com/css

Copyrig

ht M

ahm

ud A

l Hakim

, mahm

ud@

dynam

icos.s

e, 2

015

95

Documents

WEBBAPPLIKATIONER MODUL 2 - CSS · Positionering CSS Layouter 2. CSS, Cascading Style Sheets 2 3 Introduktion till stilmallar, CSS CSS står för ”CascadingStyleSheets” CSS är