Stilark-generator

Med vår kodegenerator for CSS kan du lage deg et enkelt stilark til bruk på hjemmesidene dine. Velg fra valgboksene nedenfor og endringene skjer automatisk i eksempelvinduet. Det kan være nødvendig å klikke knappen "Test CSS" for å se endringene, som du finner under "Test-visning av CSS". Klikk lenken "Mer info" for kort informasjon om valget.

Hvor fungerer denne CSS-generatoren?

I motsetning til de fleste av våre andre kode-generatorer fungerer denne bare som forventet med Internet Explorer 5.5 (5.2 for Mac) eller nyere, Netscape 6 eller nyere og Opera 7 eller nyere. Kodegeneratoren lager CSS-kode for deg i Netscape Navigator, men du vil ikke kunne se endringene du foretar deg (endring av farge, skrifttype o.l.).

Endring av fargeverdier

Du kan komponere dine egne farger ved å bruke dropplistebokene for "Rød", "Grønn" og "Blå". Den enkleste måten er å klikke og velge et tall i boksen, og deretter bruke piltaster (opp og ned) eller sidetaster (side opp og side ned) for å endre verdien i fargeboksen. I Netscape endrer fargen seg når du slipper tasten, i Internet Explorer og Opera endrer fargen seg når verdien endrer seg.

Hvor fungerer CSS-koden?

CSS-koden du lager her fungerer med de fleste nettlesere fra versjon 4 og nyere, med følgende unntak: Lenketypen "aktiv" fungerer ikke i Netscape Navigator 4 eller i Opera 4; lenketypen "hover" fungerer ikke i Netscape Navigator 4; tekst-dekorasjonen "overstreking" fungerer ikke i Netscape Navigator 4; tekst-dekorasjonen "blinkende" fungerer ikke i Internet Explorer. Stilarket du får er korrekt i.h.t. CSS 2.

Sammensetning av CSS-arket

Velg fra mulighetene nedenfor. Vi har satt sammen et testområde under som skal illustrere en hjemmeside. Der vil du se endringene du foretar deg, så som endring av bakgrunnsfarge og skriftfarge. Du nullstiller skjemaet ved å klikke "Tilbakestill" (det kan være nødvendig å måtte klikke to ganger...).

Bakgrunnsfarge [ Les info ]

Rød: Grønn: Blå:

Testvisning av CSS
Nedenfor har vi laget en ramme som illustrerer en hjemmeside og som endrer seg ut fra hva du velger ovenfor Dersom du ikke kan se noen endringer kan du klikke "Test CSS" for å "tvinge" nettleseren til å oppdatere.

Dette skal forestille et dokument med litt tekst i. Alt inne i denne rammen kan du se på som en HTML-side slik den vises i en nettleser. Tabellen nedenfor vises med ramme for at du skal se den :)

Dette er en tabellcelle.

Dette er en tabellcelle til.

Dette er en ny lenke

Dette er en hover-lenke

Dette er en aktiv lenke

Dette er en besøkt lenke

Lag CSS-kode
Ved å klikke knappen nedenfor kan du lage et stilark basert på oppsettet i skjemaet. Nedenfor finner du tre tekstbokser som fylles med CSS-kode, og mer informasjon om hvor og hvordan du bruker den koden.

Skriftfarge [ Les info ]

Rød: Grønn: Blå:

Skrifttype [ Les info ]

Også for tabeller

Hvis "Annet":

Skriftstørrelse [ Les info ]

Også for tabeller
punkter høy ("pt" for CSS-kjennere)

Lenker [ Les info ]

Lenke: Rød: Grønn: Blå:
Hover: Rød: Grønn: Blå:
Aktiv: Rød: Grønn: Blå:
Besøkt: Rød: Grønn: Blå:

Hvordan skal lenkene fremstå? [ Les info ]

Lenke:
Hover:
Aktiv:
Besøkt:

Den ferdige CSS-koden din

Her er den CSS-koden du har laget. Du legger denne inn mellom <head>- og <head>-merkene i HTML-koden din:

Avansert

Du kan også velge å legge CSS-koden din i et eget, separat stilark som du lenker til på sidene dine. Velger du denne måten kan du ha CSS-koden ett sted - hendig hvis du gjør endringer! Kall filen du lagrer CSS-koden i for "stiler.css" og lagre den i samme mappe som hovedsiden din.

For å lenke til ditt nye stilark legger du denne koden inn mellom <head>- og <head>-merkene i HTML-koden på de sidene du vil bruke stilarket ditt på.

Opphavsrett

Ønsker du å gjengi denne artikkelen eller noe fra den må du gjerne gjøre det, men ikke glem kildereferanse. For å lenke til denne artikkelen kan du bruke URL-en http://www.gratisguide.net/kodeservice/stilark.html.

Tilbake til Kodeservice