avanceret css - appacademy.dk

App Academy www.appacademy.dk@appacademydk

Avanceret CSS


Planen

Introduktion

Opbygning af CSS

Layout med CSS

Tricks

Forskelligt layout til forskellige

enhederEt kig mod CSS 4


Kristian Langborg-Hansen

Partner i App Academy

Underviser og foredragsholder

Forfatter

[email protected]


Vælg det rigtige element

• Selectors– Id - #mitId

– Klasse - .minKlasse

– Element – h1

• Flere klasser med samme definition– Adskilles med komma

h1, h2, .billedtekst { font-family: sans-serif}

• Flere niveauer– Skrives på samme linje

.indhold h1 { font-size: 12 pt }


Box modellen

Margin

Border

Padding

Indhold


Borders

• Solid

• Dotted

• Dashed

• Double

• Groove

• Ridge

• Inset

• Outset


Layout

• Adskillelse af indhold (HTML) og udseende (CSS)


Absolut layout

• Angiver placering i absolutte koordinater (100,100)

• Angiver størrelse i absolut bredde og højde (pixels)

• Let at forstå

• Svært at styre mange komponenter

• Tager ikke hensyn til skærmstørrelse


Flydende layout

• Elementerne flyder frit efter definerede regler

• Sværere at forstå

• Tilpasser sig automatisk brugerens skærm


Layout baseret på attributter

• Anvend CSS på elementer med attributter med en bestemt værdi

– input[value=”123”] { ... }

Operator Betydning

^= Starter med

|= Starter med (hele ord)

$= Slutter med

~= Indeholder (hele ord)

*= Indeholder


Layout baseret på placering

Selector Betydning

:first-letter Første bogstav efter et element

:first-line Første linje efter et element

:before Indsæt tekst før et element

:after Indsæt tekst efter et element


Layout til første og sidste element

Selector Betydning

:first-child Første element efter et element

:last-child Sidste element efter et element


Layout til felter i formular

Selector Betydning

:enabled Aktivt element

:disabled Inaktivt element

:checked Afkrydset element

::selection Valgt element

:focus Elementet med fokus


Skydedøre

• Knapper med billeder som baggrunde

• Problem: Hvad gør man med lange og korte tekster?


CSS Media Queries

• Det rigtige CSS til den rigtige skærm

• Queries = forespørgsler

– Hvilke betingelser skal være opfyldt, før en style anvendes?

– Mere end bare print og screen


Media Types

• All

• Aural

• Braille

• Handheld

• Print

• Projection

• Screen

• TTY

• TV

• Embossed


Media Features

• Aspect ratio

– aspect-ratio

– device-aspect-ratio

• Farver

– color

– color-index

– monocrome

• Skærmstørrelse

– device-height

– height

– device-width

– Width

– resolution

• Orientering

– orientation


Kan kombineres

• @media (min-width: 700px)

• @media (min-width: 700px) and (orientation: landscape)

• @media tv and (min-width: 700px) and (orientation: landscape)

• @media (min-width: 700px), handheld and (orientation: landscape)


Tre måder

• I link-elementet– <link rel="stylesheet" type="text/css"

media="screen and (min-width: 800px)"href= "min800.css" />

• Import af stylesheet– @import url(min800.css) screen and (min-

width: 800px)

• I stylesheet’et– @media screen and (min-width: 800px)


CSS 4

• Der kommer ingen CSS 4!

• I stedet kommer CSS 4-moduler

– Image Values

– Backgrounds and borders

– Selectors

– Flexbox


CSS 4 Image Values

• Mulighed for at håndtere sprites direkte i CSS

• Fallback hvis billeder ikke kan vises

• Referencer til enkelte billeder i en animeret GIF

• Brug et andet HTML element som billede

– Automatisk opdatering


CSS 4 Backgrounds and borders


CSS 4 selectors

• Flere selectors

– Specielt til links

– Tidsrelaterede

– Hierarkiske valg

– Tabelbaserede valg

– Vælg elementet over det aktuelle


CSS4 Flexbox

• Fleksibelt layout

• Baseret på flows

• Elementers indbyrdes rækkefølge angives


App Academy

Dagens eksempler:www.appacademy.dk

Mere info om CSS og HTML:www.html5.dk

Kontakt:[email protected]

”Hos App Academy mener vi, at alle fortjener at

kunne programmere – og vi vil gerne hjælpe jer

med at lære det.”

avanceret css - appacademy.dk

Technology