Introduktion til CSS Videre med CSS. Body egenskaber Body-markøren omslutter alle vores indholdselementer. Du kan derfor ved at tillægge en række egenskaber,

Præsentationer af emnet: "Introduktion til CSS Videre med CSS. Body egenskaber Body-markøren omslutter alle vores indholdselementer. Du kan derfor ved at tillægge en række egenskaber,"— Præsentationens transcript:

1 Introduktion til CSS Videre med CSS

2 Body egenskaber Body-markøren omslutter alle vores indholdselementer. Du kan derfor ved at tillægge en række egenskaber, manipulere ved hele dokumentets form og udseende. Eksempel Lidt nyttig info: HTML kommentarmarkøren er Hvor stylesheet kommentarmarkøren ser således ud: /* */

3 Praktiske eksempler på tekst formatering Der hører mere til et tekstbillede end skriftens navn & størrelse. Øvrige egenskaber som kan knyttes til teksten er: Letter-spacing = der sætter afstanden imellem bogstaverne i teksten Line-height= der sætter skydningen imellem linierne i en tekst Text-align= der justerer teksten i forhold til det overordnede element Text-decoration= der sætter linier over, under eller igennem teksten Text-indent= der indrykker den første linie i et tekstelement Text-transform= der ændrer teksten fra store til små eller vice versa Vertical-align= der justerer teksten lodret i forhold til det overordnede element

4 Praktiske eksempler på tekst formatering Der hører mere til et tekstbillede end skriftens navn & størrelse. Øvrige egenskaber som kan knyttes til teksten er: Font-family= der vælger hvilken skrifttype man ønsker at anvende Font-style= der åbner for generel formning af teksten Font-size= der definerer teksten i absolut- (px) el. relativ (%) skriftstørelse Letter-spacing = der sætter afstanden imellem bogstaverne i teksten Line-height= der sætter skydningen imellem linierne i en tekst Text-align= der justerer teksten i forhold til det overordnede element Text-decoration= der sætter linier over, under eller igennem teksten Text-indent= der indrykker den første linie i et tekstelement Text-transform= der ændrer teksten fra store til små eller vice versa Vertical-align= der justerer teksten lodret i forhold til det overordnede element Color= der definerer tekst farven mm.

5 Justering af billeder & tabeller med float egenskaben Traditionelt bruger vi align-attributten til at placere et element i enten højre eller venstre margin af websiden. Der er forskellige ulemper forbundet ved denne metode, derfor foreslår jeg at du anvender float- egenskaben til dette formål. Se eksempel på et img float her…

6 Du skal nu gå ind på ITs Learning og i mappen /V1 materialer/Litteratur & kompendier/ finder du en PDF fil ved navn, CSS - referenceoversigt. Læs den grundigt igennem. Når du har gjort det, skal du kalde på Jørgen for at få åbnet opgave 007 – Tilpas og leg med denne dropdown menu inde på ITs Learning