CSS
- 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