Hop til teksten

IT FJERNUNDERVISNING
- IT kurser når Du har tid!

CSS

 

CSS er en temmelig stor mundfuld, så jeg har forsøgt at udvide beskrivelsen lidt her - start her!

 

  • Hvad er CSS?
  • Opret CSS
  • Definition af layout af HTML elementer
  • Kæde til typografiark
  • Oprettelse af egne typografier

Hvad er CSS?

CSS står for Cascading Style Sheets og giver os mulighed for at styre fonte, farver mm. ét sted. Det minder lidt om typografierne i Word - på dansk kalder vi det typografiark. Vi arbejder med to typer af typografi ark:

  • Interne - her står typografidefinitionerne i toppen af det enkelte dokument
  • Eksterne - her har vi typografidefinitionerne liggende i en selvstændig fil, som de enkelt dokumenter kan henvise til

Man kan godt kombinere de to typer af typografidefinitioner - og der er så her kaskaderne kommer ind i billedet. Styringen af typografierne virker nemlig sådan, at man yderst har et sæt af standard typografidefinitioner (defineret af browseren), dernæst kan vi have et eksternt typografiark, der kan ændre visse af standard definitionerne og der hvor det eksterne typografiark ikke angiver noget bliver standard definitionerne brugt (de kaskader igennem). Næste led i kaskaden kan være et internt typografiark der igen kan ændre visse af definitionerne i de to foregående og der for det interne ark ikke definerer noget slår definitionerne fra de to foregående igennem. Endelig kan man lave helt lokal formatering, som så bliver "vinderen".

Læren af dette er:

  • Brug ALDRIG lokal formatering af din tekst (med mindre du ikke er interesseret i at kunne styre fonte og farver centralt)
  • Brug i stedet standard typografierne Heading 1-6 etc. og styr dem med internt eller eksternt CSS

Opret CSS

Når du vil oprette et nyt typografiark er processen følgende:

  • I højre side af skærmen har du et Design panel, der bruges til dette:
  • Dobbeltklik på CSS Styles så panelet folder ud
  • Klik på for at oprette ny typografidefinition
  • I næste vindue skal du forholde dig til, hvad du egentlig vil:
  • Vælg f.eks. "Tag (redefines an HTML element)" i den øverste del for at lave om på f.eks. h1 tagget
  • Skriv h1 i "Selector Name"
  • og vælg "(New Style Sheet File)" nederst for at lave et eksternt stylesheet
  • Klik OK og ja du er sikker på at du vil bruge h1
  • Giv dit stylesheet et fornuftigt navn
  • Du kommer nu frem til kernen i definitionne - det er her du skal lave alle de indstillinger du vil have til at gælde for tagget:

 


Kæde til typografiark

Når du nu har fået oprettet et typografiark, vil det jo være dejligt, hvis det også kunne komme til at virke på de andre dokumenter på sitet. Det er forholdsvis simpelt.

  • Åben det dokument, typografiarket skal virke på
  • Klik på knappen i Design panelet
  • Find dit typografiark og klik ok

 


Test af typografi

Når du har kædet dit dokument og dit typografiark sammen kan du teste resultatet ved at bruge de html koder du har lavet formatering for i dokumentet - f.eks. Heading 1 (H1).


Opret egne typografier

Man kan også oprette egne typografier.

  • Klik på får at åbne vinduet
  • Vælg "Class (can apply to any HTML element)"
  • Skriv et fornuftigt navn til din typografi ud for "Name:"
  • Vælg dit typografiark i bunden
  • Klik OF og
  • Lav de typografi indstillinger du vil have

Din typografi dukker nu op i Design panelet til højre

 


Brug egne typografier

Når du vil anvende din egen typografi i dokumentet foregår det i egenskabsvinduet i bunden som vist her

 


Læs mere om CSS

Indtil jeg får skrevet mit eget materiale om css kan du finde mere information her: http://www.webhints.dk/css_tur/css_forside.php

og hos http://www.w3schools.com

 

Når du har betalt for kurset får du adgang til øvelser til hver lektion. Og når du har fået godkendt din besvarelse får du desuden adgang til mine løsningsforslag med ekstra tips og trix.