CSS
CSS står for Cascading Style Sheets. Det bruges til, at designe udseendet på sin hjemmeside og refereres og navngives i HTML dokumentet. CSS er med til, at adskille struktur og udsende på en side. CSS bruges eksempelvis til at indsætte baggrundsbillede, baggrundsfarve, skrifttype, skriftstørrelse og meget andet. CSS bruges også til at loade en side hurtigere, ved brug af eksternt stylesheet.
Hvor skriver man CSS?
CSS kan skrives 3 forskellige steder. Man kan vælge at indsætte sin:
-
Embedded stylesheet
Indsættes i <stylel> </style> i <head> elementet. -
Inline stylesheet
Her skrives CSS koden direkte i html linjerne. -
Eksternt stylesheet
Her linkes der til en ekstern stylesheet. Sørger for CSS og HTML er adskilt.
Det gør det også nemmere at rette i sit stylesheet, hvis man har mange HTML sider. Her skal man kun rette i css dokumentet.
CSS Syntax
Selector:
Beskriver hvad det er, der skal styles på. Det kunne være en bestemt klasse eller et bestemt ID. Det kunne også være header, nav, et heading element, som h1 eller andet på siden.
I eksemplet nedenfor tager jeg udgangspunkt i en h1 overskrift
Man starter med, at angive hvad man vil style. Hvor efter man indsætter en krøllet parentes, der peger ind mod selector og en krøllet parentes, der peger den anden vej.
Eksempel:
h1 { }
Ind imellem de to krøllede parenteser skriver vi vores egenskab vi vil ændre på efterfulgt af kolon, det kunne i det tilfælde være skriftstørrelsen på vores h1 tag og skrives således:
h1 {font-size:}
Efter kolon indsættes værdien, der ønsker vores egenskab skal have og lukker den ved brug af semikolon. Hvis vi eksempelvis vil have alle h1 tags til at være i størrelse 22px, vil vi skrive sådan:
h1 {font-size: 22px;}
Vi kan tilføje andre CSS egenskaber og værdier til den samme selector, ved at indsætte dem efter vores semikolon.
DE PRIMÆRE SELECTORS
-
Type/element selector
Bruges til helt almindelige tags som h1, body, header, fotter osv. -
Id selector
Bruges når det er et specifikt element med et bestemt ID der skal styles. Selector i CSS for ID starter med # efterfulgt af ID navn, som eksempelvis:
#undermenu {} -
Class selector
Bruges når flere elementer skal styles ens. Selector i CSS for classes starter med et punktum, efterfulgt af class navn som eksempelvis:
.klassenavn {} -
Pseudo-class selectors
Eksempelvis a:link og a:visited
Strukturelle selectors (decendant)
Med denne form for selector kan man mere specifikt gå ind og udpege et element inde I et andet element. Det kan eksempelvis være vi gerne vil style a i vores nav.Skrives således i css:
a nav{ font-size 22px; }
Child selectors
Bruges når man gerne vil udpege mere specifikt, hvad man vil have ændret. Her separeres der med en pil ”>”
Som eksempel kan vi tage denne kode:
div > p {
Background-color:yellow;
}
Den fortæller at alle p’er hvor forældrene er en div og give dem en gul baggrundsfarve.
Kaskade regler
Går ud på, at den sidste CSS-regel der er skrevet, er den der gælder.
Kunne eksempelvis være vi har et element øverst oppe, som vi har givet en styling, hvorefter vi definere en styling for p tagget nederst i koden igen. Den nederste kode vil være den, der træder i kraft.
Boxmodellen
Når vi indsætter indhold i tags, tegner browseren rektangler udenom indholdet. Hver tag bliver vist inde i et rektangel. Boxmodellen udspringer fra de præmisser. Ved at bruge boksmodellen kan vi fortælle vores browser præcis, hvordan vi vil have vores indhold skal blive vist. CSS boxen indeholder 4 slags kanter, som er relative i forhold til hinanden.
- Indeholdets kant
- Padding kant
- Border kant
- Margin kant
Forklaring af boxmodellen
Padding:
Når der tilføjes padding på indholdet i boksen, udvider man boxens faktiske størrelse. Hvis boxen eksempelvis er 100px bred, og man tilføjer en padding der hedder: 20 20 20 20px, rundt om indholdet i den, vil boxens oprindelige størrelse udvides fra 100px til 140px, For at undgå dette kan man tilføje en ”box-sizing: border-box; ”, som fortæller at boksen skal beholde sin oprindelige størrelse, ved at padde indholdet indad i stedet for udaf.
Border:
Udenom padding har vi det vi kalder border. Border er synlig i forhold til padding, der fungerer som luft. En border kan være i forskellige tykkelser og farver. En border kan eksempelvis være solid, dashed eller dotted. Ligesom padding, bliver borderen også tilføjet til boxens bredde. Så hvis vi tilføjer en border med 2px hele vejen rundt, vil den udvide boxens bredde til at være 144px i stedet for de 140, da vi tilføjer 2 px i hver side.
Margin:
Rundt om border har vi det, der hedder margin. Margin bruges til alt udenfor boxen og er afstanden mellem boksen og elementerne ved siden af. Margin bruges ofte til whitespace. Margin kan gå op, ned, venstre og højre, men kan også gå i negativ retning.
Inline:
Placere sig ved siden af hinanden
Block:
Placere sig i stak efter hinanden.
Skrifttyper
Man har i koden mulighed for at indsætte forskellige skrifttyper i forskellige tykkelser, men man skal at de fonte der er på ens computer, ikke kan vises hos ens brugere, hvis ikke de har den installeret. Derfor er en god ide at bruge skrifttyper som er hostet på nettet, eksempelvis Google fonts eller Adobe Typekit.
-
Font-size
Skriftstørrelse kan angives i eksempelvis px eller em -
Font-family
Bestemmer hvilken skrifttype der bliver anvendt, kan separeres med komma. Betyder at den vælger den første, hvis ikke den er tilgængelig, tager den nr. 2 osv. -
Font-weight
Skriftens tykkelse. Kan angives som normal, bold, bolder, lighter og kan også angives i tal fra 100 – 900, hvor 400 er normal og 700 er bold
Positions
Positionering går ud på, at positionere sine HTML elementer forskellige steder på siden. Elementer kan positioneres ved hjælp af top, bottom, right og left egenskaberne, som både kan defineres i pixel, men også i %. Som standard får elementerne position static egenskaben.
Static
- Er standard ved alle elementer der ikke har fået en position.
- Kan ikke benytte, bottom, top, right, left
Fixed
- Benytter bottom, top, right og left.
-
Hvis en div boks er sat til position fixed, vil den altid være det samme sted, når vi scroller. Så hvis vi for eksempel gerne vil have den 200px til højre og 10, starter vi med at give vores div en Class eller ID med navnet ”bing”, hvor vi derefter definere position i CSS. I det her tilfælde vil man skrive:
.bing { Position: fixed; left: 200px; top: 50px; }
Relativ
- Placere elmentet relativt i forhold til hvor den normal burde være placeret.
- Kan benytte bottom, top, right og left.
Absolute
- Elementet er placeret på specifikt sted
- Kan sammenlignes med relativ, udover at elementet ikke følger flowet.
Float
Float bruges til at lave et HTML element, flyde til højre eller venstre sammen med de andre elementer, der ligger omkring. Det kunne eksempelvis være et tag med noget tekst og man gerne vil have et billede til at flyder til højre i teksten, som den ligger som en del af teksten.
Et element kan enten flyde til højre eller til venstre og vil altid flyde så meget muligt til den ene side.
Hvis vi eksempelvis har en div, med et p tag indeni. Hvis vi giver tagget en class i CSS, med værden float-left, vil floate så meget til højre i div boxen, som den kan.
Et float element påvirker altid kun de elementer, der er nedenunder og ikke de elementer der er ovenfor. De påvirkede elementer kan man clear, så reglen ikke gælder dem.
Clear
Clear bruges til at fortælle hvilket element, der ikke skal floate. Her kan man bruge float: left, right, both.
Design strategier
Mobilefirst
Mobilefirst er en designstrategi, der går ud på at man som det første tager udgangspunkt i en mobil version. Her udarbejdes mobilen først, hvorefter man udvikler på desktop versionen, på baggrund af det endelige arbejde på mobil. Pga. mobilens begrænsede plads, bliver man nød til som designer at priotere sit indhold og sine funktioner. I mobilefirst bruger man min-width og går gradvist op i tallet
Desktopfirst
Desktopfirst er den gamle metode, hvor man designer desktop versionen først og på baggrund af den, designer man til mindre skærme. Denne metode er den mest velkendte igennem årene, men er blevet overhalet af mobilefirst, på grund af den stigende popularitet af smartpghones.
I desktopfirst bruger man typisk max-width, med gradvist mindre tal.
CSS grids
Css Grid er den nyeste specifikation i CSS-standarden. Det er et system som omtales som det mest revolutionerende indenfor responsiv webdesign. Css grid er et gittersystem, der gør det muligt for os at opstille vores design i det, både i rækker og kolonner.
Det gør det meget nemmere for os at placere vores elementer der hvor vi gerne vil have dem, eksempelvis hvis vi arbejder med responsiv webdesign, vil vi i nogle tilfælde gerne have ting om rokeret, så det tilpasser sig designet på forskellige skærmstørrelser. Css grid, gør det muligt at flytte rundt på elementerne, uden nødvendigvis at pille ved html filen.
Eksemplet vises nedenfor:
Sådan fungere CSS grids
Systemet fungerer på den måde at man tilføjer et sæt css regler, for et overordnet element og til dets børn. Det overordnede element har i dette tilfælde fået id-navnet #mitgrid og er det element, der indeholder alle andre elementer.
I eksemplet kan man se at vi har en div med id #mitgrid, som indeholder en række <div> med hver deres egen id og indhold.
Herefter går man ind i cssen og tildeler alle div elementerne inde i mit grid, hver deres eget id og hver deres grid-area navn. Navnet kan være bogstaver eller mere sigende ord, som menuen, footer, header eller andet. I dette eksempel giver jeg dem bogstaver fra a-e som grid areas.
Her efter giver vi #mitgrid følgende koder i CSS
-
Display: grid;
Fortæller at #mitgrid skal vises i grid. -
Grid-template-areas:
Definere hvordan opstillingen af de forskellige grid areas skal vises. -
Grid-gap:
Giver luft mellem kasserne. -
Grid-template-column: grid;
kan defineres med px, %, fraktioner. Grid template column definere hvor meget kolonnerne skal fylde i bredden. -
Grid-template-row:
Angiver højden af rækkerne, i dette tilfælde får hver række 1 fraktion i højden, hvilket gør alle bokse lige høje.
I ovenstående eksempel kan vi se at grid-template-areas er sat til følgende rækkefølge:
”a b c”
”d e e”
Her har vi givet grid-area: e; 2 pladser, hvilket resultere i at den fylder 2 fraktioner.
Se eksempel
Ved at ændre på grid-template-areas, kan vi flytte på placeringen af boksene eller størrelse. Hvis vi fx gerne vil have at D fylder 2 fraktioner og at E fylder 1 fraktion kan det skrives således:
#mitgrid {
Display: grid;
grid-gap: 5px;
Grid-template-columns: 1 fr 1fr 1fr;
grid-template-areas:
“a b c”
“d d e”
}
Se eksempel
Et tomt felt?
For at lave lade et felt stå tomt, kan vi bytte et af bogstaverne ud med et punktum, hvilket fortæller at det skal stå tomt.
Andre eksempler på hvordan man kan definere størrelser i css grid
Der findes også andre måder at definere bredder og højder på i css grid. Det kan eksempelvis gøre ved at man bruger grid-column-start og grid-column-end, som egentlig fungere på den måde at man definere hvor grid column starter og hvor den skal slutte.
Opgave
Vi fik en opgave, hvor vi skulle style en side ved brug af CSS. Opgavebeskrivelsen ses nedenfor
- Med udgangspunkt i den samme HTML-fil
- Lav to vidt forskellige layouts med anvendelse af så meget CSS som muligt
- Beskriv hvilke CSS-elementer du anvender, og hvordan de virker
-
Læg eksemplerne på serveren. Her er et link til den side jeg fik lavet:
Klik på billedet for at se et eksempel
Dag 4. Opsamling og overblik
På denne dag fik vi stillet en opgave, der gik ud på, at vi i klassen fik fordelt kapitel 4- 15, hvor vi to og to skulle arbejde med et kapitel i Pro HTML bogen, hvorefter vi skulle præsentere det vi har lært for klassen. I min gruppe skulle vi arbejde med kapitel 13 – som omhandler styling af tabeller.
Klik på billedet for at se et eksempel
Opgaver
I forbindelse med undervisningen fik vi en del øvelser i Css grid, hvor vi skulle prøve teknikken af ved at rykke rundt på indholdet. Vi skulle lave 4 forskellige øvelser, som hver i sær har deres eget design.
