T e s t

* [Fonter] [Text] [Box (marginaler, ramar, fyllnader)] [Färger & bakgrunder] [Pseudo]
[ Innehåll - CSS ] [ Innehåll - Referensböcker ]

Tanken med denna sida är att kunna kontrollera vilken www-klient ger support åt vilka egenskaper. Höjden och bredden på rutorna är 20 pixlar. Stilen är inline.

* Fonter

font-family

Det finns 5 generiska fontfamiljer i CSS1. De är:

font-style

font-variant

font-weight

font-size

Absoluta

Relativa

Upp

* Text

word-spacing

word-spacing: normal

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

word-spacing: -0.5em

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

word-spacing: +1em

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

word-spacing: 2px

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

letter-spacing

letter-spacing: 0.3em

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

letter-spacing: 2px

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-decoration

text-decoration: underline

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-decoration: overline

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-decoration: line-through

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-decoration: blink

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-transform

text-transform: capitalize (första bokstav i varje ord ska visas med versaler)

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-transform: uppercase (alla bokstäver ska visas med versaler)

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-transform: lowercase (alla bokstäver ska visas som gemena)

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-align

text-align: left

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-align: right

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-align: center

It was many and may years ago,
In the kingdom by the sea,
That a maiden there lived whom you may know
by the name of ANNABEL LEE

text-align: justify

It was many and may years ago, In the kingdom by the sea, That a maiden there lived whom you may know by the name of ANNABEL LEE; And this maiden she lived with no other thought Than to love and be loved by me.
I was a child and she was a child, In the kingdom by the sea; But we loved with a love that was more then love - I and my ANNABEL LEE; With the love that the winged seraphs of heaven coveted her and me.

text-indent

text-indent: 20%

And this was the reason that, long ago, In the kingdom by the sea, A wind blew out of cloud, chilling My beautiful ANNABEL LEE; So that her highborn kinsman came And bore her away from me, To shut her up in a sepulcher In this kingdom by the sea.

text-indent: 5em

And this was the reason that, long ago, In the kingdom by the sea, A wind blew out of cloud, chilling My beautiful ANNABEL LEE; So that her highborn kinsman came And bore her away from me, To shut her up in a sepulcher In this kingdom by the sea.

text-indent: 20px

And this was the reason that, long ago, In the kingdom by the sea, A wind blew out of cloud, chilling My beautiful ANNABEL LEE; So that her highborn kinsman came And bore her away from me, To shut her up in a sepulcher In this kingdom by the sea.

text-indent: -20px

And this was the reason that, long ago, In the kingdom by the sea, A wind blew out of cloud, chilling My beautiful ANNABEL LEE; So that her highborn kinsman came And bore her away from me, To shut her up in a sepulcher In this kingdom by the sea.

vertical-align

IMG {vertical-align: baseline}

The angels, not half so happy in heaven,
Went envying her and me -
Yes! - that was the reason (as all men know,
In the kingdom CSS-knappby the sea)
That the wind came out of the cloud by night,
Chilling and killing my ANNABEL LEE.

IMG {vertical-align: sub}

The angels, not half so happy in heaven,
Went envying her and me -
Yes! - that was the reason (as all men know,
In the kingdom CSS-knappby the sea)
That the wind came out of the cloud by night,
Chilling and killing my ANNABEL LEE.

IMG {vertical-align: super}

The angels, not half so happy in heaven,
Went envying her and me -
Yes! - that was the reason (as all men know,
In the kingdom CSS-knappby the sea)
That the wind came out of the cloud by night,
Chilling and killing my ANNABEL LEE.

IMG {vertical-align: top}

The angels, not half so happy in heaven,
Went envying her and me -
Yes! - that was the reason (as all men know,
In the kingdom CSS-knappby the sea)
That the wind came out of the cloud by night,
Chilling and killing my ANNABEL LEE.

IMG {vertical-align: text-top}

The angels, not half so happy in heaven,
Went envying her and me -
Yes! - that was the reason (as all men know,
In the kingdom CSS-knappby the sea)
That the wind came out of the cloud by night,
Chilling and killing my ANNABEL LEE.

IMG {vertical-align: middle}

The angels, not half so happy in heaven,
Went envying her and me -
Yes! - that was the reason (as all men know,
In the kingdom CSS-knappby the sea)
That the wind came out of the cloud by night,
Chilling and killing my ANNABEL LEE.

IMG {vertical-align: text-bottom}

The angels, not half so happy in heaven,
Went envying her and me -
Yes! - that was the reason (as all men know,
In the kingdom CSS-knappby the sea)
That the wind came out of the cloud by night,
Chilling and killing my ANNABEL LEE.

IMG {vertical-align: 30%}

The angels, not half so happy in heaven,
Went envying her and me -
Yes! - that was the reason (as all men know,
In the kingdom CSS-knappby the sea)
That the wind came out of the cloud by night,
Chilling and killing my ANNABEL LEE.

line-height

line-height: 100%

But our love was stronger by far that the love
Of those who were older than we -
Of many far wiser than we -
And neither the angels in heaven above,
Nor the demons down under the sea,
Can ever dissever my soul from the soul
of the beautiful ANNABEL LEE:

line-height: 200%

But our love was stronger by far that the love
Of those who were older than we -
Of many far wiser than we -
And neither the angels in heaven above,
Nor the demons down under the sea,
Can ever dissever my soul from the soul
of the beautiful ANNABEL LEE:

line-height: 12pt; font-size: 10pt

But our love was stronger by far that the love
Of those who were older than we -
Of many far wiser than we -
And neither the angels in heaven above,
Nor the demons down under the sea,
Can ever dissever my soul from the soul
of the beautiful ANNABEL LEE:

line-height: 80%

But our love was stronger by far that the love
Of those who were older than we -
Of many far wiser than we -
And neither the angels in heaven above,
Nor the demons down under the sea,
Can ever dissever my soul from the soul
of the beautiful ANNABEL LEE:

Upp

* Box

margin, padding, border

Margin, padding och border är noll, därför bör de två efterföljande stycken inte ha någon tom rad emellan

margin: 0; padding=0; border-width: 0
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

margin: 0; padding: 0; border-width: 0
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

margin-bottom: -1pc
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

ANDRA STYCKE BÖRJAR HÄR
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

margin: 20px; padding: 0;
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

margin: 20px; padding: 5mm;
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

margin-right: 3cm; margin-left: 2cm
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

margin-right: 3cm; margin-left: 2cm; padding-right: 1cm; padding-left: 0.5cm
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

margin-right: 3cm; margin-left: 2cm; padding-right: 1cm; padding-left: 0.5cm
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

den röda bakgrunden bör vara BODY-bred

border

margin: 20px; padding: 5mm; border-width: thick;
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

margin: 20px; padding: 5mm; border-width: thick; border-color: red;
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

margin: 20px; padding: 5mm; border-width: thick; border-color: red; border-style: double
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

height, width

width: 50%; height: 2cm
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

width: 100px; height: auto CSS-knapp

height: 50%; width: auto CSS-knapp

Upp

* Färger & bakgrunder

background: black; color: white
Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

P {background: url(../bilder/cssknapp.gif); color: red}

Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

P {background: url(../bilder/cssknapp.gif) left bottom; color: red}

Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

P {background: repeat-x;}

Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan. Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

P {background: repeat-y;}

Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan. Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

Upp

* Pseudoelement och pseudoklasser

A {color: white; text-decoration: none; background: red} Innehåll - CSS

Det är alltid bättre att förstora eller förminska standardfonten istället för att ange fasta mått därför att varje användare kan ha sina egna mått. SIZE=2 på en dator kan motsvara SIZE=4 på en annan.

[ Upp ] [ Innehåll - CSS ] Referensböcker Epost

http://vonpepel.com/ref/css/ - Senaste uppdatering 10 juli 1997