Infolinx-no.com Artikkel-oversikt Gi respons
Bok om web-design Om Infolinx
Scripts og tips hos Winfolinx.com Webhotell



Hva er CSS (Cascading Style Sheets)


CSS er stildefinisjoner som brukes for å vise HTML-elementer på ønsket måte. CSS-styles legges normalt inn i Style Sheets mellom HEAD-taggene så man slipper å "style" elementene hver gang de skrives. Styles ble innbakt i HTML 4.0.
I stedet for å legge Style Sheets mellom HEAD-taggene kan man lagre stil-definisjonene i en ekstern fil som hentes opp hver gang HTML-siden leses inn i webleseren. Har du flere sider som skal ha samme stil er det bare å linke til samme .CSS-filen fra alle sidene
Man henter inn den eksterne .css-filen med:

<LINK REL="StyleSheet" HREF="dittfilnavn.css" TYPE="text/css">.

Denne kommandoen legges da inn mellom HEAD-taggene.

Et eksempel på hvordan CSS kan lette arbeidet:
Du har en side med flere tabeller. Teksten i disse tabellene vil du ha litt mindre enn den vanlige teksten på siden. I stedet for å legge inn f.eks.

<font size="-1">Tekst her...</font>

mellom alle TD-taggene legger du

<style type="text/css">
td {font-size: 12px; font-family: Verdana;}
</style>


mellom HEAD-taggene, og jobben er gjort! Hver gang du skriver noe mellom TD-taggene blir teksten "automatisk" i den størrelsen og fonten du ønsker.
En planlagt og fornuftig bruk av CSS kan spare masse arbeid!


Nedenfor finner du en god del eksempler på bruk av CSS.

Du kan se kodingen og hvordan resultatet blir:

(Alle sidene åpner i nytt vindu!)



Bruken av "Display" på et element

Bruken av "Overflow"

En Knappemeny

Lag en enkel CSS-meny

Lag en logo med CSS
Lag en "plakat"

Knappestørrelser

Lag style på HR-linjen

Farger på scrollbar og knapper

Textarea Style-generator

Bilde / farge-bakgrunn i Textarea
CSS Properties

Størrelser og farger

Sett farger på "tilværelsen"

Formatering av tekstfelt

Tekstfelt style-generator

CSS Style-generator


Bakgrunn:

Bakgrunnsfarge

Bakgrunnsfarge 2

Et bilde som bakgrunn

Et bakgrunnsbilde som ikke scroller


Border:

Bestem Border-Style

Forskjellig Border-Style på hver side

Sett farge på bordene

Bestem bredde på nedre Border

Bredde på venstre og høyre Border

Bredde, stil, farge på alle sidene

Ramme rundt tekst


Cursor:

Endre utseende på Cursor


Dimensjoner:

Bestem Høyde og bredde på et bilde

Øk linjeavstanden

Bruk av ZOOM

Fonter:

Bestem Font-type

Bestem størrelsen på fontene

Bestem "Boldness" på fontene

Flere font-egenskaper samtidig

CSS Linkgenerator


Lister:

Opplisting i "Unordered Lists"

Opplisting i "Ordered Lists"

Bruk et bilde i opplisting

Plassering av List

Kombinering av List-styles


Margin:

Venstre margin på tekst

Tekstmargin på alle sider


Padding:

Avstand fra venstre celle-kant

Avstand fra flere celle-kanter

Plassering:

Plassering av et bilde i et element

"Vertical alignment", plassering av bilde

Et elements posisjon med Relative

Et elements posisjon med Absolute

Plassering av et element "under" et annet


Tekst:

Sett farge på tekster

Spesifiser avstanden mellom bokstaver

Tekst-justeringer

Utseende på tekst

Plasser teksten som du vil (Style)

Start tekstblokk med innrykk

Bestem store og små bokstaver

Forskjellige farger på "hyperlinken"

Forskjellig styles på "hyperlinken"

Tekst med spesiell "første-bokstav"

Tekst med spesiell "første-linje"

Bruk av filterene Glow og Blur






Free Tips and JavaScripts provided
by Infolinx-no.com Web


Er du usikker på HTML og "web-snekring"? Da kan jeg tryggt anbefale e-boken "HTML fra start"!
Den tar deg med fra starten og frem til din første web-side. Boken er skrevet på norsk og i et lett og forståelig språk!
Les mer om den, eller bestill den HER!
Trenger du faglig hjelp til å profilere deg på internett?
Les mer her!






Copyright © 1999-2004:   Willy Sørensen - Infolinx-no.com
1262