Hop til teksten

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

Lidt om CSS

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

 

 

  • Hvad er CSS
  • Opret typografiark
  • Lidt om links
  • Brug af typografiark
  • Brug af egne typografidefinitioner
  • Lidt om fonte

 

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 typografiark

I Filer | Ny kan man oprette et typografi ark. Sørg for at gemme typografiarket i en passende mappe på dit web-sted.

Ude til højre kan du klikke for at oprette ny typografi

 

Læg mærke til at man både kan redigere alle eksisterende HTML tags og lave sine egne typografidefinitioner, som man kan lægge oven på eksisterende HTML tags. Når man opretter sine egne typografidefinitioner navngives de frit - bortset fra at de SKAL stare med et punktum. Kig evt. også på det eksempel, der er link til i opgaven.

 

Info om links:

Links har 4 tilstande, der alle skal/kan beskrives i typografiarket:

A:link
Defines the style for normal unvisited links.

A:visited
Defines the style for visited links.

A:active
Defines the style for active links.
A link becomes active once you click on it.

A:hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
Note: Not supported by Netscape browsers prior to version 6.

 

Brug af typografi ark

Når man har fået oprettet et godt typografiark skal man have oprettet en kæde fra den enkelte side på web stedet til typografiarket, så typografiarket får virkning. Det gør man i menuen Formater | Kæder til typografiark ...

Læg mærke til at man kan oprette kæde til alle dokumenter på en gang.

 

Brug af egne typografidefinitioner

Når man vil bruge sine egne typografidefinitioner starter man med at vælge et almindeligt HTML tag til teksten hvorefter man i boksen ude til højre vælge den typografi man vil bruge

 

Undgå autostyles

Expression har en ide om at ville hjælpe dig med at sætte styles på din tekst - det skal vi have slået fra - det gør du i Page Editor Options - det skal gerne se sådan her ud:

Lidt om fonts:

Nedenfor er der en tabel over de fonte, som man regner med der er installeret på alle computere, men husk under alle omstændigheder at angive en fontfamilie i dit typografiark, som vist i eksemplet, der er link til i opgaven.

 

Fonts
 
MAC
PC

Andale Mono

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
Y
Y

Arial MT

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
Y
Y

Arial Black

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
Y
Y

Comic Sands MS

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
Y
Y

Courier New PS MT

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
Y
Y

Georgia

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
Y
Y

Impact

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
Y
Y

Times New Roman

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
Y
Y

Trebuchet MS

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
Y
Y

Verdana

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
Y
Y

Webdings

AaBbCcDdEeFfGgHhIiJjKkLlM
Y
Y

Læs mere om CSS

Indtil jeg får skrevet mit eget materiale om CSS kan du læse mere 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.